Add hand-rolled English support (/en/*) alongside the Italian site

PocketBase gains optional, manually-authored English fields on articles and categories (same record, same slug), and the frontend serves an /en counterpart of every dynamic route via thin page wrappers around shared view components — no i18n library, consistent with the project's existing minimalism stance for a two-locale site with ~20 UI strings. An article/category with no translation 404s cleanly on its own /en detail page and is filtered out of /en listings, and the header's language-switch link falls back to the English blog index rather than a dead link; resolving that requires a global route middleware, since the layout's header renders before the page content in document order and so can't react to state a page component sets during its own async setup.
2026-09-11 13:53:17 +02:00
parent 847edc7397
commit 33b49c5dbb
40 changed files with 1285 additions and 576 deletions
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { ArticleSummary, Paginated } from '#shared/types/blog'
+import type { Locale } from '#shared/utils/locale'
+import { STRINGS, interpolate } from '#shared/utils/i18n'
+
+const props = defineProps<{ locale: Locale }>()
+
+const strings = computed(() => STRINGS[props.locale])
+
+const route = useRoute()
+
+const page = computed(() => {
+  const value = Number(route.query.page)
+  return Number.isInteger(value) && value > 0 ? value : 1
+})
+
+const { data, error, status } = await useFetch<Paginated<ArticleSummary>>('/content/articles', {
+  key: () => `blog-${props.locale}-${page.value}`,
+  query: { page, lang: props.locale },
+})
+
+useSeo({
+  locale: props.locale,
+  path: '/blog',
+  title: page.value > 1 ? interpolate(strings.value.blog.titlePage, { page: page.value }) : strings.value.blog.title,
+  description: strings.value.blog.metaDescription,
+})
+</script>
+
+<template>
+  <div>
+    <header class="page-header">
+      <p class="kicker">{{ strings.blog.archiveKicker }}</p>
+      <h1>{{ strings.blog.title }}</h1>
+    </header>
+
+    <p v-if="error">{{ strings.blog.loadError }}</p>
+
+    <p v-else-if="status === 'pending'">{{ strings.blog.loading }}</p>
+
+    <p v-else-if="!data?.items.length">{{ strings.blog.empty }}</p>
+
+    <template v-else>
+      <ul class="card-grid">
+        <li v-for="article in data.items" :key="article.slug">
+          <ArticleCard :article="article" :locale="locale" />
+        </li>
+      </ul>
+
+      <nav v-if="data.pageCount > 1" class="pagination" :aria-label="strings.blog.paginationAriaLabel">
+        <NuxtLink v-if="data.page > 1" :to="{ query: { page: data.page - 1 } }" rel="prev">
+          {{ strings.blog.prevPage }}
+        </NuxtLink>
+        <span class="muted">
+          {{ interpolate(strings.blog.pageOf, { current: data.page, total: data.pageCount }) }}
+        </span>
+        <NuxtLink
+          v-if="data.page < data.pageCount"
+          :to="{ query: { page: data.page + 1 } }"
+          rel="next"
+        >
+          {{ strings.blog.nextPage }}
+        </NuxtLink>
+      </nav>
+    </template>
+  </div>
+</template>