Merge branch 'dev'

README.md

@@ -8,6 +8,16 @@
 * Measure distances between two points
 * Custom client-side markers
 
+## Documentation
+### Making usable map assets
+Since we're not using earth maps, we need to build one compatible with Leaflet. I used Zoomify to generate usable tile data from my SVG maps. I don't know if this will fit your use case ; if you use something else, you can contact me !
+
+> [!IMPORTANT]
+> As of writing this, it appears Zoomify Unlimited Converter (which is what I used) is not available on Linux or for download anymore
+
+### Enabling features
+Some features are able to be toggled on and off. If you don't use multiple languages, or if you don't want the custom markers, you can disable them in the .env file. By default, all of them are true.
+
 ## Contributing
 I'm not currently accepting pull-requests for this project, but if you have a suggestion, feel free to contact me !
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "leim-maps",
   "type": "module",
-  "version": "1.4.11",
+  "version": "1.4.13",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
@@ -10,18 +10,18 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/sitemap": "^3.4.1",
+    "@astrojs/sitemap": "^3.6.0",
-    "@astrojs/vue": "^5.1.0",
+    "@astrojs/vue": "^5.1.3",
-    "@nanostores/persistent": "1.0.0",
+    "@nanostores/persistent": "1.2.0",
-    "@nanostores/vue": "^1.0.0",
+    "@nanostores/vue": "^1.0.1",
-    "@types/leaflet": "^1.9.18",
+    "@types/leaflet": "^1.9.21",
-    "@vueuse/core": "^13.4.0",
+    "@vueuse/core": "^14.0.0",
-    "astro": "^5.10.0",
+    "astro": "^5.15.9",
-    "nanostores": "^1.0.1",
+    "nanostores": "^1.1.0",
     "radix-vue": "^1.9.17",
-    "vue": "^3.5.17"
+    "vue": "^3.5.24"
   },
   "devDependencies": {
-    "sass": "^1.89.2"
+    "sass": "^1.94.1"
   }
 }

src/components/global/ThemeSwitch.vue

@@ -1,13 +1,15 @@
 <script lang="ts" setup>
 import { useDark, useToggle } from '@vueuse/core'
 
+import { currentLang, t } from '@/i18n/store';
+
 const isDark = useDark({ storageKey: "theme", disableTransition: false })
 const toggleDark = useToggle(isDark)
 </script>
 
 <template>
     <div data-theme-toggle id="theme-switcher" class="wrapper appear-from-top">
-        <button @click="toggleDark()" class="btn-round">
+        <button @click="toggleDark()" class="btn-round" :title="t('nav.theme.aria-label')">
             <svg v-if="isDark" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M120,40V32a8,8,0,0,1,16,0v8a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-8-8A8,8,0,0,0,50.34,61.66Zm0,116.68-8,8a8,8,0,0,0,11.32,11.32l8-8a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l8-8a8,8,0,0,0-11.32-11.32l-8,8A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l8,8a8,8,0,0,0,11.32-11.32ZM40,120H32a8,8,0,0,0,0,16h8a8,8,0,0,0,0-16Zm88,88a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-8A8,8,0,0,0,128,208Zm96-88h-8a8,8,0,0,0,0,16h8a8,8,0,0,0,0-16Z"></path></svg>
             <svg v-else xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z"></path></svg>
         </button>

src/i18n/ui.ts

