Header

Type de ressource : Composant Astro (UI atomique)
Fichier source : src/components/Header.astro
Statut : Actif

1. Vue d’ensemble

1.1. Description

Composant d’en-tête de navigation contenant le titre du site, les liens de navigation internes, et les liens vers les réseaux sociaux (Mastodon, Twitter, GitHub).

1.2. Objectif

• Fournir une navigation cohérente sur tout le site
• Afficher le titre du site avec lien vers l’accueil
• Permettre la navigation vers les sections principales (Home, Blog, About)
• Afficher les liens vers les réseaux sociaux

1.3. Caractéristiques

Propriété	Valeur
Type	UI atomique
Hydratation	Aucune
Framework JS	Aucun
Accessibilité	Partiellement conforme
Responsive	Mobile-first (social links masqués sur mobile)

2. Architecture et structure

2.1. Emplacement dans l’arborescence

src/components/
├── BaseHead.astro
├── Header.astro
├── Footer.astro
├── FormattedDate.astro
└── HeaderLink.astro

2.2. Composants dépendants

Composant parent	Fichier	Relation
Toutes les pages	src/pages/*.astro	Utilisation dans le <body>

2.3. Composants enfants utilisés

Composant enfant	Fichier	Rôle
HeaderLink	src/components/HeaderLink.astro	Liens de navigation internes

3. Implémentation

3.1. Variante : Composant UI atomique (HTML + CSS purs)

---
import { SITE_TITLE } from '../consts';
import HeaderLink from './HeaderLink.astro';
---

<header>
  <nav>
    <h2><a href="/">{SITE_TITLE}</a></h2>
    <div class="internal-links">
      <HeaderLink href="/">Home</HeaderLink>
      <HeaderLink href="/blog">Blog</HeaderLink>
      <HeaderLink href="/about">About</HeaderLink>
    </div>
    <div class="social-links">
      <a href="https://m.webtoo.ls/@astro" target="_blank">
        <span class="sr-only">Follow Astro on Mastodon</span>
        <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32">
          <path fill="currentColor" d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z" />
        </svg>
      </a>
      <a href="https://twitter.com/astrodotbuild" target="_blank">
        <span class="sr-only">Follow Astro on Twitter</span>
        <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32">
          <path fill="currentColor" d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
        </svg>
      </a>
      <a href="https://github.com/withastro/astro" target="_blank">
        <span class="sr-only">Go to Astro's GitHub repo</span>
        <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32">
          <path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
        </svg>
      </a>
    </div>
  </nav>
</header>

3.2. Utilisation dans une page

---
import Header from '../components/Header.astro';
---

<!doctype html>
<html lang="en">
  <body>
    <Header />
    <main>
      <!-- Contenu de la page -->
    </main>
  </body>
</html>

4. Props et interface

4.1. Props obligatoires

Aucune prop n’est obligatoire (composant sans props).

4.2. Props optionnelles

Aucune prop n’est disponible (composant sans props).

4.3. Slots

Aucun slot n’est implémenté dans ce composant.

5. Stratégie d’hydratation

5.1. Politique d’hydratation

Type de composant	Stratégie	Rationale
Composant UI atomique	Aucune	HTML + CSS purs, pas d’interaction

5.2. Directives Astro utilisées

Aucune directive n’est utilisée (composant HTML pur).

5.3. Impact sur les performances

Métrique	Sans hydratation
HTML size	+2 KB
CSS size	+1 KB
JS size	0 KB
TTI	Immédiat

6. Styles et design system

6.1. Utilisation des design tokens

/* Le composant utilise des variables CSS personnalisées */
header {
  background: white;
  box-shadow: 0 2px 8px rgba(var(--black), 5%);
}

nav a.active {
  border-bottom-color: var(--accent);
}

6.2. Responsive design

/* Mobile-first approach */
@media (max-width: 720px) {
  .social-links {
    display: none;
  }
}

6.3. Mode sombre

Non implémenté - le composant utilise un fond blanc fixe.

7. Accessibilité (a11y)

7.1. Conformité WCAG 2.1 AA

