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/pages/index.vue

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