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,75 @@
+<script setup lang="ts">
+import type { ArticleSummary, Category, 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 slug = route.params.slug as string
+
+const page = computed(() => {
+  const value = Number(route.query.page)
+  return Number.isInteger(value) && value > 0 ? value : 1
+})
+
+const { data: category } = await useFetch<Category>(`/content/categories/${slug}`, {
+  key: `category-${slug}-${props.locale}`,
+  query: { lang: props.locale },
+})
+
+if (!category.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Category not found', fatal: true })
+}
+
+const { data, error } = await useFetch<Paginated<ArticleSummary>>('/content/articles', {
+  key: () => `category-articles-${slug}-${props.locale}-${page.value}`,
+  query: { page, category: slug, lang: props.locale },
+})
+
+useSeo({
+  locale: props.locale,
+  path: `/category/${slug}`,
+  title: category.value.name,
+  description: interpolate(strings.value.category.metaDescription, { name: category.value.name }),
+})
+</script>
+
+<template>
+  <div>
+    <header class="page-header">
+      <p class="kicker">{{ strings.category.kicker }}</p>
+      <h1>{{ category?.name }}</h1>
+    </header>
+
+    <p v-if="error">{{ strings.category.loadError }}</p>
+
+    <p v-else-if="!data?.items.length">{{ strings.category.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>