Merge branch 'dev'

astro.config.mjs

@@ -1,10 +1,11 @@
 import { defineConfig } from 'astro/config';
 
 import vue from "@astrojs/vue";
+import sitemap from "@astrojs/sitemap";
 
 // https://astro.build/config
 export default defineConfig({
-    integrations: [vue()],
-    output: 'static',
-    site: 'https://maps.alexcreates.fr'
+  integrations: [vue(), sitemap()],
+  output: 'static',
+  site: 'https://maps.alexcreates.fr'
 });

package.json

@@ -10,14 +10,12 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/node": "^6.0.3",
-    "@astrojs/vue": "^3.0.1",
-    "@nanostores/vue": "^0.10.0",
-    "@types/leaflet": "^1.9.6",
+    "@astrojs/sitemap": "^3.0.4",
+    "@astrojs/vue": "^4.0.8",
+    "@types/leaflet": "^1.9.8",
     "@vueuse/core": "^10.7.1",
-    "astro": "^3.2.0",
-    "nanostores": "^0.9.3",
-    "vue": "^3.3.4"
+    "astro": "^4.1.2",
+    "vue": "^3.4.14"
   },
   "devDependencies": {
     "sass": "^1.68.0"

public/icon/square-arrow-out.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M224,104a8,8,0,0,1-13.66,5.66L184,83.31l-42.34,42.35a8,8,0,0,1-11.32-11.32L172.69,72,146.34,45.66A8,8,0,0,1,152,32h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg>

src/assets/scss/_buttons.scss

@@ -69,6 +69,10 @@
             font-size: .85em;
             width: 1.5rem;
         }
