Footer

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

1. Vue d’ensemble

1.1. Description

Composant de pied de page contenant le copyright avec l’année courante et les liens vers les réseaux sociaux (Mastodon, Twitter, GitHub).

1.2. Objectif

• Afficher le copyright avec l’année courante
• Fournir des liens vers les réseaux sociaux
• Assurer une cohérence visuelle en bas de page
• Compléter la navigation globale du site

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
Toutes les pages	src/pages/*.astro	Utilisation dans le <body>

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)

---
const today = new Date();
---

<footer>
  &copy; {today.getFullYear()} Your name here. All rights reserved.
  <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" astro-icon="social/mastodon">
        <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" astro-icon="social/twitter">
        <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" astro-icon="social/github">
        <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>
</footer>
<style>
  footer {
    padding: 2em 1em 6em 1em;
    background: linear-gradient(var(--gray-gradient)) no-repeat;
    color: rgb(var(--gray));
    text-align: center;
  }
  .social-links {
    display: flex;
    justify-content: center;
    gap: 1em;
    margin-top: 1em;
  }
  .social-links a {
    text-decoration: none;
    color: rgb(var(--gray));
  }
  .social-links a:hover {
    color: rgb(var(--gray-dark));
  }
</style>

3.2. Utilisation dans une page

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

<!doctype html>
<html lang="en">
  <body>
    <main>
      <!-- Contenu de la page -->
    </main>
    <Footer />
  </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 */
footer {
  background: linear-gradient(var(--gray-gradient)) no-repeat;
  color: rgb(var(--gray));
}

.social-links a:hover {
  color: rgb(var(--gray-dark));
}

6.2. Responsive design

Non applicable - le composant utilise des flexbox responsive par défaut.

6.3. Mode sombre

Non implémenté - le composant utilise des variables CSS personnalisées.

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 (<footer>)	✅
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 sociaux
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)
• ✅ Astro Icons pour les SVG (si configuré)

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
Année incorrecte	Calcul côté serveur	Vérifier que new Date() est appelé correctement
Styles cassés	Variables CSS non définies	Vérifier les variables CSS personnalisées
SVG non affichés	Astro Icons non configuré	Vérifier la configuration Astro Icons

9.2. Tests manuels

# Test local
npm run dev

# Vérification de l'année
# Vérifier que l'année affichée est l'année courante

9.3. Logs et monitoring

Non applicable (composant statique).

10. Bonnes pratiques

10.1. Architecture

• ✅ Calcul de l’année côté serveur (pas de JavaScript)
• ✅ Utilisation de sr-only pour le texte alternatif
• ✅ Utilisation de 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 (<footer>)
• ✅ 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)

10.4. Maintenance

• ✅ Mettre à jour le nom du propriétaire (“Your name here”)
• ✅ Mettre à jour les liens sociaux selon les besoins

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
• Personnalisation du nom du propriétaire via props

11.2. Limitations connues

• ❌ Nom du propriétaire hardcodé (“Your name here”)
• ❌ Pas de mode sombre
• ❌ Liens sociaux hardcodés (non configurables)
• ❌ Astro Icons peut ne pas être configuré

12. Ressources liées

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

13. Historique des modifications

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