Page Astro : index.astro

Objet : Page Astro
Type : Page
Slice : Slice 1 (Page d’accueil)
Cycle : DOC → SPEC → CODE → TEST → INTÉG
Statut : INTÉG

---

1. Description et périmètre

1.1. Objectif

La page index.astro est la page d’accueil du site. Elle utilise le rendu PageBuilder depuis Sanity pour afficher un contenu marketing flexible avec le mode SSG.

1.2. Utilisation principale

• Page d’accueil principale
• Point d’entrée du site
• Vitrine marketing

1.3. Périmètre concerné

• Type : Page Astro
• Rendu : SSG via export const prerender = true
• Source des données : Sanity (via GROQ query)
• Layout : MainLayout.astro
• Composants : PageBuilder blocks

---

2. Contrats d’entrée

2.1. Configuration prerender

Entrée : Configuration de rendu

Structure :

---
export const prerender = true;
---

Règles :

• Force le SSG pour cette page
• Conforme à l’ADR-SSR-Pur.md
• Page générée en HTML statique au build

2.2. Query GROQ

Entrée : Query pour récupérer les données Sanity

Structure :

*[_type == "page" && slug.current == "/"][0]{
  title,
  description,
  pageBuilder[]{
    _type,
    _key,
    ...select(
      _type == "hero" => {...},
      _type == "features" => {...},
      ...
    )
  }
}

Règles :

• Récupère le document page avec slug “/”
• Utilise ...select() pour les conditionnels
• Inclut tous les champs nécessaires au rendu

---

3. Contrats de sortie

3.1. Structure HTML

Sortie : Structure HTML complète

Comportement :

• Utilisation de MainLayout.astro
• Props SEO passées au layout
• Rendu conditionnel des blocs PageBuilder
• Structure sémantique HTML5

3.2. Métadonnées SEO

Sortie : Métadonnées SEO injectées

Comportement :

• Title depuis Sanity ou fallback
• Description depuis Sanity ou fallback
• OG tags via MainLayout
• URL canonique

---

4. Side effects

4.1. Impact sur le rendu

Effet : La page d’accueil influence le rendu global

Impact :

• Première page visitée par les utilisateurs
• Impact sur le SEO global du site
• Performance critique (first contentful paint)

4.2. Impact sur le cache

Effet : Mode SSG influence le cache

Impact :

• Page générée statiquement au build
• Cache Edge pour les assets statiques
• Rebuild nécessaire pour mise à jour du contenu

---

5. Erreurs et gestion

5.1. Erreurs potentielles

Erreur	Cause probable	Solution
Page Sanity introuvable	Aucun document avec slug “/”	Afficher page par défaut ou erreur 404
Query GROQ invalide	Syntaxe incorrecte	Corriger la syntaxe GROQ
Composant manquant	Bloc inconnu dans pageBuilder	Ignorer ou afficher erreur

5.2. Fallbacks

Gestion des données manquantes :

• Si page est null : afficher contenu par défaut
• Si pageBuilder est vide : afficher message
• Si bloc inconnu : ignorer silencieusement

---

6. Implémentation réalisée

6.1. Configuration SSG

Fichier : apps/web/src/pages/index.astro

Code :

---
export const prerender = true;
---

Conformité : Conforme à l’ADR-SSR-Pur.md

6.2. Query GROQ

Query utilisée :

*[_type == "page" && slug.current == "/"][0]{
  title,
  description,
  pageBuilder[]{
    _type,
    _key,
    ...select(
      _type == "hero" => {
        heading,
        subheading,
        ctaText,
        ctaLink,
        image
      },
      _type == "features" => {
        heading,
        features[]{
          title,
          description,
          icon
        }
      },
      _type == "testimonials" => {
        heading,
        testimonials[]{
          name,
          role,
          quote,
          avatar
        }
      },
      _type == "cta" => {
        heading,
        description,
        buttonText,
        buttonLink
      },
      _type == "richText" => {
        content
      },
      _type == "imageGallery" => {
        heading,
        images[]{
          asset,
          alt,
          caption
        }
      }
    )
  }
}

6.3. Rendu des blocs

Logique de rendu :

{page?.pageBuilder?.map((block) => {
  switch (block._type) {
    case 'hero': return <Hero {...block} />;
    case 'features': return <Features {...block} />;
    case 'testimonials': return <Testimonials {...block} />;
    case 'cta': return <CTA {...block} />;
    case 'richText': return <RichText {...block} />;
    case 'imageGallery': return <ImageGallery {...block} />;
    default: return null;
  }
})}

6.4. Intégration mode preview

Utilisation de getSanityClient() :

• Client Sanity configuré pour détecter le cookie preview
• Basculement automatique vers previewDrafts si cookie présent
• Aucune modification nécessaire dans index.astro

---

7. Checklist de validation

Avant de considérer l’implémentation comme terminée :

• Configuration prerender conforme à l’ADR
• Query GROQ valide et fonctionnelle
• Composants PageBuilder intégrés
• Layout MainLayout utilisé
• SEO et métadonnées configurés
• Mode preview fonctionnel
• Build Astro réussi
• Page accessible en local

---

8. Approbation

Validation requise : Confirmer que l’implémentation de la page d’accueil est terminée.

---

9. Historique des modifications

Date	Version	Description	Auteur
2026-09-17	1.0	Création initiale	Devin