temp

frontend/app/pages/blog/[slug].vue

@@ -4,7 +4,12 @@ import type { Article } from '#shared/types/blog'
 const route = useRoute()
 const slug = route.params.slug as string
 
-const { data: article } = await useFetch<Article>(`/api/articles/${slug}`)
+const { locale, t } = useLocale()
+
+const { data: article } = await useFetch<Article>(`/api/articles/${slug}`, {
+  key: () => `article-${slug}-${locale.value}`,
+  query: { lang: locale },
+})
 
 if (!article.value) {
   throw createError({ statusCode: 404, statusMessage: 'Article not found', fatal: true })
@@ -38,6 +43,7 @@ useHead({
         headline: article.value.title,
         description: article.value.summary,
         datePublished: isoDate(article.value.publishedAt),
+        inLanguage: locale.value,
         author: article.value.author
           ? { '@type': 'Person', name: article.value.author }
           : undefined,
@@ -53,7 +59,7 @@ useHead({
   <article v-if="article">
     <header class="article-header">
       <nav class="kicker" aria-label="Percorso di navigazione">
-        <NuxtLink to="/blog">Articoli</NuxtLink>
+        <NuxtLink to="/blog">{{ t('breadcrumbArticles') }}</NuxtLink>
         <template v-if="article.category">
           <span aria-hidden="true"> / </span>
           <NuxtLink :to="`/category/${article.category.slug}`">
@@ -66,11 +72,11 @@ useHead({
 
       <p class="kicker date">
         <time :datetime="isoDate(article.publishedAt)">
-          {{ formatDateTime(article.publishedAt) }}
+          {{ formatDateTime(article.publishedAt, locale) }}
         </time>
         <template v-if="article.author">
           <span aria-hidden="true"> · </span>
-          <span>Di {{ article.author }}</span>
+          <span>{{ t('byAuthor')(article.author) }}</span>
         </template>
       </p>
     </header>
@@ -88,7 +94,7 @@ useHead({
     <div class="prose" v-html="article.html" />
 
     <p class="back">
-      <NuxtLink to="/blog">Torna a tutti gli articoli</NuxtLink>
+      <NuxtLink to="/blog">{{ t('backToArticles') }}</NuxtLink>
     </p>
   </article>
 </template>

frontend/app/pages/blog/index.vue

@@ -8,8 +8,11 @@ const page = computed(() => {
   return Number.isInteger(value) && value > 0 ? value : 1
 })
 
+const { locale, t } = useLocale()
+
 const { data, error, status } = await useFetch<Paginated<ArticleSummary>>('/api/articles', {
-  query: { page },
+  key: () => `blog-articles-${locale.value}-${page.value}`,
+  query: { page, lang: locale },
 })
 
 const { public: config } = useRuntimeConfig()
@@ -18,8 +21,8 @@ const canonical = computed(
 )
 
 useSeoMeta({
-  title: () => (page.value > 1 ? `Articoli — pagina ${page.value}` : 'Articoli'),
-  description: 'Tutti gli articoli pubblicati sul blog.',
+  title: () => (page.value > 1 ? `${t('articlesTitle')} — ${t('pagePrefix')} ${page.value}` : t('articlesTitle')),
+  description: () => t('allArticlesDescription'),
   ogType: 'website',
 })
 
@@ -29,15 +32,15 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
 <template>
   <div>
     <header class="page-header">
-      <p class="kicker">L'archivio</p>
-      <h1>Articoli</h1>
+      <p class="kicker">{{ t('archiveKicker') }}</p>
+      <h1>{{ t('articlesTitle') }}</h1>
     </header>
 
-    <p v-if="error">Non è stato possibile caricare gli articoli. Riprova più tardi.</p>
+    <p v-if="error">{{ t('loadError') }}</p>
 
-    <p v-else-if="status === 'pending'">Caricamento…</p>
+    <p v-else-if="status === 'pending'">{{ t('loading') }}</p>
 
-    <p v-else-if="!data?.items.length">Non è stato ancora pubblicato nulla.</p>
+    <p v-else-if="!data?.items.length">{{ t('noArticlesYet') }}</p>
 
     <template v-else>
       <ul class="card-grid">
@@ -46,19 +49,19 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
         </li>
       </ul>
 
-      <nav v-if="data.pageCount > 1" class="pagination" aria-label="Paginazione">
+      <nav v-if="data.pageCount > 1" class="pagination" :aria-label="t('pagination')">
         <NuxtLink v-if="data.page > 1" :to="{ query: { page: data.page - 1 } }" rel="prev">
-          Pagina precedente
+          {{ t('prevPage') }}
         </NuxtLink>
         <span class="muted">
-          Pagina {{ data.page }} di {{ data.pageCount }}
+          {{ t('pageOf')(data.page, data.pageCount) }}
         </span>
         <NuxtLink
           v-if="data.page < data.pageCount"
           :to="{ query: { page: data.page + 1 } }"
           rel="next"
         >
-          Pagina successiva
+          {{ t('nextPage') }}
         </NuxtLink>
       </nav>
     </template>

frontend/app/pages/category/[slug].vue

@@ -9,14 +9,20 @@ const page = computed(() => {
   return Number.isInteger(value) && value > 0 ? value : 1
 })
 
-const { data: category } = await useFetch<Category>(`/api/categories/${slug}`)
+const { locale, t } = useLocale()
+
+const { data: category } = await useFetch<Category>(`/api/categories/${slug}`, {
+  key: () => `category-${slug}-${locale.value}`,
+  query: { lang: locale },
+})
 
 if (!category.value) {
   throw createError({ statusCode: 404, statusMessage: 'Category not found', fatal: true })
 }
 
 const { data, error } = await useFetch<Paginated<ArticleSummary>>('/api/articles', {
-  query: { page, category: slug },
+  key: () => `category-articles-${slug}-${locale.value}-${page.value}`,
+  query: { page, category: slug, lang: locale },
 })
 
 const { public: config } = useRuntimeConfig()
@@ -25,8 +31,8 @@ const canonical = computed(
 )
 
 useSeoMeta({
-  title: category.value.name,
-  description: () => `Tutti gli articoli nella categoria ${category.value?.name ?? ''}.`,
+  title: () => category.value?.name ?? '',
+  description: () => t('categoryDescription')(category.value?.name ?? ''),
   ogType: 'website',
 })
 
@@ -36,13 +42,13 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
 <template>
   <div>
     <header class="page-header">
-      <p class="kicker">Categoria</p>
+      <p class="kicker">{{ t('categoryKicker') }}</p>
       <h1>{{ category?.name }}</h1>
     </header>
 
-    <p v-if="error">Non è stato possibile caricare gli articoli. Riprova più tardi.</p>
+    <p v-if="error">{{ t('loadError') }}</p>
 
-    <p v-else-if="!data?.items.length">Non ci sono articoli in questa categoria.</p>
+    <p v-else-if="!data?.items.length">{{ t('noArticlesInCategory') }}</p>
 
     <template v-else>
       <ul class="card-grid">
@@ -51,19 +57,19 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
         </li>
       </ul>
 
-      <nav v-if="data.pageCount > 1" class="pagination" aria-label="Paginazione">
+      <nav v-if="data.pageCount > 1" class="pagination" :aria-label="t('pagination')">
         <NuxtLink v-if="data.page > 1" :to="{ query: { page: data.page - 1 } }" rel="prev">
-          Pagina precedente
+          {{ t('prevPage') }}
         </NuxtLink>
         <span class="muted">
-          Pagina {{ data.page }} di {{ data.pageCount }}
+          {{ t('pageOf')(data.page, data.pageCount) }}
         </span>
         <NuxtLink
           v-if="data.page < data.pageCount"
           :to="{ query: { page: data.page + 1 } }"
           rel="next"
         >
-          Pagina successiva
+          {{ t('nextPage') }}
         </NuxtLink>
       </nav>
     </template>

frontend/app/pages/index.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import type { ArticleSummary, Paginated } from '#shared/types/blog'
 
+const { locale, t } = useLocale()
+
 const { data, error } = await useFetch<Paginated<ArticleSummary>>('/api/articles', {
-  key: 'home-articles',
-  query: { page: 1 },
+  key: () => `home-articles-${locale.value}`,
+  query: { page: 1, lang: locale },
 })
 
 const featured = computed(() => data.value?.items[0] ?? null)
@@ -20,9 +22,9 @@ useHead({ titleTemplate: '%s', link: [{ rel: 'canonical', href: canonical }] })
 
 useSeoMeta({
   title: SITE_NAME,
-  description: 'Articoli, guide e analisi.',
+  description: () => t('tagline'),
   ogTitle: SITE_NAME,
-  ogDescription: 'Articoli, guide e analisi.',
+  ogDescription: () => t('tagline'),
   ogType: 'website',
   ogUrl: canonical,
   ogImage: `${config.siteUrl}/logo.png`,
@@ -67,9 +69,9 @@ useSeoMeta({
       </div>
     </section>
 
-    <p v-if="error">Non è stato possibile caricare gli articoli. Riprova più tardi.</p>
+    <p v-if="error">{{ t('loadError') }}</p>
 
-    <p v-else-if="!featured">Non è stato ancora pubblicato nulla.</p>
+    <p v-else-if="!featured">{{ t('noArticlesYet') }}</p>
 
     <template v-else>
       <article class="featured" :class="{ 'has-cover': featuredCover }">
@@ -90,26 +92,26 @@ useSeoMeta({
 
         <div class="featured-text">
           <p class="kicker">
-            {{ featured.category ? featured.category.name : 'Ultimo' }}
+            {{ featured.category ? featured.category.name : t('latestFallback') }}
           </p>
           <h2>
             <NuxtLink :to="`/blog/${featured.slug}`">{{ featured.title }}</NuxtLink>
           </h2>
           <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}`">
-              Leggi l'articolo
+              {{ t('readArticle') }}
             </NuxtLink>
           </p>
         </div>
       </article>
 
       <p class="more">
-        <NuxtLink to="/blog">Vedi tutti gli articoli</NuxtLink>
+        <NuxtLink to="/blog">{{ t('seeAllArticles') }}</NuxtLink>
       </p>
     </template>
   </div>