Add a language switcher with English, Italian, Spanish and French
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:
@@ -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`.
|
||||
- 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.
|
||||
- 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,
|
||||
e disattiva la registrazione pubblica: non esistono utenti front-end, solo amministratori.
|
||||
Qualsiasi permesso in più va motivato.
|
||||
|
||||
@@ -18,3 +18,4 @@ services:
|
||||
environment:
|
||||
NUXT_PUBLIC_SITE_URL: http://localhost:3000
|
||||
NUXT_PUBLIC_STRAPI_URL: http://localhost:1337
|
||||
NUXT_PUBLIC_I18N_BASE_URL: http://localhost:3000
|
||||
|
||||
@@ -52,6 +52,8 @@ services:
|
||||
NUXT_STRAPI_URL: ${STRAPI_URL}
|
||||
NUXT_PUBLIC_SITE_URL: ${PUBLIC_SITE_URL}
|
||||
NUXT_PUBLIC_STRAPI_URL: ${PUBLIC_STRAPI_URL}
|
||||
# Absolute origin for the alternate-language links.
|
||||
NUXT_PUBLIC_I18N_BASE_URL: ${PUBLIC_SITE_URL}
|
||||
|
||||
caddy:
|
||||
image: caddy:2-alpine
|
||||
|
||||
@@ -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>
|
||||
<div>
|
||||
<NuxtRouteAnnouncer />
|
||||
|
||||
@@ -3,13 +3,19 @@ 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>
|
||||
|
||||
<template>
|
||||
<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
|
||||
v-if="cover"
|
||||
class="cover"
|
||||
@@ -20,16 +26,18 @@ const cover = computed(() => mediaUrl(props.article.cover))
|
||||
loading="lazy"
|
||||
>
|
||||
<span v-else class="cover placeholder" />
|
||||
</NuxtLink>
|
||||
</NuxtLinkLocale>
|
||||
|
||||
<p v-if="article.category" class="kicker">{{ article.category.name }}</p>
|
||||
|
||||
<h2>
|
||||
<NuxtLink :to="`/blog/${article.slug}`">{{ article.title }}</NuxtLink>
|
||||
<NuxtLinkLocale :to="`/blog/${article.slug}`">{{ article.title }}</NuxtLinkLocale>
|
||||
</h2>
|
||||
|
||||
<p class="kicker date">
|
||||
<time :datetime="isoDate(article.publishedAt)">{{ formatDate(article.publishedAt) }}</time>
|
||||
<time :datetime="isoDate(article.publishedAt)">
|
||||
{{ formatDate(article.publishedAt, locale) }}
|
||||
</time>
|
||||
</p>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
@@ -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>
|
||||
@@ -5,23 +5,20 @@ const props = defineProps<{ error: NuxtError }>()
|
||||
|
||||
const isNotFound = computed(() => props.error.statusCode === 404)
|
||||
|
||||
useHead(useLocaleHead())
|
||||
useSeoMeta({ robots: 'noindex' })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLayout>
|
||||
<h1>{{ isNotFound ? 'Page not found' : 'Something went wrong' }}</h1>
|
||||
<h1>{{ isNotFound ? $t('error.notFoundTitle') : $t('error.genericTitle') }}</h1>
|
||||
|
||||
<p class="muted">
|
||||
{{
|
||||
isNotFound
|
||||
? 'The page you are looking for does not exist or has moved.'
|
||||
: 'Please try again in a moment.'
|
||||
}}
|
||||
{{ isNotFound ? $t('error.notFoundBody') : $t('error.genericBody') }}
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<NuxtLink to="/">Back to home</NuxtLink>
|
||||
<NuxtLinkLocale to="/">{{ $t('error.backHome') }}</NuxtLinkLocale>
|
||||
</p>
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<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: () => [],
|
||||
@@ -9,25 +11,30 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
|
||||
|
||||
<template>
|
||||
<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">
|
||||
<div class="container">
|
||||
<p class="wordmark">
|
||||
<NuxtLink to="/">
|
||||
<NuxtLinkLocale to="/">
|
||||
<img src="/logo.png" :alt="SITE_NAME" width="400" height="400">
|
||||
</NuxtLink>
|
||||
</NuxtLinkLocale>
|
||||
</p>
|
||||
<p class="tagline kicker">{{ SITE_DESCRIPTION }}</p>
|
||||
<p class="tagline kicker">{{ $t('site.tagline') }}</p>
|
||||
</div>
|
||||
|
||||
<nav class="site-nav" aria-label="Main navigation">
|
||||
<ul class="container">
|
||||
<li><NuxtLink to="/blog">All articles</NuxtLink></li>
|
||||
<li v-for="category in categories" :key="category.slug">
|
||||
<NuxtLink :to="`/category/${category.slug}`">{{ category.name }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
<nav class="site-nav" :aria-label="$t('site.mainNavigation')">
|
||||
<div class="container nav-inner">
|
||||
<ul>
|
||||
<li><NuxtLinkLocale to="/blog">{{ $t('site.allArticles') }}</NuxtLinkLocale></li>
|
||||
<li v-for="category in categories" :key="category.slug">
|
||||
<NuxtLinkLocale :to="`/category/${category.slug}`">
|
||||
{{ category.name }}
|
||||
</NuxtLinkLocale>
|
||||
</li>
|
||||
</ul>
|
||||
<LanguageSwitcher />
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
@@ -39,33 +46,36 @@ 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">{{ SITE_DESCRIPTION }}</p>
|
||||
<p class="muted">{{ $t('site.tagline') }}</p>
|
||||
<address class="contact">
|
||||
Contact: <a :href="`mailto:${SITE_EMAIL}`">{{ SITE_EMAIL }}</a>
|
||||
{{ $t('site.contact') }}:
|
||||
<a :href="`mailto:${SITE_EMAIL}`">{{ SITE_EMAIL }}</a>
|
||||
</address>
|
||||
</div>
|
||||
|
||||
<nav class="footer-block" aria-label="Categories">
|
||||
<p class="kicker">Categories</p>
|
||||
<nav class="footer-block" :aria-label="$t('site.categories')">
|
||||
<p class="kicker">{{ $t('site.categories') }}</p>
|
||||
<ul>
|
||||
<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 v-if="!categories.length" class="muted">Nothing published yet</li>
|
||||
<li v-if="!categories.length" class="muted">{{ $t('site.noCategories') }}</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="footer-block" aria-label="Sections">
|
||||
<p class="kicker">Browse</p>
|
||||
<nav class="footer-block" :aria-label="$t('site.browse')">
|
||||
<p class="kicker">{{ $t('site.browse') }}</p>
|
||||
<ul>
|
||||
<li><NuxtLink to="/">Home</NuxtLink></li>
|
||||
<li><NuxtLink to="/blog">All articles</NuxtLink></li>
|
||||
<li><NuxtLinkLocale to="/">{{ $t('site.home') }}</NuxtLinkLocale></li>
|
||||
<li><NuxtLinkLocale to="/blog">{{ $t('site.allArticles') }}</NuxtLinkLocale></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<p class="container copyright kicker">
|
||||
© {{ new Date().getFullYear() }} {{ SITE_NAME }}. All rights reserved.
|
||||
<p class="container copyright kicker" :lang="locale">
|
||||
© {{ new Date().getFullYear() }} {{ SITE_NAME }}. {{ $t('site.rights') }}
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -109,12 +119,21 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
|
||||
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 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem 2rem;
|
||||
justify-content: center;
|
||||
padding-block: 0.9rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
font-size: 0.75rem;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import type { Article } from '#shared/types/blog'
|
||||
|
||||
const { locale } = useI18n()
|
||||
const route = useRoute()
|
||||
const slug = route.params.slug as string
|
||||
|
||||
@@ -13,7 +14,7 @@ if (!article.value) {
|
||||
const { public: config } = useRuntimeConfig()
|
||||
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)
|
||||
|
||||
useSeoMeta({
|
||||
@@ -49,13 +50,13 @@ useHead({
|
||||
<template>
|
||||
<article v-if="article">
|
||||
<header class="article-header">
|
||||
<nav class="kicker" aria-label="Breadcrumb">
|
||||
<NuxtLink to="/blog">Articles</NuxtLink>
|
||||
<nav class="kicker" :aria-label="$t('article.breadcrumb')">
|
||||
<NuxtLinkLocale to="/blog">{{ $t('list.articles') }}</NuxtLinkLocale>
|
||||
<template v-if="article.category">
|
||||
<span aria-hidden="true"> / </span>
|
||||
<NuxtLink :to="`/category/${article.category.slug}`">
|
||||
<NuxtLinkLocale :to="`/category/${article.category.slug}`">
|
||||
{{ article.category.name }}
|
||||
</NuxtLink>
|
||||
</NuxtLinkLocale>
|
||||
</template>
|
||||
</nav>
|
||||
|
||||
@@ -63,7 +64,7 @@ useHead({
|
||||
|
||||
<p class="kicker date">
|
||||
<time :datetime="isoDate(article.publishedAt)">
|
||||
{{ formatDate(article.publishedAt) }}
|
||||
{{ formatDate(article.publishedAt, locale) }}
|
||||
</time>
|
||||
</p>
|
||||
</header>
|
||||
@@ -81,7 +82,7 @@ useHead({
|
||||
<div class="prose" v-html="article.html" />
|
||||
|
||||
<p class="back">
|
||||
<NuxtLink to="/blog">Back to all articles</NuxtLink>
|
||||
<NuxtLinkLocale to="/blog">{{ $t('article.back') }}</NuxtLinkLocale>
|
||||
</p>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import type { ArticleSummary, Paginated } from '#shared/types/blog'
|
||||
|
||||
const { t } = useI18n()
|
||||
const route = useRoute()
|
||||
|
||||
const page = computed(() => {
|
||||
const value = Number(route.query.page)
|
||||
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 canonical = computed(
|
||||
() => `${config.siteUrl}/blog${page.value > 1 ? `?page=${page.value}` : ''}`
|
||||
() => `${config.siteUrl}${route.path}${page.value > 1 ? `?page=${page.value}` : ''}`
|
||||
)
|
||||
|
||||
useSeoMeta({
|
||||
title: page.value > 1 ? `Articles — page ${page.value}` : 'Articles',
|
||||
description: 'Every article published on the blog.',
|
||||
title: () => (page.value > 1 ? t('list.articlesPage', { page: page.value }) : t('list.articles')),
|
||||
description: () => t('list.archiveDescription'),
|
||||
ogType: 'website',
|
||||
})
|
||||
|
||||
@@ -28,15 +30,15 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
|
||||
<template>
|
||||
<div>
|
||||
<header class="page-header">
|
||||
<p class="kicker">The archive</p>
|
||||
<h1>Articles</h1>
|
||||
<p class="kicker">{{ $t('list.archive') }}</p>
|
||||
<h1>{{ $t('list.articles') }}</h1>
|
||||
</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>
|
||||
<ul class="card-grid">
|
||||
@@ -45,20 +47,21 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
|
||||
</li>
|
||||
</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">
|
||||
Previous page
|
||||
{{ $t('pagination.previous') }}
|
||||
</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
|
||||
v-if="data.page < data.pageCount"
|
||||
:to="{ query: { page: data.page + 1 } }"
|
||||
rel="next"
|
||||
>
|
||||
Next page
|
||||
{{ $t('pagination.next') }}
|
||||
</NuxtLink>
|
||||
</nav>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<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
|
||||
|
||||
@@ -21,12 +22,12 @@ const { data, error } = await useFetch<Paginated<ArticleSummary>>('/api/articles
|
||||
|
||||
const { public: config } = useRuntimeConfig()
|
||||
const canonical = computed(
|
||||
() => `${config.siteUrl}/category/${slug}${page.value > 1 ? `?page=${page.value}` : ''}`
|
||||
() => `${config.siteUrl}${route.path}${page.value > 1 ? `?page=${page.value}` : ''}`
|
||||
)
|
||||
|
||||
useSeoMeta({
|
||||
title: category.value.name,
|
||||
description: `Every article in the ${category.value.name} category.`,
|
||||
description: () => t('list.categoryDescription', { name: category.value?.name ?? '' }),
|
||||
ogType: 'website',
|
||||
})
|
||||
|
||||
@@ -36,13 +37,13 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
|
||||
<template>
|
||||
<div>
|
||||
<header class="page-header">
|
||||
<p class="kicker">Category</p>
|
||||
<p class="kicker">{{ $t('list.category') }}</p>
|
||||
<h1>{{ category?.name }}</h1>
|
||||
</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>
|
||||
<ul class="card-grid">
|
||||
@@ -51,20 +52,21 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
|
||||
</li>
|
||||
</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">
|
||||
Previous page
|
||||
{{ $t('pagination.previous') }}
|
||||
</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
|
||||
v-if="data.page < data.pageCount"
|
||||
:to="{ query: { page: data.page + 1 } }"
|
||||
rel="next"
|
||||
>
|
||||
Next page
|
||||
{{ $t('pagination.next') }}
|
||||
</NuxtLink>
|
||||
</nav>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<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 },
|
||||
@@ -14,30 +16,37 @@ 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: config.siteUrl }] })
|
||||
useHead({ titleTemplate: '%s', link: [{ rel: 'canonical', href: canonical }] })
|
||||
|
||||
useSeoMeta({
|
||||
title: SITE_NAME,
|
||||
description: SITE_DESCRIPTION,
|
||||
description: () => t('site.tagline'),
|
||||
ogTitle: SITE_NAME,
|
||||
ogDescription: SITE_DESCRIPTION,
|
||||
ogDescription: () => t('site.tagline'),
|
||||
ogType: 'website',
|
||||
ogUrl: config.siteUrl,
|
||||
ogUrl: canonical,
|
||||
ogImage: `${config.siteUrl}/logo.png`,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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>
|
||||
<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
|
||||
v-if="featuredCover"
|
||||
:src="featuredCover"
|
||||
@@ -46,28 +55,30 @@ useSeoMeta({
|
||||
:height="featured.cover?.height ?? undefined"
|
||||
>
|
||||
<span v-else class="placeholder" />
|
||||
</NuxtLink>
|
||||
</NuxtLinkLocale>
|
||||
|
||||
<div class="featured-text">
|
||||
<p class="kicker">
|
||||
{{ featured.category ? featured.category.name : 'Latest' }}
|
||||
{{ featured.category ? featured.category.name : $t('home.latest') }}
|
||||
</p>
|
||||
<h1>
|
||||
<NuxtLink :to="`/blog/${featured.slug}`">{{ featured.title }}</NuxtLink>
|
||||
<NuxtLinkLocale :to="`/blog/${featured.slug}`">{{ featured.title }}</NuxtLinkLocale>
|
||||
</h1>
|
||||
<p class="kicker date">
|
||||
<time :datetime="isoDate(featured.publishedAt)">
|
||||
{{ formatDate(featured.publishedAt) }}
|
||||
{{ formatDate(featured.publishedAt, locale) }}
|
||||
</time>
|
||||
</p>
|
||||
<p class="read-more">
|
||||
<NuxtLink :to="`/blog/${featured.slug}`">Read the article</NuxtLink>
|
||||
<NuxtLinkLocale :to="`/blog/${featured.slug}`">
|
||||
{{ $t('home.readArticle') }}
|
||||
</NuxtLinkLocale>
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<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">
|
||||
<li v-for="article in rest" :key="article.slug">
|
||||
@@ -77,7 +88,7 @@ useSeoMeta({
|
||||
</template>
|
||||
|
||||
<p class="more">
|
||||
<NuxtLink to="/blog">View all articles</NuxtLink>
|
||||
<NuxtLinkLocale to="/blog">{{ $t('home.viewAll') }}</NuxtLinkLocale>
|
||||
</p>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
+23
-1
@@ -5,11 +5,12 @@ export default defineNuxtConfig({
|
||||
compatibilityDate: '2025-07-15',
|
||||
devtools: { enabled: true },
|
||||
|
||||
modules: ['@nuxtjs/i18n'],
|
||||
|
||||
css: ['~/assets/css/main.css'],
|
||||
|
||||
app: {
|
||||
head: {
|
||||
htmlAttrs: { lang: 'en' },
|
||||
titleTemplate: `%s · ${SITE_NAME}`,
|
||||
meta: [{ name: 'viewport', content: 'width=device-width, initial-scale=1' }],
|
||||
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: {
|
||||
// Server-only: internal Strapi address, never exposed to the browser.
|
||||
strapiUrl: 'http://localhost:1337',
|
||||
|
||||
Generated
+2766
-1
File diff suppressed because it is too large
Load Diff
@@ -11,6 +11,7 @@
|
||||
"typecheck": "nuxt typecheck"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nuxtjs/i18n": "^10.6.0",
|
||||
"marked": "^18.0.11",
|
||||
"nuxt": "^4.5.2",
|
||||
"vue": "^3.5.41",
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/** 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 ''
|
||||
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. */
|
||||
|
||||
@@ -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'
|
||||
|
||||
/** 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. */
|
||||
export const SITE_EMAIL = 'corralitocoming@gmail.com'
|
||||
|
||||
Reference in New Issue
Block a user