diff --git a/apps/website/composables/useLanding.ts b/apps/website/composables/useLanding.ts index a671e7a..6316440 100644 --- a/apps/website/composables/useLanding.ts +++ b/apps/website/composables/useLanding.ts @@ -6,7 +6,18 @@ import { makeTheme } from '~/utils/landingTokens' // translated). `dark` is kept as machinery from the design's Tweaks panel but // defaults to light — the primary theme the user landed on — and no toggle is // surfaced. Flip the default (or add a control) to enable dark later. -export const useLang = () => useState('dz-lang', () => 'da') + +// Language choice persists in the first-party `dezky-lang` cookie (see the +// cookie policy). useState stays the reactive source of truth so a toggle in +// one component updates the whole page live; we seed it from the cookie on SSR +// init (so a reload keeps the chosen language) and write the cookie on change. +const LANG_COOKIE = 'dezky-lang' +const LANG_MAX_AGE = 60 * 60 * 24 * 365 // 12 months + +export const useLang = () => useState('dz-lang', () => { + const saved = useCookie(LANG_COOKIE).value + return saved === 'en' ? 'en' : 'da' +}) export const useDark = () => useState('dz-dark', () => false) export const useTheme = () => { @@ -21,7 +32,10 @@ export const useCopy = () => { export function toggleLang() { const lang = useLang() - lang.value = lang.value === 'da' ? 'en' : 'da' + const next: Lang = lang.value === 'da' ? 'en' : 'da' + lang.value = next + // Persist so the choice survives a reload / return visit. + useCookie(LANG_COOKIE, { maxAge: LANG_MAX_AGE, sameSite: 'lax', path: '/' }).value = next } // Smooth-scroll to an in-page anchor, accounting for the sticky 72px nav.