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.
This commit is contained in:
2026-09-11 13:53:17 +02:00
parent 847edc7397
commit 33b49c5dbb
40 changed files with 1285 additions and 576 deletions
+1 -69
View File
@@ -1,71 +1,3 @@
<script setup lang="ts">
import type { ArticleSummary, Paginated, Category } from '#shared/types/blog'
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}`)
if (!category.value) {
throw createError({ statusCode: 404, statusMessage: 'Category not found', fatal: true })
}
const { data, error } = await useFetch<Paginated<ArticleSummary>>('/content/articles', {
query: { page, category: slug },
})
const { public: config } = useRuntimeConfig()
const canonical = computed(
() => `${config.siteUrl}${route.path}${page.value > 1 ? `?page=${page.value}` : ''}`
)
useSeoMeta({
title: category.value.name,
description: () => `Tutti gli articoli nella categoria ${category.value?.name ?? ''}.`,
ogType: 'website',
})
useHead({ link: [{ rel: 'canonical', href: canonical }] })
</script>
<template>
<div>
<header class="page-header">
<p class="kicker">Categoria</p>
<h1>{{ category?.name }}</h1>
</header>
<p v-if="error">Non è stato possibile caricare gli articoli. Riprova più tardi.</p>
<p v-else-if="!data?.items.length">Non ci sono articoli in questa categoria.</p>
<template v-else>
<ul class="card-grid">
<li v-for="article in data.items" :key="article.slug">
<ArticleCard :article="article" />
</li>
</ul>
<nav v-if="data.pageCount > 1" class="pagination" aria-label="Paginazione">
<NuxtLink v-if="data.page > 1" :to="{ query: { page: data.page - 1 } }" rel="prev">
Pagina precedente
</NuxtLink>
<span class="muted">
Pagina {{ data.page }} di {{ data.pageCount }}
</span>
<NuxtLink
v-if="data.page < data.pageCount"
:to="{ query: { page: data.page + 1 } }"
rel="next"
>
Pagina successiva
</NuxtLink>
</nav>
</template>
</div>
<CategoryView locale="it" />
</template>