Add a language switcher with English, Italian, Spanish and French

The interface is translated through @nuxtjs/i18n: strings live in i18n/locales/*.json, routes are prefixed except for the default English, and useLocaleHead emits the lang attribute, the hreflang alternates and og:locale. The switcher is a native select rather than a custom dropdown: keyboard support, the platform picker on mobile and correct labelling come for free. Article content stays single-language — this translates the site chrome only.
2026-08-25 14:23:09 +02:00
parent f5639111f9
commit c08f53ca69
21 changed files with 3197 additions and 87 deletions
@@ -1,3 +1,8 @@
+<script setup lang="ts">
+// Emits <html lang>, the alternate-language links and og:locale for every page.
+useHead(useLocaleHead())
+</script>
+
 <template>
  <div>
    <NuxtRouteAnnouncer />
@@ -3,13 +3,19 @@ import type { ArticleSummary } from '#shared/types/blog'

 const props = defineProps<{ article: ArticleSummary }>()

+const { locale } = useI18n()
 const mediaUrl = useMediaUrl()
 const cover = computed(() => mediaUrl(props.article.cover))
 </script>

 <template>
  <article class="card">
-    <NuxtLink class="cover-link" :to="`/blog/${article.slug}`" tabindex="-1" aria-hidden="true">
+    <NuxtLinkLocale
+      class="cover-link"
+      :to="`/blog/${article.slug}`"
+      tabindex="-1"
+      aria-hidden="true"
+    >
      <img
        v-if="cover"
        class="cover"
@@ -20,16 +26,18 @@ const cover = computed(() => mediaUrl(props.article.cover))
        loading="lazy"
      >
      <span v-else class="cover placeholder" />
-    </NuxtLink>
+    </NuxtLinkLocale>

    <p v-if="article.category" class="kicker">{{ article.category.name }}</p>

    <h2>
-      <NuxtLink :to="`/blog/${article.slug}`">{{ article.title }}</NuxtLink>
+      <NuxtLinkLocale :to="`/blog/${article.slug}`">{{ article.title }}</NuxtLinkLocale>
    </h2>

    <p class="kicker date">
-      <time :datetime="isoDate(article.publishedAt)">{{ formatDate(article.publishedAt) }}</time>
+      <time :datetime="isoDate(article.publishedAt)">
+        {{ formatDate(article.publishedAt, locale) }}
+      </time>
    </p>
  </article>
 </template>
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+const { locale, locales, t } = useI18n()
+const switchLocalePath = useSwitchLocalePath()
+const router = useRouter()
+
+/**
+ * A native select: it gets keyboard support, the platform picker on mobile and
+ * correct labelling for free, which a hand-built dropdown would have to rebuild.
+ */
+function onChange(event: Event) {
+  const code = (event.target as HTMLSelectElement).value as typeof locale.value
+  const path = switchLocalePath(code)
+  if (path) router.push(path)
+}
+</script>
+
+<template>
+  <div class="switcher">
+    <label class="visually-hidden" for="locale-select">{{ t('site.languageLabel') }}</label>
+    <select id="locale-select" :value="locale" @change="onChange">
+      <option v-for="option in locales" :key="option.code" :value="option.code">
+        {{ option.name }}
+      </option>
+    </select>
+    <span class="arrow" aria-hidden="true">▾</span>
+  </div>
+</template>
+
+<style scoped>
+.switcher {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+select {
+  appearance: none;
+  padding: 0.35rem 1.6rem 0.35rem 0.7rem;
+  border: 1px solid var(--color-border);
+  border-radius: 0;
+  background: transparent;
+  color: var(--color-body);
+  font: inherit;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+select:hover {
+  border-color: var(--color-ink);
+  color: var(--color-ink);
+}
+
+.arrow {
+  position: absolute;
+  right: 0.6rem;
+  font-size: 0.65rem;
+  pointer-events: none;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+</style>
@@ -5,23 +5,20 @@ const props = defineProps<{ error: NuxtError }>()

 const isNotFound = computed(() => props.error.statusCode === 404)

+useHead(useLocaleHead())
 useSeoMeta({ robots: 'noindex' })
 </script>

 <template>
  <NuxtLayout>
-    <h1>{{ isNotFound ? 'Page not found' : 'Something went wrong' }}</h1>
+    <h1>{{ isNotFound ? $t('error.notFoundTitle') : $t('error.genericTitle') }}</h1>

    <p class="muted">
-      {{
-        isNotFound
-          ? 'The page you are looking for does not exist or has moved.'
-          : 'Please try again in a moment.'
-      }}
+      {{ isNotFound ? $t('error.notFoundBody') : $t('error.genericBody') }}
    </p>

    <p>
-      <NuxtLink to="/">Back to home</NuxtLink>
+      <NuxtLinkLocale to="/">{{ $t('error.backHome') }}</NuxtLinkLocale>
    </p>
  </NuxtLayout>
 </template>
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { Category } from '#shared/types/blog'

+const { locale } = useI18n()
+
 const { data: categories } = await useFetch<Category[]>('/api/categories', {
  key: 'nav-categories',
  default: () => [],
@@ -9,25 +11,30 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {

 <template>
  <div class="page">
-    <a class="skip-link" href="#main">Skip to content</a>
+    <a class="skip-link" href="#main">{{ $t('site.skipToContent') }}</a>

    <header class="site-header">
      <div class="container">
        <p class="wordmark">
-          <NuxtLink to="/">
+          <NuxtLinkLocale to="/">
            <img src="/logo.png" :alt="SITE_NAME" width="400" height="400">
-          </NuxtLink>
+          </NuxtLinkLocale>
        </p>
-        <p class="tagline kicker">{{ SITE_DESCRIPTION }}</p>
+        <p class="tagline kicker">{{ $t('site.tagline') }}</p>
      </div>

-      <nav class="site-nav" aria-label="Main navigation">
-        <ul class="container">
-          <li><NuxtLink to="/blog">All articles</NuxtLink></li>
-          <li v-for="category in categories" :key="category.slug">
-            <NuxtLink :to="`/category/${category.slug}`">{{ category.name }}</NuxtLink>
-          </li>
-        </ul>
+      <nav class="site-nav" :aria-label="$t('site.mainNavigation')">
+        <div class="container nav-inner">
+          <ul>
+            <li><NuxtLinkLocale to="/blog">{{ $t('site.allArticles') }}</NuxtLinkLocale></li>
+            <li v-for="category in categories" :key="category.slug">
+              <NuxtLinkLocale :to="`/category/${category.slug}`">
+                {{ category.name }}
+              </NuxtLinkLocale>
+            </li>
+          </ul>
+          <LanguageSwitcher />
+        </div>
      </nav>
    </header>

@@ -39,33 +46,36 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
      <div class="container footer-inner">
        <div class="footer-block">
          <img class="footer-logo" src="/logo.png" :alt="SITE_NAME" width="400" height="400">
-          <p class="muted">{{ SITE_DESCRIPTION }}</p>
+          <p class="muted">{{ $t('site.tagline') }}</p>
          <address class="contact">
-            Contact: <a :href="`mailto:${SITE_EMAIL}`">{{ SITE_EMAIL }}</a>
+            {{ $t('site.contact') }}:
+            <a :href="`mailto:${SITE_EMAIL}`">{{ SITE_EMAIL }}</a>
          </address>
        </div>

-        <nav class="footer-block" aria-label="Categories">
-          <p class="kicker">Categories</p>
+        <nav class="footer-block" :aria-label="$t('site.categories')">
+          <p class="kicker">{{ $t('site.categories') }}</p>
          <ul>
            <li v-for="category in categories" :key="category.slug">
-              <NuxtLink :to="`/category/${category.slug}`">{{ category.name }}</NuxtLink>
+              <NuxtLinkLocale :to="`/category/${category.slug}`">
+                {{ category.name }}
+              </NuxtLinkLocale>
            </li>
-            <li v-if="!categories.length" class="muted">Nothing published yet</li>
+            <li v-if="!categories.length" class="muted">{{ $t('site.noCategories') }}</li>
          </ul>
        </nav>

-        <nav class="footer-block" aria-label="Sections">
-          <p class="kicker">Browse</p>
+        <nav class="footer-block" :aria-label="$t('site.browse')">
+          <p class="kicker">{{ $t('site.browse') }}</p>
          <ul>
-            <li><NuxtLink to="/">Home</NuxtLink></li>
-            <li><NuxtLink to="/blog">All articles</NuxtLink></li>
+            <li><NuxtLinkLocale to="/">{{ $t('site.home') }}</NuxtLinkLocale></li>
+            <li><NuxtLinkLocale to="/blog">{{ $t('site.allArticles') }}</NuxtLinkLocale></li>
          </ul>
        </nav>
      </div>

-      <p class="container copyright kicker">
-        &copy; {{ new Date().getFullYear() }} {{ SITE_NAME }}. All rights reserved.
+      <p class="container copyright kicker" :lang="locale">
+        &copy; {{ new Date().getFullYear() }} {{ SITE_NAME }}. {{ $t('site.rights') }}
      </p>
    </footer>
  </div>
@@ -109,12 +119,21 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
  border-top: 1px solid var(--color-border);
 }

+.nav-inner {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem 2rem;
+  align-items: center;
+  justify-content: space-between;
+  padding-block: 0.9rem;
+}
+
 .site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
  justify-content: center;
-  padding-block: 0.9rem;
+  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 0.75rem;
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Article } from '#shared/types/blog'

+const { locale } = useI18n()
 const route = useRoute()
 const slug = route.params.slug as string

@@ -13,7 +14,7 @@ if (!article.value) {
 const { public: config } = useRuntimeConfig()
 const mediaUrl = useMediaUrl()

-const canonical = `${config.siteUrl}/blog/${article.value.slug}`
+const canonical = `${config.siteUrl}${route.path}`
 const cover = computed(() => mediaUrl(article.value?.cover) ?? undefined)

 useSeoMeta({
@@ -49,13 +50,13 @@ useHead({
 <template>
  <article v-if="article">
    <header class="article-header">
-      <nav class="kicker" aria-label="Breadcrumb">
-        <NuxtLink to="/blog">Articles</NuxtLink>
+      <nav class="kicker" :aria-label="$t('article.breadcrumb')">
+        <NuxtLinkLocale to="/blog">{{ $t('list.articles') }}</NuxtLinkLocale>
        <template v-if="article.category">
          <span aria-hidden="true"> / </span>
-          <NuxtLink :to="`/category/${article.category.slug}`">
+          <NuxtLinkLocale :to="`/category/${article.category.slug}`">
            {{ article.category.name }}
-          </NuxtLink>
+          </NuxtLinkLocale>
        </template>
      </nav>

@@ -63,7 +64,7 @@ useHead({

      <p class="kicker date">
        <time :datetime="isoDate(article.publishedAt)">
-          {{ formatDate(article.publishedAt) }}
+          {{ formatDate(article.publishedAt, locale) }}
        </time>
      </p>
    </header>
@@ -81,7 +82,7 @@ useHead({
    <div class="prose" v-html="article.html" />

    <p class="back">
-      <NuxtLink to="/blog">Back to all articles</NuxtLink>
+      <NuxtLinkLocale to="/blog">{{ $t('article.back') }}</NuxtLinkLocale>
    </p>
  </article>
 </template>
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import type { ArticleSummary, Paginated } from '#shared/types/blog'

+const { t } = useI18n()
 const route = useRoute()
+
 const page = computed(() => {
  const value = Number(route.query.page)
  return Number.isInteger(value) && value > 0 ? value : 1
@@ -13,12 +15,12 @@ const { data, error, status } = await useFetch<Paginated<ArticleSummary>>('/api/

 const { public: config } = useRuntimeConfig()
 const canonical = computed(
-  () => `${config.siteUrl}/blog${page.value > 1 ? `?page=${page.value}` : ''}`
+  () => `${config.siteUrl}${route.path}${page.value > 1 ? `?page=${page.value}` : ''}`
 )

 useSeoMeta({
-  title: page.value > 1 ? `Articles — page ${page.value}` : 'Articles',
-  description: 'Every article published on the blog.',
+  title: () => (page.value > 1 ? t('list.articlesPage', { page: page.value }) : t('list.articles')),
+  description: () => t('list.archiveDescription'),
  ogType: 'website',
 })

@@ -28,15 +30,15 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
 <template>
  <div>
    <header class="page-header">
-      <p class="kicker">The archive</p>
-      <h1>Articles</h1>
+      <p class="kicker">{{ $t('list.archive') }}</p>
+      <h1>{{ $t('list.articles') }}</h1>
    </header>

-    <p v-if="error">Articles could not be loaded. Please try again later.</p>
+    <p v-if="error">{{ $t('list.failed') }}</p>

-    <p v-else-if="status === 'pending'">Loading…</p>
+    <p v-else-if="status === 'pending'">{{ $t('list.loading') }}</p>

-    <p v-else-if="!data?.items.length">Nothing has been published yet.</p>
+    <p v-else-if="!data?.items.length">{{ $t('list.empty') }}</p>

    <template v-else>
      <ul class="card-grid">
@@ -45,20 +47,21 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
        </li>
      </ul>

-      <nav v-if="data.pageCount > 1" class="pagination" aria-label="Pagination">
+      <nav v-if="data.pageCount > 1" class="pagination" :aria-label="$t('pagination.label')">
        <NuxtLink v-if="data.page > 1" :to="{ query: { page: data.page - 1 } }" rel="prev">
-          Previous page
+          {{ $t('pagination.previous') }}
        </NuxtLink>
-        <span class="muted">Page {{ data.page }} of {{ data.pageCount }}</span>
+        <span class="muted">
+          {{ $t('pagination.position', { page: data.page, total: data.pageCount }) }}
+        </span>
        <NuxtLink
          v-if="data.page < data.pageCount"
          :to="{ query: { page: data.page + 1 } }"
          rel="next"
        >
-          Next page
+          {{ $t('pagination.next') }}
        </NuxtLink>
      </nav>
    </template>
  </div>
 </template>
-
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { ArticleSummary, Paginated, Category } from '#shared/types/blog'

+const { t } = useI18n()
 const route = useRoute()
 const slug = route.params.slug as string

@@ -21,12 +22,12 @@ const { data, error } = await useFetch<Paginated<ArticleSummary>>('/api/articles

 const { public: config } = useRuntimeConfig()
 const canonical = computed(
-  () => `${config.siteUrl}/category/${slug}${page.value > 1 ? `?page=${page.value}` : ''}`
+  () => `${config.siteUrl}${route.path}${page.value > 1 ? `?page=${page.value}` : ''}`
 )

 useSeoMeta({
  title: category.value.name,
-  description: `Every article in the ${category.value.name} category.`,
+  description: () => t('list.categoryDescription', { name: category.value?.name ?? '' }),
  ogType: 'website',
 })

@@ -36,13 +37,13 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
 <template>
  <div>
    <header class="page-header">
-      <p class="kicker">Category</p>
+      <p class="kicker">{{ $t('list.category') }}</p>
      <h1>{{ category?.name }}</h1>
    </header>

-    <p v-if="error">Articles could not be loaded. Please try again later.</p>
+    <p v-if="error">{{ $t('list.failed') }}</p>

-    <p v-else-if="!data?.items.length">There are no articles in this category.</p>
+    <p v-else-if="!data?.items.length">{{ $t('list.categoryEmpty') }}</p>

    <template v-else>
      <ul class="card-grid">
@@ -51,20 +52,21 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
        </li>
      </ul>

-      <nav v-if="data.pageCount > 1" class="pagination" aria-label="Pagination">
+      <nav v-if="data.pageCount > 1" class="pagination" :aria-label="$t('pagination.label')">
        <NuxtLink v-if="data.page > 1" :to="{ query: { page: data.page - 1 } }" rel="prev">
-          Previous page
+          {{ $t('pagination.previous') }}
        </NuxtLink>
-        <span class="muted">Page {{ data.page }} of {{ data.pageCount }}</span>
+        <span class="muted">
+          {{ $t('pagination.position', { page: data.page, total: data.pageCount }) }}
+        </span>
        <NuxtLink
          v-if="data.page < data.pageCount"
          :to="{ query: { page: data.page + 1 } }"
          rel="next"
        >
-          Next page
+          {{ $t('pagination.next') }}
        </NuxtLink>
      </nav>
    </template>
  </div>
 </template>
-
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { ArticleSummary, Paginated } from '#shared/types/blog'

+const { t, locale } = useI18n()
+
 const { data, error } = await useFetch<Paginated<ArticleSummary>>('/api/articles', {
  key: 'home-articles',
  query: { page: 1 },
@@ -14,30 +16,37 @@ const mediaUrl = useMediaUrl()
 const featuredCover = computed(() => mediaUrl(featured.value?.cover))

 const { public: config } = useRuntimeConfig()
+const route = useRoute()
+const canonical = computed(() => `${config.siteUrl}${route.path}`)

 // The home page is the site itself, so it carries the bare name as its title.
-useHead({ titleTemplate: '%s', link: [{ rel: 'canonical', href: config.siteUrl }] })
+useHead({ titleTemplate: '%s', link: [{ rel: 'canonical', href: canonical }] })

 useSeoMeta({
  title: SITE_NAME,
-  description: SITE_DESCRIPTION,
+  description: () => t('site.tagline'),
  ogTitle: SITE_NAME,
-  ogDescription: SITE_DESCRIPTION,
+  ogDescription: () => t('site.tagline'),
  ogType: 'website',
-  ogUrl: config.siteUrl,
+  ogUrl: canonical,
  ogImage: `${config.siteUrl}/logo.png`,
 })
 </script>

 <template>
  <div>
-    <p v-if="error">Articles could not be loaded. Please try again later.</p>
+    <p v-if="error">{{ $t('list.failed') }}</p>

-    <p v-else-if="!featured">Nothing has been published yet.</p>
+    <p v-else-if="!featured">{{ $t('list.empty') }}</p>

    <template v-else>
      <article class="featured">
-        <NuxtLink class="featured-cover" :to="`/blog/${featured.slug}`" tabindex="-1" aria-hidden="true">
+        <NuxtLinkLocale
+          class="featured-cover"
+          :to="`/blog/${featured.slug}`"
+          tabindex="-1"
+          aria-hidden="true"
+        >
          <img
            v-if="featuredCover"
            :src="featuredCover"
@@ -46,28 +55,30 @@ useSeoMeta({
            :height="featured.cover?.height ?? undefined"
          >
          <span v-else class="placeholder" />
-        </NuxtLink>
+        </NuxtLinkLocale>

        <div class="featured-text">
          <p class="kicker">
-            {{ featured.category ? featured.category.name : 'Latest' }}
+            {{ featured.category ? featured.category.name : $t('home.latest') }}
          </p>
          <h1>
-            <NuxtLink :to="`/blog/${featured.slug}`">{{ featured.title }}</NuxtLink>
+            <NuxtLinkLocale :to="`/blog/${featured.slug}`">{{ featured.title }}</NuxtLinkLocale>
          </h1>
          <p class="kicker date">
            <time :datetime="isoDate(featured.publishedAt)">
-              {{ formatDate(featured.publishedAt) }}
+              {{ formatDate(featured.publishedAt, locale) }}
            </time>
          </p>
          <p class="read-more">
-            <NuxtLink :to="`/blog/${featured.slug}`">Read the article</NuxtLink>
+            <NuxtLinkLocale :to="`/blog/${featured.slug}`">
+              {{ $t('home.readArticle') }}
+            </NuxtLinkLocale>
          </p>
        </div>
      </article>

      <template v-if="rest.length">
-        <h2 class="section-heading kicker">More stories</h2>
+        <h2 class="section-heading kicker">{{ $t('home.moreStories') }}</h2>

        <ul class="card-grid">
          <li v-for="article in rest" :key="article.slug">
@@ -77,7 +88,7 @@ useSeoMeta({
      </template>

      <p class="more">
-        <NuxtLink to="/blog">View all articles</NuxtLink>
+        <NuxtLinkLocale to="/blog">{{ $t('home.viewAll') }}</NuxtLinkLocale>
      </p>
    </template>
  </div>