ruidy/vf-site
1
0
Fork 0
mirror of https://github.com/rjNemo/vf-site synced 2026-06-12 12:06:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(i18n): add language toggle and hreflang alternates; compute sibling FR/EN paths in layout

Browse source
This commit is contained in:
Ruidy 2025-09-05 11:40:41 -04:00
parent a298c119db
commit 6cf3d3c853
1 changed files with 13 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/layouts/BaseLayout.astro
View file

@ -1,6 +1,11 @@
--- ---
import '../styles/global.css'; import '../styles/global.css';
const { title = 'VillaFleurie', lang = 'fr', description = 'Séjours confortables au Gosier pour couples et petites familles' } = Astro.props; const { title = 'VillaFleurie', lang = 'fr', description = 'Séjours confortables au Gosier pour couples et petites familles' } = Astro.props;
const pathname = Astro.url.pathname;
const toFr = (p: string) => p.startsWith('/en/') ? `/fr/${p.slice(4)}` : (p.startsWith('/fr/') ? p : '/fr/');
const toEn = (p: string) => p.startsWith('/fr/') ? `/en/${p.slice(4)}` : (p.startsWith('/en/') ? p : '/en/');
const altFr = toFr(pathname);
const altEn = toEn(pathname);
--- ---
<!doctype html> <!doctype html>
<html lang={lang}> <html lang={lang}>
@ -10,6 +15,9 @@ const { title = 'VillaFleurie', lang = 'fr', description = 'Séjours confortable
<title>{title} · VillaFleurie</title> <title>{title} · VillaFleurie</title>
<meta name="description" content={description} /> <meta name="description" content={description} />
<link rel="icon" href="/assets/images/logo.png" /> <link rel="icon" href="/assets/images/logo.png" />
<link rel="alternate" hreflang="fr" href={altFr} />
<link rel="alternate" hreflang="en" href={altEn} />
<link rel="alternate" hreflang="x-default" href="/fr/" />
</head> </head>
<body class="min-h-screen bg-white text-slate-900"> <body class="min-h-screen bg-white text-slate-900">
<header class="border-b border-slate-200"> <header class="border-b border-slate-200">
@ -24,6 +32,11 @@ const { title = 'VillaFleurie', lang = 'fr', description = 'Séjours confortable
<a href="/fr/acces/" class="text-sm hover:underline">Accès</a> <a href="/fr/acces/" class="text-sm hover:underline">Accès</a>
<a href="/fr/tarifs-disponibilites/" class="text-sm hover:underline">Tarifs</a> <a href="/fr/tarifs-disponibilites/" class="text-sm hover:underline">Tarifs</a>
<a href="/fr/contact/" class="inline-flex items-center rounded-lg bg-brand px-3 py-2 text-white hover:bg-brand-600">Envoyer une demande</a> <a href="/fr/contact/" class="inline-flex items-center rounded-lg bg-brand px-3 py-2 text-white hover:bg-brand-600">Envoyer une demande</a>
<div class="ml-2 flex items-center gap-2 text-xs">
<a href={altFr} class={"hover:underline " + (lang==='fr' ? 'font-semibold text-brand-600' : '')}>FR</a>
<span class="text-slate-400">|</span>
<a href={altEn} class={"hover:underline " + (lang==='en' ? 'font-semibold text-brand-600' : '')}>EN</a>
</div>
</div> </div>
</nav> </nav>
</header> </header>