Fixed more translations

astro.config.mjs

@@ -11,11 +11,11 @@ export default defineConfig({
   integrations: [vue(), sitemap()],
   output: 'static',
   site: 'https://maps.alexcreates.fr',
-  i18n: {
-    locales: availableLangs,
-    defaultLocale: defaultLang,
-    routing: {
-        prefixDefaultLocale: true,
-    }
-  }
+//   i18n: {
+//     locales: availableLangs,
+//     defaultLocale: defaultLang,
+//     routing: {
+//         prefixDefaultLocale: true,
+//     }
+//   }
 });

src/components/maps/Map.astro

@@ -2,6 +2,8 @@
 import type { MapMarker, PlayerMarker } from '@/types/Leaflet';
 import type { MapProps } from '@/types/Map';
 import MarkerCreator from './overlay/MarkerCreator.vue';
+import { t } from '@/i18n/store';
+import { getLangFromUrl } from '@/i18n/utils';
 
 interface Props extends MapProps {}
 
@@ -17,6 +19,11 @@ const {
     rulerHideWalkDistance = false,
     backgroundColor = 'transparent',
 } = Astro.props
+
+const lang = getLangFromUrl(Astro.url);
+
+const byText = t('common.by', lang)
+const seeMapText = t('maps.go-to-map', lang)
 ---
 
 <div class="world-wrapper">
@@ -35,10 +42,15 @@ const {
         mapWidth,
         rulerDistanceRatio,
         rulerMainUnit,
-        rulerHideWalkDistance
+        rulerHideWalkDistance,
+        byText,
+        seeMapText
     }}
     defer
 >
+/**
+ * LEAFLET MAP SETUP
+ */
 // Units used for convertions to avoid changing original marker coords
 const xRatio = .68447
 const yRatio = .68447
@@ -198,10 +210,10 @@ for (let i = 0; i < markers.length; i++) {
 
         popupContent += `
             <figure class="${figureClass}">
-                <img src="/images/cover/${m.cover}" alt="${m.title}" width="${figureWidth}" loading="eager" />
+                <img src="/images/cover/${m.cover}" alt="${m.title}" width="${figureWidth}" />
 
                 <figcaption>
-                    <cite>par <a href="${m.coverLink}" target="_blank">${m.coverAuthor}</a></cite>
+                    <cite>${byText} <a href="${m.coverLink}" target="_blank">${m.coverAuthor}</a></cite>
                 </figcaption>
             </figure>
         `
@@ -229,7 +241,7 @@ for (let i = 0; i < markers.length; i++) {
         popupContent += `
             <a href="${m.mapId}" class="map-link">
                 <span>
-                    Voir la carte détaillée
+                    ${ seeMapText }
                 </span>
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="80" y1="112" x2="144" y2="112" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="112" cy="112" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="168.57" y1="168.57" x2="224" y2="224" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="112" y1="80" x2="112" y2="144" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
             </a>

src/components/maps/data/en/aldys/markers.json

@@ -222,7 +222,7 @@
                 "x": 198.0424703459088,
                 "y": -210.9293951755887
             },
-            "mapId": "/en/aldys/cantane/white-hollow",
+            "mapId": "/en/aldys/cantane/mines-blanches",
             "cover": "Les Mines Blanches.png",
             "coverAuthor": "MeckanicalMind",
             "coverLink": "https://www.deviantart.com/meckanicalmind/art/R3-Mines-258469134"

src/components/maps/overlay/SearchMarkers.vue

@@ -241,7 +241,7 @@ function resetAllFields(actionAfter?: "focusAfter") {
                         tabindex="0"
                         :title="m.group === 'quests' ? t('maps.seeQuest') : t('maps.seePlace')"
                     >
-                        <img v-if="m.cover && !m.coverPortrait" :src="`/images/cover/${m.cover}`" :alt="m.title" width="300" />
+                        <img v-if="m.cover && !m.coverPortrait" :src="`/images/cover/${m.cover}`" :alt="m.title" height="200" width="300" />
 
                         <div class="content-wrapper">
                             <span class="title">{{ m.title }}</span>
@@ -465,9 +465,9 @@ function resetAllFields(actionAfter?: "focusAfter") {
                     img {
                         display: block;
                         width: 100%;
+                        object-fit: cover;
                         max-height: 22.5dvh;
                         max-height: 22.5vh;
-                        object-fit: cover;
                     }
 
                     .content-wrapper {

src/i18n/store.ts

@@ -7,6 +7,6 @@ export function setLang(lang: Language) {
     currentLang.set(lang);
 }
 
-export function t(key: string): string {
-    return translations[currentLang.get()][key]
-}
+export function t(key: string, lang: Language = currentLang.get()): string {
+    return translations[lang][key]
+}

src/i18n/ui.ts

@@ -8,6 +8,7 @@ export const translations: LanguageDict = {
     'fr': {
         'common.title': 'Titre',
         'common.create': 'Créer',
+        'common.by': 'par',
         'continents': 'Continents',
         'cities': 'Villes',
         'others': 'Autres',
@@ -30,6 +31,7 @@ export const translations: LanguageDict = {
     'en': {
         'common.title': 'Title',
         'common.create': 'Create',
+        'common.by': 'by',
         'continents': 'Continents',
         'cities': 'Cities',
         'others': 'Others',