Merge pull request #135 from zetxek/133-bug-lang-attribute-in-html-do…

…esnt-change-with-translations [bugfix] lang attribute in html doesnt change with translations
zetxek · Jan 6, 2025 · 9589e4e · 9589e4e
2 parents 8f91bb4 + e96d4d1
commit 9589e4e
Show file tree

Hide file tree

Showing 17 changed files with 160 additions and 16 deletions.
diff --git a/exampleSite/content/experience/job-1.es.md b/exampleSite/content/experience/job-1.es.md
@@ -0,0 +1,12 @@
+---
+date: 2022-01-01T00:00:00+01:00
+draft: false
+title: "Trabajo #1"
+jobTitle: "Becario Junior"
+company: "Internet Affairs Inc."
+location: "Stavanger, Noruega"
+duration: "2022-2024"
+---
+### Arreglando el mundo, un byte a la vez
+
+El comienzo de una gran carrera.
diff --git a/exampleSite/content/experience/job-2.es.md b/exampleSite/content/experience/job-2.es.md
@@ -0,0 +1,12 @@
+---
+date: 2023-01-01T00:00:00+01:00
+draft: false
+title: "Trabajo #2"
+jobTitle: "Becario Jefe"
+company: "Internet Affairs Inc."
+location: "Stavanger, Noruega"
+duration: "2023-2024"
+---
+### Arreglando el mundo, un byte a la vez
+
+Continuando la misión.
diff --git a/exampleSite/content/experience/job-2.fr.md b/exampleSite/content/experience/job-2.fr.md
@@ -0,0 +1,12 @@
+---
+date: 2023-01-01T00:00:00+01:00
+draft: false
+title: "Poste #2"
+jobTitle: "Stagiaire en Chef"
+company: "Internet Affairs Inc."
+location: "Stavanger, Norvège"
+duration: "2023-2024"
+---
+### Réparer le monde, un octet à la fois
+
+Poursuivant la quête.
diff --git a/exampleSite/content/experience/job-3.es copy.md b/exampleSite/content/experience/job-3.es copy.md
@@ -0,0 +1,12 @@
+---
+date: 2024-01-01T00:00:00+01:00
+draft: false
+title: "Trabajo #3"
+jobTitle: "Director Ejecutivo"
+company: "Internet Affairs Inc."
+location: "Stavanger, Noruega"
+duration: "2024-ahora"
+---
+### Arreglando el mundo, un byte a la vez
+
+¡Adquisición hostil - ¿quién es el jefe ahora?!
diff --git a/exampleSite/content/experience/job-3.fr.md b/exampleSite/content/experience/job-3.fr.md
@@ -0,0 +1,12 @@
+---
+date: 2024-01-01T00:00:00+01:00
+draft: false
+title: "Poste #3"
+jobTitle: "PDG"
+company: "Internet Affairs Inc."
+location: "Stavanger, Norvège"
+duration: "2024-maintenant"
+---
+### Réparer le monde, un octet à la fois
+
+Prise de contrôle hostile - qui est le patron maintenant !
diff --git a/i18n/en.yaml b/i18n/en.yaml
@@ -180,3 +180,11 @@
 
 - id: "continue_reading"
   translation: "Continue reading"
+
+## 404 Page
+- id: "404_title"
+  translation: "Page not found"
+- id: "404_description"  
+  translation: "Sorry, but the page you were looking for could not be found."
+- id: "404_button"
+  translation: "Back to homepage"
diff --git a/i18n/es.yaml b/i18n/es.yaml
@@ -167,3 +167,11 @@
 
 - id: "continue_reading"
   translation: "Continuar leyendo"
+
+## 404 Page
+- id: "404_title"  
+  translation: "Página no encontrada"
+- id: "404_description"
+  translation: "Lo sentimos, pero la página que buscabas no pudo ser encontrada."
+- id: "404_button"
+  translation: "Volver al inicio"
diff --git a/i18n/fr.yaml b/i18n/fr.yaml
@@ -172,3 +172,11 @@
 
 - id: "continue_reading"
   translation: "Continuer à lire"
+
+## 404 Page
+- id: "404_title"
+  translation: "Page non trouvée"
+- id: "404_description"
+  translation: "Désolé, mais la page que vous recherchez est introuvable."
+- id: "404_button"
+  translation: "Retour à l'accueil"
diff --git a/layouts/404.html b/layouts/404.html
@@ -1,7 +1,6 @@
 <!-- inject:../components/baseHead/baseHeadStart.html -->
 <!DOCTYPE html>
-<html lang="en">
-
+<html lang="{{- $.Lang }}">
 <head>
 
     {{ partial "head.html" . }}
@@ -17,11 +16,11 @@
     <section class="section four-o-four">
       <div class="container text-center">
         <h1 class="display-1">404</h1>
-        <h4>Page not found</h4>
+        <h4>{{ i18n "404_title" }}</h4>
         <p>
-          Sorry, but the page you were looking for could not be found.
+          {{ i18n "404_description" }}
         </p>
-        <a href="{{ .Site.BaseURL | absURL }}" class="btn btn-primary">Back to homepage</a>
+        <a href="{{ .Site.BaseURL | absURL }}" class="btn btn-primary">{{ i18n "404_button" }}</a>
       </div>
     </section>
 

diff --git a/layouts/_default/list.html b/layouts/_default/list.html
@@ -1,6 +1,6 @@
 <!-- inject:../components/baseHead/baseHeadStart.html -->
 <!DOCTYPE html>
-<html lang="en">
+<html lang="{{- $.Lang }}">
 
 <head>
   {{ partial "head.html" . }} {{ partial "head_custom.html" . }}

