From 005c90f33a9895b45115c2b801dcc168fa720e21 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Tue, 25 Aug 2026 12:08:01 +0200
Subject: [PATCH] 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.
---
 frontend/app/error.vue                 |  8 +++----
 frontend/app/layouts/default.vue       | 10 ++++-----
 frontend/app/pages/blog/[slug].vue     |  6 +++---
 frontend/app/pages/blog/index.vue      | 20 +++++++++---------
 frontend/app/pages/category/[slug].vue | 20 +++++++++---------
 frontend/app/pages/index.vue           | 29 ++++++++++++--------------
 frontend/nuxt.config.ts                |  5 ++++-
 frontend/shared/utils/format.ts        |  2 +-
 frontend/shared/utils/site.ts          |  5 +++++
 9 files changed, 55 insertions(+), 50 deletions(-)
 create mode 100644 frontend/shared/utils/site.ts

diff --git a/frontend/app/error.vue b/frontend/app/error.vue
index f2e48fc..af1f862 100644
--- a/frontend/app/error.vue
+++ b/frontend/app/error.vue
@@ -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>
diff --git a/frontend/app/layouts/default.vue b/frontend/app/layouts/default.vue
index 65131b5..2a73339 100644
--- a/frontend/app/layouts/default.vue
+++ b/frontend/app/layouts/default.vue
@@ -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>
diff --git a/frontend/app/pages/blog/[slug].vue b/frontend/app/pages/blog/[slug].vue
index 5d5b9a5..dfb0474 100644
--- a/frontend/app/pages/blog/[slug].vue
+++ b/frontend/app/pages/blog/[slug].vue
@@ -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>
diff --git a/frontend/app/pages/blog/index.vue b/frontend/app/pages/blog/index.vue
index dbc2e8b..675fcc7 100644
--- a/frontend/app/pages/blog/index.vue
+++ b/frontend/app/pages/blog/index.vue
@@ -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>
diff --git a/frontend/app/pages/category/[slug].vue b/frontend/app/pages/category/[slug].vue
index 2c47a1a..40efffd 100644
--- a/frontend/app/pages/category/[slug].vue
+++ b/frontend/app/pages/category/[slug].vue
@@ -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>
diff --git a/frontend/app/pages/index.vue b/frontend/app/pages/index.vue
index 3cfbb4f..61ffc99 100644
--- a/frontend/app/pages/index.vue
+++ b/frontend/app/pages/index.vue
@@ -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>
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index 2e2863a..80c2d95 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -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' }],
     },
   },
diff --git a/frontend/shared/utils/format.ts b/frontend/shared/utils/format.ts
index 34b6a39..b7d7592 100644
--- a/frontend/shared/utils/format.ts
+++ b/frontend/shared/utils/format.ts
@@ -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. */
diff --git a/frontend/shared/utils/site.ts b/frontend/shared/utils/site.ts
new file mode 100644
index 0000000..81880f3
--- /dev/null
+++ b/frontend/shared/utils/site.ts
@@ -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.'