Skip to content
AMN Docs

Plan - Découplage Header, Prefooter et Footer via Sanity

Plan - Découplage Header, Prefooter et Footer via Sanity

Plan d'exécution pour gérer le Header, le Prefooter et le Footer via des types de paramètres dédiés dans Sanity CMS (headerSettings, prefooterSettings, footerSettings).

Plan d’exécution — Découplage Header, PreFooter et Footer via Sanity CMS

Date : 2026-10-18
Référence : Demande utilisateur (plan/description.md), ADR-001
Dépôts cibles :

1. Contexte & Objectifs1/2

Actuellement, les composants globaux du site :

  • Header.astro (navigation, dropdowns, liens GitHub et Docs)
  • PreFooter.astro (accroche newsletter, 4 colonnes de navigation et statut “Coming soon”)
  • Footer.astro (copyright, liens sociaux GitHub, LinkedIn, RSS)

contiennent leurs textes, libellés et listes de liens en dur dans le balisage Astro.

1. Contexte & Objectifs2/2

Objectif : Adopter pour le Header, le PreFooter et le Footer le même principe de gestion par singleton que pour blogSettings :

  1. Définir trois types de paramètres dédiés dans Sanity Studio : headerSettings, prefooterSettings et footerSettings.
  2. Initialiser et publier ces documents dans Sanity avec le contenu existant.
  3. Centraliser la récupération des réglages dans MainLayout.astro en une seule requête GROQ SSR combinée pour optimiser les performances.
  4. Injecter les données dynamiques dans les composants de présentation avec des fallbacks robustes.

2. Conception des schémas Sanity (amn-studio)

A. Schéma headerSettings.ts1/3

Document singleton pour la barre de navigation supérieure :

  • Marque / Logo :
    • brandTitle (string, ex: "amn")
    • brandLogo (image optionnelle, pour upload de logo vectoriel/raster)
    • brandLink (string, lien racine par défaut : "/")

A. Schéma headerSettings.ts2/3

  • Navigation (navItems) : Tableau d’éléments de menu :
    • label (string, ex: "Blog", "Resources", "Community", "Enterprise")
    • href (string, optionnel si sous-menu dropdown)
    • dropdownItems (tableau optionnel) :
      • label (string, ex: "Docs", "About", "Contact us")
      • href (string)
      • isExternal (boolean)
      • badge (string, ex: "Coming soon")

A. Schéma headerSettings.ts3/3

  • Actions & Utilitaires :
    • enableSearch (boolean, activer/désactiver la modale Pagefind)
    • githubUrl (url, lien repo GitHub)

B. Schéma prefooterSettings.ts1/2

Document singleton pour la section pre-footer :

  • Section Newsletter (Colonne gauche) :
    • newsletterTitle (string, ex: "Let's keep in touch")
    • newsletterDescription (text, ex: "Subscribe to our newsletter to receive the latest updates, releases, and technical insights from the AMN platform.")
    • newsletterPlaceholder (string, ex: "your@email.com")
    • newsletterButtonLabel (string, ex: "Subscribe to newsletter")

B. Schéma prefooterSettings.ts2/2

  • Colonnes de navigation (Colonnes droites) : Tableau de colonnes (4 par défaut : Resources, About, Community, Legal) :
    • title (string, ex: "Resources")
    • items (tableau) :
      • label (string, ex: "Docs", "Blog", "Contact us")
      • href (string, optionnel)
      • isExternal (boolean)
      • note (string optionnel, ex: "Coming soon")

C. Schéma footerSettings.ts

Document singleton pour le pied de page :

  • Copyright :
    • copyrightOwner (string, ex: "Audyssée • AMN Platform")
    • copyrightNotice (string, ex: "All rights reserved.")
  • Liens Sociaux (socialLinks) : Tableau de réseaux sociaux :
    • platform (liste déroulante : github, linkedin, rss, twitter, custom)
    • label (string, ex: "GitHub Audyssée", "LinkedIn", "Flux RSS")
    • url (string, ex: "https://github.com/audyssee", "/rss.xml")

3. Plan d’implémentation par étapes

Étape 1 : Création des schémas dans amn-studio

  1. Créer amn-studio/schemaTypes/headerSettings.ts.
  2. Créer amn-studio/schemaTypes/prefooterSettings.ts.
  3. Créer amn-studio/schemaTypes/footerSettings.ts.
  4. Mettre à jour amn-studio/schemaTypes/index.ts.

