Guide de Test - Page d'accueil avec PageBuilder (Golden Path - Slice 1)

Documentation technique

Date : 2026-09-14
Composant : Page d’accueil (PageBuilder + SSG + Sanity)
Phase : Golden Path - Slice 1

Prérequis

Avant de commencer les tests, assurez-vous que :

Le fichier .env à la racine du projet est configuré avec les variables Sanity
Les dépendances sont installées : task install
Le Sanity Studio est accessible et configuré

1. Démarrage des serveurs locaux

Terminal 1 - Serveur Astro (Web)

cd /home/anderson/PP
task dev

Le serveur démarre sur http://localhost:4321

Terminal 2 - Sanity Studio

cd /home/anderson/PP
task dev:studio

Le Studio démarre sur http://localhost:3333

2. Création d’une page de test dans Sanity Studio1/3

Ouvrez http://localhost:3333 dans votre navigateur
Connectez-vous à Sanity Studio
Cliquez sur “Page” dans le menu latéral
Cliquez sur “New page”

2. Création d’une page de test dans Sanity Studio2/3

Remplissez les champs obligatoires :
- Title : “Homepage Test”
- Slug : “home”
- Status : “Published”
(Optionnel) Remplissez les champs SEO :
- SEO Title : “Test Homepage”
- SEO Description : “This is a test homepage for the PageBuilder”

2. Création d’une page de test dans Sanity Studio3/3

Ajoutez des blocs PageBuilder dans la section Page Builder :
- Cliquez sur “Add item”
- Sélectionnez “Hero Section”
- Remplissez :
  - Title : “Welcome to Our Site”
  - Subtitle : “Built with Astro + Sanity”
  - Description : “This is a test of the PageBuilder system”
  - Primary CTA text : “Get Started”
  - Primary CTA href : “/about”
- Ajoutez un bloc “Features Section” :
  - Title : “Key Features”
  - Features : Ajoutez 2-3 features avec titres et descriptions
Cliquez sur “Publish”

3. Test de la page d’accueil en production (SSG)

3.1. Vérification du build SSG

cd /home/anderson/PP/apps/web
pnpm build

Vérifications :

Le build se termine sans erreur
Le dossier dist/ est généré
Les fichiers HTML statiques sont présents

3.2. Test du serveur de prévisualisation

cd /home/anderson/PP/apps/web
pnpm preview

Vérifications :

Ouvrez http://localhost:4321
La page d’accueil s’affiche
Le contenu depuis Sanity est visible (Hero, Features)
Les métadonnées SEO sont correctes (inspectez la page)
Les boutons CTA fonctionnent

4. Test du mode Preview

4.1. Activation du mode Preview1/2

Dans Sanity Studio, créez une nouvelle page ou modifiez la page existante
Changez le Status en “Draft”
Modifiez le titre du Hero : “Preview Mode Test”
Cliquez sur le bouton “Open preview” en haut à droite
Une nouvelle fenêtre s’ouvre avec l’URL de preview

4.1. Activation du mode Preview2/2

Vérifications :

La page s’ouvre avec le contenu draft
Le titre affiché est “Preview Mode Test”
Un indicateur de preview est visible (si implémenté)
Le cookie sanity-preview est présent dans le navigateur

4.2. Sortie du mode Preview

Naviguez vers http://localhost:4321/api/exit-preview
Vous êtes redirigé vers /welcome

Vérifications :

Le cookie sanity-preview est supprimé
Le contenu draft n’est plus visible
Seul le contenu publié s’affiche

5. Test des blocs PageBuilder

5.1. Test du bloc Hero

Le titre s’affiche correctement
Le sous-titre s’affiche
La description est visible
Les boutons CTA sont cliquables
L’alignement (left/center/right) fonctionne
L’image s’affiche si ajoutée

5.2. Test du bloc Features

Le titre de section s’affiche
Les features sont en grille
Chaque feature a son titre et description
Les icônes/images s’affichent
Le hover effect fonctionne

5.3. Test du bloc Testimonials

Les témoignages s’affichent en grille
Chaque témoignage a la citation, l’auteur, le rôle
Les avatars s’affichent
Le style est cohérent

5.4. Test du bloc CTA

Le titre s’affiche
La description est visible
Les boutons sont cliquables
La couleur de fond change selon l’option

5.5. Test du bloc RichText

Le contenu Portable Text s’affiche
Les titres (h1, h2, h3, h4) sont stylisés
Les paragraphes sont lisibles
Les liens sont cliquables
Les blockquotes sont stylisés

5.6. Test du bloc ImageGallery

Les images s’affichent en grille
Les captions sont visibles
Le layout (grid-3, grid-4, masonry) fonctionne
Le hover effect sur les images fonctionne

6. Test du middleware Cloudflare

6.1. Vérification des headers CSP

Ouvrez les DevTools (F12) → Network → Rechargez la page → Cliquez sur la requête principale

Vérifications :

Le header Content-Security-Policy est présent
Les directives CSP sont correctes
Aucune erreur CSP dans la console

6.2. Test du bypass cache en mode Preview

Activez le mode preview (voir section 4)
Ouvrez les DevTools → Network
Rechargez la page

Vérifications :

Le header Cache-Control est no-store, no-cache, must-revalidate
Le header X-Preview-Mode est active
Le header Pragma est no-cache

7. Génération des types TypeScript

7.1. Génération des types

cd /home/anderson/PP/apps/web
pnpm sanity:typegen

Vérifications :

Le fichier src/sanity.types.ts est généré
Les types pour page et les blocs PageBuilder sont présents
Aucune erreur TypeScript dans le projet

8. Checklist de validation finale1/2

Avant de considérer le Slice 1 comme terminé :

La page d’accueil s’affiche correctement en production (SSG)
Les blocs PageBuilder sont rendus correctement
Les métadonnées SEO sont injectées (title, description, OG)
Le mode Preview permet de voir les brouillons de page
Le cache Edge fonctionne correctement

8. Checklist de validation finale2/2

Le middleware Cloudflare applique les CSP headers
Le middleware bypass le cache en mode preview
Les types TypeScript sont générés correctement
Le build SSG se termine sans erreur
Aucune erreur dans les logs

9. Dépannage

Problème : La page affiche “No page content found”

Solution :

Vérifiez qu’une page avec slug “home” existe dans Sanity
Vérifiez que le status est “Published”
Vérifiez que les variables d’environnement Sanity sont correctes

Problème : Le mode Preview ne fonctionne pas

Solution :

Vérifiez que SANITY_PREVIEW_SECRET est défini dans .env
Vérifiez que le secret est identique dans .env et Sanity Studio
Vérifiez que le cookie sanity-preview est posé
Vérifiez que SANITY_API_READ_TOKEN est défini (nécessaire pour les drafts)

Problème : Les images ne s’affichent pas

Solution :

Vérifiez que les images sont uploadées dans Sanity
Vérifiez que l’asset est publié
Vérifiez les permissions de l’asset

Problème : Erreur TypeScript

Solution :

Lancez pnpm sanity:typegen pour régénérer les types
Vérifiez que le fichier sanity.types.ts existe dans apps/web/src/

10. Prochaines étapes1/2

Une fois le Slice 1 validé :

Passer au Slice 2 : Article de blog (SSG + Sanity + Portable Text)
Intégrer Pagefind pour la recherche
Configurer le webhook de rebuild (Slice 6)

10. Prochaines étapes2/2

Historique des modifications

Date	Version	Description	Auteur
2026-09-14	1.0	Création du guide de test pour la page d’accueil	Cascade