feat(website): bilingual i18n (English default, Danish at /da) + SEO

Add @nuxtjs/i18n: English is the default locale (no prefix), Danish lives under /da (prefix_except_default). Both server-rendered and indexed with hreflang alternates + per-locale canonical (useLocaleHead in app.vue). First-visit browser language is auto-detected and remembered in the i18n_redirected cookie (redirectOn root). - Keep the hand-authored COPY object; useLang/useCopy now read the i18n locale; useLocalizeHref/useLangToggle added. Every internal link is localized so navigation stays in-locale. - Clear segmented EN|DA language switcher (active segment filled) replacing the ambiguous "en · da" pill. - SEO: useSeoMeta defaults are locale-aware; og:image switches per locale (English / Danish share card); favicon links; robots.txt + sitemap.xml; env-aware siteUrl/baseUrl (localhost in dev, dezky.eu in prod). - Update the cookie policy (dezky-lang -> i18n_redirected). - Gate the Traefik wss:443 HMR behind DEZKY_TRAEFIK so localhost dev/DevTools connect over plain ws (fixes the DevTools disconnect loop).
2026-06-06 20:46:26 +02:00
parent 3f0298e011
commit 7bee161ac1
24 changed files with 1812 additions and 107 deletions
@@ -1,3 +1,47 @@
+<script setup lang="ts">
+// Site-wide SEO. @nuxtjs/i18n (useLocaleHead) owns <html lang>/dir, hreflang
+// alternates, canonical and og:url / og:locale per locale. useSeoMeta adds the
+// content cards (title/description/image, Twitter), locale-aware. Pages still
+// override their own title/description via useHead.
+const { locale } = useI18n()
+const i18nHead = useLocaleHead()
+const site = (useRuntimeConfig().public.siteUrl as string).replace(/\/$/, '')
+
+const seo = computed(() => locale.value === 'da'
+  ? {
+      title: 'dezky — din digitale arbejdsplads, hostet i EU',
+      desc: 'Mail, filer, video, chat og login — samlet i én suite, hostet i EU og bygget på åbne standarder.',
+      img: `${site}/og-image-da.png`,
+    }
+  : {
+      title: 'dezky — your digital workplace, hosted in the EU',
+      desc: 'Mail, files, video, chat and sign-in — one suite, hosted in the EU and built on open standards.',
+      img: `${site}/og-image.png`,
+    })
+
+// html lang/dir + hreflang + canonical + og:url/og:locale from the i18n module.
+useHead(() => ({
+  htmlAttrs: i18nHead.value.htmlAttrs,
+  link: i18nHead.value.link,
+  meta: i18nHead.value.meta,
+}))
+
+useSeoMeta({
+  description: () => seo.value.desc,
+  ogType: 'website',
+  ogSiteName: 'dezky',
+  ogTitle: () => seo.value.title,
+  ogDescription: () => seo.value.desc,
+  ogImage: () => [{ url: seo.value.img, width: 1200, height: 630, type: 'image/png' }],
+  twitterCard: 'summary_large_image',
+  twitterTitle: () => seo.value.title,
+  twitterDescription: () => seo.value.desc,
+  twitterImage: () => seo.value.img,
+})
+
+useHead({ meta: [{ name: 'robots', content: 'index, follow' }] })
+</script>
+
 <template>
  <NuxtLayout>
    <NuxtPage />
@@ -7,11 +7,12 @@ import { useCopy } from '~/composables/useLanding'
 defineProps<{ title: string, body: string }>()

 const copy = useCopy()
+const localePath = useLocalePath()
 </script>

 <template>
  <LandingPageHeader :label="copy.pages.comingSoonKicker" :title="title" :intro="body" />
  <LandingContainer pad="clamp(32px, 5vw, 48px) clamp(20px, 5vw, 64px) clamp(56px, 8vw, 160px)">
-    <LandingBtn variant="primary" size="lg" @click="navigateTo('/demo')">{{ copy.pages.ctaDemo }} →</LandingBtn>
+    <LandingBtn variant="primary" size="lg" @click="navigateTo(localePath('/demo'))">{{ copy.pages.ctaDemo }} →</LandingBtn>
  </LandingContainer>
 </template>