+
+        .icon {
+            width: 1em;
+        }
     }
 
     &.btn-shadow {

src/assets/scss/theme.scss

@@ -43,10 +43,13 @@ a[href^='http'] {
 
 a[href^='http']::after {
     position: absolute;
-    content: "\e972";
-    font-family: 'Phosphor-Fill' !important;
+    content: url('/icon/square-arrow-out.svg');
     display: inline-block;
     width: 1em;
     height: 1em;
     margin-left: .25em;
 }
+
+.icon {
+    width: 1em;
+}

src/components/maps/WorldMap.astro

@@ -256,7 +256,7 @@ L.Control.Measure.include({
 const rulerDistanceRatio = 2
 
 const rulerOptions = {
-    position: 'topright',
+    position: 'bottomleft',
     primaryLengthUnit: 'kilometers',
     secondaryLengthUnit: 'days',
     primaryAreaUnit: 'hectares',

src/components/maps/overlay/MarkerCreator.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { MapMarker } from '@/types/Leaflet';
-import { onClickOutside, onLongPress, useCssVar, useFocus, useLocalStorage, useMouse, useTimeout, useTimeoutFn } from '@vueuse/core'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { onClickOutside, useCssVar, useLocalStorage, useMouse } from '@vueuse/core'
+import { computed, onMounted, ref, watch } from 'vue'
 
 const markerMenu = ref<HTMLMenuElement>()
 
@@ -207,7 +207,7 @@ function setTitleError(error: Error | null) {
                         Ajouter un marqueur personnel
                     </h2>
                     <p class="modal-notice">
-                        <i class="icon ph-light ph-warning"></i>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="icon"><rect width="256" height="256" fill="none"/><path d="M142.41,40.22l87.46,151.87C236,202.79,228.08,216,215.46,216H40.54C27.92,216,20,202.79,26.13,192.09L113.59,40.22C119.89,29.26,136.11,29.26,142.41,40.22Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/><line x1="128" y1="144" x2="128" y2="104" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/><circle cx="128" cy="180" r="10"/></svg>
                         <span>Le marqueur sera sauvegardé mais n'apparaîtra que sur votre carte !</span>
                     </p>
                 </div>
@@ -242,7 +242,7 @@ function setTitleError(error: Error | null) {
 
             <div class="modal-actions">
                 <button class="btn btn-danger btn-icon btn-shadow" @click="hideMarkerModal">
-                    <i class="ph-light ph-x"></i>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="icon"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                 </button>
             </div>
         </dialog>
@@ -340,7 +340,7 @@ dialog {
             font-size: .8em;
 
             .icon {
-                font-size: 1.3em;
+                width: 1.3em;
             }
         }
     }

src/components/maps/overlay/SearchMarkers.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { MapMarker, MapMarkerGroup, PlayerMarker } from '@/types/Leaflet';
 import type { SearchMode } from '@/types/Search';
-import { useFocus, useLocalStorage, useMagicKeys, whenever } from '@vueuse/core';
+import { onClickOutside, useFocus, useFocusWithin, useLocalStorage, useMagicKeys, whenever } from '@vueuse/core';
 import { computed, onMounted, ref, onUpdated, watch } from 'vue';
 import SearchMarkersTags from './SearchMarkersTags.vue';
 
@@ -19,17 +19,22 @@ const allMarkers = computed(() => {
 
 // Search functions
 const searchBar = ref<HTMLDivElement>()
+const searchBarWrapper = ref<HTMLDivElement>()
 const qInput = ref()
-const { focused: isFocused } = useFocus(qInput)
+const { focused: isComponentFocused } = useFocusWithin(searchBarWrapper)
+const { focused: isSearchFocused } = useFocus(qInput)
 
 const currentSearchMode = ref<SearchMode>('query')
 
 onMounted(() => {
-    isFocused.value = true
+    isSearchFocused.value = true
 })
 
 const hasQuery = computed(() => q.value.length > 0)
-const shouldBeActive = computed(() => hasQuery.value || currentSearchMode.value !== "query")
+const shouldBeActive = computed(() =>
+    (hasQuery.value && currentSearchMode.value === "query" && isComponentFocused.value)
+    || currentSearchMode.value !== "query"
+)
 
 const q = ref<string>("")
 
@@ -57,8 +62,8 @@ const filteredMarkers = computed(() => {
 
 // Limit of menu list dropdown
 const currentLimit = computed(() => {
-    if (currentSearchMode.value === "query") return 10
-    return 100
+    if (currentSearchMode.value === "query") return 50
+    return 500
 })
 
 /**
@@ -70,11 +75,10 @@ const shortcutKeyCombo = keys['Shift+Period']
 const eraseKeyCombo = keys['Escape']
 
 whenever(shortcutKeyCombo, () => {
-    isFocused.value = true
+    isSearchFocused.value = true
 })
 whenever(eraseKeyCombo, () => {
-    resetAllFields()
-    isFocused.value = true
+    resetAllFields('focusAfter')
 })
 
 // If query changes and has new value...
@@ -82,6 +86,9 @@ watch(q, (n, o) => {
     if (n) setSearchMode('query')
 })
 
+// Toggle menu if clicked outside
+onClickOutside(searchBarWrapper, () => setSearchMode('query'))
+
 /**
  * Player geolocation
  * Uses native JS to avoid changing leaflet library
@@ -133,6 +140,26 @@ function handleCategorySwitch(g: MapMarkerGroup) {
     }
 }
 
+/**
+ * Custom Markers handling
+ */
+ onMounted(() => {
+    customMarkersData.value = useLocalStorage('custom-markers', []).value
+
+    document.addEventListener('refresh-custom-markers', () => {
+        customMarkersData.value = useLocalStorage('custom-markers', []).value
+    })
+})
+
+/**
+ * Emit event to delete custom marker
+ */
+function emitDeleteCustomMarker(markerTitle: string) {
+    const deleteCMarkerEvent = new CustomEvent(`delete-${markerTitle}`, { bubbles: true })
+
+    searchBar.value?.dispatchEvent(deleteCMarkerEvent)
+}
+
 /**
  * EVENTS
  */
@@ -163,45 +190,27 @@ function resetQueryValue() {
  */
 function resetAllFields(actionAfter?: "focusAfter") {
     setSearchMode('query')
+
     resetQueryValue()
 
-    if (actionAfter === "focusAfter") isFocused.value = true
-}
-
-/**
- * CUSTOM MARKERS HANDLING
- */
-onMounted(() => {
-    customMarkersData.value = useLocalStorage('custom-markers', []).value
-
-    document.addEventListener('refresh-custom-markers', () => {
-        customMarkersData.value = useLocalStorage('custom-markers', []).value
-    })
-})
-
-/**
- * Emit event to delete custom marker
- */
-function emitDeleteCustomMarker(markerTitle: string) {
-    const deleteCMarkerEvent = new CustomEvent(`delete-${markerTitle}`, { bubbles: true })
-
-    searchBar.value?.dispatchEvent(deleteCMarkerEvent)
+    if (actionAfter === "focusAfter") isSearchFocused.value = true
 }
 </script>
 
 <template>
-    <nav class="toolbar">
+    <nav ref="searchBarWrapper" class="toolbar">
         <div ref="searchBar" class="search-w" :data-focused="shouldBeActive">
             <div class="input-w">
-                <i class="search-icon ph-fill ph-magnifying-glass"></i>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="search-icon"><rect width="256" height="256" fill="none"/><path d="M168,112a56,56,0,1,1-56-56A56,56,0,0,1,168,112Zm61.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88,88,0,1,1,11.32-11.31l50.06,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z"/></svg>
+
                 <input ref="qInput" class="" name="recherche" type="text" v-model="q" title="Rechercher le monde" placeholder="Ville, point d'intérêt…">
 
                 <button v-if="hasGroupFilter || hasQuery" @click="onCloseQuery" class="close-btn" title="Enlever le filtre">
-                    <i class="ph-light ph-x"></i>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="icon"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/><line x1="200" y1="200" x2="56" y2="56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/></svg>
                 </button>
 
                 <button v-if="hasPlayers" data-to-players class="player-btn" :tabindex="shouldBeActive ? 1 : 0" title="Aller à la position actuelle des joueurs">
-                    <i class="pin-icon ph-fill ph-map-pin"></i>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="icon"><rect width="256" height="256" fill="none"/><path d="M128,16a88.1,88.1,0,0,0-88,88c0,75.3,80,132.17,83.41,134.55a8,8,0,0,0,9.18,0C136,236.17,216,179.3,216,104A88.1,88.1,0,0,0,128,16Zm0,56a32,32,0,1,1-32,32A32,32,0,0,1,128,72Z"/></svg>
                 </button>
             </div>
 
@@ -218,20 +227,19 @@ function emitDeleteCustomMarker(markerTitle: string) {
 
                         <div class="desc" v-html="m.description"></div>
 
-                        <div class="icon">
-                            <i v-if="m.group === 'quests'" class="ph-fill ph-flag-banner"></i>
-                            <i v-else-if="m.group === 'landmarks'" class="ph-fill ph-castle-turret"></i>
-                        </div>
+                        <svg v-if="m.group === 'quests'" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M231.22,59.44l-80,168a8,8,0,1,1-14.44-6.88L165.62,160H32a8,8,0,0,1-5.88-13.43l42.56-46.1L26.59,61.9A8,8,0,0,1,32,48H224a8,8,0,0,1,7.22,11.44Z"/></svg>
+                        <svg v-else-if="m.group === 'capitals'" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M200,24h-8a16,16,0,0,0-16,16V56H148V40a16,16,0,0,0-16-16h-8a16,16,0,0,0-16,16V56H80V40A16,16,0,0,0,64,24H56A16,16,0,0,0,40,40V84.69A15.86,15.86,0,0,0,44.69,96L56,107.31V216a16,16,0,0,0,16,16H184a16,16,0,0,0,16-16V107.31L211.31,96A15.86,15.86,0,0,0,216,84.69V40A16,16,0,0,0,200,24ZM152,216H104V152a24,24,0,0,1,48,0Z"/></svg>
+                        <svg v-else-if="m.group === 'landmarks'" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M208,80a8,8,0,0,0-8,8v16H188.85L184,55.2A8,8,0,0,0,181.31,50h0L138.44,11.88l-.2-.17a16,16,0,0,0-20.48,0l-.2.17L74.68,50v0A7.93,7.93,0,0,0,72,55.2L67.15,104H56V88a8,8,0,0,0-16,0v24a8,8,0,0,0,8,8H65.54l-9.47,94.48A16,16,0,0,0,72,232H184a16,16,0,0,0,15.92-17.56L190.46,120H208a8,8,0,0,0,8-8V88A8,8,0,0,0,208,80ZM87.24,64h81.52l4,40H136V88a8,8,0,0,0-16,0v16H83.23ZM72,216l4.81-48H179.19L184,216Z"/></svg>
                     </button>
 
                     <!-- Custom marker actions -->
                     <div class="search-item-actions" v-if="m.group === 'custom'">
                         <!-- <button class="btn btn-info btn-icon btn-sm">
-                            <i class="ph-light ph-pencil-simple-line"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="icon"><rect width="256" height="256" fill="none"/><path d="M92.69,216H48a8,8,0,0,1-8-8V163.31a8,8,0,0,1,2.34-5.65L165.66,34.34a8,8,0,0,1,11.31,0L221.66,79a8,8,0,0,1,0,11.31L98.34,213.66A8,8,0,0,1,92.69,216Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="136" y1="64" x2="192" y2="120" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                         </button> -->
 
                         <button class="btn btn-danger btn-icon btn-sm" @click="emitDeleteCustomMarker(m.title)">
-                            <i class="ph-light ph-trash"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="icon"><rect width="256" height="256" fill="none"/><line x1="216" y1="56" x2="40" y2="56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="104" y1="104" x2="104" y2="168" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="152" y1="104" x2="152" y2="168" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M200,56V208a8,8,0,0,1-8,8H64a8,8,0,0,1-8-8V56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M168,56V40a16,16,0,0,0-16-16H104A16,16,0,0,0,88,40V56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                         </button>
                     </div>
                 </li>
@@ -272,12 +280,12 @@ function emitDeleteCustomMarker(markerTitle: string) {
             $search-icon-size: 1.2em;
 
             position: relative;
-            padding-block: .2rem;
             display: flex;
             align-items: center;
             gap: $search-items-gap;
 
             input {
+                padding-block: .2rem;
                 display: block;
                 min-width: 10rem;
                 padding-inline-start: calc($search-icon-size + $search-items-gap);
@@ -293,8 +301,8 @@ function emitDeleteCustomMarker(markerTitle: string) {
                 top: 50%;
                 transform: translateY(-50%);
                 left: 0;
-                font-size: $search-icon-size;
-                color: var(--slate-400);
+                width: $search-icon-size;
+                fill: var(--slate-400);
                 pointer-events: none;
             }
 
@@ -337,8 +345,11 @@ function emitDeleteCustomMarker(markerTitle: string) {
 
             .player-btn {
                 margin-left: .25rem;
-                font-size: 1.5em;
-                color: var(--red-500);
+                
+                .icon {
+                    font-size: 1.5em;
+                    fill: var(--red-500);
+                }
 
                 &:hover {
                     &::before {
@@ -362,10 +373,14 @@ function emitDeleteCustomMarker(markerTitle: string) {
         }
 
         .search-results {
-            max-height: 50vh;
+            max-height: 20vh;
             overflow-y: auto;
             scrollbar-gutter: stable;
 
+            @media screen and (width >= 900px) {
+                max-height: 50vh;
+            }
+
             &::-webkit-scrollbar,
             &::-webkit-scrollbar-thumb {
                 width: 26px;
@@ -429,7 +444,7 @@ function emitDeleteCustomMarker(markerTitle: string) {
                         top: 50%;
                         transform: translateY(-50%);
                         right: .75rem;
-                        color: var(--slate-400);
+                        fill: var(--slate-400);
                     }
 
                     &:focus-visible {
@@ -457,6 +472,12 @@ function emitDeleteCustomMarker(markerTitle: string) {
                             }
                         }
                     }
+
+                    &.group-custom {
+                        .title {
+                            font-style: italic;
+                        }
+                    }
                 }
 
                 /**
@@ -467,6 +488,9 @@ function emitDeleteCustomMarker(markerTitle: string) {
                     top: 50%;
                     transform: translateY(-50%);
                     right: .25em;
+                    display: flex;
+                    align-items: center;
+                    gap: .3rem;
                     transition-property: visibility, opacity;
                     transition-duration: .2s;
                     transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);

src/components/maps/overlay/SearchMarkersTags.vue

@@ -26,10 +26,9 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
                     'active': currentSearchMode === 'quests'
                 }"
             >
-                <span class="icon">
-                    <i v-if="currentSearchMode === 'quests'" class="ph-bold ph-check"></i>
-                    <i v-else class="ph-fill ph-flag-banner"></i>
-                </span>
+                <svg v-if="currentSearchMode === 'quests'" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polyline points="40 144 96 200 224 72" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
+                <svg v-else class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M231.22,59.44l-80,168a8,8,0,1,1-14.44-6.88L165.62,160H32a8,8,0,0,1-5.88-13.43l42.56-46.1L26.59,61.9A8,8,0,0,1,32,48H224a8,8,0,0,1,7.22,11.44Z"/></svg>
+
                 <span class="label">
                     Quêtes
                 </span>
@@ -44,10 +43,9 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
                     'active': currentSearchMode === 'capitals'
                 }"
             >
-                <span class="icon">
-                    <i v-if="currentSearchMode === 'capitals'" class="ph-bold ph-check"></i>
-                    <i v-else class="ph-fill ph-castle-turret"></i>
-                </span>
+                <svg v-if="currentSearchMode === 'capitals'" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polyline points="40 144 96 200 224 72" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
+                <svg v-else class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M200,24h-8a16,16,0,0,0-16,16V56H148V40a16,16,0,0,0-16-16h-8a16,16,0,0,0-16,16V56H80V40A16,16,0,0,0,64,24H56A16,16,0,0,0,40,40V84.69A15.86,15.86,0,0,0,44.69,96L56,107.31V216a16,16,0,0,0,16,16H184a16,16,0,0,0,16-16V107.31L211.31,96A15.86,15.86,0,0,0,216,84.69V40A16,16,0,0,0,200,24ZM152,216H104V152a24,24,0,0,1,48,0Z"/></svg>
+
                 <span class="label">
                     Capitales
                 </span>
@@ -62,10 +60,9 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
                     'active': currentSearchMode === 'landmarks'
                 }"
             >
-                <span class="icon">
-                    <i v-if="currentSearchMode === 'landmarks'" class="ph-bold ph-check"></i>
-                    <i v-else class="ph-fill ph-lighthouse"></i>
-                </span>
+                <svg v-if="currentSearchMode === 'landmarks'" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polyline points="40 144 96 200 224 72" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
+                <svg v-else class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M208,80a8,8,0,0,0-8,8v16H188.85L184,55.2A8,8,0,0,0,181.31,50h0L138.44,11.88l-.2-.17a16,16,0,0,0-20.48,0l-.2.17L74.68,50v0A7.93,7.93,0,0,0,72,55.2L67.15,104H56V88a8,8,0,0,0-16,0v24a8,8,0,0,0,8,8H65.54l-9.47,94.48A16,16,0,0,0,72,232H184a16,16,0,0,0,15.92-17.56L190.46,120H208a8,8,0,0,0,8-8V88A8,8,0,0,0,208,80ZM87.24,64h81.52l4,40H136V88a8,8,0,0,0-16,0v16H83.23ZM72,216l4.81-48H179.19L184,216Z"/></svg>
+
                 <span class="label">
                     Points d'intérêt
                 </span>
@@ -80,10 +77,9 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
                     'active': currentSearchMode === 'custom'
                 }"
             >
-                <span class="icon">
-                    <i v-if="currentSearchMode === 'custom'" class="ph-bold ph-check"></i>
-                    <i v-else class="ph-fill ph-user-circle"></i>
-                </span>
+                <svg v-if="currentSearchMode === 'custom'" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polyline points="40 144 96 200 224 72" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
+                <svg v-else xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M172,120a44,44,0,1,1-44-44A44.05,44.05,0,0,1,172,120Zm60,8A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88.09,88.09,0,0,0-91.47-87.93C77.43,41.89,39.87,81.12,40,128.25a87.65,87.65,0,0,0,22.24,58.16A79.71,79.71,0,0,1,84,165.1a4,4,0,0,1,4.83.32,59.83,59.83,0,0,0,78.28,0,4,4,0,0,1,4.83-.32,79.71,79.71,0,0,1,21.79,21.31A87.62,87.62,0,0,0,216,128Z"/></svg>
+
                 <span class="label">
                     Personnels
                 </span>
@@ -140,7 +136,7 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
         }
 
         .icon {
-            font-size: 1.1em;
+            width: 1.1em;
         }
 
         .label {
@@ -155,12 +151,20 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
                     color: var(--white);
                     background-color: var(--#{$c}-500);
                     border-color: var(--#{$c}-700);
+
+                    .icon {
+                        fill: var(--white);
+                    }
                 }
 
                 &:not(.active) {
                     &:hover,
                     &:focus-visible {
                         color: var(--#{$c}-500);
+
+                        .icon {
+                            fill: var(--#{$c}-500);
+                        }
                     }
                 }
 

src/layouts/Layout.astro

@@ -12,10 +12,12 @@ const { title } = Astro.props;
 		<meta charset="UTF-8" />
         <meta name="author" content="Alexis Pelé" />
 		<meta name="description" content="Carte du monde connu de Léim, centrée sur l'Alliance Kaldélienne" />
-		<meta name="viewport" content="width=device-width" />
+		<meta name="viewport" content="width=device-width; initial-scale=1" />
 		<meta name="generator" content={Astro.generator} />
 		<title>{title} — Leim Wiki</title>
 
+        <link rel="canonical" href={Astro.url}>
+
         <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon.png">
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
@@ -24,16 +26,17 @@ const { title } = Astro.props;
         <meta name="msapplication-TileColor" content="#00aba9">
         <meta name="theme-color" content="#a9d1eb">
 
-        <link rel="stylesheet" href="phicons/bold/style.css" />
-        <link rel="stylesheet" href="phicons/fill/style.css" />
-        <link rel="stylesheet" href="phicons/light/style.css" />
+        <meta property="og:title" content={title}/>
+        <meta property="og:type" content="map" />
+        <meta property="og:url" content={Astro.url} />
+        <meta property="og:image" content="/bailey-zindel-NRQV-hBF10M-unsplash.jpg" />
 
-        <link rel="stylesheet" href="leaflet/leaflet.css" rel="preload" />
-        <script is:inline src="leaflet/leaflet.js"></script>
+        <link rel="stylesheet" href="/leaflet/leaflet.css" rel="preload" />
+        <script is:inline src="/leaflet/leaflet.js"></script>
 
         <script is:inline type="text/javascript" src="/js/leaflet-zoomify.min.js"></script>
 
-        <link rel="stylesheet" href="leaflet-measure/leaflet-measure.css" rel="preload" />
+        <link rel="stylesheet" href="/leaflet-measure/leaflet-measure.css" rel="preload" />
         <script is:inline type="text/javascript" src="/js/leaflet-measure.min.js"></script>
 	</head>
 	<body>