From 8feb618250e637f9154d433dc46740272c48749d Mon Sep 17 00:00:00 2001
From: ramistodev <168463169+ramistodev@users.noreply.github.com>
Date: Tue, 14 Apr 2026 10:56:02 +0200
Subject: [PATCH] refactor(i18n): dynamic locale routing with [lang] pages

- Replace hardcoded pages/es/ with dynamic pages/[lang]/
- getStaticPaths now uses locales/defaultLocale from translations.ts
- Remove hardcoded 'es' strings from AlgoViz.tsx and Header.tsx
- Add missing translation keys (openMenu, closeMenu, sidebarAriaLabel, etc.)
---
 src/components/AlgoViz.tsx         | 33 +++++++++---------
 src/components/Header.tsx          | 44 +++++++++++++++++++-----
 src/i18n/translations.ts           | 54 ++++++++++++++++++++++++------
 src/pages/[algorithm].astro        | 10 +++---
 src/pages/[lang]/[algorithm].astro | 27 +++++++++++++++
 src/pages/[lang]/index.astro       | 20 +++++++++++
 src/pages/es/[algorithm].astro     | 23 -------------
 src/pages/es/index.astro           |  8 -----
 src/pages/index.astro              |  5 +--
 tsconfig.json                      |  1 +
 10 files changed, 153 insertions(+), 72 deletions(-)
 create mode 100644 src/pages/[lang]/[algorithm].astro
 create mode 100644 src/pages/[lang]/index.astro
 delete mode 100644 src/pages/es/[algorithm].astro
 delete mode 100644 src/pages/es/index.astro

diff --git a/src/components/AlgoViz.tsx b/src/components/AlgoViz.tsx
index 4f73293..ee887d5 100644
--- a/src/components/AlgoViz.tsx
+++ b/src/components/AlgoViz.tsx
@@ -5,6 +5,8 @@ import {
   getAlgorithmDescription,
   getAlgorithmMetaTitle,
   getAlgorithmMetaDescription,
+  defaultLocale,
+  locales,
 } from '@i18n/translations'
 import { algorithms, categories } from '@lib/algorithms'
 import { usePlayback } from '@hooks/usePlayback'
@@ -26,13 +28,16 @@ const COLLAPSE_THRESHOLD = 100
 const MOBILE_BREAKPOINT = 768
 
 function getAlgorithmUrl(locale: string, algoId: string): string {
-  return locale === 'es' ? `/es/${algoId}` : `/${algoId}`
+  return locale === defaultLocale ? `/${algoId}` : `/${locale}/${algoId}`
 }
 
 function getAlgorithmIdFromPath(pathname: string): string | null {
   const cleaned = pathname.replace(/\/$/, '')
-  if (cleaned === '' || cleaned === '/es') return null
-  if (cleaned.startsWith('/es/')) return cleaned.slice(4)
+  if (cleaned === '') return null
+  for (const locale of locales) {
+    if (cleaned === `/${locale}`) return null
+    if (cleaned.startsWith(`/${locale}/`)) return cleaned.slice(locale.length + 2)
+  }
   return cleaned.slice(1)
 }
 