@@ -4,6 +4,7 @@
 import { C } from '~/utils/landingTokens'
 import { useCopy } from '~/composables/useLanding'
 const copy = useCopy()
+const localePath = useLocalePath()
 </script>

 <template>
@@ -20,7 +21,7 @@ const copy = useCopy()
      </h2>
      <div :style="{ marginTop: '28px', maxWidth: 'min(100%, 520px)', fontFamily: '\'Inter\', sans-serif', fontSize: '19px', color: 'rgba(244,243,238,0.7)' }">{{ copy.finalCta.sub }}</div>
      <div :style="{ marginTop: '40px' }">
-        <button @click="navigateTo('/demo')" :style="{
+        <button @click="navigateTo(localePath('/demo'))" :style="{
          background: C.signal, color: C.carbon, border: 'none',
          padding: '20px 32px', fontFamily: '\'Inter\', sans-serif',
          fontSize: '16px', fontWeight: 600, borderRadius: '4px', cursor: 'pointer',
@@ -5,16 +5,18 @@
 // home + scroll from a sub-page.
 import { useRoute } from 'vue-router'
 import { C } from '~/utils/landingTokens'
-import { useTheme, useCopy, scrollToAnchor } from '~/composables/useLanding'
+import { useTheme, useCopy, useLocalizeHref, scrollToAnchor } from '~/composables/useLanding'
 const t = useTheme()
 const copy = useCopy()
 const route = useRoute()
