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> <template>
<NuxtLayout> <NuxtLayout>
<h1>{{ isNotFound ? 'Pagina non trovata' : 'Qualcosa è andato storto' }}</h1> <h1>{{ isNotFound ? 'Page not found' : 'Something went wrong' }}</h1>
<p class="muted"> <p class="muted">
{{ {{
isNotFound isNotFound
? 'Il contenuto che cerchi non esiste o è stato spostato.' ? 'The page you are looking for does not exist or has moved.'
: 'Riprova tra qualche istante.' : 'Please try again in a moment.'
}} }}
</p> </p>
<p> <p>
<NuxtLink to="/">Torna alla home</NuxtLink> <NuxtLink to="/">Back to home</NuxtLink>
</p> </p>
</NuxtLayout> </NuxtLayout>
</template> </template>
+5 -5
View File
@@ -9,14 +9,14 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
<template> <template>
<div class="page"> <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"> <header class="site-header">
<div class="container header-inner"> <div class="container header-inner">
<NuxtLink to="/" class="brand">Blog</NuxtLink> <NuxtLink to="/" class="brand">{{ SITE_NAME }}</NuxtLink>
<nav aria-label="Navigazione principale"> <nav aria-label="Main navigation">
<ul> <ul>
<li><NuxtLink to="/blog">Articoli</NuxtLink></li> <li><NuxtLink to="/blog">Articles</NuxtLink></li>
<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> <NuxtLink :to="`/category/${category.slug}`">{{ category.name }}</NuxtLink>
</li> </li>
@@ -31,7 +31,7 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
<footer class="site-footer"> <footer class="site-footer">
<div class="container"> <div class="container">
<p class="muted">&copy; {{ new Date().getFullYear() }} Blog</p> <p class="muted">&copy; {{ new Date().getFullYear() }} {{ SITE_NAME }}</p>
</div> </div>
</footer> </footer>
</div> </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}`) const { data: article } = await useFetch<Article>(`/api/articles/${slug}`)
if (!article.value) { 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() const { public: config } = useRuntimeConfig()
@@ -48,8 +48,8 @@ useHead({
<template> <template>
<article v-if="article"> <article v-if="article">
<nav class="breadcrumb muted" aria-label="Percorso"> <nav class="breadcrumb muted" aria-label="Breadcrumb">
<NuxtLink to="/blog">Articoli</NuxtLink> <NuxtLink to="/blog">Articles</NuxtLink>
<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}`">{{ article.category.name }}</NuxtLink> <NuxtLink :to="`/category/${article.category.slug}`">{{ article.category.name }}</NuxtLink>
+10 -10
View File
@@ -17,8 +17,8 @@ const canonical = computed(
) )
useSeoMeta({ useSeoMeta({
title: page.value > 1 ? `Articoli — pagina ${page.value}` : 'Articoli', title: page.value > 1 ? `Articles — page ${page.value}` : 'Articles',
description: 'Tutti gli articoli pubblicati sul blog.', description: 'Every article published on the blog.',
ogType: 'website', ogType: 'website',
}) })
@@ -27,13 +27,13 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
<template> <template>
<div> <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> <template v-else>
<ul class="card-grid"> <ul class="card-grid">
@@ -42,17 +42,17 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
</li> </li>
</ul> </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"> <NuxtLink v-if="data.page > 1" :to="{ query: { page: data.page - 1 } }" rel="prev">
Pagina precedente Previous page
</NuxtLink> </NuxtLink>
<span class="muted">Pagina {{ data.page }} di {{ data.pageCount }}</span> <span class="muted">Page {{ data.page }} of {{ 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"
> >
Pagina successiva Next page
</NuxtLink> </NuxtLink>
</nav> </nav>
</template> </template>
+10 -10
View File
@@ -12,7 +12,7 @@ const page = computed(() => {
const { data: category } = await useFetch<Category>(`/api/categories/${slug}`) const { data: category } = await useFetch<Category>(`/api/categories/${slug}`)
if (!category.value) { 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', { const { data, error } = await useFetch<Paginated<ArticleSummary>>('/api/articles', {
@@ -25,8 +25,8 @@ const canonical = computed(
) )
useSeoMeta({ useSeoMeta({
title: `${category.value.name} — Articoli`, title: category.value.name,
description: `Tutti gli articoli nella categoria ${category.value.name}.`, description: `Every article in the ${category.value.name} category.`,
ogType: 'website', ogType: 'website',
}) })
@@ -36,14 +36,14 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
<template> <template>
<div> <div>
<p class="breadcrumb muted"> <p class="breadcrumb muted">
<NuxtLink to="/blog">Articoli</NuxtLink> <NuxtLink to="/blog">Articles</NuxtLink>
</p> </p>
<h1>{{ category?.name }}</h1> <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> <template v-else>
<ul class="card-grid"> <ul class="card-grid">
@@ -52,17 +52,17 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
</li> </li>
</ul> </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"> <NuxtLink v-if="data.page > 1" :to="{ query: { page: data.page - 1 } }" rel="prev">
Pagina precedente Previous page
</NuxtLink> </NuxtLink>
<span class="muted">Pagina {{ data.page }} di {{ data.pageCount }}</span> <span class="muted">Page {{ data.page }} of {{ 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"
> >
Pagina successiva Next page
</NuxtLink> </NuxtLink>
</nav> </nav>
</template> </template>
+13 -16
View File
@@ -10,34 +10,31 @@ const articles = computed(() => data.value?.items.slice(0, 6) ?? [])
const { public: config } = useRuntimeConfig() 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({ useSeoMeta({
title: 'Blog', title: SITE_NAME,
description: 'Articoli, guide e approfondimenti.', description: SITE_DESCRIPTION,
ogTitle: 'Blog', ogTitle: SITE_NAME,
ogDescription: 'Articoli, guide e approfondimenti.', ogDescription: SITE_DESCRIPTION,
ogType: 'website', ogType: 'website',
ogUrl: config.siteUrl, ogUrl: config.siteUrl,
}) })
useHead({ link: [{ rel: 'canonical', href: config.siteUrl }] })
</script> </script>
<template> <template>
<div> <div>
<section class="hero"> <section class="hero">
<h1>Blog</h1> <h1>{{ SITE_NAME }}</h1>
<p class="muted">Articoli, guide e approfondimenti.</p> <p class="muted">{{ SITE_DESCRIPTION }}</p>
</section> </section>
<h2>Ultimi articoli</h2> <h2>Latest articles</h2>
<p v-if="error"> <p v-if="error">Articles could not be loaded. Please try again later.</p>
Non è stato possibile caricare gli articoli. Riprova più tardi.
</p>
<p v-else-if="!articles.length"> <p v-else-if="!articles.length">Nothing has been published yet.</p>
Non ci sono ancora articoli pubblicati.
</p>
<ul v-else class="card-grid"> <ul v-else class="card-grid">
<li v-for="article in articles" :key="article.slug"> <li v-for="article in articles" :key="article.slug">
@@ -46,7 +43,7 @@ useHead({ link: [{ rel: 'canonical', href: config.siteUrl }] })
</ul> </ul>
<p class="more"> <p class="more">
<NuxtLink to="/blog">Vedi tutti gli articoli</NuxtLink> <NuxtLink to="/blog">See all articles</NuxtLink>
</p> </p>
</div> </div>
</template> </template>
+4 -1
View File
@@ -1,3 +1,5 @@
import { SITE_NAME } from './shared/utils/site'
// https://nuxt.com/docs/api/configuration/nuxt-config // https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({ export default defineNuxtConfig({
compatibilityDate: '2025-07-15', compatibilityDate: '2025-07-15',
@@ -7,7 +9,8 @@ export default defineNuxtConfig({
app: { app: {
head: { head: {
htmlAttrs: { lang: 'it' }, htmlAttrs: { lang: 'en' },
titleTemplate: `%s · ${SITE_NAME}`,
meta: [{ name: 'viewport', content: 'width=device-width, initial-scale=1' }], 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. */ /** 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): string {
if (!value) return '' 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. */ /** 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.'