Skip to content
AMN Docs

HeaderLink

HeaderLink

Documentation technique

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

1. Vue d’ensemble

1.1. Description

Composant de lien de navigation interne avec détection automatique de la page active. Applique un style visuel (gras + soulignement) au lien correspondant à la page courante.

1.2. Objectif

  • Fournir des liens de navigation cohérents
  • Indiquer visuellement la page active
  • Réduire la duplication de code pour les liens de navigation
  • Simplifier la gestion de l’état actif

1.3. Caractéristiques

Propriété Valeur
Type UI atomique
Hydratation Aucune
Framework JS Aucun
Accessibilité Partiellement conforme
Responsive Non applicable

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
Header src/components/Header.astro Utilisation pour les liens internes

2.3. Composants enfants utilisés

Aucun composant enfant n’est utilisé (composant leaf).

3. Implémentation

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

---
import type { HTMLAttributes } from 'astro/types';


type Props = HTMLAttributes<'a'>;


const { href, class: className, ...props } = Astro.props;
const pathname = Astro.url.pathname.replace(import.meta.env.BASE_URL, '');
const subpath = pathname.match(/[^\/]+/g);
const isActive = href === pathname || href === '/' + (subpath?.[0] || '');
---


<a href={href} class:list={[className, { active: isActive }]} {...props}>
  <slot />
</a>
<style>
  a {
    display: inline-block;
    text-decoration: none;
  }
  a.active {
    font-weight: bolder;
    text-decoration: underline;
  }
</style>

3.2. Utilisation dans une page

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


<nav>
  <HeaderLink href="/">Home</HeaderLink>
  <HeaderLink href="/blog">Blog</HeaderLink>
  <HeaderLink href="/about">About</HeaderLink>
</nav>

4. Props et interface

4.1. Props obligatoires

Prop Type Description Exemple
href string URL du lien "/blog"

4.2. Props optionnelles

Prop Type Description Valeur par défaut
class string Classes CSS additionnelles undefined
(toutes les autres) HTMLAttributes<'a'> Attributs HTML standard -

4.3 Slots

Slot Description Obligatoire
default Contenu personnalisé du lien ❌

5. Stratégie d’hydratation

5.1. Politique d’hydratation

Type de composant Stratégie Rationale
Composant UI atomique Aucune HTML pur, 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 +0.5 KB
CSS size +0.5 KB
JS size 0 KB
TTI Immédiat

6. Styles et design system

6.1. Utilisation des design tokens

Non applicable - styles inline simples.

6.2. Responsive design

Non applicable - le composant est responsive par défaut.

6.3. Mode sombre

Non implémenté - le composant utilise les couleurs par défaut du navigateur.

7. Accessibilité (a11y)

7.1. Conformité WCAG 2.1 AA

Critère Implémentation Statut
1.3.1 Info and Relationships Structure HTML sémantique (<a>) ✅
2.4.7 Focus Visible Non testé ⚠️

7.2. Attributs ARIA utilisés

Aucun attribut ARIA n’est utilisé.

7.3. Navigation clavier

Touche Action
Tab Navigation vers le lien
Enter Activation du lien

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
  • ✅ Détection automatique de la page active (calcul côté serveur)

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 Pas de layout shift

8.3. Taille du composant

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

9. Débogage et troubleshooting

9.1. Problèmes courants

Symptôme Cause probable Solution
État actif incorrect Logique de matching incorrecte Vérifier la logique de détection du pathname
Styles non appliqués CSS scoped mal configuré Vérifier la configuration du scoped CSS

9.2. Tests manuels

Terminal window
# Test local
npm run dev


# Test de navigation
# Naviguer entre les pages et vérifier que le lien actif est bien mis en surbrillance

9.3. Logs et monitoring

Non applicable (composant statique).

10. Bonnes pratiques

10.1. Architecture

  • ✅ Centraliser la logique de détection de la page active
  • ✅ Utiliser le slot pour permettre la personnalisation du contenu
  • ✅ Typer les props avec TypeScript
  • ✅ Supporter tous les attributs HTML standard via spread operator

10.2. Accessibilité

  • ✅ Utiliser des éléments HTML sémantiques (<a>)
  • ✅ Fournir un texte descriptif pour les liens (via slot)
  • ⚠️ Améliorer le focus visible

10.3. Performance

  • ✅ Éviter l’hydratation (pas d’interaction requise)
  • ✅ Calcul côté serveur (pas de JavaScript côté client)

10.4. Maintenance

  • ✅ Mettre à jour la logique de détection si nécessaire
  • ✅ Tester sur différentes routes

11. Évolutions et roadmap

11.1. Améliorations planifiées

  • Amélioration du focus visible
  • [] Support du mode sombre
  • [ [Évolution 2 : ex. Ajout de variantes de style]

11.2. Limitations connues

  • ❌ Logique de matching basique (pathname simple)
  • ❌ Pas de support des routes dynamiques complexes
  • ❌ Pas de mode sombre

12. Ressources liées

  • Documentation Astro : Components
  • Documentation Astro : Slots
  • Composants associés :
    • src/components/Header.astro

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