Una pagina 404 per la gestione degli errori

La nostra applicazione è ora quasi completa. Per renderla conforme agli standard di usabilità dei siti web creeremo una pagina di errore 404. In realtà, Astro genera automaticamente un errore 404 in caso di pagine internet non trovate, ma possiamo personalizzare questa pagina in modo da suggerire agli utenti dei contenuti alternativi in caso di errore e aiutarli nel corso della navigazione, indirizzandoli verso altre pagine ed evitando che lasci il sito forse per sempre.

Creiamo allora una pagina 404.astro nella cartella /src/pages/ e inseriamo al suo interno il seguente codice:

---
import Layout from '../layouts/Layout.astro';
import ArticleCard from '../components/ArticleCard.astro';
import { getCollection } from 'astro:content';
const posts = await getCollection('blog');
const latestPosts = posts
	.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime())
	.slice(0, 3);
---
<Layout
	title="404 - Pagina non trovata"
	description="La pagina che stai cercando non esiste. Scopri gli ultimi articoli del blog."
	showSearch={false}
>
	<div id="page-404" class="max-w-4xl mx-auto px-6 pt-32 pb-12 md:pt-40 md:pb-16 text-center relative z-10">
		<h1 class="text-5xl font-extrabold text-white mb-4 drop-shadow-lg">404 - Oops!</h1>
		<div class="bg-white/20 backdrop-blur-sm rounded-lg p-4 mb-8">
			<p class="text-lg text-gray-100 drop-shadow-md">
				La pagina che stai cercando non esiste. Torna alla <a href="/" class="text-yellow-300 hover:text-yellow-400 hover:underline drop-shadow-sm">homepage</a> o scopri alcuni dei nostri ultimi articoli.
			</p>
		</div>
		<div id="posts-container" class="grid gap-10 bg-white/10 backdrop-blur-sm rounded-lg p-6 shadow-2xl mt-20 md:mt-32">
			{latestPosts.length > 0 ? (
				latestPosts.map(post => <ArticleCard post={post} />)
			) : (
				<p class="text-gray-300 italic text-sm">Nessun articolo disponibile al momento.</p>
			)}
		</div>
	</div>
	<style>
		body:has(#page-404) {
			background-image: url('/404.jpg') !important;
			background-size: cover !important;
			background-position: center !important;
			background-attachment: fixed !important;
			background-repeat: no-repeat !important;
			min-height: 100vh !important;
		}
		body:has(#page-404) header {
			background-color: rgba(255, 255, 255, 0.1) !important;
			backdrop-filter: blur(10px) !important;
			border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
		}
		body:has(#page-404) nav a {
			color: rgba(255, 255, 255, 0.9) !important;
		}
		body:has(#page-404) nav a:hover {
			color: #c084fc !important;
		}
		body:has(#page-404) #page-404 p a {
			color: #fde68a !important;
			text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
		}
		body:has(#page-404) #page-404 p a:hover {
			color: #fbbf24 !important;
		}
		#page-404 h1, #page-404 p {
			text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
		}
	</style>
</Layout>

A questo punto della nostra guida, il codice sarà semplice da comprendere. Se la risorsa richiesta non viene trovata, l'utente visualizza una pagina di errore 404 con un messaggio che lo invita a visitare la home page oppure a leggere gli ultimi articoli del blog.

• Le clausole import importano le dipendenze della pagina, getCollection('blog') recupera gli elementi della collezione blog, mentre latestPosts memorizza i tre articoli più recenti del sito ordinati per data decrescente.
• Abbiamo impostato inizialmente showSearch={false} nel <Layout>. Ciò significa che il campo di ricerca non viene visualizzato in questa pagina.
• La pagina, quindi, genera un messaggio di errore e una sezione di anteprime di articoli (latestPosts.map()).
• <style> sovrascrive gli stili predefiniti solo per questa pagina (grazie alla pseudo-classe :has). Questo ci permette di assegnare un'immagine di sfondo e definire altre proprietà che rendano più accattivante la pagina.

Una pagina di errore 404 senza e con motore di ricerca

L'immagine che segue mostra il risultato a video.

Modificando il valore di showSearch nel <Layout> la pagina mostrerà il campo di ricerca nel menu di navigazione:

<Layout
	title="404 - Pagina non trovata"
	description="La pagina che stai cercando non esiste. Scopri gli ultimi articoli del blog."
	showSearch={false}
>

Conclusione: il nostro progetto è completo

Il progetto che volevamo realizzare è finalmente completo ma si potrebbe ancora migliorare in diversi aspetti. Ad esempio, riprogettando la home page e inserendo nell'head delle pagine i meta tag og e twitter:

<!-- Meta tag Open Graph -->
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:type" content="website" />
<meta property="og:url" content={Astro.url.href} />
<meta property="og:image" content="/blog/immagini/preview.jpg" /> <!-- Immagine default; dinamica per post se vuoi -->
<!-- Meta tag Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content="/blog/immagini/preview.jpg" />

Ora siamo pronti per la distribuzione del nostro progetto. Ricordiamo che il codice illustrato in questa guida è disponibile per il download e la consultazione in questa repo di GitHub.