Étape 2 : Initialisation des données dans Sanity (MCP)

  1. Via l’outil MCP create_documents et publish_documents, initialiser les 3 documents singleton avec l’intégralité des données actuelles du site.
  2. Garantir la continuité sans aucune régression visuelle ou de contenu.

Étape 3 : Requête GROQ unifiée dans MainLayout.astro1/2

Charger les 3 réglages en un seul appel au niveau du layout racine :

{
  "header": *[_type == "headerSettings"][0] {
    brandTitle,
    brandLogo { asset->{ url } },
    brandLink,
    navItems[] {
      label,
      href,
      dropdownItems[] { label, href, isExternal, badge }
    },
    enableSearch,
    githubUrl
  },
  "prefooter": *[_type == "prefooterSettings"][0] {
    newsletterTitle,
    newsletterDescription,
    newsletterPlaceholder,
    newsletterButtonLabel,
    columns[] {
      title,
      items[] { label, href, isExternal, note }
    }
  },
  "footer": *[_type == "footerSettings"][0] {
    copyrightOwner,
    copyrightNotice,
    socialLinks[] { platform, label, url }
  }
}

Étape 3 : Requête GROQ unifiée dans MainLayout.astro2/2

Et propager aux composants :

<Header {...headerSettings} />
<main class="flex-1 w-full"><slot /></main>
<PreFooter {...prefooterSettings} />
<Footer {...footerSettings} />

Étape 4 : Adaptation des composants Astro1/2

  1. Header.astro :
    • Itération dynamique sur navItems et dropdownItems.
    • Affichage dynamique du logo textuel/image et du lien GitHub.
  2. PreFooter.astro :
    • Titre, description, placeholder et bouton de newsletter dynamiques.
    • Itération dynamique sur les colonnes de navigation (avec prise en compte des items note / “Coming soon”).

Étape 4 : Adaptation des composants Astro2/2

  1. Footer.astro :
    • Année courante calculée dynamiquement + mention de copyright Sanity.
    • Itération dynamique sur la liste des réseaux sociaux avec les icônes SVG correspondantes.

Étape 5 : Validation & Recette

  • Vérifier que la modification d’un lien du header, d’un texte du prefooter ou du copyright dans Sanity se répercute instantanément sur l’ensemble des pages du site (/, /blog, /blog/[slug], /about, /contact).
  • Vérifier la tolérance aux pannes (fallbacks par défaut si Sanity est inaccessible).

4. Retours utilisateurs & Ajustements Footer Settings1/2

  1. Logo de la plateforme dans le Footer :
    • Ajout du champ platformLogo (image avec hotspot) dans footerSettings.ts.
    • Si une image est téléversée dans Sanity, elle s’affiche avant la mention de copyright @ {currentYear} ... ; sinon, l’icône géométrique vectorielle violette AMN s’affiche par défaut.

4. Retours utilisateurs & Ajustements Footer Settings2/2

  1. Logos des réseaux sociaux :
    • Ajout du champ icon (image avec hotspot) pour chaque réseau dans socialLinks au sein de footerSettings.ts.
    • Affichage de la vignette icon dans la prévisualisation Sanity Studio.
    • Côté Astro, chaque lien social affiche l’image personnalisée de Sanity si téléversée, avec fallback automatique vers les icônes vectorielles officielles (GitHub, LinkedIn, RSS, Twitter/X, Custom).
    • Adaptation instantanée au thème sombre : Application d’un filtre CSS (brightness-0 invert opacity-70 group-hover:opacity-100 transition-opacity) permettant à toute icône téléversée (noire, monochrome ou autre) de s’afficher en gris doux assorti au thème du site et de passer en blanc éclatant au survol.

5. Statut de réalisation

Composant Document Sanity État
Header (Logo, Navigation dropdowns, Recherche, GitHub) headerSettings ✅ Implémenté & Publié dans Sanity
PreFooter (Newsletter, 4 colonnes de navigation) prefooterSettings ✅ Implémenté & Publié dans Sanity
Footer (Logo plateforme, Copyright, Réseaux sociaux & logos) footerSettings ✅ Implémenté & Publié dans Sanity
Layout racine (Requête GROQ consolidée) MainLayout.astro ✅ Intégré & Fonctionnel
Switch to normal mode

Contents

Built with StarlightPowered by Cloudflare