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:
@@ -1,210 +1,3 @@
|
||||
<script setup lang="ts">
|
||||
import type { ArticleSummary, Paginated } from '#shared/types/blog'
|
||||
|
||||
const { data, error } = await useFetch<Paginated<ArticleSummary>>('/content/articles', {
|
||||
key: 'home-articles',
|
||||
query: { page: 1 },
|
||||
})
|
||||
|
||||
const featured = computed(() => data.value?.items[0] ?? null)
|
||||
|
||||
const mediaUrl = useMediaUrl()
|
||||
const featuredCover = computed(() => mediaUrl(featured.value?.cover))
|
||||
|
||||
const { public: config } = useRuntimeConfig()
|
||||
const route = useRoute()
|
||||
const canonical = computed(() => `${config.siteUrl}${route.path}`)
|
||||
|
||||
// The home page is the site itself, so it carries the bare name as its title.
|
||||
useHead({ titleTemplate: '%s', link: [{ rel: 'canonical', href: canonical }] })
|
||||
|
||||
useSeoMeta({
|
||||
title: SITE_NAME,
|
||||
description: 'Articoli, guide e analisi.',
|
||||
ogTitle: SITE_NAME,
|
||||
ogDescription: 'Articoli, guide e analisi.',
|
||||
ogType: 'website',
|
||||
ogUrl: canonical,
|
||||
ogImage: `${config.siteUrl}/logo.png`,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<section class="landing">
|
||||
<img
|
||||
class="landing-image"
|
||||
src="/protesta-bancaria.jpg"
|
||||
alt="Manifesti e scritte contro le banche durante una crisi bancaria"
|
||||
width="770"
|
||||
height="420"
|
||||
>
|
||||
|
||||
<h1>La fine dell'Unione Europea per come l'abbiamo conosciuta.</h1>
|
||||
|
||||
<img
|
||||
class="landing-image"
|
||||
src="/eurozona-crisi.jpg"
|
||||
alt="Bandiera dell'Unione Europea incrinata"
|
||||
width="1000"
|
||||
height="736"
|
||||
>
|
||||
|
||||
<div class="landing-text">
|
||||
<p>
|
||||
La fine della nostra moneta come moneta forte: la fine di quella moneta che ci ha
|
||||
dato la vera libertà di viaggiare, consumare e fare.
|
||||
</p>
|
||||
<p>
|
||||
Una fine che avverrà a seguito di un "incidente" nucleare, al quale farà seguito un
|
||||
corralito bancario, ossia l'impossibilità, da parte dei cittadini europei, di
|
||||
disporre liberamente dei propri depositi.
|
||||
</p>
|
||||
<p>
|
||||
Le monete fiduciarie sono per loro natura cannibalizzanti. Oggi tocca all'euro.
|
||||
Anche perché le altre hanno praticamente perso tutte tutto.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<p v-if="error">Non è stato possibile caricare gli articoli. Riprova più tardi.</p>
|
||||
|
||||
<p v-else-if="!featured">Non è stato ancora pubblicato nulla.</p>
|
||||
|
||||
<template v-else>
|
||||
<article class="featured" :class="{ 'has-cover': featuredCover }">
|
||||
<NuxtLink
|
||||
v-if="featuredCover"
|
||||
class="featured-cover"
|
||||
:to="`/blog/${featured.slug}`"
|
||||
tabindex="-1"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<img
|
||||
:src="featuredCover"
|
||||
:alt="featured.cover?.alt ?? ''"
|
||||
>
|
||||
</NuxtLink>
|
||||
|
||||
<div class="featured-text">
|
||||
<p class="kicker">
|
||||
{{ featured.category ? featured.category.name : 'Ultimo' }}
|
||||
</p>
|
||||
<h2>
|
||||
<NuxtLink :to="`/blog/${featured.slug}`">{{ featured.title }}</NuxtLink>
|
||||
</h2>
|
||||
<p class="kicker date">
|
||||
<time :datetime="isoDate(featured.publishedAt)">
|
||||
{{ formatDate(featured.publishedAt) }}
|
||||
</time>
|
||||
</p>
|
||||
<p class="read-more">
|
||||
<NuxtLink :to="`/blog/${featured.slug}`">
|
||||
Leggi l'ultimo articolo
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
</div>
|
||||
<HomeView locale="it" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.landing {
|
||||
max-width: var(--width-prose);
|
||||
margin-inline: auto;
|
||||
margin-bottom: var(--gap-section);
|
||||
padding-bottom: var(--gap-section);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.landing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
object-fit: cover;
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.landing h1 {
|
||||
margin-block: 1.75rem;
|
||||
font-size: clamp(2rem, 4.5vw, 3.1rem);
|
||||
}
|
||||
|
||||
.landing-text {
|
||||
margin-top: 1.75rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.landing-text p {
|
||||
margin-top: 1.1rem;
|
||||
}
|
||||
|
||||
.featured {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
align-items: center;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* Stacked on phones and portrait tablets — a side-by-side split below this
|
||||
width leaves both the image and the headline too cramped to read. The split
|
||||
also needs a cover to sit in it, or one column would just be empty. */
|
||||
@media (min-width: 64rem) {
|
||||
.featured.has-cover {
|
||||
grid-template-columns: 1.35fr 1fr;
|
||||
gap: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Without a cover the headline is the whole lead, so it gets the full width
|
||||
but stays inside a readable measure. */
|
||||
.featured:not(.has-cover) .featured-text {
|
||||
max-width: 46rem;
|
||||
}
|
||||
|
||||
.featured-cover {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.featured-cover img {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.featured h2 {
|
||||
margin-top: 0.6rem;
|
||||
font-size: clamp(2rem, 4.5vw, 3.1rem);
|
||||
}
|
||||
|
||||
.featured h2 a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.featured h2 a:hover {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.12em;
|
||||
}
|
||||
|
||||
.date {
|
||||
margin-top: 1rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.read-more {
|
||||
margin-top: 1.75rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.read-more a {
|
||||
padding-bottom: 0.35rem;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid var(--color-ink);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user