Skip to content
AMN Docs

Plan de conception UI - Page article blog style officiel Astro

Plan de conception UI - Page article blog style officiel Astro

Spécification détaillée et plan d'exécution pour l'affichage d'un post individuel (3 sections) inspiré du blog 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 mission1/3

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

1. Vue d’ensemble de la mission2/3

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

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

1. Vue d’ensemble de la mission3/3

  1. 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 sections1/2

2. Spécification détaillée des 3 sections2/2

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

Section 3 — Articles Similaires (Related Posts)

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

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

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

Contents

Built with StarlightPowered by Cloudflare