Layout Astro : MainLayout

Documentation technique

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

Entrée : Props passées au layout

Structure :

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

2.1. Props du layout2/2

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