HeaderLink

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é

# 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

# 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