Added lang store

2025-03-20 15:44:11 +01:00
parent e70841e7b4
commit 99aa951d47
7 changed files with 91 additions and 16 deletions
--- a/package.json
+++ b/package.json
@@ -12,9 +12,12 @@
  "dependencies": {
    "@astrojs/sitemap": "^3.3.0",
    "@astrojs/vue": "^5.0.7",
+    "@nanostores/persistent": "^0.10.2",
+    "@nanostores/vue": "^0.11.0",
    "@types/leaflet": "^1.9.16",
    "@vueuse/core": "^13.0.0",
    "astro": "^5.5.3",
+    "nanostores": "^0.11.4",
    "radix-vue": "^1.9.17",
    "vue": "^3.5.13"
  },
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,12 @@ importers:
      '@astrojs/vue':
        specifier: ^5.0.7
        version: 5.0.7(astro@5.5.3(jiti@2.4.2)(rollup@4.36.0)(sass@1.86.0)(typescript@5.7.2))(jiti@2.4.2)(rollup@4.36.0)(sass@1.86.0)(vue@3.5.13(typescript@5.7.2))
+      '@nanostores/persistent':
+        specifier: ^0.10.2
+        version: 0.10.2(nanostores@0.11.4)
+      '@nanostores/vue':
+        specifier: ^0.11.0
+        version: 0.11.0(nanostores@0.11.4)(vue@3.5.13(typescript@5.7.2))
      '@types/leaflet':
        specifier: ^1.9.16
        version: 1.9.16
@@ -23,6 +29,9 @@ importers:
      astro:
        specifier: ^5.5.3
        version: 5.5.3(jiti@2.4.2)(rollup@4.36.0)(sass@1.86.0)(typescript@5.7.2)
+      nanostores:
+        specifier: ^0.11.4
+        version: 0.11.4
      radix-vue:
        specifier: ^1.9.17
        version: 1.9.17(vue@3.5.13(typescript@5.7.2))
@@ -500,6 +509,26 @@ packages:
  '@jridgewell/trace-mapping@0.3.25':
    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}

