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/category/[slug].vue

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