Plan d'implémentation - Page d'accueil (Slice 1 - Golden Path)

Plan d'implémentation - Page d'accueil (Slice 1 - Golden Path)

Documentation technique

Analyse des prérequis existants

✅ Déjà en place

• Utilitaire getSanityClient() : Existant dans apps/web/src/lib/sanity.ts
• Route Astro index.astro : Existant (contient du code de test à remplacer)
• API Preview : /api/preview et /api/exit-preview existants
• Sanity Studio : Configuré avec sanity.config.ts
• Schémas Sanity : post, author, category, blockContent, amn, submission existants
• Intégration Sanity : Configurée dans astro.config.mjs

❌ Manquants

• Schéma page avec PageBuilder : Non existant
• Blocs PageBuilder : hero, features, testimonials, cta, richText, imageGallery
• Layout MainLayout.astro : Seul BlogPost.astro existe
• Middleware Cloudflare : Non existant
• Configuration SSG : Actuellement en mode server (SSR), doit passer en static (SSG)
• TypeScript types : sanity-typegen non configuré

Plan d’implémentation

Phase 1 : Configuration SSG et Types

1. Modifier astro.config.mjs : Changer output: 'server' → output: 'static'
2. Configurer sanity-typegen : Ajouter la génération de types TypeScript automatique
3. Mettre à jour apps/web/package.json : Ajouter script de génération de types

Phase 2 : Schémas Sanity1/2

4. Créer le schéma page.ts dans apps/studio/schemaTypes/
   • Structure avec PageBuilder (array de blocs)
   • Champs : title, slug, seo (title, description, image), status

Phase 2 : Schémas Sanity2/2

5. Créer les blocs PageBuilder dans apps/studio/schemaTypes/
   • pageBuilderHero.ts : titre, sous-titre, description, CTA, image
   • pageBuilderFeatures.ts : titre, liste de features (titre, description, icône)
   • pageBuilderTestimonials.ts : titre, liste de témoignages
   • pageBuilderCta.ts : titre, description, boutons
   • pageBuilderRichText.ts : contenu Portable Text
   • pageBuilderImageGallery.ts : galerie d’images
6. Mettre à jour schemaTypes/index.ts : Ajouter les nouveaux schémas

Phase 3 : Layout et Composants Astro1/2

7. Créer MainLayout.astro dans apps/web/src/layouts/
   • Structure HTML de base
   • Intégration Header/Footer
   • Injection des métadonnées SEO

Phase 3 : Layout et Composants Astro2/2

8. Créer les composants de blocs PageBuilder dans apps/web/src/components/pageBuilder/
   • Hero.astro
   • Features.astro
   • Testimonials.astro
   • Cta.astro
   • RichText.astro
   • ImageGallery.astro

Phase 4 : Route et Middleware1/2

9. Refactor index.astro :
   • Utiliser MainLayout.astro
   • Récupérer le contenu page depuis Sanity
   • Rendre les blocs PageBuilder dynamiquement
   • Injection SEO

Phase 4 : Route et Middleware2/2

10. Créer le middleware Cloudflare dans apps/web/src/middleware.ts
    • Détection du cookie sanity-preview
    • Bypass du cache Edge en mode preview
    • Headers CSP

Phase 5 : Tests et Documentation

11. Créer la documentation de test dans GettingStarted/
    • Instructions pour tester localement (Astro dev + Studio)
    • Instructions pour tester le mode preview
    • Checklist de validation
12. Tester localement : Validation du build SSG et du mode preview

Ordre de priorité

1. Phase 1 (Configuration) - Fondation technique
2. Phase 2 (Schémas) - Modèle de données
3. Phase 3 (Layout/Composants) - UI
4. Phase 4 (Route/Middleware) - Intégration finale
5. Phase 5 (Tests/Doc) - Validation

Estimation : 3-4 jours de développement

Switch to normal mode

ContentsSpeaker viewToggle fullscreenExport as PDF

Contents

Close

Plan d'implémentation - Page d'accueil (Slice 1 - Golden Path)

1. Analyse des prérequis existants2
2. ✅ Déjà en place3
3. ❌ Manquants4
4. Plan d’implémentation5
5. Phase 1 : Configuration SSG et Types6
6. Phase 2 : Schémas Sanity7
7. Phase 3 : Layout et Composants Astro9
8. Phase 4 : Route et Middleware11
9. Phase 5 : Tests et Documentation13
10. Ordre de priorité14