Skip to content
AMN Docs

Plan de refonte UI - Blog style officiel Astro

Plan de refonte UI - Blog style officiel Astro

Spécification et plan de conception de l'interface du blog amn-blog inspirée du blog officiel Astro (5 sections).

Plan d’exécution — Refonte UI de amn-blog (Style Officiel Astro)

Date : 2026-10-17
Auteurs : Pair-programming Antigravity IDE & Anderson
Référence : Spécification utilisateur (captures 1 à 5), ADR-001
Dépôt cible : audyssee/amn-blog
URL de référence design : Blog officiel Astro (astro.build/blog)

1. Objectif de la mission

Transformer l’interface de la page d’accueil / catalogue de amn-blog pour adopter fidèlement le design moderne, sombre et géométrique du blog officiel d’Astro, tout en restant connecté aux données dynamiques du CMS Sanity et aux microservices de formulaires Cloudflare.

La mission porte spécifiquement sur l’interface principale du blog (les 5 sections clés) avant d’aborder ultérieurement la page de détail d’un article individuel.

2. Décomposition des 5 Sections Cibles

Section 1 — Header (En-tête de navigation)1/2

Référence visuelle : Capture 1

  • Style global : Barre fixe ou sticky, fond sombre semi-transparent (bg-[#0b0d13]/90 ou bg-black/80) avec backdrop-blur-md, bordure basse fine border-b border-white/10.

Section 1 — Header (En-tête de navigation)2/2

  • Composants :
    • Gauche : Logo Astro/AMN stylisé en SVG blanc avec typographie bold épurée.
    • Centre : Menu de navigation principal :
      • Documentation (lien vers https://amn-docs-dev.anderson-metsanou.workers.dev/docs/).
      • Blog (lien actif, souligné ou mis en valeur).
      • Resources ⌵ (menu déroulant avec sous-liens : Intégrations, Thèmes, Vitrine).
      • Community ⌵ (menu déroulant : Discord, Événements, Partenaires).
      • Enterprise ⌵ (menu déroulant : Support, Sécurité, Contact).
    • Droite :
      • Déclencheur modal recherche Pagefind accessible (Ctrl+K / Cmd+K).
      • Icône GitHub renvoyant vers le dépôt organisation audyssee.

Section 2 — Hero Section (“Welcome, world”)

Référence visuelle : Capture 2

  • Style global :
    • Arrière-plan sombre orné d’une grille géométrique (grid blueprint pattern) en CSS pur : 
      background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
      background-size: 32px 32px;
    • Masque de fondu radial pour estomper la grille vers les bords (mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%)).
    • Espacement vertical aéré (py-20 à py-28).
  • Contenu :
    • Titre principal : Welcome, world (texte grand format text-4xl md:text-6xl font-bold tracking-tight text-white text-center).
    • Sous-titre : Get all the latest news from the Astroverse. (texte centré text-gray-400 text-lg md:text-xl font-normal mt-4 text-center).

Section 3 — Layout Principal Scindé (Sidebar Gauche + Grille Articles Droite)

Référence visuelle : Capture 3

Le corps central est contenu dans un wrapper large (max-w-7xl mx-auto border-x border-white/10) et divisé verticalement par une fine bordure :

┌─────────────────────────┬─────────────────────────────────────────────────┐
│     COLONNE GAUCHE      │                 COLONNE DROITE                  │
│       (~300-340px)      │                   (Flex 1)                      │
│                         │                                                 │
│ 3.1 Popular posts       │  [ Carte Article 1 : Image + Titre + Extrait ]  │
│ ─────────────────────── │                                                 │
│ 3.2 New Astro merch!    │  [ Carte Article 2 : Image + Titre + Extrait ]  │
│ ─────────────────────── │                                                 │
│ 3.3 Subscribe (RSS)     │  [ Carte Article 3 : Image + Titre + Extrait ]  │
└─────────────────────────┴─────────────────────────────────────────────────┘

3.A. Colonne Gauche (3 Sous-sections empilées)

  1. Sous-section 3.1 — Popular posts :
    • Titre : Popular posts (petit texte gris en uppercase discret).
    • Liste de liens vers les articles les plus lus/recommandés avec soulignement interactif au hover (ex: 2024 year in review, Content Layer: A Deep Dive, Netlify: Our Official Deployment Partner…).
    • Séparateur horizontal border-b border-white/10.
  1. Sous-section 3.2 — New Astro merch! (Callout produit) :
    • Titre : New Astro merch! (ou annonce phare AMN).
    • Description d’accroche en petit texte gris/violet.
    • Carte visuelle avec aperçu graphique (t-shirts, casquettes, goodies) avec gradient néon sombre.
    • Séparateur horizontal border-b border-white/10.
  1. Sous-section 3.3 — Subscribe (RSS) :
    • Titre : Subscribe.
    • Sous-titre : Stay up-to-date with news from the Astroverse.
    • Bouton d’action RSS : fond sombre arrondi, icône de flux RSS SVG + libellé RSS, pointant vers /rss.xml.

3.B. Colonne Droite (Cartes d’Articles Sanity)

  • Structure de chaque carte :
    • Date au-dessus de l’image (ex: October 15, 2026).
    • Image de couverture large (ratio 16:9) avec visuel stylisé et gradient (violet/pourpre/indigo façon versions Astro).
    • Titre de l’article : text-2xl md:text-3xl font-bold text-white hover:text-purple-300 transition-colors.
    • Extrait textuel : descriptif concis en gris moyen (text-gray-400 text-sm md:text-base leading-relaxed).
    • Style de carte : conteneur sombre bg-[#12141a]/60 avec bordure border border-white/10 et hover state élégant.

Section 4 — Section Pré-footer (Newsletter & Navigation)

Référence visuelle : Capture 4

  • Bordure haute : border-t border-white/10.
  • Grille 2 zones (grid grid-cols-1 lg:grid-cols-12 gap-12 py-16 px-6) :
    • Zone Gauche (Newsletter, ~5 colonnes) :
      • Titre : Let's keep in touch (police élégante serif/display ou bold).
      • Texte : Enter your email to stay up to date with the latest updates from Astro.
      • Formulaire connecté au worker form-handler :
        • Input : your@email.com (bg-[#0b0d13] border border-white/15 text-white rounded-lg px-4 py-3).
        • Bouton : Subscribe to our newsletter (bg-white/10 hover:bg-white/15 text-white rounded-lg px-4 py-3 font-medium transition-all).
    • Zone Droite (Navigation arborescente, ~7 colonnes) :
      • 4 colonnes de liens organisées verticalement :
        • Resources (Docs, Themes, Integrations, Playground, Site showcase, Starter templates).
        • About (Blog, Case studies, Partner with us, Press, Agencies).
        • Community (Contributing, Sponsors, Wallpapers, Swag Shop).
        • Legal (Telemetry, Privacy Policy, Terms of Service).

Section 5 — Footer Final

Référence visuelle : Capture 5

  • Ligne de séparation : border-t border-white/10.
  • Disposition flex/alignement (flex flex-col md:flex-row justify-between items-center py-8 px-6 text-xs text-gray-500) :
    • Gauche : Icône logo miniature + mention de copyright : MIT License © 2026 Astro Contributors (ou Audyssée / AMN Platform).
    • Droite : Liste d’icônes sociales vectorielles SVG avec transitions d’opacité (hover:text-white) :
      • Bluesky, Discord, GitHub, LinkedIn, Mastodon, Reddit, X (Twitter), YouTube.

3. Plan d’Implémentation Étape par Étape

graph TD
    A[Étape 1 : Conception des Tokens & Fondations CSS] --> B[Étape 2 : Composants Header & Navigation]
    B --> C[Étape 3 : Composant Hero avec Grille CSS]
    C --> D[Étape 4 : Composants Sidebar Gauche Popular, Merch, RSS]
    D --> E[Étape 5 : Refonte des Cartes d'Articles Sanity & Layout 2 Colonnes]
    E --> F[Étape 6 : Composant Pré-footer Newsletter & Nav multi-colonnes]
    F --> G[Étape 7 : Composant Footer & Liens Sociaux SVG]
    G --> H[Étape 8 : Assemblage, Typecheck & Tests Locaux]
    H --> I[Étape 9 : Validation Utilisateur & Déploiement Dev]

Étape 1 — Fondations CSS & Utilitaires Graphiques

  • Configurer les couleurs sombres profondes (#0b0d13, #12141a, #161922).
  • Créer la classe d’utilitaire de grille géométrique .bg-grid-pattern.
  • Préserver et adapter Tailwind CSS v4.

Étape 2 — Composant Header (src/components/Header.astro)

  • Réécrire le Header pour intégrer le logo SVG, les menus déroulants, le bouton recherche Pagefind (Ctrl+K) et le lien GitHub.

Étape 3 — Composant Hero (src/components/BlogHero.astro)

  • Créer la section “Welcome, world” avec le motif de grille en arrière-plan et le dégradé de fondu.

Étape 4 — Composants Sidebar Gauche

  • Créer src/components/blog/PopularPosts.astro (liste de liens populaires).
  • Créer src/components/blog/MerchCallout.astro (carte promotionnelle stylisée).
  • Créer src/components/blog/SubscribeRss.astro (bouton RSS officiel).

Étape 5 — Layout 2 Colonnes & Refonte BlogCard.astro

  • Créer le layout scindé src/components/blog/BlogSplitLayout.astro.
  • Réécrire BlogCard.astro pour reproduire le format carte Astro (date discrète en haut, grand visuel gradient, titre bold, extrait).
  • Lier les cartes aux articles réels renvoyés par la requête GROQ Sanity.

Étape 6 — Composant Pré-footer (src/components/PreFooter.astro)

  • Intégrer le formulaire d’abonnement newsletter (action vers POST /api/submit).
  • Créer les 4 colonnes de navigation (Resources, About, Community, Legal).

Étape 7 — Composant Footer (src/components/Footer.astro)

  • Remplacer le footer actuel par la version minimaliste avec copyright à gauche et les 8 icônes sociales SVG à droite.

Étape 8 — Assemblage de la Page Principale (src/pages/index.astro et/ou src/pages/blog/index.astro)

  • Intégrer les 5 sections dans l’ordre exact demandé.
  • Assurer le responsive mobile/tablette (la sidebar passe au-dessus ou en-dessous sur petit écran, layout fluide).

Étape 9 — Validation & Déploiement

  • Exécuter pnpm run typecheck (astro check) et pnpm run build en local.
  • Tester le modal Pagefind et la soumission newsletter.
  • Déployer sur amn-dev via GitHub Actions et faire valider par l’utilisateur.

4. Livrables & Fichiers Impactés dans amn-blog1/2

Fichier Nature Description
src/components/Header.astro Modification Nouveau header style Astro avec dropdowns et recherche
src/components/BlogHero.astro Création Hero “Welcome, world” avec motif de grille blueprint
src/components/blog/BlogSidebar.astro Création Sidebar regroupant Popular Posts, Merch Callout et RSS
src/components/BlogCard.astro Modification Carte article grand format avec gradient et date supérieure

4. Livrables & Fichiers Impactés dans amn-blog2/2

Fichier Nature Description
src/components/PreFooter.astro Création Bloc Newsletter “Let’s keep in touch” + 4 colonnes de navigation
src/components/Footer.astro Modification Footer minimaliste avec icônes sociales SVG
src/pages/blog/index.astro Modification Assemblage des 5 sections
src/styles/global.css Modification Tokens de couleurs et pattern de grille géométrique

5. Prise en compte des retours et ajustements (Itération 1)

Suite aux retours utilisateurs détaillés dans description.md, les ajustements suivants ont été intégrés :

N° Retour utilisateur Action & Statut
1 L’élément “Blog” sur le header est en gras Corrigé : passage en font-normal text-white dans Header.astro.
2 Le nom n’est pas “astro AMN” mais “amn” Corrigé : libellé typographique en lowercase text-2xl font-bold (amn) avec emblème SVG dans Header.astro.
3 Couleur de la barre Pagefind différente du site Corrigé : modal et déclencheur refondus en thème sombre aligné (#0b0d13, #12141a, bordures discrètes et raccourci Ctrl+K) dans SearchModal.astro.
4 Sous-titre du Hero à adapter au projet Corrigé : Get all the latest news from the Amnworld. dans BlogHero.astro et index.astro.
5 Layout scindé en 2 (Articles à gauche, Sidebar à droite) Corrigé : division nette en 2 colonnes (flex-1 pour la liste d’articles à gauche, BlogSidebar à droite) dans index.astro.
6 Identité 100% AMN (aucun lien ni texte pointant sur Astro) Corrigé : tous les liens du pré-footer et du footer redirigent vers les ressources AMN / Audyssée (PreFooter.astro, Footer.astro, PopularPosts.astro).

6. Prise en compte des retours et ajustements (Itération 2)

Suite aux retours de la 2e vague dans description.md, les ajustements suivants ont été implémentés :

N° Retour utilisateur (2e vague) Action & Statut
1 favicon.ico d’Astro présent masque favicon.svg d’AMN Corrigé : suppression physique de favicon.ico dans public/ et conservation exclusive du lien <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> dans BaseHead.astro.
2 Sections permutées (Sidebar à gauche, Articles à droite) & défilement synchronisé Corrigé : réorganisation du layout principal avec BlogSidebar à gauche et la grille d’articles à droite (flex-1) dans index.astro. Suppression de sticky top-20 dans BlogSidebar.astro pour que les deux colonnes défilent naturellement ensemble.
3 Taille des cartes de posts trop grandes (diminuer/zoom in) Corrigé : cartes compactées dans BlogCard.astro (padding p-4 sm:p-5, ratio d’image compact aspect-[21/9] sm:aspect-[2.4/1] max 256px, typographies resserrées).
4 PreFooter & internationalisation globale en anglais Corrigé : dans PreFooter.astro, colonne Resources limitée à “Docs”, colonne “About” avec “Blog” et “Contact us”, colonne “Community” avec “Coming soon”. Tous les textes, formulaires, boutons et modals traduits en anglais dans l’ensemble de l’interface.

7. Prise en compte des retours et ajustements (Itération 3)

Suite aux retours de la 3e vague dans description.md accompagnés de captures d’écran annotées, les ajustements suivants ont été réalisés :

N° Retour utilisateur (3e vague) Action & Statut
1 Modal de recherche affiché collé à gauche au lieu d’être centré (Image 1) Corrigé : application de position: fixed; top: 15%; left: 50%; transform: translateX(-50%); margin: 0; z-index: 9999; dans SearchModal.astro. Le modal s’affiche désormais rigoureusement au centre de l’écran.
2 Ajustements du menu du Header Corrigé : retrait du lien direct “Documentation” ; “Resources” contient uniquement “Docs” ; “Community” affiche “Coming soon” ; “Enterprise” propose “About” et “Contact us” dans Header.astro.
3 Lignes de séparation de la sidebar gauche coupées avant le bord gauche de l’écran (Image 2) Corrigé : retrait du conteneur max-w-[1400px] mx-auto sur le layout scindé dans index.astro. La sidebar démarre directement au bord gauche de l’écran (x = 0), ce qui permet à toutes ses lignes horizontales (border-b border-white/10) d’aller bord à bord jusqu’à la limite gauche de l’écran tout en conservant un padding textuel confortable.
4 Format carré des cartes de blog et centrage avec espaces latéraux (Image 3) Corrigé : réarchitecture de BlogCard.astro pour correspondre fidèlement à l’Image 3 : bandeau supérieur date en mono, grand visuel central (h-[280px] sm:h-[340px]), bandeau inférieur scindé (titre bold à gauche, extrait à droite). Largeur contenue à max-w-[640px] centrée avec de généreux espaces à gauche et à droite dans index.astro conférant à chaque carte une silhouette carrée.

8. Prise en compte des retours et ajustements (Itération 4)

Suite aux retours de la 4e vague dans description.md, les ajustements suivants ont été réalisés :

N° Retour utilisateur (4e vague) Action & Statut
1 Titres en minuscules avec initiale majuscule (sauf marque “amn”) Corrigé : suppression de la classe CSS uppercase sur tous les titres de sections et colonnes (PopularPosts.astro, MerchCallout.astro, SubscribeRss.astro, PreFooter.astro, SearchModal.astro). Tous les libellés adoptent désormais le format Sentence case (ex: “Popular posts”, “Resources”, “Search”, “Close”, etc.), tandis que la marque “amn” demeure rigoureusement en minuscules.
2 “Coming soon” sous la colonne “Legal” du PreFooter Corrigé : remplacement des liens temporaires par le texte indicatif <p class="text-xs text-gray-500 italic">Coming soon</p> dans PreFooter.astro.
3 Préparation pour la prochaine phase : affichage détaillé d’un post Prêt : l’interface principale (catalogue, hero, layout scindé, pré-footer, footer et modal de recherche) est désormais entièrement alignée et validée, prête pour la conception de la page de post unitaire (/blog/[slug]/).
Switch to normal mode

Contents

Built with StarlightPowered by Cloudflare