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.

frontend/app/components/ArticleCard.vue

@@ -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>

frontend/app/components/LanguageSwitcher.vue

@@ -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>