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:
+28
-13
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user