Guide de Test et Validation Finale — Composant 2 : Blog

Golden Path Phase 0 — Section 2.2
Date de validation finale : 2026-09-24
Auteur : Antigravity

Synthèse des Améliorations Apportées

Grille de Cartes Modernes (/blog/)
- Composant BlogCard.astro pour unifier l’affichage de tous les articles.
- Design en grille CSS responsive (320px min), badges de catégories, image avec ratio 16:9, titre, extrait et auteur.
Affichage de la Bio Auteur (/blog/[slug]/)
- Extension de la requête GROQ pour récupérer author->{ bio, image, name, slug }.
- Encadré Auteur (<section class="author-box">) affichant l’avatar, le nom et le texte de Bio Sanity converti de PortableText en HTML.
Méta-données SEO Avancées & Open Graph
- BaseHead.astro mis à jour pour supporter les images distantes Sanity CDN (URL string) sans fallback intempestif.
- Ajout des métas Twitter (twitter:card, twitter:title, twitter:description, twitter:image).
- Injection des données structurées Google Search via un bloc JSON-LD BlogPosting dans [slug].astro.
Pagination SSR (/blog/?page=X)
- Pagination SSR avec POSTS_PER_PAGE = 6.
- Paramètres d’URL ?page=1, ?page=2, comptage total des articles via GROQ count(*[_type == "post"]), et boutons Précédent / Suivant avec compteur Page X sur Y.

Serveurs en cours d’exécution :

Ouvrir http://localhost:4321/blog/ dans le navigateur.
Vérifier la présence de la grille de cartes harmonieuses.
Tester la navigation de pagination (si plus de 6 articles ou via http://localhost:4321/blog/?page=1).

Exécuter la commande :

curl -s http://localhost:4321/blog/welcome-to-oci/ | grep -A 8 "author-box"

Résultat attendu : L’encadré Auteur affiche la Bio "Platform & Cloud Engineer @ Audyssee - Developing the Xorigin project…".

Exécuter la commande :

curl -s http://localhost:4321/blog/welcome-to-oci/ | grep -E "ld\+json|twitter:image"

Résultat attendu : Presénce de la balise JSON-LD @type: "BlogPosting" et l’URL de l’image sur le CDN Sanity.

npx pnpm@12.3.4 typecheck

Résultat attendu : 0 errors, 0 warnings, 0 hints.