+  '@nanostores/persistent@0.10.2':
+    resolution: {integrity: sha512-BEndnLhRC+yP7gXTESepBbSj8XNl8OXK9hu4xAgKC7MWJHKXnEqJMqY47LUyHxK6vYgFnisyHmqq+vq8AUFyIg==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      nanostores: ^0.9.0 || ^0.10.0 || ^0.11.0
+
+  '@nanostores/vue@0.11.0':
+    resolution: {integrity: sha512-4ndyLhwVFl1xhOnvWuMvYiG4K2rYvkaQWP3nJC1/RwK/dvpDgLPywwv6MnBdFydqbOGuXNaXOEwa3HsG9CujmA==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    peerDependencies:
+      '@nanostores/logger': '>=0.4.0'
+      '@vue/devtools-api': '>=7.6.2'
+      nanostores: '>=0.11.3'
+      vue: '>=3.3.1'
+    peerDependenciesMeta:
+      '@nanostores/logger':
+        optional: true
+      '@vue/devtools-api':
+        optional: true
+
  '@oslojs/encoding@1.1.0':
    resolution: {integrity: sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==}

@@ -1511,6 +1540,10 @@ packages:
    engines: {node: ^18 || >=20}
    hasBin: true

+  nanostores@0.11.4:
+    resolution: {integrity: sha512-k1oiVNN4hDK8NcNERSZLQiMfRzEGtfnvZvdBvey3SQbgn8Dcrk0h1I6vpxApjb10PFUflZrgJ2WEZyJQ+5v7YQ==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+
  neotraverse@0.6.18:
    resolution: {integrity: sha512-Z4SmBUweYa09+o6pG+eASabEpP6QkQ70yHj351pQoEXIs8uHbaU2DWVmzBANKgflPa47A50PtB2+NgRpQvr7vA==}
    engines: {node: '>= 10'}
@@ -2583,6 +2616,15 @@ snapshots:
      '@jridgewell/resolve-uri': 3.1.2
      '@jridgewell/sourcemap-codec': 1.5.0

+  '@nanostores/persistent@0.10.2(nanostores@0.11.4)':
+    dependencies:
+      nanostores: 0.11.4
+
+  '@nanostores/vue@0.11.0(nanostores@0.11.4)(vue@3.5.13(typescript@5.7.2))':
+    dependencies:
+      nanostores: 0.11.4
+      vue: 3.5.13(typescript@5.7.2)
+
  '@oslojs/encoding@1.1.0': {}

  '@parcel/watcher-android-arm64@2.5.1':
@@ -3871,6 +3913,8 @@ snapshots:

  nanoid@5.1.5: {}

+  nanostores@0.11.4: {}
+
  neotraverse@0.6.18: {}

  nlcst-to-string@4.0.0:
--- a/src/components/maps/data/en/aldys/markers.json
+++ b/src/components/maps/data/en/aldys/markers.json
@@ -3,7 +3,7 @@
        {
            "group": "capitals",
            "title": "Ambrose",
-            "description": "Capital of Nacride and Economic Capital of the Kaldelian Alliance.",
+            "description": "Capital of Nacride and bustling economic center of the Kaldelium Accord.",
            "link": "https://wiki.alexcreates.fr/index.php/Ambrose",
            "markerCoords": {
                "x": 83.6,
@@ -16,7 +16,7 @@
        {
            "group": "capitals",
            "title": "Cordouac",
-            "description": "Capital of Heraldy and Administrative Capital of the Kaldelian Alliance.",
+            "description": "Capital of Heraldy and administrative core of the Kaldelium Accord.",
            "link": "https://wiki.alexcreates.fr/index.php/Cordouac",
            "markerCoords": {
                "x": 133.46875,
@@ -28,7 +28,7 @@
        },
        {
            "group": "capitals",
-            "title": "Bordelac",
+            "title": "Shorehaven",
            "description": "Capital of the High Banks",
            "link": "https://wiki.alexcreates.fr/index.php/Bordelac",
            "markerCoords": {
@@ -38,8 +38,8 @@
        },
        {
            "group": "capitals",
-            "title": "Tourgrise",
-            "description": "Capital of Ternacre. It's a city of archivist mages, but it also houses the largest prison population in the Alliance.",
+            "title": "Grayspire",
+            "description": "Capital of Ternacre. It's a city of archivist mages, but it also houses the largest prison population in the Accord.",
            "link": "https://wiki.alexcreates.fr/index.php/Tourgrise",
            "markerCoords": {
                "x": 132.26953,
@@ -52,7 +52,7 @@
        },
        {
            "group": "capitals",
-            "title": "Valsoie",
+            "title": "Silkdale",
            "description": "Capital of Mireloin.",
            "link": "https://wiki.alexcreates.fr/index.php/Valsoie",
            "markerCoords": {
@@ -72,8 +72,8 @@
        },
        {
            "group": "capitals",
-            "title": "Port-brisé",
-            "description": "Chef-lieu d'Émerose.",
+            "title": "Shattered Port",
+            "description": "Capital of Émerose.",
            "link": "https://wiki.alexcreates.fr/index.php/Port-brisé",
            "markerCoords": {
                "x": 168.39491,
@@ -879,8 +879,8 @@
        },
        {
            "group": "landmarks",
-            "title": "Central Kaldelian Academy",
-            "description": "One of the Alliance's largest magic academies. The entrance exam is open to the public, but students must pay their own tuition fees.",
+            "title": "Central Kaldelium Academy",
+            "description": "One of the Accord's largest magic academies. The entrance exam is open to the public, but students must pay their own tuition fees.",
            "link": "https://wiki.alexcreates.fr/index.php/Acad%C3%A9mie_Centrale_Kald%C3%A9lienne",
            "markerCoords": {
                "x": 83.80737652386473,
@@ -916,7 +916,7 @@
        {
            "group": "landmarks",
            "title": "Whitesteel Institute",
-            "description": "First military school of the Kaldelian Alliance.",
+            "description": "First military school of the Kaldelium Accord.",
            "link": "https://wiki.alexcreates.fr/index.php/Institut_du_Fer_Blanc",
            "markerCoords": {
                "x": 140.3159943633407,
--- a/src/components/maps/overlay/SearchMapSwitch.vue
+++ b/src/components/maps/overlay/SearchMapSwitch.vue
@@ -1,7 +1,12 @@
 <script lang="ts" setup>
-import { PopoverArrow, PopoverContent, PopoverRoot, PopoverTrigger } from 'radix-vue'
 import { computed, onUpdated, ref, watch } from 'vue';
 import { useElementHover, useFocus } from '@vueuse/core'
+import { PopoverArrow, PopoverContent, PopoverRoot, PopoverTrigger } from 'radix-vue'
+import { useStore } from '@nanostores/vue';
+
+import { currentLang } from '@/i18n/store';
+
+const $currentLang = useStore(currentLang);

 const navModel = ref(false);

--- a/src/components/maps/overlay/SearchMarkers.vue
+++ b/src/components/maps/overlay/SearchMarkers.vue
@@ -1,12 +1,19 @@
 <script setup lang="ts">
+import { useStore } from '@nanostores/vue';
+import { onClickOutside, useFocus, useFocusWithin, useLocalStorage, useMagicKeys, whenever } from '@vueuse/core';
+import { computed, onMounted, onUpdated, ref, watch } from 'vue';
+
 import type { MapMarker, MapMarkerGroup, PlayerMarker } from '@/types/Leaflet';
 import type { SearchConfig } from '@/types/Map';
 import type { SearchMode } from '@/types/Search';
-import { onClickOutside, useFocus, useFocusWithin, useLocalStorage, useMagicKeys, whenever } from '@vueuse/core';
-import { computed, onMounted, onUpdated, ref, watch } from 'vue';
+
+import { currentLang } from '@/i18n/store';
+
 import SearchMapSwitch from './SearchMapSwitch.vue';
 import SearchMarkersTags from './SearchMarkersTags.vue';

+const $currentLang = useStore(currentLang);
+
 const props = defineProps<{
    markers: MapMarker[],
    players: PlayerMarker,
--- a/src/i18n/store.ts
+++ b/src/i18n/store.ts
@@ -0,0 +1,8 @@
+import { type Language } from './ui';
+import { persistentAtom } from '@nanostores/persistent';
+
+export const currentLang = persistentAtom<Language>('lang', "fr");
+
+export function setLang(lang: Language) {
+    currentLang.set(lang);
+}
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -6,7 +6,6 @@ import type { Head } from '@/types/Head';
 interface Props {
 	title: string
    head?: Head
-    lang?: Language
 }

 const { title, head } = Astro.props;
@@ -17,6 +16,15 @@ const lang = getLangFromUrl(Astro.url) || defaultLang;
 <!doctype html>
 <html lang={lang}>
 	<head>
+        <script>
+            import { setLang } from "@/i18n/store";
+            import { defaultLang, type Language } from "@/i18n/ui";
+            import { getLangFromUrl } from "@/i18n/utils";
+
+            const currentLang: Language = getLangFromUrl(new URL(window.location.href)) || defaultLang;
+            setLang(currentLang || defaultLang);
+        </script>
+
 		<meta charset="UTF-8" />
        <meta name="author" content="Alexis Pelé" />
 		{head?.description && <meta name="description" content={head.description} /> }
@@ -43,7 +51,7 @@ const lang = getLangFromUrl(Astro.url) || defaultLang;
        {head?.image && <meta property="twitter:image" content={head.image} />}

        <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 is:inline type="text/javascript" src="/js/leaflet-zoomify.min.js"></script>