+const loc = useLocalizeHref()
+const localePath = useLocalePath()

 function onLink(e: MouseEvent, href: string) {
  // In-page section link ("/#suite"): smooth-scroll in place when already on
-  // the homepage. Off-page, let NuxtLink route to "/#suite" — index.vue scrolls
-  // to the hash on mount.
-  if (href.includes('#') && route.path === '/') {
+  // the current locale's homepage. Off-page, let NuxtLink route to the
+  // localized home + hash — index.vue scrolls to the hash on mount.
+  if (href.includes('#') && route.path === localePath('/')) {
    e.preventDefault()
    scrollToAnchor(href.slice(href.indexOf('#')))
  }
@@ -41,7 +43,7 @@ function onLink(e: MouseEvent, href: string) {
            <div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: 'rgba(10,10,10,0.45)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: '18px' }">{{ col[0] }}</div>
            <div :style="{ display: 'flex', flexDirection: 'column', gap: '12px' }">
              <NuxtLink
-                v-for="(link, j) in col[1]" :key="j" :to="link[1]"
+                v-for="(link, j) in col[1]" :key="j" :to="loc(link[1])"
                :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '14px', color: 'rgba(10,10,10,0.78)' }"
                @click="onLink($event, link[1])"
              >{{ link[0] }}</NuxtLink>
@@ -8,6 +8,7 @@ import { useTheme, useCopy } from '~/composables/useLanding'

 const t = useTheme()
 const copy = useCopy()
+const localePath = useLocalePath()

 // Variant A is the production default the user landed on.
 const headline = computed(() => copy.value.hero.headlineA)
@@ -46,7 +47,7 @@ const brush = {
      </div>

      <div :style="{ display: 'flex', gap: '12px', marginTop: '40px', flexWrap: 'wrap' }">
-        <LandingBtn variant="primary" size="lg" @click="navigateTo('/demo')">{{ copy.hero.cta }} →</LandingBtn>
+        <LandingBtn variant="primary" size="lg" @click="navigateTo(localePath('/demo'))">{{ copy.hero.cta }} →</LandingBtn>
        <LandingBtn variant="secondary" size="lg">{{ copy.hero.sub_cta }}</LandingBtn>
      </div>

@@ -4,12 +4,15 @@
 import { computed, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { APP_URL } from '~/utils/landingTokens'
-import { useTheme, useCopy, useLang, toggleLang, scrollToAnchor } from '~/composables/useLanding'
+import { useTheme, useCopy, useLang, useLocalizeHref, scrollToAnchor } from '~/composables/useLanding'

 const t = useTheme()
 const copy = useCopy()
 const lang = useLang()
 const route = useRoute()
+const loc = useLocalizeHref()
+const localePath = useLocalePath()
+const switchLocalePath = useSwitchLocalePath()

 const mobileOpen = ref(false)

@@ -22,15 +25,16 @@ const items = computed(() => [
 ])

 function onLogo(e: MouseEvent) {
-  // On the homepage, scroll to top in place; from a sub-page let NuxtLink route home.
-  if (route.path === '/') {
+  // On the homepage (current locale), scroll to top in place; from a sub-page
+  // let NuxtLink route home.
+  if (route.path === localePath('/')) {
    e.preventDefault()
    window.scrollTo({ top: 0, behavior: 'smooth' })
  }
 }

 function onNav(e: MouseEvent, href: string) {
-  if (href.includes('#') && route.path === '/') {
+  if (href.includes('#') && route.path === localePath('/')) {
    e.preventDefault()
    scrollToAnchor(href.slice(href.indexOf('#')))
  }
@@ -41,6 +45,24 @@ function onMobileLink(e: MouseEvent, href: string) {
  onNav(e, href)
  mobileOpen.value = false
 }
+
+// Segmented language switcher: pick a locale (no-op if already active) and
+// close the mobile menu. The active segment is filled so it's obvious which
+// language you're on.
+function switchTo(code: 'en' | 'da') {
+  navigateTo(switchLocalePath(code))
+  mobileOpen.value = false
+}
+function segStyle(code: 'en' | 'da') {
+  const active = lang.value === code
+  return {
+    padding: '5px 9px', border: 'none', cursor: 'pointer', borderRadius: '3px',
+    fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', letterSpacing: '0.08em',
+    background: active ? t.value.fg : 'transparent',
+    color: active ? t.value.bg : t.value.fgMuted,
+    fontWeight: active ? 700 : 500,
+  }
+}
 </script>

 <template>
@@ -55,7 +77,7 @@ function onMobileLink(e: MouseEvent, href: string) {
      padding: `18px clamp(20px, 5vw, 64px)`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    }">
-      <NuxtLink to="/" :style="{ display: 'flex', alignItems: 'center', gap: '12px', cursor: 'pointer' }" @click="onLogo">
+      <NuxtLink :to="loc('/')" :style="{ display: 'flex', alignItems: 'center', gap: '12px', cursor: 'pointer' }" @click="onLogo">
        <BrandNodeMark :size="32" :fg="t.fg" :accent="t.signal" />
        <div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontWeight: 600, fontSize: '16px', letterSpacing: '-0.02em', color: t.fg }">dezky</div>
      </NuxtLink>
@@ -63,7 +85,7 @@ function onMobileLink(e: MouseEvent, href: string) {
      <!-- Desktop nav cluster — hidden on mobile via scoped CSS -->
      <nav class="nav-desktop" :style="{ display: 'flex', alignItems: 'center', gap: '36px' }">
        <NuxtLink
-          v-for="(it, i) in items" :key="i" :to="it.href"
+          v-for="(it, i) in items" :key="i" :to="loc(it.href)"
          :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '14px', color: t.fgMuted, letterSpacing: '-0.005em' }"
          @click="onNav($event, it.href)"
        >{{ it.label }}</NuxtLink>
@@ -71,17 +93,12 @@ function onMobileLink(e: MouseEvent, href: string) {

      <!-- Desktop CTA cluster — hidden on mobile via scoped CSS -->
      <div class="nav-desktop" :style="{ display: 'flex', alignItems: 'center', gap: '14px' }">
-        <button
-          :style="{
-            background: 'transparent', border: `1px solid ${t.border}`,
-            color: t.fgMuted, fontSize: '11px', padding: '6px 10px', borderRadius: '4px',
-            fontFamily: '\'JetBrains Mono\', monospace', letterSpacing: '0.06em', textTransform: 'uppercase',
-            whiteSpace: 'nowrap',
-          }"
-          @click="toggleLang()"
-        >{{ lang === 'da' ? 'da · en' : 'en · da' }}</button>
+        <div :style="{ display: 'inline-flex', alignItems: 'center', gap: '2px', border: `1px solid ${t.border}`, borderRadius: '5px', padding: '2px' }">
+          <button :style="segStyle('en')" @click="switchTo('en')">EN</button>
+          <button :style="segStyle('da')" @click="switchTo('da')">DA</button>
+        </div>
        <a :href="APP_URL" :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '14px', color: t.fgMuted }">{{ copy.nav.login }}</a>
-        <LandingBtn variant="primary" @click="navigateTo('/demo')">{{ copy.nav.cta }} →</LandingBtn>
+        <LandingBtn variant="primary" @click="navigateTo(localePath('/demo'))">{{ copy.nav.cta }} →</LandingBtn>
      </div>

      <!-- Hamburger — visible only on mobile via scoped CSS -->
@@ -141,21 +158,16 @@ function onMobileLink(e: MouseEvent, href: string) {
      >{{ it.label }}</NuxtLink>

      <div :style="{ display: 'flex', alignItems: 'center', gap: '14px', paddingTop: '24px', flexWrap: 'wrap' }">
-        <button
-          :style="{
-            background: 'transparent', border: `1px solid ${t.border}`,
-            color: t.fgMuted, fontSize: '11px', padding: '6px 10px', borderRadius: '4px',
-            fontFamily: '\'JetBrains Mono\', monospace', letterSpacing: '0.06em', textTransform: 'uppercase',
-            whiteSpace: 'nowrap',
-          }"
-          @click="toggleLang()"
-        >{{ lang === 'da' ? 'da · en' : 'en · da' }}</button>
+        <div :style="{ display: 'inline-flex', alignItems: 'center', gap: '2px', border: `1px solid ${t.border}`, borderRadius: '5px', padding: '2px' }">
+          <button :style="segStyle('en')" @click="switchTo('en')">EN</button>
+          <button :style="segStyle('da')" @click="switchTo('da')">DA</button>
+        </div>
        <a
          :href="APP_URL"
          :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '14px', color: t.fgMuted }"
          @click="mobileOpen = false"
        >{{ copy.nav.login }}</a>
-        <LandingBtn variant="primary" @click="() => { navigateTo('/demo'); mobileOpen = false }">{{ copy.nav.cta }} →</LandingBtn>
+        <LandingBtn variant="primary" @click="() => { navigateTo(localePath('/demo')); mobileOpen = false }">{{ copy.nav.cta }} →</LandingBtn>
      </div>
    </div>
  </header>
@@ -8,12 +8,13 @@ defineProps<{ label: string, title: string, intro?: string }>()

 const t = useTheme()
 const copy = useCopy()
+const localePath = useLocalePath()
 </script>

 <template>
  <LandingContainer pad="clamp(56px, 8vw, 120px) clamp(20px, 5vw, 64px) 0">
    <NuxtLink
-      to="/"
+      :to="localePath('/')"
      :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '12px', color: t.fgMuted, letterSpacing: '0.04em', display: 'inline-flex', alignItems: 'center', gap: '8px' }"
    >← {{ copy.pages.back }}</NuxtLink>

@@ -4,6 +4,7 @@
 import { useTheme, useCopy } from '~/composables/useLanding'
 const t = useTheme()
 const copy = useCopy()
+const localePath = useLocalePath()
 </script>

 <template>
@@ -17,7 +18,7 @@ const copy = useCopy()
            <p :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '20px', lineHeight: 1.5, maxWidth: '640px', color: t.fgMuted, margin: 0, textWrap: 'pretty' }">{{ copy.pricing.lede }}</p>
          </div>
          <div :style="{ marginTop: '36px', display: 'flex', alignItems: 'center', gap: '16px' }">
-            <LandingBtn variant="primary" size="lg" @click="navigateTo('/demo')">{{ copy.pricing.cta }} →</LandingBtn>
+            <LandingBtn variant="primary" size="lg" @click="navigateTo(localePath('/demo'))">{{ copy.pricing.cta }} →</LandingBtn>
          </div>
        </div>
        <div :style="{ background: t.surface, border: `1px solid ${t.border}`, borderRadius: '6px', padding: '36px 36px' }">
@@ -38,7 +38,9 @@ onMounted(() => {
  const parent = frame.value?.parentElement
  if (parent && typeof ResizeObserver !== 'undefined') {
    ro = new ResizeObserver(recompute)
-    ro.observe(parent)
+    // Cast via unknown: a dependency pulls a second DOM lib so HTMLElement and
+    // ResizeObserver's Element param resolve to non-overlapping types here.
+    ro.observe(parent as unknown as Element)
  }
 })
 onBeforeUnmount(() => ro?.disconnect())
@@ -6,6 +6,7 @@ import { useTheme, useCopy, useDark } from '~/composables/useLanding'

 const t = useTheme()
 const copy = useCopy()
+const localePath = useLocalePath()
 const dark = useDark()

 const sectionBg = computed(() => (dark.value ? '#1A1A17' : '#EFEDE3'))
@@ -45,7 +46,7 @@ const partnerCards = computed(() =>
            </div>
          </div>
          <div :style="{ marginTop: '40px' }">
-            <LandingBtn variant="secondary" size="lg" @click="navigateTo('/partners')">{{ copy.whitelabel.cta }} →</LandingBtn>
+            <LandingBtn variant="secondary" size="lg" @click="navigateTo(localePath('/partners'))">{{ copy.whitelabel.cta }} →</LandingBtn>
          </div>
        </div>
        <div :style="{ display: 'flex', flexDirection: 'column', gap: '16px' }">
@@ -2,22 +2,14 @@ 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'
-})
+// Locale is owned by @nuxtjs/i18n (URL-based: English at /, Danish at /da, with
+// cookie-remembered browser detection). useLang exposes it as the 'da' | 'en'
+// the COPY object expects; useCopy maps to the matching translations. `dark` is
+// unused machinery from the design's Tweaks panel (the site is light-only).
+export const useLang = () => {
+  const { locale } = useI18n()
+  return computed<Lang>(() => (locale.value === 'da' ? 'da' : 'en'))
+}
 export const useDark = () => useState<boolean>('dz-dark', () => false)

 export const useTheme = () => {
@@ -26,16 +18,31 @@ export const useTheme = () => {
 }

 export const useCopy = () => {
-  const lang = useLang()
-  return computed(() => COPY[lang.value === 'en' ? 'en' : 'da'])
+  const { locale } = useI18n()
+  return computed(() => COPY[locale.value === 'da' ? 'da' : 'en'])
 }

-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
+// Setup-only. Returns a click handler that switches to the other locale's
+// localized route (flips the URL, e.g. / <-> /da).
+export function useLangToggle() {
+  const { locale } = useI18n()
+  const switchLocalePath = useSwitchLocalePath()
+  return () => navigateTo(switchLocalePath(locale.value === 'da' ? 'en' : 'da'))
+}
+
+// Setup-only. Localizes an internal href, preserving any #hash. Page links get
+// the locale prefix (/about -> /da/about in Danish); section anchors resolve
+// against the current locale's home (/#suite -> /da#suite). Bare #hash returns
+// unchanged (same-page anchor).
+export function useLocalizeHref() {
+  const localePath = useLocalePath()
+  return (href: string) => {
+    if (href.startsWith('#')) return href
+    const i = href.indexOf('#')
+    const path = i === -1 ? href : href.slice(0, i)
+    const hash = i === -1 ? '' : href.slice(i)
+    return localePath(path || '/') + hash
+  }
 }

 // Smooth-scroll to an in-page anchor, accounting for the sticky 72px nav.
@@ -48,18 +55,3 @@ export function scrollToAnchor(hash: string) {
  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
-}
@@ -0,0 +1,10 @@
+// Minimal vue-i18n config. The marketing site keeps its translations in the
+// hand-authored COPY object (utils/landingCopy.ts) and reads them via
+// useCopy(); @nuxtjs/i18n is used only for locale routing + SEO (hreflang,
+// canonical, <html lang>), so the message catalogues stay empty.
+export default defineI18nConfig(() => ({
+  legacy: false,
+  locale: 'en',
+  fallbackLocale: 'en',
+  messages: { en: {}, da: {} },
+}))
@@ -2,12 +2,10 @@
 // Sub-page shell: same Nav + Footer chrome as the landing page, with a content
 // slot in between. Used by every footer-linked page so they share the header,
 // footer, theme and language toggle.
-import { useTheme, useLang } from '~/composables/useLanding'
+import { useTheme } from '~/composables/useLanding'

 const t = useTheme()
-const lang = useLang()
-
-useHead({ htmlAttrs: { lang } })
+// <html lang> is set globally by @nuxtjs/i18n (useLocaleHead in app.vue).
 </script>

 <template>
@@ -6,10 +6,15 @@
 // the Docker app stack. Locally it runs behind Traefik at dezky.local /
 // www.dezky.local with the same mkcert TLS as the rest of the platform.

+const siteUrl = process.env.NUXT_PUBLIC_SITE_URL
+  || (process.env.NODE_ENV === 'production' ? 'https://dezky.eu' : 'http://localhost:3000')
+
 export default defineNuxtConfig({
  compatibilityDate: '2026-01-01',
  devtools: { enabled: true },

+  modules: ['@nuxtjs/i18n'],
+
  css: ['~/assets/styles/tokens.css', '~/assets/styles/base.css'],

  // Auto-import from the shared packages/ui workspace in addition to the
@@ -25,10 +30,12 @@ export default defineNuxtConfig({

  app: {
    head: {
-      // Marketing site is light by default (the design's primary theme). The
-      // page sets <html lang> reactively based on the da/en toggle.
-      htmlAttrs: { lang: 'da' },
+      // <html lang>/dir + hreflang alternates are managed by @nuxtjs/i18n
+      // (useLocaleHead in app.vue). Static favicons + theme-color live here.
      link: [
+        { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
+        { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32.png' },
+        { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' },
        { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
        { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
        {
@@ -36,6 +43,41 @@ export default defineNuxtConfig({
          href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap',
        },
      ],
+      // theme-color + favicons are static; the OG/Twitter/canonical SEO is set
+      // in app.vue via useSeoMeta so og:url/og:image are absolute against the
+      // env-aware siteUrl (runtimeConfig below) and og:url is per-route.
+      meta: [
+        { name: 'theme-color', content: '#FAFAF7' },
+      ],
+    },
+  },
+
+  // Public site URL used to build absolute canonical / OG / sitemap URLs.
+  // Defaults to localhost in dev (so local share-image previews work) and
+  // the production domain otherwise; override with NUXT_PUBLIC_SITE_URL.
+  runtimeConfig: {
+    public: {
+      siteUrl,
+    },
+  },
+
+  // Bilingual: English is the default (no prefix); Danish lives under /da.
+  // Both are server-rendered and indexed with hreflang alternates. First-time
+  // visitors are auto-detected (cookie-remembered) on the root path only.
+  i18n: {
+    defaultLocale: 'en',
+    strategy: 'prefix_except_default',
+    baseUrl: siteUrl,
+    locales: [
+      { code: 'en', language: 'en', name: 'English' },
+      { code: 'da', language: 'da-DK', name: 'Dansk' },
+    ],
+    detectBrowserLanguage: {
+      useCookie: true,
+      cookieKey: 'i18n_redirected',
+      redirectOn: 'root',
+      fallbackLocale: 'en',
+      alwaysRedirect: false,
    },
  },

@@ -44,10 +86,12 @@ export default defineNuxtConfig({
      // Vite 7 added a strict host check; allow the Traefik-fronted hostnames
      // this site is served on in dev.
      allowedHosts: ['dezky.local', 'www.dezky.local'],
-      hmr: {
-        protocol: 'wss',
-        clientPort: 443,
-      },
+      // HMR/DevTools websocket. Default (localhost:3000 dev) lets Vite infer
+      // ws on the page host/port. When served behind Traefik TLS at
+      // dezky.local, set DEZKY_TRAEFIK=1 so the client connects via wss:443.
+      hmr: process.env.DEZKY_TRAEFIK === '1'
+        ? { protocol: 'wss', clientPort: 443 }
+        : undefined,
    },
  },
 })
@@ -12,6 +12,7 @@
    "lint": "eslint ."
  },
  "dependencies": {
+    "@nuxtjs/i18n": "^10.4.0",
    "nuxt": "^4.4.7",
    "vue": "^3.5.0",
    "vue-router": "^4.4.0"
@@ -5,6 +5,7 @@ definePageMeta({ layout: 'page' })

 const t = useTheme()
 const copy = useCopy()
+const localePath = useLocalePath()
 const c = computed(() => copy.value.pages.contact)

 const h2 = computed(() => ({
@@ -56,7 +57,7 @@ useHead({ title: () => `${copy.value.pages.contact.label} · dezky` })
        <div>
          <h2 :style="h2">{{ c.demoHeading }}</h2>
          <p :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '18px', lineHeight: 1.6, color: t.fgMuted, margin: '18px 0 28px', textWrap: 'pretty' }">{{ c.demoBody }}</p>
-          <LandingBtn variant="primary" size="lg" @click="navigateTo('/demo')">{{ copy.pages.ctaDemo }} →</LandingBtn>
+          <LandingBtn variant="primary" size="lg" @click="navigateTo(localePath('/demo'))">{{ copy.pages.ctaDemo }} →</LandingBtn>
        </div>
      </div>
    </div>
@@ -21,8 +21,7 @@ onMounted(() => {
 })

 useHead({
-  title: 'dezky · suveræn produktivitet',
-  htmlAttrs: { lang },
+  title: () => (lang.value === 'da' ? 'dezky · suveræn produktivitet' : 'dezky · sovereign productivity'),
  meta: [
    { name: 'description', content: description },
  ],
@@ -5,6 +5,7 @@ definePageMeta({ layout: 'page' })

 const t = useTheme()
 const copy = useCopy()
+const localePath = useLocalePath()
 const c = computed(() => copy.value.pages.migration)

 useHead({ title: () => `${copy.value.pages.migration.label} · dezky` })
@@ -26,7 +27,7 @@ useHead({ title: () => `${copy.value.pages.migration.label} · dezky` })

    <p :style="{ marginTop: '64px', fontFamily: '\'Inter\', sans-serif', fontSize: '16px', color: t.fg }">{{ c.note }}</p>
    <div :style="{ marginTop: '32px' }">
-      <LandingBtn variant="primary" size="lg" @click="navigateTo('/demo')">{{ copy.pages.ctaDemo }} →</LandingBtn>
+      <LandingBtn variant="primary" size="lg" @click="navigateTo(localePath('/demo'))">{{ copy.pages.ctaDemo }} →</LandingBtn>
    </div>
  </LandingContainer>
 </template>
@@ -6,6 +6,7 @@ definePageMeta({ layout: 'page' })

 const t = useTheme()
 const copy = useCopy()
+const localePath = useLocalePath()
 const c = computed(() => copy.value.pages.partners)

 const openFaq = ref<number | null>(0)
@@ -196,7 +197,7 @@ useHead({ title: () => `${copy.value.pages.partners.label} · dezky` })
          <p :style="{ marginTop: '20px', fontFamily: '\'Inter\', sans-serif', fontSize: '18px', lineHeight: 1.6, color: t.fgMuted, maxWidth: '420px', textWrap: 'pretty' }">{{ c.form.lede }}</p>
          <button
            :style="{ marginTop: '28px', background: 'transparent', border: 'none', padding: 0, cursor: 'pointer', fontFamily: '\'Inter\', sans-serif', fontSize: '15px', color: t.fgMuted, textDecoration: 'underline', textUnderlineOffset: '3px' }"
-            @click="navigateTo('/demo')"
+            @click="navigateTo(localePath('/demo'))"
          >{{ c.cta }} →</button>
        </div>

@@ -5,6 +5,7 @@ definePageMeta({ layout: 'page' })

 const t = useTheme()
 const copy = useCopy()
+const localePath = useLocalePath()
 const c = computed(() => copy.value.pages.roadmap)

 const eyebrow = computed(() => ({
@@ -70,7 +71,7 @@ useHead({ title: () => `${copy.value.pages.roadmap.label} · dezky` })
    <div :style="{ borderTop: `1px solid ${t.borderStrong}`, paddingTop: 'clamp(40px, 5vw, 56px)' }">
      <h2 :style="h2">{{ c.ctaHeading }}</h2>
      <p :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '18px', lineHeight: 1.6, color: t.fgMuted, margin: '20px 0 28px', maxWidth: '620px', textWrap: 'pretty' }">{{ c.ctaBody }}</p>
-      <LandingBtn variant="primary" size="lg" @click="navigateTo('/contact')">{{ c.ctaButton }} →</LandingBtn>
+      <LandingBtn variant="primary" size="lg" @click="navigateTo(localePath('/contact'))">{{ c.ctaButton }} →</LandingBtn>
    </div>
  </LandingContainer>
 </template>
@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://dezky.eu/sitemap.xml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url><loc>https://dezky.eu/</loc><changefreq>weekly</changefreq><priority>1.0</priority></url>
+  <url><loc>https://dezky.eu/about</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
+  <url><loc>https://dezky.eu/partners</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
+  <url><loc>https://dezky.eu/demo</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
+  <url><loc>https://dezky.eu/roadmap</loc><changefreq>weekly</changefreq><priority>0.6</priority></url>
+  <url><loc>https://dezky.eu/changelog</loc><changefreq>weekly</changefreq><priority>0.6</priority></url>
+  <url><loc>https://dezky.eu/migration</loc><changefreq>monthly</changefreq><priority>0.6</priority></url>
+  <url><loc>https://dezky.eu/contact</loc><changefreq>monthly</changefreq><priority>0.6</priority></url>
+  <url><loc>https://dezky.eu/brand</loc><changefreq>monthly</changefreq><priority>0.4</priority></url>
+  <url><loc>https://dezky.eu/status</loc><changefreq>weekly</changefreq><priority>0.4</priority></url>
+  <url><loc>https://dezky.eu/privacy</loc><changefreq>yearly</changefreq><priority>0.3</priority></url>
+  <url><loc>https://dezky.eu/dpa</loc><changefreq>yearly</changefreq><priority>0.3</priority></url>
+  <url><loc>https://dezky.eu/terms</loc><changefreq>yearly</changefreq><priority>0.3</priority></url>
+  <url><loc>https://dezky.eu/sla</loc><changefreq>yearly</changefreq><priority>0.3</priority></url>
+  <url><loc>https://dezky.eu/cookies</loc><changefreq>yearly</changefreq><priority>0.3</priority></url>
+</urlset>
@@ -457,7 +457,7 @@ export const COPY = {
        tableHeading: 'Cookies vi bruger',
        tableCols: ['Cookie', 'Formål', 'Varighed'],
        table: [
-          ['dezky-lang', 'Husker dit valgte sprog (dansk/engelsk)', '12 måneder'],
+          ['i18n_redirected', 'Husker dit valgte sprog (dansk/engelsk)', '1 år'],
          ['Loginsession', 'Holder dig logget ind på app.dezky.eu', 'Session'],
        ] as [string, string, string][],
        contactHeading: 'Kontakt',
@@ -959,7 +959,7 @@ export const COPY = {
        tableHeading: 'Cookies we use',
        tableCols: ['Cookie', 'Purpose', 'Duration'],
        table: [
-          ['dezky-lang', 'Remembers your chosen language (Danish/English)', '12 months'],
+          ['i18n_redirected', 'Remembers your chosen language (Danish/English)', '1 year'],
          ['Login session', 'Keeps you signed in to app.dezky.eu', 'Session'],
        ] as [string, string, string][],
        contactHeading: 'Contact',