Rename the site to CorralitoComing and switch the UI to English

The name and tagline live in one place, shared/utils/site.ts, and feed the
header, the footer, the home page and the title template.
This commit is contained in:
2026-08-25 12:08:01 +02:00
parent d97fd3f92f
commit 005c90f33a
9 changed files with 55 additions and 50 deletions
+4 -4
View File
@@ -10,18 +10,18 @@ useSeoMeta({ robots: 'noindex' })
<template>
<NuxtLayout>
<h1>{{ isNotFound ? 'Pagina non trovata' : 'Qualcosa è andato storto' }}</h1>
<h1>{{ isNotFound ? 'Page not found' : 'Something went wrong' }}</h1>
<p class="muted">
{{
isNotFound
? 'Il contenuto che cerchi non esiste o è stato spostato.'
: 'Riprova tra qualche istante.'
? 'The page you are looking for does not exist or has moved.'
: 'Please try again in a moment.'
}}
</p>
<p>
<NuxtLink to="/">Torna alla home</NuxtLink>
<NuxtLink to="/">Back to home</NuxtLink>
</p>
</NuxtLayout>
</template>
+5 -5
View File
@@ -9,14 +9,14 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
<template>
<div class="page">
<a class="skip-link" href="#main">Salta al contenuto</a>
<a class="skip-link" href="#main">Skip to content</a>
<header class="site-header">
<div class="container header-inner">
<NuxtLink to="/" class="brand">Blog</NuxtLink>
<nav aria-label="Navigazione principale">
<NuxtLink to="/" class="brand">{{ SITE_NAME }}</NuxtLink>
<nav aria-label="Main navigation">
<ul>
<li><NuxtLink to="/blog">Articoli</NuxtLink></li>
<li><NuxtLink to="/blog">Articles</NuxtLink></li>
<li v-for="category in categories" :key="category.slug">
<NuxtLink :to="`/category/${category.slug}`">{{ category.name }}</NuxtLink>
</li>
@@ -31,7 +31,7 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
<footer class="site-footer">
<div class="container">
<p class="muted">&copy; {{ new Date().getFullYear() }} Blog</p>
<p class="muted">&copy; {{ new Date().getFullYear() }} {{ SITE_NAME }}</p>
</div>
</footer>
</div>
+3 -3
View File
@@ -7,7 +7,7 @@ const slug = route.params.slug as string
const { data: article } = await useFetch<Article>(`/api/articles/${slug}`)
if (!article.value) {
throw createError({ statusCode: 404, statusMessage: 'Articolo non trovato', fatal: true })
throw createError({ statusCode: 404, statusMessage: 'Article not found', fatal: true })
}
const { public: config } = useRuntimeConfig()
@@ -48,8 +48,8 @@ useHead({
<template>
<article v-if="article">
<nav class="breadcrumb muted" aria-label="Percorso">
<NuxtLink to="/blog">Articoli</NuxtLink>
<nav class="breadcrumb muted" aria-label="Breadcrumb">
<NuxtLink to="/blog">Articles</NuxtLink>
<template v-if="article.category">
<span aria-hidden="true"> / </span>
<NuxtLink :to="`/category/${article.category.slug}`">{{ article.category.name }}</NuxtLink>
+10 -10
View File
@@ -17,8 +17,8 @@ const canonical = computed(
)
useSeoMeta({
title: page.value > 1 ? `Articoli — pagina ${page.value}` : 'Articoli',
description: 'Tutti gli articoli pubblicati sul blog.',
title: page.value > 1 ? `Articles — page ${page.value}` : 'Articles',
description: 'Every article published on the blog.',
ogType: 'website',
})
@@ -27,13 +27,13 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
<template>
<div>
<h1>Articoli</h1>
<h1>Articles</h1>
<p v-if="error">Non è stato possibile caricare gli articoli. Riprova più tardi.</p>
<p v-if="error">Articles could not be loaded. Please try again later.</p>
<p v-else-if="status === 'pending'">Caricamento</p>
<p v-else-if="status === 'pending'">Loading</p>
<p v-else-if="!data?.items.length">Non ci sono ancora articoli pubblicati.</p>
<p v-else-if="!data?.items.length">Nothing has been published yet.</p>
<template v-else>
<ul class="card-grid">
@@ -42,17 +42,17 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
</li>
</ul>
<nav v-if="data.pageCount > 1" class="pagination" aria-label="Paginazione">
<nav v-if="data.pageCount > 1" class="pagination" aria-label="Pagination">
<NuxtLink v-if="data.page > 1" :to="{ query: { page: data.page - 1 } }" rel="prev">
Pagina precedente
Previous page
</NuxtLink>
<span class="muted">Pagina {{ data.page }} di {{ data.pageCount }}</span>
<span class="muted">Page {{ data.page }} of {{ data.pageCount }}</span>
<NuxtLink
v-if="data.page < data.pageCount"
:to="{ query: { page: data.page + 1 } }"
rel="next"
>
Pagina successiva
Next page
</NuxtLink>
</nav>
</template>
+10 -10
View File
@@ -12,7 +12,7 @@ const page = computed(() => {
const { data: category } = await useFetch<Category>(`/api/categories/${slug}`)
if (!category.value) {
throw createError({ statusCode: 404, statusMessage: 'Categoria non trovata', fatal: true })
throw createError({ statusCode: 404, statusMessage: 'Category not found', fatal: true })
}
const { data, error } = await useFetch<Paginated<ArticleSummary>>('/api/articles', {
@@ -25,8 +25,8 @@ const canonical = computed(
)
useSeoMeta({
title: `${category.value.name} — Articoli`,
description: `Tutti gli articoli nella categoria ${category.value.name}.`,
title: category.value.name,
description: `Every article in the ${category.value.name} category.`,
ogType: 'website',
})
@@ -36,14 +36,14 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
<template>
<div>
<p class="breadcrumb muted">
<NuxtLink to="/blog">Articoli</NuxtLink>
<NuxtLink to="/blog">Articles</NuxtLink>
</p>
<h1>{{ category?.name }}</h1>
<p v-if="error">Non è stato possibile caricare gli articoli. Riprova più tardi.</p>
<p v-if="error">Articles could not be loaded. Please try again later.</p>
<p v-else-if="!data?.items.length">Non ci sono articoli in questa categoria.</p>
<p v-else-if="!data?.items.length">There are no articles in this category.</p>
<template v-else>
<ul class="card-grid">
@@ -52,17 +52,17 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
</li>
</ul>
<nav v-if="data.pageCount > 1" class="pagination" aria-label="Paginazione">
<nav v-if="data.pageCount > 1" class="pagination" aria-label="Pagination">
<NuxtLink v-if="data.page > 1" :to="{ query: { page: data.page - 1 } }" rel="prev">
Pagina precedente
Previous page
</NuxtLink>
<span class="muted">Pagina {{ data.page }} di {{ data.pageCount }}</span>
<span class="muted">Page {{ data.page }} of {{ data.pageCount }}</span>
<NuxtLink
v-if="data.page < data.pageCount"
:to="{ query: { page: data.page + 1 } }"
rel="next"
>
Pagina successiva
Next page
</NuxtLink>
</nav>
</template>
+13 -16
View File
@@ -10,34 +10,31 @@ const articles = computed(() => data.value?.items.slice(0, 6) ?? [])
const { public: config } = useRuntimeConfig()
// 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 }] })
useSeoMeta({
title: 'Blog',
description: 'Articoli, guide e approfondimenti.',
ogTitle: 'Blog',
ogDescription: 'Articoli, guide e approfondimenti.',
title: SITE_NAME,
description: SITE_DESCRIPTION,
ogTitle: SITE_NAME,
ogDescription: SITE_DESCRIPTION,
ogType: 'website',
ogUrl: config.siteUrl,
})
useHead({ link: [{ rel: 'canonical', href: config.siteUrl }] })
</script>
<template>
<div>
<section class="hero">
<h1>Blog</h1>
<p class="muted">Articoli, guide e approfondimenti.</p>
<h1>{{ SITE_NAME }}</h1>
<p class="muted">{{ SITE_DESCRIPTION }}</p>
</section>
<h2>Ultimi articoli</h2>
<h2>Latest articles</h2>
<p v-if="error">
Non è stato possibile caricare gli articoli. Riprova più tardi.
</p>
<p v-if="error">Articles could not be loaded. Please try again later.</p>
<p v-else-if="!articles.length">
Non ci sono ancora articoli pubblicati.
</p>
<p v-else-if="!articles.length">Nothing has been published yet.</p>
<ul v-else class="card-grid">
<li v-for="article in articles" :key="article.slug">
@@ -46,7 +43,7 @@ useHead({ link: [{ rel: 'canonical', href: config.siteUrl }] })
</ul>
<p class="more">
<NuxtLink to="/blog">Vedi tutti gli articoli</NuxtLink>
<NuxtLink to="/blog">See all articles</NuxtLink>
</p>
</div>
</template>
+4 -1
View File
@@ -1,3 +1,5 @@
import { SITE_NAME } from './shared/utils/site'
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
compatibilityDate: '2025-07-15',
@@ -7,7 +9,8 @@ export default defineNuxtConfig({
app: {
head: {
htmlAttrs: { lang: 'it' },
htmlAttrs: { lang: 'en' },
titleTemplate: `%s · ${SITE_NAME}`,
meta: [{ name: 'viewport', content: 'width=device-width, initial-scale=1' }],
},
},
+1 -1
View File
@@ -1,7 +1,7 @@
/** Human-readable date for display; returns an empty string when unset. */
export function formatDate(value: string | null | undefined): string {
if (!value) return ''
return new Intl.DateTimeFormat('it-IT', { dateStyle: 'long' }).format(new Date(value))
return new Intl.DateTimeFormat('en-GB', { dateStyle: 'long' }).format(new Date(value))
}
/** Machine-readable date for the `datetime` attribute and structured data. */
+5
View File
@@ -0,0 +1,5 @@
/** Name of the blog, used in the header, the page titles and the footer. */
export const SITE_NAME = 'CorralitoComing'
/** One-line description, used as the home page meta description. */
export const SITE_DESCRIPTION = 'Articles, guides and analysis.'