davide/blog
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Remove i18n, keep only Italian and rely on browser translation

Browse Source 
The interface was translated in en/it/es/fr via @nuxtjs/i18n. Drop the
module, the locale files, and the language switcher: the UI is now
static Italian text, with translation for foreign visitors left to the
Google Translate browser extension instead of the app.
This commit is contained in:
davide
2026-08-26 09:39:05 +02:00
parent 448dd881e4
commit 809b60d85e
20 changed files with 84 additions and 3184 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CLAUDE.md
+5 -5
View File
@@ -40,11 +40,11 @@ Nitro del frontend. Un solo dominio, un solo certificato TLS.
richiesta né concessa). richiesta né concessa).
- Il Markdown dell'articolo è convertito in HTML **nell'endpoint**, non nel componente: il - Il Markdown dell'articolo è convertito in HTML **nell'endpoint**, non nel componente: il
contenuto è già nell'HTML SSR e `marked` resta fuori dal bundle client. contenuto è già nell'HTML SSR e `marked` resta fuori dal bundle client.
- L'**interfaccia** è tradotta in en/it/es/fr con `@nuxtjs/i18n`: stringhe in - L'**interfaccia** è solo in italiano, stringhe statiche nei componenti (niente
`frontend/i18n/locales/*.json`, rotte `prefix_except_default` (inglese senza prefisso), `@nuxtjs/i18n`, niente file di traduzione): `<html lang="it">` è fisso in
`hreflang` e `og:locale` generati da `useLocaleHead()` in `app.vue`. Nessuna stringa `nuxt.config.ts`. La traduzione per i visitatori stranieri è delegata all'estensione
visibile va scritta a mano in un componente: aggiungi la chiave nei quattro file. Google Translate del browser, non è gestita dall'app. I **contenuti** restano
I **contenuti** invece restano monolingua — la localizzazione di Strapi è disattivata. monolingua — la localizzazione di Strapi è disattivata.
- `cms/src/index.ts` (`bootstrap`) dà al ruolo Public solo `find`/`findOne` su Article e Category, - `cms/src/index.ts` (`bootstrap`) dà al ruolo Public solo `find`/`findOne` su Article e Category,
e disattiva la registrazione pubblica: non esistono utenti front-end, solo amministratori. e disattiva la registrazione pubblica: non esistono utenti front-end, solo amministratori.
Qualsiasi permesso in più va motivato. Qualsiasi permesso in più va motivato.
docker-compose.dev.yml
-1
View File
@@ -16,4 +16,3 @@ services:
environment: environment:
NUXT_PUBLIC_SITE_URL: http://localhost:3000 NUXT_PUBLIC_SITE_URL: http://localhost:3000
NUXT_PUBLIC_STRAPI_URL: http://localhost:1337 NUXT_PUBLIC_STRAPI_URL: http://localhost:1337
NUXT_PUBLIC_I18N_BASE_URL: http://localhost:3000
docker-compose.yml
-2
View File
@@ -51,8 +51,6 @@ services:
NUXT_STRAPI_URL: ${STRAPI_URL} NUXT_STRAPI_URL: ${STRAPI_URL}
NUXT_PUBLIC_SITE_URL: ${PUBLIC_SITE_URL} NUXT_PUBLIC_SITE_URL: ${PUBLIC_SITE_URL}
NUXT_PUBLIC_STRAPI_URL: ${PUBLIC_STRAPI_URL} NUXT_PUBLIC_STRAPI_URL: ${PUBLIC_STRAPI_URL}
# Absolute origin for the alternate-language links.
NUXT_PUBLIC_I18N_BASE_URL: ${PUBLIC_SITE_URL}
caddy: caddy:
image: caddy:2-alpine image: caddy:2-alpine
frontend/app/app.vue
-5
View File
@@ -1,8 +1,3 @@
<script setup lang="ts">
// Emits <html lang>, the alternate-language links and og:locale for every page.
useHead(useLocaleHead())
</script>
<template> <template>
<div> <div>
<NuxtRouteAnnouncer /> <NuxtRouteAnnouncer />
frontend/app/components/ArticleCard.vue
+4 -5
View File
@@ -3,7 +3,6 @@ import type { ArticleSummary } from '#shared/types/blog'
const props = defineProps<{ article: ArticleSummary }>() const props = defineProps<{ article: ArticleSummary }>()
const { locale } = useI18n()
const mediaUrl = useMediaUrl() const mediaUrl = useMediaUrl()
const cover = computed(() => mediaUrl(props.article.cover)) const cover = computed(() => mediaUrl(props.article.cover))
</script> </script>
@@ -12,7 +11,7 @@ const cover = computed(() => mediaUrl(props.article.cover))
<article class="card"> <article class="card">
<!-- No placeholder box when there is no cover: an empty grey rectangle <!-- No placeholder box when there is no cover: an empty grey rectangle
reads as a broken image rather than as a deliberate choice. --> reads as a broken image rather than as a deliberate choice. -->
<NuxtLinkLocale <NuxtLink
v-if="cover" v-if="cover"
class="cover-link" class="cover-link"
:to="`/blog/${article.slug}`" :to="`/blog/${article.slug}`"
@@ -27,17 +26,17 @@ const cover = computed(() => mediaUrl(props.article.cover))
:height="article.cover?.height ?? undefined" :height="article.cover?.height ?? undefined"
loading="lazy" loading="lazy"
> >
</NuxtLinkLocale> </NuxtLink>
<p v-if="article.category" class="kicker">{{ article.category.name }}</p> <p v-if="article.category" class="kicker">{{ article.category.name }}</p>
<h2> <h2>
<NuxtLinkLocale :to="`/blog/${article.slug}`">{{ article.title }}</NuxtLinkLocale> <NuxtLink :to="`/blog/${article.slug}`">{{ article.title }}</NuxtLink>
</h2> </h2>
<p class="kicker date"> <p class="kicker date">
<time :datetime="isoDate(article.publishedAt)"> <time :datetime="isoDate(article.publishedAt)">
{{ formatDate(article.publishedAt, locale) }} {{ formatDate(article.publishedAt) }}
</time> </time>
</p> </p>
</article> </article>
frontend/app/components/LanguageSwitcher.vue
-80
View File
@@ -1,80 +0,0 @@
<script setup lang="ts">
const { locale, locales, t } = useI18n()
const switchLocalePath = useSwitchLocalePath()
const router = useRouter()
/**
* A native select: it gets keyboard support, the platform picker on mobile and
* correct labelling for free, which a hand-built dropdown would have to rebuild.
*/
function onChange(event: Event) {
const code = (event.target as HTMLSelectElement).value as typeof locale.value
const path = switchLocalePath(code)
if (path) router.push(path)
}
</script>
<template>
<div class="switcher">
<label class="visually-hidden" for="locale-select">{{ t('site.languageLabel') }}</label>
<select id="locale-select" :value="locale" @change="onChange">
<option v-for="option in locales" :key="option.code" :value="option.code">
{{ option.name }}
</option>
</select>
<span class="arrow" aria-hidden="true">▾</span>
</div>
</template>
<style scoped>
.switcher {
position: relative;
display: inline-flex;
align-items: center;
}
select {
appearance: none;
padding: 0.4rem 1.7rem 0.4rem 0.7rem;
border: 1px solid var(--color-border);
border-radius: 0;
background: transparent;
color: var(--color-body);
font: inherit;
/* Safari on iOS zooms the page when a control smaller than 16px is tapped,
so the picker stays at 1rem on phones and shrinks only from tablet up. */
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
}
@media (min-width: 48rem) {
select {
padding: 0.35rem 1.6rem 0.35rem 0.7rem;
font-size: 0.75rem;
}
}
select:hover {
border-color: var(--color-ink);
color: var(--color-ink);
}
.arrow {
position: absolute;
right: 0.6rem;
font-size: 0.65rem;
pointer-events: none;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
</style>
frontend/app/error.vue
+5 -4
View File
@@ -5,20 +5,21 @@ const props = defineProps<{ error: NuxtError }>()
const isNotFound = computed(() => props.error.statusCode === 404) const isNotFound = computed(() => props.error.statusCode === 404)
useHead(useLocaleHead())
useSeoMeta({ robots: 'noindex' }) useSeoMeta({ robots: 'noindex' })
</script> </script>
<template> <template>
<NuxtLayout> <NuxtLayout>
<h1>{{ isNotFound ? $t('error.notFoundTitle') : $t('error.genericTitle') }}</h1> <h1>{{ isNotFound ? 'Pagina non trovata' : 'Qualcosa è andato storto' }}</h1>
<p class="muted"> <p class="muted">
{{ isNotFound ? $t('error.notFoundBody') : $t('error.genericBody') }} {{ isNotFound
? 'La pagina che cerchi non esiste o è stata spostata.'
: 'Riprova tra qualche istante.' }}
</p> </p>
<p> <p>
<NuxtLinkLocale to="/">{{ $t('error.backHome') }}</NuxtLinkLocale> <NuxtLink to="/">Torna alla home</NuxtLink>
</p> </p>
</NuxtLayout> </NuxtLayout>
</template> </template>
frontend/app/layouts/default.vue
+24 -35
View File
@@ -1,8 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Category } from '#shared/types/blog' import type { Category } from '#shared/types/blog'
const { locale } = useI18n()
const { data: categories } = await useFetch<Category[]>('/api/categories', { const { data: categories } = await useFetch<Category[]>('/api/categories', {
key: 'nav-categories', key: 'nav-categories',
default: () => [], default: () => [],
@@ -11,29 +9,28 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
<template> <template>
<div class="page"> <div class="page">
<a class="skip-link" href="#main">{{ $t('site.skipToContent') }}</a> <a class="skip-link" href="#main">Vai al contenuto</a>
<header class="site-header"> <header class="site-header">
<div class="container"> <div class="container">
<p class="wordmark"> <p class="wordmark">
<NuxtLinkLocale to="/"> <NuxtLink to="/">
<img src="/logo.png" :alt="SITE_NAME" width="400" height="400"> <img src="/logo.png" :alt="SITE_NAME" width="400" height="400">
</NuxtLinkLocale> </NuxtLink>
</p> </p>
<p class="tagline kicker">{{ $t('site.tagline') }}</p> <p class="tagline kicker">Articoli, guide e analisi.</p>
</div> </div>
<nav class="site-nav" :aria-label="$t('site.mainNavigation')"> <nav class="site-nav" aria-label="Navigazione principale">
<div class="container nav-inner"> <div class="container nav-inner">
<ul> <ul>
<li><NuxtLinkLocale to="/blog">{{ $t('site.allArticles') }}</NuxtLinkLocale></li> <li><NuxtLink to="/blog">Tutti gli articoli</NuxtLink></li>
<li v-for="category in categories" :key="category.slug"> <li v-for="category in categories" :key="category.slug">
<NuxtLinkLocale :to="`/category/${category.slug}`"> <NuxtLink :to="`/category/${category.slug}`">
{{ category.name }} {{ category.name }}
</NuxtLinkLocale> </NuxtLink>
</li> </li>
</ul> </ul>
<LanguageSwitcher />
</div> </div>
</nav> </nav>
</header> </header>
@@ -46,35 +43,35 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
<div class="container footer-inner"> <div class="container footer-inner">
<div class="footer-block"> <div class="footer-block">
<img class="footer-logo" src="/logo.png" :alt="SITE_NAME" width="400" height="400"> <img class="footer-logo" src="/logo.png" :alt="SITE_NAME" width="400" height="400">
<p class="muted">{{ $t('site.tagline') }}</p> <p class="muted">Articoli, guide e analisi.</p>
<address class="contact"> <address class="contact">
{{ $t('site.contact') }}: Contatti:
<a :href="`mailto:${SITE_EMAIL}`">{{ SITE_EMAIL }}</a> <a :href="`mailto:${SITE_EMAIL}`">{{ SITE_EMAIL }}</a>
</address> </address>
</div> </div>
<nav class="footer-block" :aria-label="$t('site.categories')"> <nav class="footer-block" aria-label="Categorie">
<p class="kicker">{{ $t('site.categories') }}</p> <p class="kicker">Categorie</p>
<ul> <ul>
<li v-for="category in categories" :key="category.slug"> <li v-for="category in categories" :key="category.slug">
<NuxtLinkLocale :to="`/category/${category.slug}`"> <NuxtLink :to="`/category/${category.slug}`">
{{ category.name }} {{ category.name }}
</NuxtLinkLocale> </NuxtLink>
</li> </li>
<li v-if="!categories.length" class="muted">{{ $t('site.noCategories') }}</li> <li v-if="!categories.length" class="muted">Ancora nessuna pubblicazione</li>
</ul> </ul>
</nav> </nav>
<nav class="footer-block" :aria-label="$t('site.browse')"> <nav class="footer-block" aria-label="Naviga">
<p class="kicker">{{ $t('site.browse') }}</p> <p class="kicker">Naviga</p>
<ul> <ul>
<li><NuxtLinkLocale to="/">{{ $t('site.home') }}</NuxtLinkLocale></li> <li><NuxtLink to="/">Home</NuxtLink></li>
<li><NuxtLinkLocale to="/blog">{{ $t('site.allArticles') }}</NuxtLinkLocale></li> <li><NuxtLink to="/blog">Tutti gli articoli</NuxtLink></li>
</ul> </ul>
</nav> </nav>
<nav class="footer-block" :aria-label="$t('site.follow')"> <nav class="footer-block" aria-label="Seguici">
<p class="kicker">{{ $t('site.follow') }}</p> <p class="kicker">Seguici</p>
<ul> <ul>
<li v-for="social in SOCIAL_LINKS" :key="social.name"> <li v-for="social in SOCIAL_LINKS" :key="social.name">
<a class="social" :href="social.url" target="_blank" rel="noopener me"> <a class="social" :href="social.url" target="_blank" rel="noopener me">
@@ -86,8 +83,8 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
</nav> </nav>
</div> </div>
<p class="container copyright kicker" :lang="locale"> <p class="container copyright kicker">
&copy; {{ new Date().getFullYear() }} {{ SITE_NAME }}. {{ $t('site.rights') }} &copy; {{ new Date().getFullYear() }} {{ SITE_NAME }}. Tutti i diritti riservati.
</p> </p>
</footer> </footer>
</div> </div>
@@ -137,13 +134,9 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
border-top: 1px solid var(--color-border); border-top: 1px solid var(--color-border);
} }
/* Phones stack the links above the language picker, both centred; from tablet
up they sit on one line with the picker pushed to the right. */
.nav-inner { .nav-inner {
display: flex; display: flex;
flex-direction: column; justify-content: center;
align-items: center;
gap: 0.5rem;
padding-block: 0.6rem; padding-block: 0.6rem;
} }
@@ -167,10 +160,6 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
} }
.nav-inner { .nav-inner {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.75rem 2rem;
padding-block: 0.9rem; padding-block: 0.9rem;
} }
frontend/app/pages/blog/[slug].vue
+7 -8
View File
@@ -1,7 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Article } from '#shared/types/blog' import type { Article } from '#shared/types/blog'
const { locale } = useI18n()
const route = useRoute() const route = useRoute()
const slug = route.params.slug as string const slug = route.params.slug as string
@@ -53,13 +52,13 @@ useHead({
<template> <template>
<article v-if="article"> <article v-if="article">
<header class="article-header"> <header class="article-header">
<nav class="kicker" :aria-label="$t('article.breadcrumb')"> <nav class="kicker" aria-label="Percorso di navigazione">
<NuxtLinkLocale to="/blog">{{ $t('list.articles') }}</NuxtLinkLocale> <NuxtLink to="/blog">Articoli</NuxtLink>
<template v-if="article.category"> <template v-if="article.category">
<span aria-hidden="true"> / </span> <span aria-hidden="true"> / </span>
<NuxtLinkLocale :to="`/category/${article.category.slug}`"> <NuxtLink :to="`/category/${article.category.slug}`">
{{ article.category.name }} {{ article.category.name }}
</NuxtLinkLocale> </NuxtLink>
</template> </template>
</nav> </nav>
@@ -67,11 +66,11 @@ useHead({
<p class="kicker date"> <p class="kicker date">
<time :datetime="isoDate(article.publishedAt)"> <time :datetime="isoDate(article.publishedAt)">
{{ formatDateTime(article.publishedAt, locale) }} {{ formatDateTime(article.publishedAt) }}
</time> </time>
<template v-if="article.author"> <template v-if="article.author">
<span aria-hidden="true"> · </span> <span aria-hidden="true"> · </span>
<span>{{ $t('article.by', { name: article.author }) }}</span> <span>Di {{ article.author }}</span>
</template> </template>
</p> </p>
</header> </header>
@@ -89,7 +88,7 @@ useHead({
<div class="prose" v-html="article.html" /> <div class="prose" v-html="article.html" />
<p class="back"> <p class="back">
<NuxtLinkLocale to="/blog">{{ $t('article.back') }}</NuxtLinkLocale> <NuxtLink to="/blog">Torna a tutti gli articoli</NuxtLink>
</p> </p>
</article> </article>
</template> </template>
frontend/app/pages/blog/index.vue
+11 -12
View File
@@ -1,7 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { ArticleSummary, Paginated } from '#shared/types/blog' import type { ArticleSummary, Paginated } from '#shared/types/blog'
const { t } = useI18n()
const route = useRoute() const route = useRoute()
const page = computed(() => { const page = computed(() => {
@@ -19,8 +18,8 @@ const canonical = computed(
) )
useSeoMeta({ useSeoMeta({
title: () => (page.value > 1 ? t('list.articlesPage', { page: page.value }) : t('list.articles')), title: () => (page.value > 1 ? `Articoli — pagina ${page.value}` : 'Articoli'),
description: () => t('list.archiveDescription'), description: 'Tutti gli articoli pubblicati sul blog.',
ogType: 'website', ogType: 'website',
}) })
@@ -30,15 +29,15 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
<template> <template>
<div> <div>
<header class="page-header"> <header class="page-header">
<p class="kicker">{{ $t('list.archive') }}</p> <p class="kicker">L'archivio</p>
<h1>{{ $t('list.articles') }}</h1> <h1>Articoli</h1>
</header> </header>
<p v-if="error">{{ $t('list.failed') }}</p> <p v-if="error">Non è stato possibile caricare gli articoli. Riprova più tardi.</p>
<p v-else-if="status === 'pending'">{{ $t('list.loading') }}</p> <p v-else-if="status === 'pending'">Caricamento…</p>
<p v-else-if="!data?.items.length">{{ $t('list.empty') }}</p> <p v-else-if="!data?.items.length">Non è stato ancora pubblicato nulla.</p>
<template v-else> <template v-else>
<ul class="card-grid"> <ul class="card-grid">
@@ -47,19 +46,19 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
</li> </li>
</ul> </ul>
<nav v-if="data.pageCount > 1" class="pagination" :aria-label="$t('pagination.label')"> <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"> <NuxtLink v-if="data.page > 1" :to="{ query: { page: data.page - 1 } }" rel="prev">
{{ $t('pagination.previous') }} Pagina precedente
</NuxtLink> </NuxtLink>
<span class="muted"> <span class="muted">
{{ $t('pagination.position', { page: data.page, total: data.pageCount }) }} Pagina {{ data.page }} di {{ data.pageCount }}
</span> </span>
<NuxtLink <NuxtLink
v-if="data.page < data.pageCount" v-if="data.page < data.pageCount"
:to="{ query: { page: data.page + 1 } }" :to="{ query: { page: data.page + 1 } }"
rel="next" rel="next"
> >
{{ $t('pagination.next') }} Pagina successiva
</NuxtLink> </NuxtLink>
</nav> </nav>
</template> </template>
frontend/app/pages/category/[slug].vue
+8 -9
View File
@@ -1,7 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { ArticleSummary, Paginated, Category } from '#shared/types/blog' import type { ArticleSummary, Paginated, Category } from '#shared/types/blog'
const { t } = useI18n()
const route = useRoute() const route = useRoute()
const slug = route.params.slug as string const slug = route.params.slug as string
@@ -27,7 +26,7 @@ const canonical = computed(
useSeoMeta({ useSeoMeta({
title: category.value.name, title: category.value.name,
description: () => t('list.categoryDescription', { name: category.value?.name ?? '' }), description: () => `Tutti gli articoli nella categoria ${category.value?.name ?? ''}.`,
ogType: 'website', ogType: 'website',
}) })
@@ -37,13 +36,13 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
<template> <template>
<div> <div>
<header class="page-header"> <header class="page-header">
<p class="kicker">{{ $t('list.category') }}</p> <p class="kicker">Categoria</p>
<h1>{{ category?.name }}</h1> <h1>{{ category?.name }}</h1>
</header> </header>
<p v-if="error">{{ $t('list.failed') }}</p> <p v-if="error">Non è stato possibile caricare gli articoli. Riprova più tardi.</p>
<p v-else-if="!data?.items.length">{{ $t('list.categoryEmpty') }}</p> <p v-else-if="!data?.items.length">Non ci sono articoli in questa categoria.</p>
<template v-else> <template v-else>
<ul class="card-grid"> <ul class="card-grid">
@@ -52,19 +51,19 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
</li> </li>
</ul> </ul>
<nav v-if="data.pageCount > 1" class="pagination" :aria-label="$t('pagination.label')"> <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"> <NuxtLink v-if="data.page > 1" :to="{ query: { page: data.page - 1 } }" rel="prev">
{{ $t('pagination.previous') }} Pagina precedente
</NuxtLink> </NuxtLink>
<span class="muted"> <span class="muted">
{{ $t('pagination.position', { page: data.page, total: data.pageCount }) }} Pagina {{ data.page }} di {{ data.pageCount }}
</span> </span>
<NuxtLink <NuxtLink
v-if="data.page < data.pageCount" v-if="data.page < data.pageCount"
:to="{ query: { page: data.page + 1 } }" :to="{ query: { page: data.page + 1 } }"
rel="next" rel="next"
> >
{{ $t('pagination.next') }} Pagina successiva
</NuxtLink> </NuxtLink>
</nav> </nav>
</template> </template>
frontend/app/pages/index.vue
+14 -16
View File
@@ -1,8 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { ArticleSummary, Paginated } from '#shared/types/blog' import type { ArticleSummary, Paginated } from '#shared/types/blog'
const { t, locale } = useI18n()
const { data, error } = await useFetch<Paginated<ArticleSummary>>('/api/articles', { const { data, error } = await useFetch<Paginated<ArticleSummary>>('/api/articles', {
key: 'home-articles', key: 'home-articles',
query: { page: 1 }, query: { page: 1 },
@@ -24,9 +22,9 @@ useHead({ titleTemplate: '%s', link: [{ rel: 'canonical', href: canonical }] })
useSeoMeta({ useSeoMeta({
title: SITE_NAME, title: SITE_NAME,
description: () => t('site.tagline'), description: 'Articoli, guide e analisi.',
ogTitle: SITE_NAME, ogTitle: SITE_NAME,
ogDescription: () => t('site.tagline'), ogDescription: 'Articoli, guide e analisi.',
ogType: 'website', ogType: 'website',
ogUrl: canonical, ogUrl: canonical,
ogImage: `${config.siteUrl}/logo.png`, ogImage: `${config.siteUrl}/logo.png`,
@@ -35,13 +33,13 @@ useSeoMeta({
<template> <template>
<div> <div>
<p v-if="error">{{ $t('list.failed') }}</p> <p v-if="error">Non è stato possibile caricare gli articoli. Riprova più tardi.</p>
<p v-else-if="!featured">{{ $t('list.empty') }}</p> <p v-else-if="!featured">Non è stato ancora pubblicato nulla.</p>
<template v-else> <template v-else>
<article class="featured" :class="{ 'has-cover': featuredCover }"> <article class="featured" :class="{ 'has-cover': featuredCover }">
<NuxtLinkLocale <NuxtLink
v-if="featuredCover" v-if="featuredCover"
class="featured-cover" class="featured-cover"
:to="`/blog/${featured.slug}`" :to="`/blog/${featured.slug}`"
@@ -54,30 +52,30 @@ useSeoMeta({
:width="featured.cover?.width ?? undefined" :width="featured.cover?.width ?? undefined"
:height="featured.cover?.height ?? undefined" :height="featured.cover?.height ?? undefined"
> >
</NuxtLinkLocale> </NuxtLink>
<div class="featured-text"> <div class="featured-text">
<p class="kicker"> <p class="kicker">
{{ featured.category ? featured.category.name : $t('home.latest') }} {{ featured.category ? featured.category.name : 'Ultimo' }}
</p> </p>
<h1> <h1>
<NuxtLinkLocale :to="`/blog/${featured.slug}`">{{ featured.title }}</NuxtLinkLocale> <NuxtLink :to="`/blog/${featured.slug}`">{{ featured.title }}</NuxtLink>
</h1> </h1>
<p class="kicker date"> <p class="kicker date">
<time :datetime="isoDate(featured.publishedAt)"> <time :datetime="isoDate(featured.publishedAt)">
{{ formatDate(featured.publishedAt, locale) }} {{ formatDate(featured.publishedAt) }}
</time> </time>
</p> </p>
<p class="read-more"> <p class="read-more">
<NuxtLinkLocale :to="`/blog/${featured.slug}`"> <NuxtLink :to="`/blog/${featured.slug}`">
{{ $t('home.readArticle') }} Leggi l'articolo
</NuxtLinkLocale> </NuxtLink>
</p> </p>
</div> </div>
</article> </article>
<template v-if="rest.length"> <template v-if="rest.length">
<h2 class="section-heading kicker">{{ $t('home.moreStories') }}</h2> <h2 class="section-heading kicker">Altri articoli</h2>
<ul class="card-grid"> <ul class="card-grid">
<li v-for="article in rest" :key="article.slug"> <li v-for="article in rest" :key="article.slug">
@@ -87,7 +85,7 @@ useSeoMeta({
</template> </template>
<p class="more"> <p class="more">
<NuxtLinkLocale to="/blog">{{ $t('home.viewAll') }}</NuxtLinkLocale> <NuxtLink to="/blog">Vedi tutti gli articoli</NuxtLink>
</p> </p>
</template> </template>
</div> </div>
frontend/i18n/locales/en.json
-52
View File
@@ -1,52 +0,0 @@
{
"site": {
"tagline": "Articles, guides and analysis.",
"skipToContent": "Skip to content",
"mainNavigation": "Main navigation",
"languageLabel": "Language",
"allArticles": "All articles",
"home": "Home",
"browse": "Browse",
"categories": "Categories",
"contact": "Contact",
"noCategories": "Nothing published yet",
"rights": "All rights reserved.",
"follow": "Follow"
},
"home": {
"latest": "Latest",
"readArticle": "Read the article",
"moreStories": "More stories",
"viewAll": "View all articles"
},
"list": {
"archive": "The archive",
"articles": "Articles",
"articlesPage": "Articles — page {page}",
"archiveDescription": "Every article published on the blog.",
"category": "Category",
"categoryDescription": "Every article in the {name} category.",
"loading": "Loading…",
"empty": "Nothing has been published yet.",
"categoryEmpty": "There are no articles in this category.",
"failed": "Articles could not be loaded. Please try again later."
},
"pagination": {
"label": "Pagination",
"previous": "Previous page",
"next": "Next page",
"position": "Page {page} of {total}"
},
"article": {
"breadcrumb": "Breadcrumb",
"back": "Back to all articles",
"by": "By {name}"
},
"error": {
"notFoundTitle": "Page not found",
"notFoundBody": "The page you are looking for does not exist or has moved.",
"genericTitle": "Something went wrong",
"genericBody": "Please try again in a moment.",
"backHome": "Back to home"
}
}
frontend/i18n/locales/es.json
-52
View File
@@ -1,52 +0,0 @@
{
"site": {
"tagline": "Artículos, guías y análisis.",
"skipToContent": "Ir al contenido",
"mainNavigation": "Navegación principal",
"languageLabel": "Idioma",
"allArticles": "Todos los artículos",
"home": "Inicio",
"browse": "Explorar",
"categories": "Categorías",
"contact": "Contacto",
"noCategories": "Aún no hay publicaciones",
"rights": "Todos los derechos reservados.",
"follow": "Síguenos"
},
"home": {
"latest": "Último",
"readArticle": "Leer el artículo",
"moreStories": "Más artículos",
"viewAll": "Ver todos los artículos"
},
"list": {
"archive": "El archivo",
"articles": "Artículos",
"articlesPage": "Artículos — página {page}",
"archiveDescription": "Todos los artículos publicados en el blog.",
"category": "Categoría",
"categoryDescription": "Todos los artículos de la categoría {name}.",
"loading": "Cargando…",
"empty": "Todavía no se ha publicado nada.",
"categoryEmpty": "No hay artículos en esta categoría.",
"failed": "No se han podido cargar los artículos. Inténtalo de nuevo más tarde."
},
"pagination": {
"label": "Paginación",
"previous": "Página anterior",
"next": "Página siguiente",
"position": "Página {page} de {total}"
},
"article": {
"breadcrumb": "Ruta de navegación",
"back": "Volver a todos los artículos",
"by": "Por {name}"
},
"error": {
"notFoundTitle": "Página no encontrada",
"notFoundBody": "La página que buscas no existe o se ha movido.",
"genericTitle": "Algo ha salido mal",
"genericBody": "Inténtalo de nuevo en unos instantes.",
"backHome": "Volver al inicio"
}
}
frontend/i18n/locales/fr.json
-52
View File
@@ -1,52 +0,0 @@
{
"site": {
"tagline": "Articles, guides et analyses.",
"skipToContent": "Aller au contenu",
"mainNavigation": "Navigation principale",
"languageLabel": "Langue",
"allArticles": "Tous les articles",
"home": "Accueil",
"browse": "Parcourir",
"categories": "Catégories",
"contact": "Contact",
"noCategories": "Rien n'a encore été publié",
"rights": "Tous droits réservés.",
"follow": "Suivez-nous"
},
"home": {
"latest": "Dernier",
"readArticle": "Lire l'article",
"moreStories": "Autres articles",
"viewAll": "Voir tous les articles"
},
"list": {
"archive": "Les archives",
"articles": "Articles",
"articlesPage": "Articles — page {page}",
"archiveDescription": "Tous les articles publiés sur le blog.",
"category": "Catégorie",
"categoryDescription": "Tous les articles de la catégorie {name}.",
"loading": "Chargement…",
"empty": "Rien n'a encore été publié.",
"categoryEmpty": "Il n'y a aucun article dans cette catégorie.",
"failed": "Les articles n'ont pas pu être chargés. Veuillez réessayer plus tard."
},
"pagination": {
"label": "Pagination",
"previous": "Page précédente",
"next": "Page suivante",
"position": "Page {page} sur {total}"
},
"article": {
"breadcrumb": "Fil d'Ariane",
"back": "Retour à tous les articles",
"by": "Par {name}"
},
"error": {
"notFoundTitle": "Page introuvable",
"notFoundBody": "La page que vous cherchez n'existe pas ou a été déplacée.",
"genericTitle": "Une erreur est survenue",
"genericBody": "Veuillez réessayer dans un instant.",
"backHome": "Retour à l'accueil"
}
}
frontend/i18n/locales/it.json
-52
View File
@@ -1,52 +0,0 @@
{
"site": {
"tagline": "Articoli, guide e analisi.",
"skipToContent": "Vai al contenuto",
"mainNavigation": "Navigazione principale",
"languageLabel": "Lingua",
"allArticles": "Tutti gli articoli",
"home": "Home",
"browse": "Naviga",
"categories": "Categorie",
"contact": "Contatti",
"noCategories": "Ancora nessuna pubblicazione",
"rights": "Tutti i diritti riservati.",
"follow": "Seguici"
},
"home": {
"latest": "Ultimo",
"readArticle": "Leggi l'articolo",
"moreStories": "Altri articoli",
"viewAll": "Vedi tutti gli articoli"
},
"list": {
"archive": "L'archivio",
"articles": "Articoli",
"articlesPage": "Articoli — pagina {page}",
"archiveDescription": "Tutti gli articoli pubblicati sul blog.",
"category": "Categoria",
"categoryDescription": "Tutti gli articoli nella categoria {name}.",
"loading": "Caricamento…",
"empty": "Non è stato ancora pubblicato nulla.",
"categoryEmpty": "Non ci sono articoli in questa categoria.",
"failed": "Non è stato possibile caricare gli articoli. Riprova più tardi."
},
"pagination": {
"label": "Paginazione",
"previous": "Pagina precedente",
"next": "Pagina successiva",
"position": "Pagina {page} di {total}"
},
"article": {
"breadcrumb": "Percorso di navigazione",
"back": "Torna a tutti gli articoli",
"by": "Di {name}"
},
"error": {
"notFoundTitle": "Pagina non trovata",
"notFoundBody": "La pagina che cerchi non esiste o è stata spostata.",
"genericTitle": "Qualcosa è andato storto",
"genericBody": "Riprova tra qualche istante.",
"backHome": "Torna alla home"
}
}
frontend/nuxt.config.ts
+1 -23
View File
@@ -5,12 +5,11 @@ export default defineNuxtConfig({
compatibilityDate: '2025-07-15', compatibilityDate: '2025-07-15',
devtools: { enabled: true }, devtools: { enabled: true },
modules: ['@nuxtjs/i18n'],
css: ['~/assets/css/main.css'], css: ['~/assets/css/main.css'],
app: { app: {
head: { head: {
htmlAttrs: { lang: 'it' },
titleTemplate: `%s · ${SITE_NAME}`, titleTemplate: `%s · ${SITE_NAME}`,
meta: [{ name: 'viewport', content: 'width=device-width, initial-scale=1' }], meta: [{ name: 'viewport', content: 'width=device-width, initial-scale=1' }],
link: [ link: [
@@ -20,27 +19,6 @@ export default defineNuxtConfig({
}, },
}, },
i18n: {
// English keeps the bare URLs; the others are prefixed (/it/blog, /es/blog…).
defaultLocale: 'en',
strategy: 'prefix_except_default',
locales: [
{ code: 'en', language: 'en-GB', name: 'English', file: 'en.json' },
{ code: 'it', language: 'it-IT', name: 'Italiano', file: 'it.json' },
{ code: 'es', language: 'es-ES', name: 'Español', file: 'es.json' },
{ code: 'fr', language: 'fr-FR', name: 'Français', file: 'fr.json' },
],
// First visit follows the browser language; after that the cookie wins.
detectBrowserLanguage: {
useCookie: true,
cookieKey: 'locale',
redirectOn: 'root',
},
// Overridden per environment with NUXT_PUBLIC_I18N_BASE_URL, so the
// alternate-language links are absolute and correct in production.
baseUrl: 'http://localhost:3000',
},
runtimeConfig: { runtimeConfig: {
// Server-only: internal Strapi address, never exposed to the browser. // Server-only: internal Strapi address, never exposed to the browser.
strapiUrl: 'http://localhost:1337', strapiUrl: 'http://localhost:1337',
frontend/package-lock.json
Generated
+1 -2766
View File
File diff suppressed because it is too large Load Diff
frontend/package.json
-1
View File
@@ -11,7 +11,6 @@
"typecheck": "nuxt typecheck" "typecheck": "nuxt typecheck"
}, },
"dependencies": { "dependencies": {
"@nuxtjs/i18n": "^10.6.0",
"marked": "^18.0.11", "marked": "^18.0.11",
"nuxt": "^4.5.2", "nuxt": "^4.5.2",
"simple-icons": "^16.28.0", "simple-icons": "^16.28.0",
frontend/shared/utils/format.ts
+4 -4
View File
@@ -1,13 +1,13 @@
/** Human-readable date for display; returns an empty string when unset. */ /** Human-readable date for display; returns an empty string when unset. */
export function formatDate(value: string | null | undefined, locale = 'en-GB'): string { export function formatDate(value: string | null | undefined): string {
if (!value) return '' if (!value) return ''
return new Intl.DateTimeFormat(locale, { dateStyle: 'long' }).format(new Date(value)) return new Intl.DateTimeFormat('it-IT', { dateStyle: 'long' }).format(new Date(value))
} }
/** Date and time of publication, shown in the article byline. */ /** Date and time of publication, shown in the article byline. */
export function formatDateTime(value: string | null | undefined, locale = 'en-GB'): string { export function formatDateTime(value: string | null | undefined): string {
if (!value) return '' if (!value) return ''
return new Intl.DateTimeFormat(locale, { dateStyle: 'long', timeStyle: 'short' }) return new Intl.DateTimeFormat('it-IT', { dateStyle: 'long', timeStyle: 'short' })
.format(new Date(value)) .format(new Date(value))
} }