Store language preference in localStorage for clean URL persistence

Changes:
- Save selected language to localStorage when user switches languages
- On page load with clean URL: check localStorage and load saved language preference
- If no localStorage preference exists, default to server's language choice
- Update language button active states based on localStorage preference
- Keep URLs clean (no lang parameter added) while maintaining language choice
- If URL has lang parameter, save it to localStorage for consistency

How it works:
1. Visit / (clean) → Shows English (default)
2. Switch to Spanish → Saves 'es' to localStorage, loads Spanish content
3. Click logo (clean URL /) → Page loads, checks localStorage, loads Spanish
4. Language persists across clean URL navigations via localStorage

This solves: Clean URLs + Language persistence
This commit is contained in:
juanatsap
2025-11-09 15:31:03 +00:00
parent 624b6acac8
commit 523e882286
+28 -13
View File
@@ -385,6 +385,9 @@
});
event.target.closest('.selector-btn').classList.add('active');
// Save language preference to localStorage
localStorage.setItem('cv-language', lang);
// Use HTMX to load new content
htmx.ajax('GET', `/cv?lang=${lang}`, {
target: '#cv-content',
@@ -397,15 +400,8 @@
if (urlHadLangParam) {
url.searchParams.set('lang', lang);
window.history.pushState({}, '', url);
// Update logo and title links to include current language
document.getElementById('logoLink').href = `/?lang=${lang}`;
document.getElementById('titleLink').href = `/?lang=${lang}`;
} else {
// Keep URL clean, but update logo/title links to stay clean too
document.getElementById('logoLink').href = '/';
document.getElementById('titleLink').href = '/';
}
// If URL is clean, keep it clean (don't add lang parameter)
// Update html lang attribute
document.documentElement.lang = lang;
@@ -493,11 +489,30 @@
document.addEventListener('DOMContentLoaded', function() {
const paper = document.querySelector('.cv-paper');
// Initialize logo/title links based on whether URL has lang parameter
if (urlHadLangParam) {
const currentLang = new URLSearchParams(window.location.search).get('lang') || 'en';
document.getElementById('logoLink').href = `/?lang=${currentLang}`;
document.getElementById('titleLink').href = `/?lang=${currentLang}`;
// Handle language preference
const urlLang = new URLSearchParams(window.location.search).get('lang');
const savedLang = localStorage.getItem('cv-language');
if (!urlLang && savedLang) {
// URL is clean but we have a saved preference - load that language
htmx.ajax('GET', `/cv?lang=${savedLang}`, {
target: '#cv-content',
swap: 'innerHTML swap:0ms settle:0ms'
});
// Update button states
document.querySelectorAll('.language-selector .selector-btn').forEach(btn => {
btn.classList.remove('active');
if (btn.getAttribute('onclick').includes(savedLang)) {
btn.classList.add('active');
}
});
// Update html lang attribute
document.documentElement.lang = savedLang;
} else if (urlLang) {
// Save URL language to localStorage
localStorage.setItem('cv-language', urlLang);
}
// Restore CV length preference