Welcome

Documentation technique

Type de ressource : Route Astro (Page SSR avec Preview)
Fichier source : src/pages/welcome.astro
Statut : Actif

1. Vue d’ensemble

1.1. Description

Page welcome affichant le message AMN depuis Sanity. Supporte le mode preview pour visualiser les drafts. Affiche une bannière de preview si le mode est activé.

1.2. Objectif

Afficher le message AMN depuis Sanity
Supporter le mode preview pour les drafts
Tester l’intégration preview Sanity
Fournir une interface simple pour tester la preview

1.3. Caractéristiques

Propriété	Valeur
URL publique	`/welcome`
Mode de rendu	SSR
Type	Page HTML
Méthode HTTP	GET
Authentification requise	Preview uniquement (cookie)
Cache	No-store en mode preview

2. Architecture et flux

[Requête utilisateur]
     │
     ▼
[Cloudflare Pages / Edge]
     │  • Middleware (cookie sanity-preview)
     ▼
[Astro Route (welcome.astro)]
     │  • Détection du mode preview (cookie)
     │  • Récupération du message AMN via getAmn(isPreview)
     │  • Rendu du composant
     ▼
[Réponse HTML]

2.2. Composants impliqués

Composant	Rôle	Couche
`welcome.astro`	Définition de la route	L2 (Astro)
`getAmn()`	Récupération du message AMN	L2 (Astro)
Preview cookie	Détection du mode preview	L2 (Astro)

3. Implémentation

3.1. Code de la route1/2

3.1. Code de la route2/2

---
import { getAmn } from '../lib/sanity'

export const prerender = false

const isPreview = Astro.cookies.get('sanity-preview')?.value === 'true'
const amn = await getAmn(isPreview)
---

<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Welcome, AMN</title>
  </head>
  <body>
    {isPreview && (
      <div class="preview-banner">
        ⚠️ <strong>Mode Preview Activé</strong> — Visualisation des brouillons Sanity non publiés (Drafts).
        <a href="/api/exit-preview" class="exit-link">Quitter la preview</a>
      </div>
    )}

    <main>
      <h1>Welcome, AMN</h1>
      {amn ? (
        <div class="card">
          <p><strong>Message from Sanity:</strong> {amn.message}</p>
          <p><strong>Status:</strong> <span class="status-tag">{amn.status}</span></p>
          {isPreview && (
            <p class="draft-indicator">📄 Ce contenu est rendu via la perspective Drafts Sanity.</p>
          )}
        </div>
      ) : (
        <p>No active AMN message found in Sanity</p>
      )}
    </main>
  </body>
</html>

4. Données et requêtes GROQ

4.1. Requête principale

*[_type == "amn" && status == "active"][0]

4.2. Requêtes secondaires

Aucune requête secondaire n’est utilisée.

4.3. Types TypeScript associés

// Type AMN (manuel, sanity-typegen non implémenté)
export type Amn = {
  _id: string;
  _type: 'amn';
  message: string;
  status: 'active' | 'inactive';
};

5. Paramètres et validation

5.1. Paramètres d’URL

Aucun paramètre d’URL n’est utilisé.

5.2. Query strings

Aucune query string n’est utilisée.

5.3. Gestion des erreurs

Code HTTP	Condition	Réponse
200	Succès	Page HTML
500	Erreur Sanity (getAmn)	Page HTML avec message d’erreur

6. Stratégie de cache

6.1. En-têtes de cache

Mode	`Cache-Control`	`CDN-Cache-Control`	Rationale
SSR Preview	Non configuré	Non configuré	À configurer (no-store recommandé)
SSR standard	Non configuré	Non configuré	Par défaut Cloudflare

6.2. Implémentation dans la route

Non implémenté - pas de headers de cache explicites.

7. SEO et métadonnées

7.1. Balises meta

Balise	Source	Fallback
`<title>`	Hardcodé “Welcome, AMN”	-
`<meta name="viewport">`	Hardcodé	-

7.2. Sitemap

❌ Cette route est-elle incluse dans le sitemap ? Non (page de test)
❌ Fréquence de mise à jour : N/A
❌ Priorité : N/A

7.3. Indexation Pagefind

❌ Cette route est-elle indexée par Pagefind ? Non (Pagefind non configuré)

8. Composants UI utilisés

Aucun composant UI n’est utilisé (page simple sans composants).

9. Sécurité

9.1. Accès et authentification

Condition	Comportement
Accès public	Page accessible sans authentification
Mode Preview	Cookie `sanity-preview` requis pour voir les drafts

9.2. Validation des entrées

Non applicable (pas de paramètres d’entrée).

9.3. En-têtes de sécurité

Non implémenté dans cette route (à configurer via Middleware Cloudflare).

10. Débogage et troubleshooting

10.1. Problèmes courants

Symptôme	Cause probable	Solution
Message AMN non affiché	Aucun document AMN actif	Créer un document AMN avec status “active”
Preview non fonctionnel	Cookie manquant	Vérifier le cookie `sanity-preview`
Erreur Sanity	Variables d’environnement manquantes	Vérifier `SANITY_PROJECT_ID`, `SANITY_DATASET`

10.2. Logs et monitoring

# Logs de développement
npm run dev

# Vérification des types
npx astro check

10.3. Tests manuels

# Test de la route en local
curl -I http://localhost:4321/welcome

# Test du mode preview
curl -I -b "sanity-preview=true" http://localhost:4321/welcome

11. Bonnes pratiques

11.1. Architecture

✅ Détection automatique du mode preview via cookie
✅ Affichage conditionnel de la bannière preview
✅ Lien pour quitter la preview

11.2. Performance

✅ Pas de JavaScript inutile
✅ HTML statique par défaut

11.3. Maintenance

✅ Tester le mode preview régulièrement
✅ Vérifier l’intégration Sanity

12. Évolutions et roadmap

12.1. Améliorations planifiées

Configuration des headers de cache (no-store en preview)
Ajout de structured data (JSON-LD)
Personnalisation du design

12.2. Limitations connues

❌ Pas de structured data (JSON-LD)
❌ Headers de cache non configurés
❌ Langue hardcodée en ‘fr’

13. Ressources liées

Documentation Astro : Routing
Fichiers concernés :
- src/pages/welcome.astro
- src/lib/sanity.ts (getAmn)
- src/pages/api/preview.ts
- src/pages/api/exit-preview.ts

14. Historique des modifications

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