Skip to content
AMN Docs

Footer

Footer

Documentation technique

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

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

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

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)
  • ✅ 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

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

Contents

Built with StarlightPowered by Cloudflare