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:
@@ -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>
|
||||||
|
|||||||
@@ -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">© {{ new Date().getFullYear() }} Blog</p>
|
<p class="muted">© {{ new Date().getFullYear() }} {{ SITE_NAME }}</p>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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,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. */
|
||||||
|
|||||||
@@ -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.'
|
||||||
Reference in New Issue
Block a user