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

Add a language switcher with English, Italian, Spanish and French

Browse Source 
The interface is translated through @nuxtjs/i18n: strings live in
i18n/locales/*.json, routes are prefixed except for the default English, and
useLocaleHead emits the lang attribute, the hreflang alternates and og:locale.

The switcher is a native select rather than a custom dropdown: keyboard
support, the platform picker on mobile and correct labelling come for free.

Article content stays single-language — this translates the site chrome only.
This commit is contained in:
davide
2026-08-25 14:23:09 +02:00
parent f5639111f9
commit c08f53ca69
21 changed files with 3197 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CLAUDE.md
+5
View File
@@ -29,6 +29,11 @@ Browser → Caddy ─┬─ dominio pubblico → Nuxt 4 (SSR) → REST Strapi
Se aggiungi una vista, aggiungi l'endpoint lì e tipizza il ritorno in `shared/types/blog.ts`. Se aggiungi una vista, aggiungi l'endpoint lì e tipizza il ritorno in `shared/types/blog.ts`.
- 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
`frontend/i18n/locales/*.json`, rotte `prefix_except_default` (inglese senza prefisso),
`hreflang` e `og:locale` generati da `useLocaleHead()` in `app.vue`. Nessuna stringa
visibile va scritta a mano in un componente: aggiungi la chiave nei quattro file.
I **contenuti** invece restano 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
@@ -18,3 +18,4 @@ 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
@@ -52,6 +52,8 @@ 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,3 +1,8 @@
<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
+12 -4
View File
@@ -3,13 +3,19 @@ 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>
<template> <template>
<article class="card"> <article class="card">
<NuxtLink class="cover-link" :to="`/blog/${article.slug}`" tabindex="-1" aria-hidden="true"> <NuxtLinkLocale
class="cover-link"
:to="`/blog/${article.slug}`"
tabindex="-1"
aria-hidden="true"
>
<img <img
v-if="cover" v-if="cover"
class="cover" class="cover"
@@ -20,16 +26,18 @@ const cover = computed(() => mediaUrl(props.article.cover))
loading="lazy" loading="lazy"
> >
<span v-else class="cover placeholder" /> <span v-else class="cover placeholder" />
</NuxtLink> </NuxtLinkLocale>
<p v-if="article.category" class="kicker">{{ article.category.name }}</p> <p v-if="article.category" class="kicker">{{ article.category.name }}</p>
<h2> <h2>
<NuxtLink :to="`/blog/${article.slug}`">{{ article.title }}</NuxtLink> <NuxtLinkLocale :to="`/blog/${article.slug}`">{{ article.title }}</NuxtLinkLocale>
</h2> </h2>
<p class="kicker date"> <p class="kicker date">
<time :datetime="isoDate(article.publishedAt)">{{ formatDate(article.publishedAt) }}</time> <time :datetime="isoDate(article.publishedAt)">
{{ formatDate(article.publishedAt, locale) }}
</time>
</p> </p>
</article> </article>
</template> </template>
frontend/app/components/LanguageSwitcher.vue
+71
View File
@@ -0,0 +1,71 @@
<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.35rem 1.6rem 0.35rem 0.7rem;
border: 1px solid var(--color-border);
border-radius: 0;
background: transparent;
color: var(--color-body);
font: inherit;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
}
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
+4 -7
View File
@@ -5,23 +5,20 @@ 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 ? 'Page not found' : 'Something went wrong' }}</h1> <h1>{{ isNotFound ? $t('error.notFoundTitle') : $t('error.genericTitle') }}</h1>
<p class="muted"> <p class="muted">
{{ {{ isNotFound ? $t('error.notFoundBody') : $t('error.genericBody') }}
isNotFound
? 'The page you are looking for does not exist or has moved.'
: 'Please try again in a moment.'
}}
</p> </p>
<p> <p>
<NuxtLink to="/">Back to home</NuxtLink> <NuxtLinkLocale to="/">{{ $t('error.backHome') }}</NuxtLinkLocale>
</p> </p>
</NuxtLayout> </NuxtLayout>
</template> </template>
frontend/app/layouts/default.vue
+43 -24
View File
@@ -1,6 +1,8 @@
<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: () => [],
@@ -9,25 +11,30 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
<template> <template>
<div class="page"> <div class="page">
<a class="skip-link" href="#main">Skip to content</a> <a class="skip-link" href="#main">{{ $t('site.skipToContent') }}</a>
<header class="site-header"> <header class="site-header">
<div class="container"> <div class="container">
<p class="wordmark"> <p class="wordmark">
<NuxtLink to="/"> <NuxtLinkLocale to="/">
<img src="/logo.png" :alt="SITE_NAME" width="400" height="400"> <img src="/logo.png" :alt="SITE_NAME" width="400" height="400">
</NuxtLink> </NuxtLinkLocale>
</p> </p>
<p class="tagline kicker">{{ SITE_DESCRIPTION }}</p> <p class="tagline kicker">{{ $t('site.tagline') }}</p>
</div> </div>
<nav class="site-nav" aria-label="Main navigation"> <nav class="site-nav" :aria-label="$t('site.mainNavigation')">
<ul class="container"> <div class="container nav-inner">
<li><NuxtLink to="/blog">All articles</NuxtLink></li> <ul>
<li v-for="category in categories" :key="category.slug"> <li><NuxtLinkLocale to="/blog">{{ $t('site.allArticles') }}</NuxtLinkLocale></li>
<NuxtLink :to="`/category/${category.slug}`">{{ category.name }}</NuxtLink> <li v-for="category in categories" :key="category.slug">
</li> <NuxtLinkLocale :to="`/category/${category.slug}`">
</ul> {{ category.name }}
</NuxtLinkLocale>
</li>
</ul>
<LanguageSwitcher />
</div>
</nav> </nav>
</header> </header>
@@ -39,33 +46,36 @@ 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">{{ SITE_DESCRIPTION }}</p> <p class="muted">{{ $t('site.tagline') }}</p>
<address class="contact"> <address class="contact">
Contact: <a :href="`mailto:${SITE_EMAIL}`">{{ SITE_EMAIL }}</a> {{ $t('site.contact') }}:
<a :href="`mailto:${SITE_EMAIL}`">{{ SITE_EMAIL }}</a>
</address> </address>
</div> </div>
<nav class="footer-block" aria-label="Categories"> <nav class="footer-block" :aria-label="$t('site.categories')">
<p class="kicker">Categories</p> <p class="kicker">{{ $t('site.categories') }}</p>
<ul> <ul>
<li v-for="category in categories" :key="category.slug"> <li v-for="category in categories" :key="category.slug">
<NuxtLink :to="`/category/${category.slug}`">{{ category.name }}</NuxtLink> <NuxtLinkLocale :to="`/category/${category.slug}`">
{{ category.name }}
</NuxtLinkLocale>
</li> </li>
<li v-if="!categories.length" class="muted">Nothing published yet</li> <li v-if="!categories.length" class="muted">{{ $t('site.noCategories') }}</li>
</ul> </ul>
</nav> </nav>
<nav class="footer-block" aria-label="Sections"> <nav class="footer-block" :aria-label="$t('site.browse')">
<p class="kicker">Browse</p> <p class="kicker">{{ $t('site.browse') }}</p>
<ul> <ul>
<li><NuxtLink to="/">Home</NuxtLink></li> <li><NuxtLinkLocale to="/">{{ $t('site.home') }}</NuxtLinkLocale></li>
<li><NuxtLink to="/blog">All articles</NuxtLink></li> <li><NuxtLinkLocale to="/blog">{{ $t('site.allArticles') }}</NuxtLinkLocale></li>
</ul> </ul>
</nav> </nav>
</div> </div>
<p class="container copyright kicker"> <p class="container copyright kicker" :lang="locale">
&copy; {{ new Date().getFullYear() }} {{ SITE_NAME }}. All rights reserved. &copy; {{ new Date().getFullYear() }} {{ SITE_NAME }}. {{ $t('site.rights') }}
</p> </p>
</footer> </footer>
</div> </div>
@@ -109,12 +119,21 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
border-top: 1px solid var(--color-border); border-top: 1px solid var(--color-border);
} }
.nav-inner {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 2rem;
align-items: center;
justify-content: space-between;
padding-block: 0.9rem;
}
.site-nav ul { .site-nav ul {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.25rem 2rem; gap: 0.25rem 2rem;
justify-content: center; justify-content: center;
padding-block: 0.9rem; padding: 0;
margin: 0; margin: 0;
list-style: none; list-style: none;
font-size: 0.75rem; font-size: 0.75rem;
frontend/app/pages/blog/[slug].vue
+8 -7
View File
@@ -1,6 +1,7 @@
<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
@@ -13,7 +14,7 @@ if (!article.value) {
const { public: config } = useRuntimeConfig() const { public: config } = useRuntimeConfig()
const mediaUrl = useMediaUrl() const mediaUrl = useMediaUrl()
const canonical = `${config.siteUrl}/blog/${article.value.slug}` const canonical = `${config.siteUrl}${route.path}`
const cover = computed(() => mediaUrl(article.value?.cover) ?? undefined) const cover = computed(() => mediaUrl(article.value?.cover) ?? undefined)
useSeoMeta({ useSeoMeta({
@@ -49,13 +50,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="Breadcrumb"> <nav class="kicker" :aria-label="$t('article.breadcrumb')">
<NuxtLink to="/blog">Articles</NuxtLink> <NuxtLinkLocale to="/blog">{{ $t('list.articles') }}</NuxtLinkLocale>
<template v-if="article.category"> <template v-if="article.category">
<span aria-hidden="true"> / </span> <span aria-hidden="true"> / </span>
<NuxtLink :to="`/category/${article.category.slug}`"> <NuxtLinkLocale :to="`/category/${article.category.slug}`">
{{ article.category.name }} {{ article.category.name }}
</NuxtLink> </NuxtLinkLocale>
</template> </template>
</nav> </nav>
@@ -63,7 +64,7 @@ useHead({
<p class="kicker date"> <p class="kicker date">
<time :datetime="isoDate(article.publishedAt)"> <time :datetime="isoDate(article.publishedAt)">
{{ formatDate(article.publishedAt) }} {{ formatDate(article.publishedAt, locale) }}
</time> </time>
</p> </p>
</header> </header>
@@ -81,7 +82,7 @@ useHead({
<div class="prose" v-html="article.html" /> <div class="prose" v-html="article.html" />
<p class="back"> <p class="back">
<NuxtLink to="/blog">Back to all articles</NuxtLink> <NuxtLinkLocale to="/blog">{{ $t('article.back') }}</NuxtLinkLocale>
</p> </p>
</article> </article>
</template> </template>
frontend/app/pages/blog/index.vue
+16 -13
View File
@@ -1,7 +1,9 @@
<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(() => {
const value = Number(route.query.page) const value = Number(route.query.page)
return Number.isInteger(value) && value > 0 ? value : 1 return Number.isInteger(value) && value > 0 ? value : 1
@@ -13,12 +15,12 @@ const { data, error, status } = await useFetch<Paginated<ArticleSummary>>('/api/
const { public: config } = useRuntimeConfig() const { public: config } = useRuntimeConfig()
const canonical = computed( const canonical = computed(
() => `${config.siteUrl}/blog${page.value > 1 ? `?page=${page.value}` : ''}` () => `${config.siteUrl}${route.path}${page.value > 1 ? `?page=${page.value}` : ''}`
) )
useSeoMeta({ useSeoMeta({
title: page.value > 1 ? `Articles — page ${page.value}` : 'Articles', title: () => (page.value > 1 ? t('list.articlesPage', { page: page.value }) : t('list.articles')),
description: 'Every article published on the blog.', description: () => t('list.archiveDescription'),
ogType: 'website', ogType: 'website',
}) })
@@ -28,15 +30,15 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
<template> <template>
<div> <div>
<header class="page-header"> <header class="page-header">
<p class="kicker">The archive</p> <p class="kicker">{{ $t('list.archive') }}</p>
<h1>Articles</h1> <h1>{{ $t('list.articles') }}</h1>
</header> </header>
<p v-if="error">Articles could not be loaded. Please try again later.</p> <p v-if="error">{{ $t('list.failed') }}</p>
<p v-else-if="status === 'pending'">Loading…</p> <p v-else-if="status === 'pending'">{{ $t('list.loading') }}</p>
<p v-else-if="!data?.items.length">Nothing has been published yet.</p> <p v-else-if="!data?.items.length">{{ $t('list.empty') }}</p>
<template v-else> <template v-else>
<ul class="card-grid"> <ul class="card-grid">
@@ -45,20 +47,21 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
</li> </li>
</ul> </ul>
<nav v-if="data.pageCount > 1" class="pagination" aria-label="Pagination"> <nav v-if="data.pageCount > 1" class="pagination" :aria-label="$t('pagination.label')">
<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">
Previous page {{ $t('pagination.previous') }}
</NuxtLink> </NuxtLink>
<span class="muted">Page {{ data.page }} of {{ data.pageCount }}</span> <span class="muted">
{{ $t('pagination.position', { page: data.page, total: data.pageCount }) }}
</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"
> >
Next page {{ $t('pagination.next') }}
</NuxtLink> </NuxtLink>
</nav> </nav>
</template> </template>
</div> </div>
</template> </template>
frontend/app/pages/category/[slug].vue
+12 -10
View File
@@ -1,6 +1,7 @@
<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
@@ -21,12 +22,12 @@ const { data, error } = await useFetch<Paginated<ArticleSummary>>('/api/articles
const { public: config } = useRuntimeConfig() const { public: config } = useRuntimeConfig()
const canonical = computed( const canonical = computed(
() => `${config.siteUrl}/category/${slug}${page.value > 1 ? `?page=${page.value}` : ''}` () => `${config.siteUrl}${route.path}${page.value > 1 ? `?page=${page.value}` : ''}`
) )
useSeoMeta({ useSeoMeta({
title: category.value.name, title: category.value.name,
description: `Every article in the ${category.value.name} category.`, description: () => t('list.categoryDescription', { name: category.value?.name ?? '' }),
ogType: 'website', ogType: 'website',
}) })
@@ -36,13 +37,13 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
<template> <template>
<div> <div>
<header class="page-header"> <header class="page-header">
<p class="kicker">Category</p> <p class="kicker">{{ $t('list.category') }}</p>
<h1>{{ category?.name }}</h1> <h1>{{ category?.name }}</h1>
</header> </header>
<p v-if="error">Articles could not be loaded. Please try again later.</p> <p v-if="error">{{ $t('list.failed') }}</p>
<p v-else-if="!data?.items.length">There are no articles in this category.</p> <p v-else-if="!data?.items.length">{{ $t('list.categoryEmpty') }}</p>
<template v-else> <template v-else>
<ul class="card-grid"> <ul class="card-grid">
@@ -51,20 +52,21 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
</li> </li>
</ul> </ul>
<nav v-if="data.pageCount > 1" class="pagination" aria-label="Pagination"> <nav v-if="data.pageCount > 1" class="pagination" :aria-label="$t('pagination.label')">
<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">
Previous page {{ $t('pagination.previous') }}
</NuxtLink> </NuxtLink>
<span class="muted">Page {{ data.page }} of {{ data.pageCount }}</span> <span class="muted">
{{ $t('pagination.position', { page: data.page, total: data.pageCount }) }}
</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"
> >
Next page {{ $t('pagination.next') }}
</NuxtLink> </NuxtLink>
</nav> </nav>
</template> </template>
</div> </div>
</template> </template>
frontend/app/pages/index.vue
+25 -14
View File
@@ -1,6 +1,8 @@
<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 },
@@ -14,30 +16,37 @@ const mediaUrl = useMediaUrl()
const featuredCover = computed(() => mediaUrl(featured.value?.cover)) const featuredCover = computed(() => mediaUrl(featured.value?.cover))
const { public: config } = useRuntimeConfig() 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. // The home page is the site itself, so it carries the bare name as its title.
useHead({ titleTemplate: '%s', link: [{ rel: 'canonical', href: config.siteUrl }] }) useHead({ titleTemplate: '%s', link: [{ rel: 'canonical', href: canonical }] })
useSeoMeta({ useSeoMeta({
title: SITE_NAME, title: SITE_NAME,
description: SITE_DESCRIPTION, description: () => t('site.tagline'),
ogTitle: SITE_NAME, ogTitle: SITE_NAME,
ogDescription: SITE_DESCRIPTION, ogDescription: () => t('site.tagline'),
ogType: 'website', ogType: 'website',
ogUrl: config.siteUrl, ogUrl: canonical,
ogImage: `${config.siteUrl}/logo.png`, ogImage: `${config.siteUrl}/logo.png`,
}) })
</script> </script>
<template> <template>
<div> <div>
<p v-if="error">Articles could not be loaded. Please try again later.</p> <p v-if="error">{{ $t('list.failed') }}</p>
<p v-else-if="!featured">Nothing has been published yet.</p> <p v-else-if="!featured">{{ $t('list.empty') }}</p>
<template v-else> <template v-else>
<article class="featured"> <article class="featured">
<NuxtLink class="featured-cover" :to="`/blog/${featured.slug}`" tabindex="-1" aria-hidden="true"> <NuxtLinkLocale
class="featured-cover"
:to="`/blog/${featured.slug}`"
tabindex="-1"
aria-hidden="true"
>
<img <img
v-if="featuredCover" v-if="featuredCover"
:src="featuredCover" :src="featuredCover"
@@ -46,28 +55,30 @@ useSeoMeta({
:height="featured.cover?.height ?? undefined" :height="featured.cover?.height ?? undefined"
> >
<span v-else class="placeholder" /> <span v-else class="placeholder" />
</NuxtLink> </NuxtLinkLocale>
<div class="featured-text"> <div class="featured-text">
<p class="kicker"> <p class="kicker">
{{ featured.category ? featured.category.name : 'Latest' }} {{ featured.category ? featured.category.name : $t('home.latest') }}
</p> </p>
<h1> <h1>
<NuxtLink :to="`/blog/${featured.slug}`">{{ featured.title }}</NuxtLink> <NuxtLinkLocale :to="`/blog/${featured.slug}`">{{ featured.title }}</NuxtLinkLocale>
</h1> </h1>
<p class="kicker date"> <p class="kicker date">
<time :datetime="isoDate(featured.publishedAt)"> <time :datetime="isoDate(featured.publishedAt)">
{{ formatDate(featured.publishedAt) }} {{ formatDate(featured.publishedAt, locale) }}
</time> </time>
</p> </p>
<p class="read-more"> <p class="read-more">
<NuxtLink :to="`/blog/${featured.slug}`">Read the article</NuxtLink> <NuxtLinkLocale :to="`/blog/${featured.slug}`">
{{ $t('home.readArticle') }}
</NuxtLinkLocale>
</p> </p>
</div> </div>
</article> </article>
<template v-if="rest.length"> <template v-if="rest.length">
<h2 class="section-heading kicker">More stories</h2> <h2 class="section-heading kicker">{{ $t('home.moreStories') }}</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">
@@ -77,7 +88,7 @@ useSeoMeta({
</template> </template>
<p class="more"> <p class="more">
<NuxtLink to="/blog">View all articles</NuxtLink> <NuxtLinkLocale to="/blog">{{ $t('home.viewAll') }}</NuxtLinkLocale>
</p> </p>
</template> </template>
</div> </div>
frontend/i18n/locales/en.json
+50
View File
@@ -0,0 +1,50 @@
{
"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."
},
"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"
},
"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
+50
View File
@@ -0,0 +1,50 @@
{
"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."
},
"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"
},
"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
+50
View File
@@ -0,0 +1,50 @@
{
"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."
},
"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"
},
"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
+50
View File
@@ -0,0 +1,50 @@
{
"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."
},
"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"
},
"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
+23 -1
View File
@@ -5,11 +5,12 @@ 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: 'en' },
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: [
@@ -19,6 +20,27 @@ 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
+2766 -1
View File
File diff suppressed because it is too large Load Diff
frontend/package.json
+1
View File
@@ -11,6 +11,7 @@
"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",
"vue": "^3.5.41", "vue": "^3.5.41",
frontend/shared/utils/format.ts
+2 -2
View File
@@ -1,7 +1,7 @@
/** 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): string { export function formatDate(value: string | null | undefined, locale = 'en-GB'): string {
if (!value) return '' if (!value) return ''
return new Intl.DateTimeFormat('en-GB', { dateStyle: 'long' }).format(new Date(value)) return new Intl.DateTimeFormat(locale, { dateStyle: 'long' }).format(new Date(value))
} }
/** Machine-readable date for the `datetime` attribute and structured data. */ /** Machine-readable date for the `datetime` attribute and structured data. */
frontend/shared/utils/site.ts
+1 -4
View File
@@ -1,8 +1,5 @@
/** Name of the blog, used in the header, the page titles and the footer. */ /** Name of the blog. Not translated: it is the brand. */
export const SITE_NAME = 'CorralitoComing' export const SITE_NAME = 'CorralitoComing'
/** One-line description, used as the home page meta description. */
export const SITE_DESCRIPTION = 'Articles, guides and analysis.'
/** Public contact address, shown in the footer. */ /** Public contact address, shown in the footer. */
export const SITE_EMAIL = 'corralitocoming@gmail.com' export const SITE_EMAIL = 'corralitocoming@gmail.com'