@@ -21,9 +21,10 @@ export const translations: LanguageDict = {
         'capitals': 'Capitales',
         'points-of-interest': 'Points d\'intérêt',
         'personals': 'Personnels',
-        'nav.aria-label': 'Navigation principale',
+        'nav.aria-label': 'Menu principal',
         'nav.map.aria-label': 'Changer de carte',
         'nav.lang.aria-label': 'Changer de langue',
+        'nav.theme.aria-label': 'Changer de thème',
         'maps.go-to-map': 'Voir la carte détaillée',
         'maps.go-to-player': 'Aller à la position actuelle des joueurs',
         'maps.seeQuest': 'Voir la quête',
@@ -65,9 +66,10 @@ export const translations: LanguageDict = {
         'capitals': 'Capitals',
         'points-of-interest': 'Points of interest',
         'personals': 'Personals',
-        'nav.aria-label': 'Main navigation',
+        'nav.aria-label': 'Main menu',
         'nav.map.aria-label': 'Switch map',
         'nav.lang.aria-label': 'Switch language',
+        'nav.theme.aria-label': 'Switch color theme',
         'maps.go-to-map': 'See detailed map',
         'maps.go-to-player': 'Go to current players position',
         'maps.seeQuest': 'See the quest',

src/layouts/Layout.astro

@@ -16,6 +16,13 @@ const lang = getLangFromUrl(Astro.url) || defaultLang;
 <!doctype html>
 <html lang={lang}>
 	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>{title} — Leim Wiki</title>
+
+        <script is:inline src="/leaflet/leaflet.js" />
+        <script is:inline type="text/javascript" src="/js/leaflet-measure.min.js"></script>
+        <script is:inline type="text/javascript" src="/js/leaflet-zoomify.min.js"></script>
         <script>
             import { setLang } from "@/i18n/store";
             import { defaultLang, type Language } from "@/i18n/ui";
@@ -25,12 +32,21 @@ const lang = getLangFromUrl(Astro.url) || defaultLang;
             setLang(currentLang || defaultLang);
         </script>
 
-		<meta charset="UTF-8" />
+        <link rel="stylesheet" href="/leaflet/leaflet.css" rel="preload" />
+        <link rel="stylesheet" href="/leaflet-measure/leaflet-measure.css" rel="preload" />
+
         <meta name="author" content="Alexis Pelé" />
-		{head?.description && <meta name="description" content={head.description} /> }
+        <meta property="og:author" content="Alexis Pelé" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta property="og:locale" content={lang}>
+        <meta name="application-name" content="leim-maps">
+        <meta name="format-detection" content="telephone=no">
+        <meta name="msapplication-config" content="none">
+
+		{head?.description && (
+            <meta name="description" content={head.description} />
+            <meta property="og:description" content={head.description} />
+        )}
 		<meta name="generator" content={Astro.generator} />
-		<title>{title} — Leim Wiki</title>
 
         <link rel="canonical" href={Astro.url}>
 
@@ -41,22 +57,18 @@ const lang = getLangFromUrl(Astro.url) || defaultLang;
         <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#6595b4">
         <meta name="msapplication-TileColor" content="#00aba9">
         <meta name="theme-color" content="#a9d1eb">
+        <meta name="color-scheme" content="dark light">
 
         <meta property="og:title" content={title} />
         <meta property="og:type" content="website" />
         <meta property="og:url" content={Astro.url} />
-        {head?.image && <meta property="og:image" content={head.image} />}
 
         {head?.description && <meta name="twitter:description" content={head.description} /> }
-        {head?.image && <meta property="twitter:image" content={head.image} />}
+        {head?.image && (
-
+            <meta property="og:image" content={`${Astro.site?.origin}${head.image}`} />
-        <link rel="stylesheet" href="/leaflet/leaflet.css" rel="preload" />
+            <meta name="twitter:image" content={`${Astro.site?.origin}${head.image}`} />
-        <script is:inline src="/leaflet/leaflet.js" />
+            <meta name="twitter:card" content="summary_large_image" />
-
+        )}
-        <script is:inline type="text/javascript" src="/js/leaflet-zoomify.min.js"></script>
-
-        <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>
         <script is:inline>

src/pages/en/aldys/borelis/index.astro

@@ -4,7 +4,12 @@ import Map from '@/components/maps/Map.astro'
 import MapOverlay from '@/components/maps/MapOverlay.astro'
 ---
 
-<Layout title="Borélis ~ Maps">
+<Layout
+    title="Borélis ~ Maps"
+    head={{
+        description: "Map of Borélis, a harbour city on the northern shores of the Kaldelium Accord."
+    }}
+>
     <MapOverlay
         mapKey='aldys-borelis'
         searchConfig={{

src/pages/en/aldys/cantane/index.astro

@@ -1,5 +1,5 @@
 ---
-import type { MapMarker, PlayerMarker } from '@/types/Leaflet';
+import type { MapMarker } from '@/types/Leaflet';
 
 import Layout from '@/layouts/Layout.astro';
 import Map from '@/components/maps/Map.astro'
@@ -10,7 +10,12 @@ import markersData from '@/components/maps/data/en/aldys/cantane/markers.json'
 const markers = markersData.data as MapMarker[]
 ---
 
-<Layout title="Cantane ~ Maps">
+<Layout
+    title="Cantane ~ Maps"
+    head={{
+        description: "Map of the old city of Cantane, south of the Kaldelium Accord."
+    }}
+>
     <MapOverlay
         mapKey='aldys-cantane'
         markers={markers}

src/pages/en/aldys/cantane/mines-blanches.astro

@@ -10,7 +10,12 @@ import markersData from '@/components/maps/data/en/aldys/cantane/les-mines-blanc
 const markers = markersData.data as MapMarker[]
 ---
 
-<Layout title="White Hollow ~ Maps">
+<Layout
+    title="White Hollow ~ Maps"
+    head={{
+        description: "Map of the White Hollow mining complex, left abandonned east of Cantane."
+    }}
+>
     <MapOverlay
         mapKey='aldys-cantane-mines'
         markers={markers}

src/pages/en/bamast/index.astro

@@ -12,7 +12,12 @@ const markers = markersData.data as MapMarker[]
 const players = playersData as PlayerMarker
 ---
 
-<Layout title="Bamast ~ Maps">
+<Layout
+    title="Bamast ~ Maps"
+    head={{
+        description: "Map of the archipelago of Bamast and its many islands in the Balamian Ocean."
+    }}
+>
     <MapOverlay
         mapKey='bamast'
         markers={markers}

src/pages/en/index.astro

@@ -16,8 +16,8 @@ const players = playersData as PlayerMarker
     title="Aldys ~ Maps"
     head={
         {
-            description: "Carte de l'Alliance Kaldélienne sur la planète de Léim.",
+            description: "Map of the Aldys continent on the planet of Léim, displaying the Kaldelium accord and the Common Lands of Syaltha.",
-            image: '/images/bailey-zindel-NRQV-hBF10M-unsplash.jpg'
+            image: '/bailey-zindel-NRQV-hBF10M-unsplash.jpg'
         }
     }
 >

src/pages/fr/aldys/borelis/index.astro

@@ -4,7 +4,12 @@ import Map from '@/components/maps/Map.astro'
 import MapOverlay from '@/components/maps/MapOverlay.astro'
 ---
 
-<Layout title="Borélis ~ Cartographie">
+<Layout
+    title="Borélis ~ Cartographie"
+    head={{
+        description: "Carte de la ville côtière de Borélis, sur les côtes gelées au nord de l'Alliance Kaldélienne."
+    }}
+>
     <MapOverlay
         mapKey='aldys-borelis'
         searchConfig={{

src/pages/fr/aldys/cantane/index.astro

@@ -10,7 +10,12 @@ import markersData from '@/components/maps/data/fr/aldys/cantane/markers.json'
 const markers = markersData.data as MapMarker[]
 ---
 
-<Layout title="Cantane ~ Cartographie">
+<Layout
+    title="Cantane ~ Cartographie"
+    head={{
+        description: "Carte de la ville de Cantane, au sud de l'Alliance Kaldélienne."
+    }}
+>
     <MapOverlay
         mapKey='aldys-cantane'
         markers={markers}

src/pages/fr/aldys/cantane/mines-blanches.astro

@@ -10,7 +10,12 @@ import markersData from '@/components/maps/data/fr/aldys/cantane/les-mines-blanc
 const markers = markersData.data as MapMarker[]
 ---
 
-<Layout title="Les Mines Blanches ~ Cartographie">
+<Layout
+    title="Les Mines Blanches ~ Cartographie"
+    head={{
+        description: "Cartographie du complexe des Mines Blanches, laissé à l'abandon à l'est de Cantane."
+    }}
+>
     <MapOverlay
         mapKey='aldys-cantane-mines'
         markers={markers}

src/pages/fr/bamast/index.astro

@@ -12,7 +12,12 @@ const markers = markersData.data as MapMarker[]
 const players = playersData as PlayerMarker
 ---
 
-<Layout title="Bamast ~ Cartographie">
+<Layout
+    title="Bamast ~ Cartographie"
+    head={{
+        description: "Carte de l'Archipel de Bamast et ses nombreuses îles de l'Océan Balamien."
+    }}
+>
     <MapOverlay
         mapKey='bamast'
         markers={markers}

src/pages/fr/index.astro

@@ -16,8 +16,8 @@ const players = playersData as PlayerMarker
     title="Aldys ~ Cartographie"
     head={
         {
-            description: "Carte de l'Alliance Kaldélienne sur la planète de Léim.",
+            description: "Carte du continent Aldys sur la planète de Léim, comprenant l'Alliance Kaldélienne et les Terres de Syaltha.",
-            image: '/images/bailey-zindel-NRQV-hBF10M-unsplash.jpg'
+            image: '/bailey-zindel-NRQV-hBF10M-unsplash.jpg'
         }
     }
 >