Ronni Baslund
1686b71411
useLang now seeds from a first-party `dezky-lang` cookie on SSR init and toggleLang writes it (12 months, SameSite=Lax). The chosen language now survives reloads/return visits (fixes the reset-to-Danish quirk) and makes the cookie-policy entry accurate.
66 lines
2.6 KiB
TypeScript
66 lines
2.6 KiB
TypeScript
import { computed } from 'vue'
|
|
import { COPY, type Lang } from '~/utils/landingCopy'
|
|
import { makeTheme } from '~/utils/landingTokens'
|
|
|
|
// Shared landing state. `lang` is a real production toggle (da/en, both fully
|
|
// 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.
|
|
|
|
// 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<Lang>('dz-lang', () => {
|
|
const saved = useCookie<Lang>(LANG_COOKIE).value
|
|
return saved === 'en' ? 'en' : 'da'
|
|
})
|
|
export const useDark = () => useState<boolean>('dz-dark', () => false)
|
|
|
|
export const useTheme = () => {
|
|
const dark = useDark()
|
|
return computed(() => makeTheme(dark.value))
|
|
}
|
|
|
|
export const useCopy = () => {
|
|
const lang = useLang()
|
|
return computed(() => COPY[lang.value === 'en' ? 'en' : 'da'])
|
|
}
|
|
|
|
export function toggleLang() {
|
|
const lang = useLang()
|
|
const next: Lang = lang.value === 'da' ? 'en' : 'da'
|
|
lang.value = next
|
|
// Persist so the choice survives a reload / return visit.
|
|
useCookie<Lang>(LANG_COOKIE, { maxAge: LANG_MAX_AGE, sameSite: 'lax', path: '/' }).value = next
|
|
}
|
|
|
|
// Smooth-scroll to an in-page anchor, accounting for the sticky 72px nav.
|
|
// Non-anchor / placeholder links (#) are ignored.
|
|
export function scrollToAnchor(hash: string) {
|
|
if (!hash || hash === '#' || !hash.startsWith('#')) return
|
|
const el = document.getElementById(hash.slice(1))
|
|
if (!el) return
|
|
const top = el.getBoundingClientRect().top + window.scrollY - 72
|
|
window.scrollTo({ top, behavior: 'smooth' })
|
|
history.replaceState(null, '', hash)
|
|
}
|
|
|
|
// Navigate to a homepage section from anywhere. Footer/Nav links use the form
|
|
// "/#suite": when already on the homepage we smooth-scroll in place; from a
|
|
// sub-page we route home and index.vue scrolls to the hash on mount. Accepts
|
|
// either "/#suite" or "#suite". Returns true if it handled the click (so the
|
|
// caller can preventDefault), false to let normal navigation proceed.
|
|
export function goToSection(href: string, currentPath: string): boolean {
|
|
const hash = href.slice(href.indexOf('#'))
|
|
if (currentPath === '/') {
|
|
scrollToAnchor(hash)
|
|
return true
|
|
}
|
|
navigateTo(`/${hash}`)
|
|
return true
|
|
}
|