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
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>
<div>
<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 { locale } = useI18n()
const mediaUrl = useMediaUrl()
const cover = computed(() => mediaUrl(props.article.cover))
</script>
@@ -12,7 +11,7 @@ const cover = computed(() => mediaUrl(props.article.cover))
<article class="card">
<!-- No placeholder box when there is no cover: an empty grey rectangle
reads as a broken image rather than as a deliberate choice. -->
<NuxtLinkLocale
<NuxtLink
v-if="cover"
class="cover-link"
:to="`/blog/${article.slug}`"
@@ -27,17 +26,17 @@ const cover = computed(() => mediaUrl(props.article.cover))
:height="article.cover?.height ?? undefined"
loading="lazy"
>
</NuxtLinkLocale>
</NuxtLink>
<p v-if="article.category" class="kicker">{{ article.category.name }}</p>
<h2>
<NuxtLinkLocale :to="`/blog/${article.slug}`">{{ article.title }}</NuxtLinkLocale>
<NuxtLink :to="`/blog/${article.slug}`">{{ article.title }}</NuxtLink>
</h2>
<p class="kicker date">
<time :datetime="isoDate(article.publishedAt)">
{{ formatDate(article.publishedAt, locale) }}
{{ formatDate(article.publishedAt) }}
</time>
</p>
</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)
useHead(useLocaleHead())
useSeoMeta({ robots: 'noindex' })
</script>
<template>
<NuxtLayout>
<h1>{{ isNotFound ? $t('error.notFoundTitle') : $t('error.genericTitle') }}</h1>
<h1>{{ isNotFound ? 'Pagina non trovata' : 'Qualcosa è andato storto' }}</h1>
<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>
<NuxtLinkLocale to="/">{{ $t('error.backHome') }}</NuxtLinkLocale>
<NuxtLink to="/">Torna alla home</NuxtLink>
</p>
</NuxtLayout>
</template>
frontend/app/layouts/default.vue
+24 -35
View File
@@ -1,8 +1,6 @@
<script setup lang="ts">
import type { Category } from '#shared/types/blog'
const { locale } = useI18n()
const { data: categories } = await useFetch<Category[]>('/api/categories', {
key: 'nav-categories',
default: () => [],
@@ -11,29 +9,28 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
<template>
<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">
<div class="container">
<p class="wordmark">
<NuxtLinkLocale to="/">
<NuxtLink to="/">
<img src="/logo.png" :alt="SITE_NAME" width="400" height="400">
</NuxtLinkLocale>
</NuxtLink>
</p>
<p class="tagline kicker">{{ $t('site.tagline') }}</p>
<p class="tagline kicker">Articoli, guide e analisi.</p>
</div>
<nav class="site-nav" :aria-label="$t('site.mainNavigation')">
<nav class="site-nav" aria-label="Navigazione principale">
<div class="container nav-inner">
<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">
<NuxtLinkLocale :to="`/category/${category.slug}`">
<NuxtLink :to="`/category/${category.slug}`">
{{ category.name }}
</NuxtLinkLocale>
</NuxtLink>
</li>
</ul>
<LanguageSwitcher />
</div>
</nav>
</header>
@@ -46,35 +43,35 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
<div class="container footer-inner">
<div class="footer-block">
<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">
{{ $t('site.contact') }}:
Contatti:
<a :href="`mailto:${SITE_EMAIL}`">{{ SITE_EMAIL }}</a>
</address>
</div>
<nav class="footer-block" :aria-label="$t('site.categories')">
<p class="kicker">{{ $t('site.categories') }}</p>
<nav class="footer-block" aria-label="Categorie">
<p class="kicker">Categorie</p>
<ul>
<li v-for="category in categories" :key="category.slug">
<NuxtLinkLocale :to="`/category/${category.slug}`">
<NuxtLink :to="`/category/${category.slug}`">
{{ category.name }}
</NuxtLinkLocale>
</NuxtLink>
</li>
<li v-if="!categories.length" class="muted">{{ $t('site.noCategories') }}</li>
<li v-if="!categories.length" class="muted">Ancora nessuna pubblicazione</li>
</ul>
</nav>
<nav class="footer-block" :aria-label="$t('site.browse')">
<p class="kicker">{{ $t('site.browse') }}</p>
<nav class="footer-block" aria-label="Naviga">
<p class="kicker">Naviga</p>
<ul>
<li><NuxtLinkLocale to="/">{{ $t('site.home') }}</NuxtLinkLocale></li>
<li><NuxtLinkLocale to="/blog">{{ $t('site.allArticles') }}</NuxtLinkLocale></li>
<li><NuxtLink to="/">Home</NuxtLink></li>
<li><NuxtLink to="/blog">Tutti gli articoli</NuxtLink></li>
</ul>
</nav>
<nav class="footer-block" :aria-label="$t('site.follow')">
<p class="kicker">{{ $t('site.follow') }}</p>
<nav class="footer-block" aria-label="Seguici">
<p class="kicker">Seguici</p>
<ul>
<li v-for="social in SOCIAL_LINKS" :key="social.name">
<a class="social" :href="social.url" target="_blank" rel="noopener me">
@@ -86,8 +83,8 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
</nav>
</div>
<p class="container copyright kicker" :lang="locale">
&copy; {{ new Date().getFullYear() }} {{ SITE_NAME }}. {{ $t('site.rights') }}
<p class="container copyright kicker">
&copy; {{ new Date().getFullYear() }} {{ SITE_NAME }}. Tutti i diritti riservati.
</p>
</footer>
</div>
@@ -137,13 +134,9 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
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 {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
justify-content: center;
padding-block: 0.6rem;
}
@@ -167,10 +160,6 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
}
.nav-inner {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.75rem 2rem;
padding-block: 0.9rem;
}
frontend/app/pages/blog/[slug].vue
+7 -8
View File
@@ -1,7 +1,6 @@
<script setup lang="ts">
import type { Article } from '#shared/types/blog'
const { locale } = useI18n()
const route = useRoute()
const slug = route.params.slug as string
@@ -53,13 +52,13 @@ useHead({
<template>
<article v-if="article">
<header class="article-header">
<nav class="kicker" :aria-label="$t('article.breadcrumb')">
<NuxtLinkLocale to="/blog">{{ $t('list.articles') }}</NuxtLinkLocale>
<nav class="kicker" aria-label="Percorso di navigazione">
<NuxtLink to="/blog">Articoli</NuxtLink>
<template v-if="article.category">
<span aria-hidden="true"> / </span>
<NuxtLinkLocale :to="`/category/${article.category.slug}`">
<NuxtLink :to="`/category/${article.category.slug}`">
{{ article.category.name }}
</NuxtLinkLocale>
</NuxtLink>
</template>
</nav>
@@ -67,11 +66,11 @@ useHead({
<p class="kicker date">
<time :datetime="isoDate(article.publishedAt)">
{{ formatDateTime(article.publishedAt, locale) }}
{{ formatDateTime(article.publishedAt) }}
</time>
<template v-if="article.author">
<span aria-hidden="true"> · </span>
<span>{{ $t('article.by', { name: article.author }) }}</span>
<span>Di {{ article.author }}</span>
</template>
</p>
</header>
@@ -89,7 +88,7 @@ useHead({
<div class="prose" v-html="article.html" />
<p class="back">
<NuxtLinkLocale to="/blog">{{ $t('article.back') }}</NuxtLinkLocale>
<NuxtLink to="/blog">Torna a tutti gli articoli</NuxtLink>
</p>
</article>
</template>
frontend/app/pages/blog/index.vue
+11 -12
View File
@@ -1,7 +1,6 @@
<script setup lang="ts">
import type { ArticleSummary, Paginated } from '#shared/types/blog'
const { t } = useI18n()
const route = useRoute()
const page = computed(() => {
@@ -19,8 +18,8 @@ const canonical = computed(
)
useSeoMeta({
title: () => (page.value > 1 ? t('list.articlesPage', { page: page.value }) : t('list.articles')),
description: () => t('list.archiveDescription'),
title: () => (page.value > 1 ? `Articoli — pagina ${page.value}` : 'Articoli'),
description: 'Tutti gli articoli pubblicati sul blog.',
ogType: 'website',
})
@@ -30,15 +29,15 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
<template>
<div>
<header class="page-header">
<p class="kicker">{{ $t('list.archive') }}</p>
<h1>{{ $t('list.articles') }}</h1>
<p class="kicker">L'archivio</p>
<h1>Articoli</h1>
</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>
<ul class="card-grid">
@@ -47,19 +46,19 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
</li>
</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">
{{ $t('pagination.previous') }}
Pagina precedente
</NuxtLink>
<span class="muted">
{{ $t('pagination.position', { page: data.page, total: data.pageCount }) }}
Pagina {{ data.page }} di {{ data.pageCount }}
</span>
<NuxtLink
v-if="data.page < data.pageCount"
:to="{ query: { page: data.page + 1 } }"
rel="next"
>
{{ $t('pagination.next') }}
Pagina successiva
</NuxtLink>
</nav>
</template>
frontend/app/pages/category/[slug].vue
+8 -9
View File
@@ -1,7 +1,6 @@
<script setup lang="ts">
import type { ArticleSummary, Paginated, Category } from '#shared/types/blog'
const { t } = useI18n()
const route = useRoute()
const slug = route.params.slug as string
@@ -27,7 +26,7 @@ const canonical = computed(
useSeoMeta({
title: category.value.name,
description: () => t('list.categoryDescription', { name: category.value?.name ?? '' }),
description: () => `Tutti gli articoli nella categoria ${category.value?.name ?? ''}.`,
ogType: 'website',
})
@@ -37,13 +36,13 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
<template>
<div>
<header class="page-header">
<p class="kicker">{{ $t('list.category') }}</p>
<p class="kicker">Categoria</p>
<h1>{{ category?.name }}</h1>
</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>
<ul class="card-grid">
@@ -52,19 +51,19 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
</li>
</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">
{{ $t('pagination.previous') }}
Pagina precedente
</NuxtLink>
<span class="muted">
{{ $t('pagination.position', { page: data.page, total: data.pageCount }) }}
Pagina {{ data.page }} di {{ data.pageCount }}
</span>
<NuxtLink
v-if="data.page < data.pageCount"
:to="{ query: { page: data.page + 1 } }"
rel="next"
>
{{ $t('pagination.next') }}
Pagina successiva
</NuxtLink>
</nav>
</template>
frontend/app/pages/index.vue
+14 -16
View File
@@ -1,8 +1,6 @@
<script setup lang="ts">
import type { ArticleSummary, Paginated } from '#shared/types/blog'
const { t, locale } = useI18n()
const { data, error } = await useFetch<Paginated<ArticleSummary>>('/api/articles', {
key: 'home-articles',
query: { page: 1 },
@@ -24,9 +22,9 @@ useHead({ titleTemplate: '%s', link: [{ rel: 'canonical', href: canonical }] })
useSeoMeta({
title: SITE_NAME,
description: () => t('site.tagline'),
description: 'Articoli, guide e analisi.',
ogTitle: SITE_NAME,
ogDescription: () => t('site.tagline'),
ogDescription: 'Articoli, guide e analisi.',
ogType: 'website',
ogUrl: canonical,
ogImage: `${config.siteUrl}/logo.png`,
@@ -35,13 +33,13 @@ useSeoMeta({
<template>
<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>
<article class="featured" :class="{ 'has-cover': featuredCover }">
<NuxtLinkLocale
<NuxtLink
v-if="featuredCover"
class="featured-cover"
:to="`/blog/${featured.slug}`"
@@ -54,30 +52,30 @@ useSeoMeta({
:width="featured.cover?.width ?? undefined"
:height="featured.cover?.height ?? undefined"
>
</NuxtLinkLocale>
</NuxtLink>
<div class="featured-text">
<p class="kicker">
{{ featured.category ? featured.category.name : $t('home.latest') }}
{{ featured.category ? featured.category.name : 'Ultimo' }}
</p>
<h1>
<NuxtLinkLocale :to="`/blog/${featured.slug}`">{{ featured.title }}</NuxtLinkLocale>
<NuxtLink :to="`/blog/${featured.slug}`">{{ featured.title }}</NuxtLink>
</h1>
<p class="kicker date">
<time :datetime="isoDate(featured.publishedAt)">
{{ formatDate(featured.publishedAt, locale) }}
{{ formatDate(featured.publishedAt) }}
</time>
</p>
<p class="read-more">
<NuxtLinkLocale :to="`/blog/${featured.slug}`">
{{ $t('home.readArticle') }}
</NuxtLinkLocale>
<NuxtLink :to="`/blog/${featured.slug}`">
Leggi l'articolo
</NuxtLink>
</p>
</div>
</article>
<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">
<li v-for="article in rest" :key="article.slug">
@@ -87,7 +85,7 @@ useSeoMeta({
</template>
<p class="more">
<NuxtLinkLocale to="/blog">{{ $t('home.viewAll') }}</NuxtLinkLocale>
<NuxtLink to="/blog">Vedi tutti gli articoli</NuxtLink>
</p>
</template>
</div>