Page Astro : index.astro

Documentation technique

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 prerender1/2

Entrée : Configuration de rendu

Structure :

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

2.1. Configuration prerender2/2

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 GROQ1/2

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" => {...},
      ...
    )
  }
}

2.2. Query GROQ2/2

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 GROQ1/2

Query utilisée :

6.2. Query GROQ2/2

*[_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