feat: [refactor] i18n config vs hardcoded (#59)

En esta PR, refactor:
* Se sustituyen los valores hardcoded relacionados con la i18n por los
valores de la configuración del proyecto.
* Se quitan los strings traducibles del componente para llevarlos a la
carpeta de traducciones.

Author: ctrl-alt-d

src/components/LanguagePicker.astro

@@ -1,30 +1,27 @@
 ---
+import { i18n } from 'astro:config/client'
 import { texts } from '../i18n/components/LanguagePicker'
 
 // Idiomas disponibles
-const languages = [
-  { code: 'es', label: 'es', ariadesc: 'Idioma español' },
-  { code: 'en', label: 'en', ariadesc: 'English language' },
-  { code: 'ca', label: 'ca', ariadesc: 'Idioma català' },
-]
+const languages = i18n.locales as string[]
 
 interface Props {
   lang: string
 }
 
-const { lang = 'es' } = Astro.params
+const { lang = i18n.defaultLocale } = Astro.params
 const t = texts[lang as keyof typeof texts]
 
 // Idioma actual detectado desde la URL
 const pathname = Astro.url.pathname
-const currentLang = pathname.split('/')[1] || 'es'
+const currentLang = pathname.split('/')[1] || i18n.defaultLocale
 
 // Función para construir la URL destino
 const getPathForLang = (lang) => {
   const parts = pathname.split('/').filter(Boolean)
 
   // Si ya hay idioma, lo reemplaza
-  if (languages.some((l) => l.code === parts[0])) {
+  if (languages.some((l) => l === parts[0])) {
     parts[0] = lang
   } else {
     parts.unshift(lang)
@@ -39,14 +36,14 @@ const getPathForLang = (lang) => {
     languages.map((lang) => (
       <li>
         <a
-          href={getPathForLang(lang.code)}
-          hreflang={lang.code}
-          aria-current={lang.code === currentLang ? 'page' : undefined}
-          aria-label={lang.ariadesc}
-          lang={lang.code}
-          class={lang.code === currentLang ? 'font-bold underline underline-offset-4' : ''}
+          href={getPathForLang(lang)}
+          hreflang={lang}
+          aria-current={lang === currentLang ? 'page' : undefined}
+          aria-label={t['labelariadesc']}
+          lang={lang}
+          class={lang === currentLang ? 'font-bold underline underline-offset-4' : ''}
         >
-          {lang.label}
+          {t['label'][lang]}
         </a>
       </li>
     ))

src/i18n/components/LanguagePicker.ts

@@ -1,11 +1,17 @@
 export const texts = {
   es: {
     alttext: 'Selector de idioma',
+    label: { es: 'es', en: 'en', ca: 'ca' },
+    labelariadesc: 'Idioma español',
   },
   en: {
     alttext: 'Language selector',
+    label: { es: 'es', en: 'en', ca: 'ca' },
+    labelariadesc: 'English language',
   },
   ca: {
     alttext: "Selector d'idioma",
+    label: { es: 'es', en: 'en', ca: 'ca' },
+    labelariadesc: 'Idioma català',
   },
 } as const

src/pages/index.astro

@@ -1,17 +1,18 @@
 ---
+import { i18n } from 'astro:config/client'
 import IndexPage from '../components/index.astro'
 ---
 
 <script is:inline>
   // Get browser language
   const lang = navigator.language.split('-')[0]
-  const supported = ['es', 'en', 'ca']
-  const target = supported.includes(lang) ? lang : 'es'
+  const supported = i18n.locales
+  const target = supported.includes(lang) ? lang : i18n.defaultLocale
 
   // Redirect immediately
-  if (target !== 'es') {
+  if (target !== i18n.defaultLocale) {
     window.location.href = `/${target}/`
   }
 </script>
 
-<IndexPage lang="es" />
+<IndexPage lang={i18n.defaultLocale} />