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()],
+  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/sitemap": "^3.0.4",
-    "@astrojs/vue": "^3.0.1",
+    "@astrojs/vue": "^4.0.8",
-    "@nanostores/vue": "^0.10.0",
+    "@types/leaflet": "^1.9.8",
-    "@types/leaflet": "^1.9.6",
     "@vueuse/core": "^10.7.1",
-    "astro": "^3.2.0",
+    "astro": "^4.1.2",
-    "nanostores": "^0.9.3",
+    "vue": "^3.4.14"
-    "vue": "^3.3.4"
   },
   "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";
+    content: url('/icon/square-arrow-out.svg');
-    font-family: 'Phosphor-Fill' !important;
     display: inline-block;
     width: 1em;
     height: 1em;
     margin-left: .25em;
 }
+
+.icon {
+    width: 1em;
+}

src/components/maps/overlay/MarkerCreator.vue

@@ -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

@@ -62,8 +62,8 @@ const filteredMarkers = computed(() => {
 
 // Limit of menu list dropdown
 const currentLimit = computed(() => {
-    if (currentSearchMode.value === "query") return 10
+    if (currentSearchMode.value === "query") return 50
-    return 100
+    return 500
 })
 
 /**
@@ -201,15 +201,16 @@ function resetAllFields(actionAfter?: "focusAfter") {
     <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>
 
@@ -226,20 +227,19 @@ function resetAllFields(actionAfter?: "focusAfter") {
 
                         <div class="desc" v-html="m.description"></div>
 
-                        <div class="icon">
+                        <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>
-                            <i v-if="m.group === 'quests'" class="ph-fill ph-flag-banner"></i>
+                        <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>
-                            <i v-else-if="m.group === 'landmarks'" class="ph-fill ph-castle-turret"></i>
+                        <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>
-                        </div>
                     </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>
@@ -280,12 +280,12 @@ function resetAllFields(actionAfter?: "focusAfter") {
             $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);
@@ -301,8 +301,8 @@ function resetAllFields(actionAfter?: "focusAfter") {
                 top: 50%;
                 transform: translateY(-50%);
                 left: 0;
-                font-size: $search-icon-size;
+                width: $search-icon-size;
-                color: var(--slate-400);
+                fill: var(--slate-400);
                 pointer-events: none;
             }
 
@@ -345,8 +345,11 @@ function resetAllFields(actionAfter?: "focusAfter") {
 
             .player-btn {
                 margin-left: .25rem;
+                
+                .icon {
                     font-size: 1.5em;
-                color: var(--red-500);
+                    fill: var(--red-500);
+                }
 
                 &:hover {
                     &::before {
@@ -441,7 +444,7 @@ function resetAllFields(actionAfter?: "focusAfter") {
                         top: 50%;
                         transform: translateY(-50%);
                         right: .75rem;
-                        color: var(--slate-400);
+                        fill: var(--slate-400);
                     }
 
                     &:focus-visible {
@@ -469,6 +472,12 @@ function resetAllFields(actionAfter?: "focusAfter") {
                             }
                         }
                     }
+
+                    &.group-custom {
+                        .title {
+                            font-style: italic;
+                        }
+                    }
                 }
 
                 /**
@@ -479,6 +488,9 @@ function resetAllFields(actionAfter?: "focusAfter") {
                     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">
+                <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>
-                    <i v-if="currentSearchMode === 'quests'" class="ph-bold ph-check"></i>
+                <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>
-                    <i v-else class="ph-fill ph-flag-banner"></i>
+
-                </span>
                 <span class="label">
                     Quêtes
                 </span>
@@ -44,10 +43,9 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
                     'active': currentSearchMode === 'capitals'
                 }"
             >
-                <span class="icon">
+                <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>
-                    <i v-if="currentSearchMode === 'capitals'" class="ph-bold ph-check"></i>
+                <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>
-                    <i v-else class="ph-fill ph-castle-turret"></i>
+
-                </span>
                 <span class="label">
                     Capitales
                 </span>
@@ -62,10 +60,9 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
                     'active': currentSearchMode === 'landmarks'
                 }"
             >
-                <span class="icon">
+                <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>
-                    <i v-if="currentSearchMode === 'landmarks'" class="ph-bold ph-check"></i>
+                <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>
-                    <i v-else class="ph-fill ph-lighthouse"></i>
+
-                </span>
                 <span class="label">
                     Points d'intérêt
                 </span>
@@ -80,10 +77,9 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
                     'active': currentSearchMode === 'custom'
                 }"
             >
-                <span class="icon">
+                <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>
-                    <i v-if="currentSearchMode === 'custom'" class="ph-bold ph-check"></i>
+                <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>
-                    <i v-else class="ph-fill ph-user-circle"></i>
+
-                </span>
                 <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" />
+        <meta property="og:title" content={title}/>
-        <link rel="stylesheet" href="phicons/fill/style.css" />
+        <meta property="og:type" content="map" />
-        <link rel="stylesheet" href="phicons/light/style.css" />
+        <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" />
+        <link rel="stylesheet" href="/leaflet/leaflet.css" rel="preload" />
-        <script is:inline src="leaflet/leaflet.js"></script>
+        <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>