Layout Astro : MainLayout

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

---

1. Description et périmètre

1.1. Objectif

Le layout MainLayout est le layout principal utilisé pour les pages marketing (vitrine). Il fournit la structure commune de la page : header, footer, et conteneur principal.

1.2. Utilisation principale

• Page d’accueil
• Pages marketing (landing pages)
• Pages de présentation (about, features, etc.)

1.3. Périmètre concerné

• Type : Layout Astro
• Composants inclus : Header, Footer, BaseHead
• Structure : HTML, head, body, main
• Responsivité : Support mobile/desktop

---

2. Contrats d’entrée

2.1. Props du layout

Entrée : Props passées au layout

Structure :

interface Props {
  title?: string;
  description?: string;
  image?: string;
  canonicalURL?: string;
}

Règles :

• title : optionnel, titre de la page (utilise SITE_TITLE par défaut)
• description : optionnel, description de la page (utilise SITE_DESCRIPTION par défaut)
• image : optionnel, image OG Twitter
• canonicalURL : optionnel, URL canonique

2.2. Slot principal

Entrée : Contenu du slot principal

Structure :

<MainLayout title="Ma Page">
  <slot />
</MainLayout>

Règles :

• Le slot principal contient le contenu de la page
• Le contenu est inséré dans l’élément <main>

---

3. Contrats de sortie

3.1. Structure HTML

Sortie : Structure HTML complète

Comportement :

• Structure HTML5 valide
• Header en haut de page
• Contenu principal dans <main>
• Footer en bas de page
• BaseHead dans <head>

3.2. Métadonnées SEO

Sortie : Métadonnées SEO injectées

Comportement :

• <title> avec le titre de la page
• <meta name="description"> avec la description
• <meta property="og:title"> pour Open Graph
• <meta property="og:description"> pour Open Graph
• <meta property="og:image"> pour Open Graph
• <link rel="canonical"> pour l’URL canonique

---

4. Side effects

4.1. Impact sur le rendu

Effet : Le layout est utilisé par toutes les pages marketing

Impact :

• Toutes les pages partagent la même structure
• Modification du layout impacte toutes les pages
• Nécessite de tester plusieurs pages après modification

4.2. Impact sur le SEO

Effet : Le layout influence le SEO

Impact :

• Métadonnées SEO correctes
• Structure HTML sémantique
• Accessibilité (ARIA labels, etc.)

---

5. Erreurs et gestion

5.1. Erreurs potentielles

Erreur	Cause probable	Solution
Titre manquant	title non passé en prop	Utiliser SITE_TITLE par défaut
Description manquante	description non passé en prop	Utiliser SITE_DESCRIPTION par défaut
Composant manquant	Header ou Footer non importé	Importer les composants manquants

5.2. Codes HTTP

Non applicable (layout Astro)

---

6. Checklist de validation

Avant de passer à l’étape SPEC, vérifier :

• La structure du layout est documentée
• Les contrats d’entrée/sortie sont documentés
• Les side effects sont identifiés
• Les erreurs potentielles sont documentées

---

7. Approbation

Validation requise : Confirmer que la documentation du layout MainLayout peut passer à l’étape SPEC.

---

8. Historique des modifications

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