Critère	Implémentation	Statut
1.1.1 Non-text Content	Alt text pour les SVG (aria-hidden)	✅
1.3.1 Info and Relationships	Structure HTML sémantique (<header>, <nav>, <h2>)	✅
1.4.3 Contrast (Minimum)	Non testé	⚠️
2.1.1 Keyboard	Navigation clavier complète (Tab, Enter)	✅
2.4.7 Focus Visible	Non testé	⚠️
4.1.2 Name, Role, Value	sr-only pour les liens sociaux	✅

7.2. Attributs ARIA utilisés

<!-- Liens sociaux -->
<span class="sr-only">Follow Astro on Mastodon</span>
<svg aria-hidden="true">...</svg>

7.3. Navigation clavier

Touche	Action
Tab	Navigation vers les liens de navigation
Enter	Activation des liens

7.4. Tests d’accessibilité

# Test avec Lighthouse
npx lighthouse http://localhost:4321/ --view

8. Performance et optimisation

8.1. Optimisations appliquées

• ✅ HTML statique par défaut
• ✅ CSS scoped
• ✅ Pas de JavaScript
• ✅ SVG inline (pas de requête HTTP supplémentaire)
• ✅ Social links masqués sur mobile (réduction DOM)

8.2. Core Web Vitals

Métrique	Objectif	Stratégie
LCP	< 2.5s	Pas de JS bloquant
INP	< 200ms	Pas de JS
CLS	< 0.1	Dimensions explicites des SVG

8.3. Taille du composant

Type	HTML	CSS	JS (hydraté)	Total
UI atomique	2 KB	1 KB	0 KB	3 KB

9. Débogage et troubleshooting

9.1. Problèmes courants

Symptôme	Cause probable	Solution
HeaderLink non fonctionnel	Import incorrect	Vérifier le chemin d’import de HeaderLink
Styles cassés	Variables CSS non définies	Vérifier les variables CSS personnalisées
Social links visibles sur mobile	Media query incorrecte	Vérifier le breakpoint (720px)

9.2. Tests manuels

# Test local
npm run dev

# Test responsive
# Utiliser les DevTools du navigateur (mode responsive)
# Vérifier que les social links sont masqués sur mobile

9.3. Logs et monitoring

Non applicable (composant statique).

10. Bonnes pratiques

10.1. Architecture

• ✅ Séparer les liens internes (HeaderLink) des liens externes
• ✅ Utiliser sr-only pour le texte alternatif des liens sociaux
• ✅ Utiliser aria-hidden="true" pour les SVG décoratifs
• ✅ CSS scoped pour éviter les fuites de styles

10.2. Accessibilité

• ✅ Utiliser des éléments HTML sémantiques (<header>, <nav>, <h2>)
• Fournir du texte alternatif pour les liens sociaux
• ✅ Tester la navigation au clavier
• ⚠️ Améliorer le contraste des couleurs
• ⚠️ Améliorer le focus visible

10.3. Performance

• ✅ Éviter l’hydratation (pas d’interaction requise)
• ✅ SVG inline (pas de requête HTTP)
• ✅ Masquer les éléments non critiques sur mobile

10.4. Maintenance

• ✅ Mettre à jour les liens sociaux selon les besoins
• ✅ Vérifier la compatibilité des liens avec les réseaux sociaux

11. Évolutions et roadmap

11.1. Améliorations planifiées

• Ajout du mode sombre
• Amélioration du contraste pour WCAG AA
• Amélioration du focus visible
• Intégration de la navigation active (mise en surbrillance du lien actif)

11.2. Limitations connues

• ❌ Navigation active non implémentée (classe .active existe mais non utilisée)
• ❌ Pas de mode sombre
• ❌ Liens sociaux hardcodés (non configurables)
• ❌ Pas de menu mobile pour les liens internes

12. Ressources liées

• Documentation Astro : Components
• Documentation Astro : Islands Architecture
• DAT L2 : §4 - Stratégie d’Hydratation & Gestion du JavaScript
• Composants associés :
  • src/components/HeaderLink.astro
  • src/components/Footer.astro
• Constantes : src/consts.ts (SITE_TITLE)

13. Historique des modifications

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