@@ -249,7 +254,7 @@ export default function AlgoViz({ locale = 'en', initialAlgorithmId }: AlgoVizPr
               style={{
                 width: sidebar.isDragging ? sidebar.width : sidebar.collapsed ? 0 : SIDEBAR_MAX,
               }}
-              aria-label={locale === 'es' ? 'Categorías de algoritmos' : 'Algorithm categories'}
+              aria-label={t.sidebarAriaLabel}
               aria-hidden={sidebar.collapsed}
               inert={sidebar.collapsed || undefined}
             >
@@ -314,19 +319,19 @@ export default function AlgoViz({ locale = 'en', initialAlgorithmId }: AlgoVizPr
               className={`fixed top-0 left-0 bottom-0 w-[280px] bg-black z-50 border-r border-white/8 transition-transform duration-300 ease-in-out ${
                 mobileSidebarOpen ? 'translate-x-0' : '-translate-x-full'
               }`}
-              aria-label={locale === 'es' ? 'Categorías de algoritmos' : 'Algorithm categories'}
+              aria-label={t.sidebarAriaLabel}
               aria-hidden={!mobileSidebarOpen}
               inert={!mobileSidebarOpen || undefined}
             >
               <div className="h-full flex flex-col">
                 <div className="flex items-center justify-between px-4 py-3 border-b border-white/8">
                   <span className="text-sm font-semibold text-white font-heading">
-                    {locale === 'es' ? 'Algoritmos' : 'Algorithms'}
+                    {t.mobileMenuTitle}
                   </span>
                   <button
                     onClick={() => setMobileSidebarOpen(false)}
                     className="w-7 h-7 flex items-center justify-center rounded-md hover:bg-white/6 text-neutral-400 hover:text-white transition-colors"
-                    aria-label={locale === 'es' ? 'Cerrar menú' : 'Close menu'}
+                    aria-label={t.closeMenu}
                   >
                     <svg
                       className="w-4 h-4"
@@ -412,7 +417,7 @@ export default function AlgoViz({ locale = 'en', initialAlgorithmId }: AlgoVizPr
                     ? 0
                     : CODEPANEL_MAX,
               }}
-              aria-label={locale === 'es' ? 'Panel de código y detalles' : 'Code and details panel'}
+              aria-label={t.codePanelAriaLabel}
               aria-hidden={codePanel.collapsed}
               inert={codePanel.collapsed || undefined}
             >
@@ -464,19 +469,17 @@ export default function AlgoViz({ locale = 'en', initialAlgorithmId }: AlgoVizPr
               className={`fixed top-0 right-0 bottom-0 w-[min(360px,90vw)] bg-black z-50 border-l border-white/8 transition-transform duration-300 ease-in-out ${
                 mobileCodePanelOpen ? 'translate-x-0' : 'translate-x-full'
               }`}
-              aria-label={locale === 'es' ? 'Panel de código y detalles' : 'Code and details panel'}
+              aria-label={t.codePanelAriaLabel}
               aria-hidden={!mobileCodePanelOpen}
               inert={!mobileCodePanelOpen || undefined}
             >
               <div className="h-full flex flex-col">
                 <div className="flex items-center justify-between px-4 py-3 border-b border-white/8">
-                  <span className="text-sm font-semibold text-white font-heading">
-                    {locale === 'es' ? 'Código' : 'Code'}
-                  </span>
+                  <span className="text-sm font-semibold text-white font-heading">{t.tabCode}</span>
                   <button
                     onClick={() => setMobileCodePanelOpen(false)}
                     className="w-7 h-7 flex items-center justify-center rounded-md hover:bg-white/6 text-neutral-400 hover:text-white transition-colors"
-                    aria-label={locale === 'es' ? 'Cerrar panel' : 'Close panel'}
+                    aria-label={t.closePanel}
                   >
                     <svg
                       className="w-4 h-4"
@@ -519,7 +522,7 @@ export default function AlgoViz({ locale = 'en', initialAlgorithmId }: AlgoVizPr
           <button
             onClick={() => setMobileSidebarOpen(true)}
             className="w-8 h-8 flex items-center justify-center rounded-md hover:bg-white/6 text-neutral-400 hover:text-white transition-colors shrink-0"
-            aria-label={locale === 'es' ? 'Abrir menú' : 'Open menu'}
+            aria-label={t.openMenu}
           >
             <svg
               className="w-4 h-4"
@@ -607,7 +610,7 @@ export default function AlgoViz({ locale = 'en', initialAlgorithmId }: AlgoVizPr
           <button
             onClick={() => setMobileCodePanelOpen(true)}
             className="w-8 h-8 flex items-center justify-center rounded-md hover:bg-white/6 text-neutral-400 hover:text-white transition-colors shrink-0"
-            aria-label={locale === 'es' ? 'Ver código' : 'View code'}
+            aria-label={t.viewCode}
           >
             <svg
               className="w-4 h-4"
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 69e1236..148c5e2 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -67,10 +67,21 @@ export default function Header({
           <button
             onClick={onToggleMobileSidebar}
             className="flex items-center justify-center w-7 h-7 rounded-md hover:bg-white/6 transition-colors text-neutral-400 hover:text-white shrink-0"
-            aria-label={locale === 'es' ? 'Abrir menú' : 'Open menu'}
+            aria-label={t.openMenu}
           >
-            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
-              <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+            <svg
+              className="w-4 h-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+              aria-hidden="true"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+              />
             </svg>
           </button>
         ) : sidebarCollapsed ? (
@@ -129,7 +140,10 @@ export default function Header({
           )}
         </a>
         {selectedAlgorithm && (
-          <nav aria-label="Breadcrumb" className="flex items-center gap-1.5 min-w-0 overflow-hidden">
+          <nav
+            aria-label="Breadcrumb"
+            className="flex items-center gap-1.5 min-w-0 overflow-hidden"
+          >
             <span className="text-neutral-600 shrink-0">/</span>
             <span className="text-xs text-neutral-500 hidden md:inline shrink-0">
               {getCategoryName(locale, selectedAlgorithm.category)}
@@ -167,10 +181,21 @@ export default function Header({
           <button
             onClick={onToggleMobileCodePanel}
             className="flex items-center justify-center w-7 h-7 rounded-md hover:bg-white/6 transition-colors text-neutral-400 hover:text-white"
-            aria-label={locale === 'es' ? 'Ver código' : 'View code'}
+            aria-label={t.viewCode}
           >
-            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
-              <path strokeLinecap="round" strokeLinejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
+            <svg
+              className="w-4 h-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+              aria-hidden="true"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"
+              />
             </svg>
           </button>
         )}
@@ -196,7 +221,10 @@ export default function Header({
             </svg>
           </button>
         )}
-        <nav aria-label={locale === 'es' ? 'Idioma' : 'Language'} className="flex items-center gap-0.5 bg-white/6 rounded-lg p-0.5 border border-white/8">
+        <nav
+          aria-label={t.languageLabel}
+          className="flex items-center gap-0.5 bg-white/6 rounded-lg p-0.5 border border-white/8"
+        >
           {locales.map((l) => (
             <a
               key={l}
diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts
index 5700556..78bba34 100644
--- a/src/i18n/translations.ts
+++ b/src/i18n/translations.ts
@@ -50,6 +50,16 @@ export interface Translations {
   resizeSidebar: string
   resizeCodePanel: string
 
+  // Mobile / aria labels
+  sidebarAriaLabel: string
+  codePanelAriaLabel: string
+  mobileMenuTitle: string
+  openMenu: string
+  closeMenu: string
+  closePanel: string
+  viewCode: string
+  languageLabel: string
+
   // Graph visualizer
   queue: string
   stack: string
@@ -102,6 +112,15 @@ export const translations: Record<Locale, Translations> = {
     resizeSidebar: 'Resize sidebar',
     resizeCodePanel: 'Resize code panel',
 
+    sidebarAriaLabel: 'Algorithm categories',
+    codePanelAriaLabel: 'Code and details panel',
+    mobileMenuTitle: 'Algorithms',
+    openMenu: 'Open menu',
+    closeMenu: 'Close menu',
+    closePanel: 'Close panel',
+    viewCode: 'View code',
+    languageLabel: 'Language',
+
     queue: 'Queue',
     stack: 'Stack',
     empty: 'empty',
@@ -141,7 +160,7 @@ Rules of Big O:
   2. Drop lower-order terms: O(n² + n) → O(n²)
   3. Focus on the dominant term as n grows large`,
 
-      'recursion': `Recursion
+      recursion: `Recursion
 
 Recursion is a programming technique where a function calls itself to solve smaller instances of the same problem. It's one of the most powerful concepts in computer science.
 
@@ -168,7 +187,7 @@ Pitfalls:
 Recursive algorithms in this visualizer:
   Quick Sort, Merge Sort, DFS, N-Queens, Sudoku Solver, Tower of Hanoi`,
 
-      'stack': `Stack
+      stack: `Stack
 
 A Stack is a linear data structure that follows the LIFO principle — Last In, First Out. Like a stack of plates: you add and remove from the top only.
 
@@ -188,7 +207,7 @@ Applications:
 
 Space Complexity: O(n) for n elements`,
 
-      'queue': `Queue
+      queue: `Queue
 
 A Queue is a linear data structure that follows the FIFO principle — First In, First Out. Like a line at a store: the first person in line is served first.
 
@@ -263,7 +282,7 @@ Examples:
   O(n): Merge Sort (temporary arrays), hash tables
   O(n²): DP tables, adjacency matrices`,
 
-      'memoization': `Memoization
+      memoization: `Memoization
 
 Memoization is an optimization technique that stores the results of expensive function calls and returns the cached result when the same inputs occur again.
 
@@ -364,7 +383,7 @@ Where h = height of the tree:
 
 Applications: ordered data storage, range queries, priority queues (with balancing)`,
 
-      'heap': `Heap (Min Heap)
+      heap: `Heap (Min Heap)
 
 A Heap is a complete binary tree where every parent is smaller (min-heap) or larger (max-heap) than its children. It's stored as an array.
 
@@ -1034,6 +1053,15 @@ The puzzle was invented by mathematician Édouard Lucas in 1883. Legend says mon
     resizeSidebar: 'Redimensionar barra lateral',
     resizeCodePanel: 'Redimensionar panel de código',
 
+    sidebarAriaLabel: 'Categorías de algoritmos',
+    codePanelAriaLabel: 'Panel de código y detalles',
+    mobileMenuTitle: 'Algoritmos',
+    openMenu: 'Abrir menú',
+    closeMenu: 'Cerrar menú',
+    closePanel: 'Cerrar panel',
+    viewCode: 'Ver código',
+    languageLabel: 'Idioma',
+
     queue: 'Cola',
     stack: 'Pila',
     empty: 'vacía',
@@ -1073,7 +1101,7 @@ Reglas de Big O:
   2. Eliminar términos de menor orden: O(n² + n) → O(n²)
   3. Enfocarse en el término dominante cuando n crece`,
 
-      'recursion': `Recursión
+      recursion: `Recursión
 
 La recursión es una técnica de programación donde una función se llama a sí misma para resolver instancias más pequeñas del mismo problema. Es uno de los conceptos más poderosos en las ciencias de la computación.
 
@@ -1100,7 +1128,7 @@ Errores comunes:
 Algoritmos recursivos en este visualizador:
   Quick Sort, Merge Sort, DFS, N-Queens, Sudoku Solver, Torre de Hanoi`,
 
-      'stack': `Pila (Stack)
+      stack: `Pila (Stack)
 
 Una Pila es una estructura de datos lineal que sigue el principio LIFO — Último en Entrar, Primero en Salir. Como una pila de platos: solo puedes añadir y quitar del tope.
 
@@ -1120,7 +1148,7 @@ Aplicaciones:
 
 Complejidad Espacial: O(n) para n elementos`,
 
-      'queue': `Cola (Queue)
+      queue: `Cola (Queue)
 
 Una Cola es una estructura de datos lineal que sigue el principio FIFO — Primero en Entrar, Primero en Salir. Como una fila en una tienda: el primero en llegar es atendido primero.
 
@@ -1195,7 +1223,7 @@ Ejemplos:
   O(n): Merge Sort (arreglos temporales), tablas hash
   O(n²): tablas de DP, matrices de adyacencia`,
 
-      'memoization': `Memoización
+      memoization: `Memoización
 
 La memoización es una técnica de optimización que almacena los resultados de llamadas a funciones costosas y devuelve el resultado cacheado cuando se repiten las mismas entradas.
 
@@ -1296,7 +1324,7 @@ Donde h = altura del árbol:
 
 Aplicaciones: almacenamiento de datos ordenados, consultas por rango, colas de prioridad (con balanceo)`,
 
-      'heap': `Montículo (Heap)
+      heap: `Montículo (Heap)
 
 Un Heap es un árbol binario completo donde cada padre es menor (min-heap) o mayor (max-heap) que sus hijos. Se almacena como un arreglo.
 
@@ -1941,7 +1969,11 @@ export function getCategoryName(locale: Locale, categoryKey: string): string {
   return translations[locale].categories[categoryKey] || categoryKey
 }
 
-export function getAlgorithmMetaTitle(locale: Locale, algorithmId: string, fallbackName: string): string {
+export function getAlgorithmMetaTitle(
+  locale: Locale,
+  algorithmId: string,
+  fallbackName: string,
+): string {
   const desc = translations[locale].algorithmDescriptions[algorithmId]
   if (!desc) return `${fallbackName} | alg0.dev`
   const firstLine = desc.split('\n')[0].trim()
diff --git a/src/pages/[algorithm].astro b/src/pages/[algorithm].astro
index 1681896..b3e37ce 100644
--- a/src/pages/[algorithm].astro
+++ b/src/pages/[algorithm].astro
@@ -2,7 +2,7 @@
 import Layout from "@layouts/Layout.astro"
 import AlgoViz from "@components/AlgoViz"
 import { algorithms } from "@lib/algorithms"
-import { getAlgorithmMetaTitle, getAlgorithmMetaDescription } from "@i18n/translations"
+import { getAlgorithmMetaTitle, getAlgorithmMetaDescription, defaultLocale } from "@i18n/translations"
 import type { GetStaticPaths } from "astro"
 
 export const getStaticPaths: GetStaticPaths = () => {
@@ -14,10 +14,10 @@ export const getStaticPaths: GetStaticPaths = () => {
 const { algorithm } = Astro.params as { algorithm: string }
 const algo = algorithms.find((a) => a.id === algorithm)!
 
-const title = getAlgorithmMetaTitle("en", algo.id, algo.name)
-const description = getAlgorithmMetaDescription("en", algo.id)
+const title = getAlgorithmMetaTitle(defaultLocale, algo.id, algo.name)
+const description = getAlgorithmMetaDescription(defaultLocale, algo.id)
 ---
 
-<Layout locale="en" title={title} description={description}>
-  <AlgoViz locale="en" initialAlgorithmId={algorithm} client:load />
+<Layout locale={defaultLocale} title={title} description={description}>
+  <AlgoViz locale={defaultLocale} initialAlgorithmId={algo.id} client:load />
 </Layout>
diff --git a/src/pages/[lang]/[algorithm].astro b/src/pages/[lang]/[algorithm].astro
new file mode 100644
index 0000000..bfe75da
--- /dev/null
+++ b/src/pages/[lang]/[algorithm].astro
@@ -0,0 +1,27 @@
+---
+import Layout from "@layouts/Layout.astro"
+import AlgoViz from "@components/AlgoViz"
+import { algorithms } from "@lib/algorithms"
+import { getAlgorithmMetaTitle, getAlgorithmMetaDescription, type Locale, locales, defaultLocale } from "@i18n/translations"
+import type { GetStaticPaths } from "astro"
+
+export const getStaticPaths: GetStaticPaths = () => {
+  return locales
+    .filter((lang) => lang !== defaultLocale)
+    .flatMap((lang) =>
+      algorithms.map((algo) => ({
+        params: { lang, algorithm: algo.id },
+      }))
+    )
+}
+
+const { algorithm, lang } = Astro.params as { algorithm: string, lang: Locale }
+const algo = algorithms.find((a) => a.id === algorithm)!
+
+const title = getAlgorithmMetaTitle(lang, algo.id, algo.name)
+const description = getAlgorithmMetaDescription(lang, algo.id)
+---
+
+<Layout locale={lang} title={title} description={description}>
+  <AlgoViz locale={lang} initialAlgorithmId={algo.id} client:load />
+</Layout>
diff --git a/src/pages/[lang]/index.astro b/src/pages/[lang]/index.astro
new file mode 100644
index 0000000..0351e0c
--- /dev/null
+++ b/src/pages/[lang]/index.astro
@@ -0,0 +1,20 @@
+---
+import Layout from "@layouts/Layout.astro"
+import AlgoViz from "@components/AlgoViz"
+import { locales, defaultLocale } from "@i18n/translations"
+import type { GetStaticPaths } from "astro"
+import type { Locale } from "@i18n/translations"
+
+export const getStaticPaths: GetStaticPaths = () => {
+  return locales
+    .filter((lang) => lang !== defaultLocale)
+    .map((lang) => ({ params: { lang } }))
+}
+
+const { lang } = Astro.params as { lang: Locale }
+
+---
+
+<Layout locale={lang}>
+  <AlgoViz locale={lang} client:load />
+</Layout>
diff --git a/src/pages/es/[algorithm].astro b/src/pages/es/[algorithm].astro
deleted file mode 100644
index 42f969d..0000000
--- a/src/pages/es/[algorithm].astro
+++ /dev/null
@@ -1,23 +0,0 @@
----
-import Layout from "@layouts/Layout.astro"
-import AlgoViz from "@components/AlgoViz"
-import { algorithms } from "@lib/algorithms"
-import { getAlgorithmMetaTitle, getAlgorithmMetaDescription } from "@i18n/translations"
-import type { GetStaticPaths } from "astro"
-
-export const getStaticPaths: GetStaticPaths = () => {
-  return algorithms.map((algo) => ({
-    params: { algorithm: algo.id },
-  }))
-}
-
-const { algorithm } = Astro.params as { algorithm: string }
-const algo = algorithms.find((a) => a.id === algorithm)!
-
-const title = getAlgorithmMetaTitle("es", algo.id, algo.name)
-const description = getAlgorithmMetaDescription("es", algo.id)
----
-
-<Layout locale="es" title={title} description={description}>
-  <AlgoViz locale="es" initialAlgorithmId={algorithm} client:load />
-</Layout>
diff --git a/src/pages/es/index.astro b/src/pages/es/index.astro
deleted file mode 100644
index 8a12b8c..0000000
--- a/src/pages/es/index.astro
+++ /dev/null
@@ -1,8 +0,0 @@
----
-import Layout from "@layouts/Layout.astro"
-import AlgoViz from "@components/AlgoViz"
----
-
-<Layout locale="es">
-  <AlgoViz locale="es" client:load />
-</Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 387af9c..a39de7a 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,8 +1,9 @@
 ---
 import Layout from "@layouts/Layout.astro"
 import AlgoViz from "@components/AlgoViz"
+import { defaultLocale } from "@/i18n/translations"
 ---
 
-<Layout locale="en">
-  <AlgoViz locale="en" client:load />
+<Layout locale={defaultLocale}>
+  <AlgoViz locale={defaultLocale} client:load />
 </Layout>
diff --git a/tsconfig.json b/tsconfig.json
index 7e1bc26..dde00fd 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,6 +3,7 @@
   "include": [".astro/types.d.ts", "**/*"],
   "exclude": ["dist"],
   "compilerOptions": {
+    "ignoreDeprecations": "6.0",
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"],