Skip to content
AMN Docs

Header

Header

Documentation technique

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)1/2

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

---
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é

Terminal window
# 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

Terminal window
# 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
Switch to normal mode

Contents

Built with StarlightPowered by Cloudflare