diff --git a/layouts/blog/list.html b/layouts/blog/list.html
@@ -1,6 +1,6 @@
 <!-- inject:../components/baseHead/baseHeadStart.html -->
 <!DOCTYPE html>
-<html lang="en">
+<html lang="{{- $.Lang }}">
 
 <head>
   {{ partial "head.html" . }} {{ partial "head_custom.html" . }}

diff --git a/layouts/blog/single.html b/layouts/blog/single.html
@@ -1,6 +1,6 @@
 <!-- inject:../components/baseHead/baseHeadStart.html -->
 <!DOCTYPE html>
-<html lang="en">
+<html lang="{{- $.Lang }}">
   <head>
     {{ partial "head.html" . }} {{ partial "head_custom.html" . }}
   </head>

diff --git a/layouts/experience/list.html b/layouts/experience/list.html
@@ -1,6 +1,6 @@
 <!-- inject:../components/baseHead/baseHeadStart.html -->
 <!DOCTYPE html>
-<html lang="en">
+<html lang="{{- $.Lang }}">
 
 <head>
   {{ partial "head.html" . }} {{ partial "head_custom.html" . }}

diff --git a/layouts/experience/single.html b/layouts/experience/single.html
@@ -1,6 +1,6 @@
 <!-- inject:../components/baseHead/baseHeadStart.html -->
 <!DOCTYPE html>
-<html lang="en">
+<html lang="{{- $.Lang }}">
   <head>
     {{ partial "head.html" . }} {{ partial "head_custom.html" . }}
   </head>

diff --git a/layouts/index.html b/layouts/index.html
@@ -1,13 +1,11 @@
 <!-- inject:../components/baseHead/baseHeadStart.html -->
 <!DOCTYPE html>
-<html 
-	lang="en" 
+<html lang="{{- $.Lang }}" 
 	{{- if .Site.Params.colorTheme.auto.disable }}
 	data-bs-theme="{{ .Site.Params.colorTheme.forced.theme }}"
 	theme-forced="true"
 	theme-auto="false"
-	{{- end }}
->
+	{{- end }}>
 
 <head>
 

diff --git a/layouts/partials/experience.html b/layouts/partials/experience.html
@@ -17,7 +17,7 @@
                 {{ end }}
                 {{ range first $totalCount (sort $xp "Date" "desc") }}
                 <div class="experience">
-                    <a href="{{.Permalink}}">
+                    <a href="{{.Permalink | relLangURL }}">
                         {{/* The context, ".", is now each one of the pages as it goes
                         through the loop */}}
                         <div class="experience__date">{{ .Params.duration }}</div>
@@ -31,7 +31,7 @@
                 <div class="all-experience-container">
                     {{ $xpExtra := sub $xpCount $totalCount }}
                     <em>And {{ $xpExtra }} more</em><br />
-                    <a href="{{ absURL "experience" }} " title=" See additional {{ $xpExtra }} experience items"
+                    <a href="{{ absURL "experience" | relLangURL }} " title=" See additional {{ $xpExtra }} experience items"
                         class="btn btn-primary btn-all-experience">
                         <i class="{{ .Site.Data.homepage.experience.button3.icon }}"></i>
                         {{ i18n "experience_button3" }}

diff --git a/tests/e2e/language-switch.spec.ts b/tests/e2e/language-switch.spec.ts
@@ -0,0 +1,63 @@
+import { test, expect } from '@playwright/test';
+
+const BASE_URL = 'http://localhost:1313';
+
+test.describe('Language switching functionality', () => {
+  test('switches between languages and verifies lang attribute', async ({ page }) => {
+    // Go to homepage
+    await page.goto(BASE_URL);
+
+    // Verify initial English state
+    await expect(page.locator('html')).toHaveAttribute('lang', 'en');
+    await expect(page.getByText('Language')).toBeVisible();
+    await expect(page.getByText('Experience').first()).toBeVisible();
+
+    // Switch to Spanish
+    await page.locator('nav#footer-language-selector button').click();
+    await page.getByText('Español').click();
+
+    // Verify Spanish
+    await expect(page.locator('html')).toHaveAttribute('lang', 'es');
+    await expect(page.getByText('Idioma')).toBeVisible();
+    await expect(page.getByText('Experiencia').first()).toBeVisible();
+
+    // Switch to French
+    await page.locator('nav#footer-language-selector button').click();
+    await page.getByText('Français').click();
+
+    // Verify French
+    await expect(page.locator('html')).toHaveAttribute('lang', 'fr');
+    await expect(page.getByText('Langue')).toBeVisible();
+    await expect(page.getByText('Expérience').first()).toBeVisible();
+  });
+
+  test('maintains language when navigating to experience pages', async ({ page }) => {
+    // Start in Spanish
+    await page.goto(`${BASE_URL}/es/`);
+    await expect(page.locator('html')).toHaveAttribute('lang', 'es');
+
+    // Click on an experience link
+    await page.getByText('Ver todo').click();
+
+    // Verify URL and language maintained
+    await expect(page).toHaveURL(`${BASE_URL}/es/experience/`);
+    await expect(page.locator('html')).toHaveAttribute('lang', 'es');
+    await expect(page.getByText('Experiencia').first()).toBeVisible();
+  });
+
+  test('preserves translations across page types', async ({ page }) => {
+    // Go to French experience page
+    await page.goto(`${BASE_URL}/fr/experience`);
+
+    // Verify French state
+    await expect(page.locator('html')).toHaveAttribute('lang', 'fr');
+    await expect(page.getByText('Expérience').first()).toBeVisible();
+
+    // Navigate to home
+    await page.getByText('🏠 HOME').click();
+
+    // Verify language maintained
+    await expect(page.locator('html')).toHaveAttribute('lang', 'fr');
+    await expect(page.getByText('Langue').first()).toBeVisible();
+  });
+});