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

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 :

audyssee/amn-studio (Schémas & contenu CMS)
audyssee/amn-blog (Présentation Astro SSR)
audyssee/amn-docs (Documentation d’architecture)

1. Contexte & Objectifs

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.

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

Définir trois types de paramètres dédiés dans Sanity Studio : headerSettings, prefooterSettings et footerSettings.
Initialiser et publier ces documents dans Sanity avec le contenu existant.
Centraliser la récupération des réglages dans MainLayout.astro en une seule requête GROQ SSR combinée pour optimiser les performances.
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.ts`

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 : "/")
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")
Actions & Utilitaires :
- enableSearch (boolean, activer/désactiver la modale Pagefind)
- githubUrl (url, lien repo GitHub)

B. Schéma `prefooterSettings.ts`

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")
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`

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

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

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

Étape 3 : Requête GROQ unifiée dans `MainLayout.astro`

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 }
  }
}

Et propager aux composants :

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

Étape 4 : Adaptation des composants Astro

Header.astro :
- Itération dynamique sur navItems et dropdownItems.
- Affichage dynamique du logo textuel/image et du lien GitHub.
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”).
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).

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

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

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

1. Contexte & Objectifs

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

A. Schéma headerSettings.ts

B. Schéma prefooterSettings.ts

C. Schéma footerSettings.ts