Plan de conception UI - Page article blog style officiel Astro

Plan d’exécution — Page Article de Blog (Style Officiel Astro)

Date : 2026-10-18
Auteurs : Pair-programming Antigravity IDE & Anderson
Référence : Spécification utilisateur (Images 1 et 2), plan/description.md, ADR-001
Dépôt cible : audyssee/amn-blog
Fichiers impactés :

src/pages/blog/[slug].astro
src/components/blog/RelatedPosts.astro (nouveau composant modulaire)
src/layouts/BlogPost.astro (mise à niveau thème sombre)

1. Vue d’ensemble de la mission

L’objectif est de transformer la page de consultation d’un article de blog (/blog/[slug]/) pour adopter la charte graphique officielle d’Astro (thème sombre, minimaliste, typographie ciselée, géométrie soignée).

L’affichage est découpé en 3 sections distinctes (hors header, prefooter et footer déjà unifiés) :

Section 1 — Hero & En-tête de l’article (Image 1) : Image principale avec découpe “estrade”, date, grand titre centré, auteur avec avatar, et ligne de séparation centrée ne touchant pas les bords d’écran.
Section 2 — Contenu rédactionnel (Body Prose) : Zone de lecture fluide et ergonomique au format thème sombre (#0b0d13), typographie soignée (paragraphes aérés, titres hiérarchisés, blocs de code, citations stylisées, figures avec légendes).
Section 3 — Related Posts (Articles similaires) (Image 2) : Ligne de séparation supérieure, titre de section, et grille 2 colonnes de cartes d’articles similaires alimentées dynamiquement depuis Sanity (avec fallback Content Collections).

2. Spécification détaillée des 3 sections

+-------------------------------------------------------------+
|                Section 1 : Hero de l'article                |
|                                                             |
|           +-------------------------------------+           |
|           |                                     |           |
|           |             Main Image              |           |
|           |                                     |           |
|           |___   _________________________   ___|           |
|               | |                         | |               |
|               +-+  Effet "estrade" podium +-+               |
|                                                             |
|                      October 15, 2026                       |
|                         Astro 7.4                           |
|                  By (Avatar) Matthew Phillips               |
|                                                             |
|           ---------------------------------------           |
|           (Ligne de séparation centrée contenue)            |
+-------------------------------------------------------------+
|                Section 2 : Contenu du post                  |
|                                                             |
|       Paragraphes aérés, titres H2/H3, citations,           |
|       code blocks, images illustratives intégrées           |
|                                                             |
+-------------------------------------------------------------+
|                Section 3 : Related Posts                    |
|                                                             |
|   -------------------------------------------------------   |
|   (Barre de séparation supérieure)                          |
|                                                             |
|   Related posts                                             |
|   +-----------------------+     +-----------------------+   |
|   | [Image]               |     | [Image]               |   |
|   | Titre article         |     | Titre article         |   |
|   | Extrait 2-3 lignes... |     | Extrait 2-3 lignes... |   |
|   +-----------------------+     +-----------------------+   |
+-------------------------------------------------------------+

Section 1 — Hero de l’article & Métadonnées

Référence visuelle : Image 1 annotée

A. Image principale avec effet “Estrade” (Stage / Podium)

Position & dimensions : Centrée dans un conteneur max-w-4xl mx-auto px-4 sm:px-6.
Effet estrade observé sur l’image 1 :
- Le bas de l’image est partiellement recouvert par le fond sombre de la page qui monte au centre (sur environ 28-36px).
- À l’extrême gauche et à l’extrême droite, l’image descend plus bas sous forme de deux “décrochés” / pieds latéraux (largeur ~24px).
- Implémentation technique CSS moderne :
  - Soit un masque clip-path polygon sur l’image :
    clip-path: polygon( 0 0, 100% 0, 100% 100%, calc(100% - 24px) 100%, calc(100% - 24px) calc(100% - 28px), 24px calc(100% - 28px), 24px 100%, 0 100% );
  - Doublé d’une bordure fine border border-white/10 et d’un conteneur avec coins arrondis supérieurs rounded-t-2xl.

B. Date de publication

Format : Anglais lisible (ex: October 15, 2026).
Typographie : Monospace ou sans-serif discrète text-xs sm:text-sm text-gray-400 font-mono tracking-wide text-center mt-6 mb-2.

C. Titre du post

Typographie : text-3xl sm:text-5xl md:text-6xl font-extrabold text-white text-center tracking-tight leading-tight max-w-3xl mx-auto mb-4.
Règle de casse : Sentence case (première lettre majuscule, reste en minuscules sauf acronymes et noms propres tels que “amn”).

D. Auteur avec avatar

Disposition centrée sous le titre : flex items-center justify-center gap-2.5 text-sm text-gray-300 mb-10.
Éléments :
- Préfixe textuel : By (text-gray-400 text-sm).
- Avatar circulaire : w-7 h-7 sm:w-8 sm:h-8 rounded-full object-cover border border-white/15 bg-white/5.
- Nom de l’auteur : text-white font-medium hover:underline.

E. Ligne de séparation basse

Caractéristique clé : Centrée et n’atteint pas les bords de l’écran.
Implémentation : border-b border-white/10 max-w-4xl mx-auto w-full mb-12 sm:mb-16.

Section 2 — Contenu rédactionnel (Body Prose)

A. Conteneur et lisibilité

Conteneur de lecture calibré : max-w-3xl mx-auto px-4 sm:px-6 py-6 sm:py-8.
Couleur de fond unifiée : #0b0d13.

B. Typographie Thème Sombre (`.prose-dark`)

Paragraphes : text-gray-300 text-base sm:text-lg leading-relaxed mb-6.
Titres H2 : text-2xl sm:text-3xl font-bold text-white mt-12 mb-4 tracking-tight border-b border-white/5 pb-2.
Titres H3 : text-xl sm:text-2xl font-semibold text-white mt-8 mb-3.
Liens : text-purple-400 hover:text-purple-300 underline underline-offset-4 transition-colors.
Citations (blockquote) : border-l-2 border-purple-500/80 bg-[#12141a]/60 pl-4 py-2 italic text-gray-300 rounded-r-lg my-6.
Listes (ul / ol) : text-gray-300 space-y-2 mb-6 pl-6 list-disc marker:text-purple-400.
Blocs de code : bg-[#12141a] border border-white/10 rounded-xl p-4 sm:p-6 overflow-x-auto my-6 text-sm font-mono text-purple-200.
Figures / Images illustratives : rounded-xl border border-white/10 overflow-hidden my-8 max-w-full shadow-xl, légendes en text-xs text-gray-400 text-center mt-2 italic.

C. Double moteur de rendu

Sanity CMS : Fonction renderPortableText() mise à niveau pour générer des balises propres avec classes Tailwind sombres.
Content Collections (Markdown / MDX) : Wrapper <div class="prose-dark"> assurant un rendu visuel 100% identique au fallback local.

Référence visuelle : Image 2 annotée

A. Barre de séparation supérieure

Ligne horizontale fine : border-t border-white/10 max-w-5xl mx-auto w-full mb-10 sm:mb-12.

B. En-tête de section

Titre : Related posts (text-xl sm:text-2xl font-bold text-white tracking-tight text-left mb-6 sm:mb-8).
Aligné avec le bord gauche de la grille de cartes.

C. Grille de cartes (2 colonnes)

Structure : grid grid-cols-1 md:grid-cols-2 gap-6 max-w-5xl mx-auto.
Format de chaque carte :
- Conteneur : rounded-2xl bg-[#12141a] border border-white/10 hover:border-purple-500/30 transition-all duration-300 overflow-hidden flex flex-col group shadow-lg.
- Image de couverture : h-44 sm:h-52 w-full overflow-hidden bg-gradient-to-br from-purple-950/60 to-slate-900 border-b border-white/10.
- Effet zoom doux : group-hover:scale-105 transition-transform duration-500.
- Corps de carte :
  - Titre du post : text-lg sm:text-xl font-bold text-white group-hover:text-purple-300 transition-colors leading-snug mb-2.
  - Extrait (excerpt) : text-xs sm:text-sm text-gray-400 leading-relaxed line-clamp-3.

D. Algorithme de sélection des articles similaires

Requête Sanity optimisée :
- Sélectionne 2 articles distincts du post courant (_id != $currentId).
- Priorité aux articles ayant au moins une catégorie commune (count((categories[]->_id)[@ in $categoryIds]) > 0).
- Tri par date de publication décroissante (order(publishedAt desc)[0...2]).
Fallback Markdown :
- Filtre les articles du dossier src/content/blog/ différents du slug courant, limités à 2.

3. Plan d’exécution par étapes

Étape	Action	Fichiers cibles
Étape 1	Création du composant `RelatedPosts.astro` avec la grille 2 colonnes, la barre supérieure et le style carte Image 2.	`src/components/blog/RelatedPosts.astro`
Étape 2	Refonte complète de `src/pages/blog/[slug].astro` : • Section 1 : Hero avec estrade, date, titre centré, auteur, séparateur centré. • Section 2 : Body stylisé en thème sombre pour Sanity et Content Collections. • Section 3 : Intégration de `<RelatedPosts />`.	`src/pages/blog/[slug].astro`
Étape 3	Harmonisation du layout fallback `BlogPost.astro` pour le rendre conforme au thème sombre.	`src/layouts/BlogPost.astro`
Étape 4	Validation en direct sur le serveur de développement (`pnpm dev`) et vérification du responsive mobile / desktop.	Navigateur / DOM

4. Points d’attention spécifiques demandés par l’utilisateur

Effet d’estrade de l’image principale : Le fond de page remonte sur le bas de l’image en conservant deux encoches latérales.
Ligne de séparation de la Section 1 : Elle doit être centrée et ne pas atteindre les bords de page.
Barre de séparation de la Section 3 : Placée au-dessus de “Related Posts” pour bien délimiter la transition depuis le contenu.
Typographie et Casse : Respect de la règle “sentence case” sur l’ensemble des titres et libellés.
Rétrocompatibilité : Préservation du double canal Sanity (production) et Content Collections Markdown (fallback local / dev sans clé).