Skip to content
AMN Docs

Guide de Test et Validation Finale — Composant 2 : Blog

Guide de Test et Validation Finale — Composant 2 : Blog

Documentation technique

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

Synthèse des Améliorations Apportées1/4

  1. 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.

Synthèse des Améliorations Apportées2/4

  1. 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.

Synthèse des Améliorations Apportées3/4

  1. 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.

Synthèse des Améliorations Apportées4/4

  1. 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.

Instructions de Test Pas-à-Pas

Préréquis

Serveurs en cours d’exécution :

Test 1 : Grille et Pagination (/blog/)

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

Test 2 : Bio d’Auteur et Article (/blog/welcome-to-oci/)

Exécuter la commande :

Terminal window
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…".

Test 3 : SEO et JSON-LD Schema.org

Exécuter la commande :

Terminal window
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.

Test 4 : Contrôle des Types TypeScript

Terminal window
npx pnpm@12.3.4 typecheck

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

Switch to normal mode

Contents

Built with StarlightPowered by Cloudflare