FormattedDate

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

1. Vue d’ensemble

1.1. Description

Composant pour l’affichage formaté d’une date. Utilise l’élément HTML <time> avec l’attribut datetime pour l’accessibilité et le SEO. Formate la date en anglais (en-us) avec le format “short” (ex: Jan 1, 2024).

1.2. Objectif

• Formater les dates de manière cohérente sur tout le site
• Assurer l’accessibilité via l’élément <time> et l’attribut datetime
• Simplifier l’affichage des dates (ex: dates de publication des articles)
• Fournir un format de date standardisé

1.3. Caractéristiques

Propriété	Valeur
Type	UI atomique
Hydratation	Aucune
Framework JS	Aucun
Accessibilité	Conforme (élément <time>)
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
BlogPost layout	src/layouts/BlogPost.astro	Utilisation pour les dates de publication
Autres pages	src/pages/*.astro	Utilisation pour l’affichage de dates

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)

---
interface Props {
  date: Date;
}

const { date } = Astro.props;
---

<time datetime={date.toISOString()}>
  {
    date.toLocaleDateString('en-us', {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
    })
  }
</time>

3.2. Utilisation dans une page

---
import FormattedDate from '../components/FormattedDate.astro';
const publishDate = new Date('2024-01-15');
---

<p>Published on <FormattedDate date={publishDate} /></p>

4. Props et interface

4.1. Props obligatoires

Prop	Type	Description	Exemple
date	Date	Date à formater	new Date('2024-01-15')

4.2. Props optionnelles

Aucune prop n’est disponible.

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 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.2 KB
CSS size	0 KB
JS size	0 KB
TTI	Immédiat

6. Styles et design system

6.1. Utilisation des design tokens

Non applicable - le composant n’a pas de styles inline.

6.2. Responsive design

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

6.3. Mode sombre

Non implémenté - le composant utilise les styles 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	Élément <time> avec datetime	✅
1.4.3 Contrast (Minimum)	Non applicable (pas de styles)	N/A
2.4.7 Focus Visible	Non applicable (pas d’interaction)	N/A

7.2. Attributs ARIA utilisés

Aucun attribut ARIA n’est utilisé (élément HTML sémantique <time>).

7.3. Navigation clavier

Non applicable (composant non interactif).

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
• ✅ Pas de CSS
• ✅ Pas de JavaScript
• ✅ Utilisation de l’élément <time> natif

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.2 KB	0 KB	0 KB	0.2 KB

9. Débogage et troubleshooting

9.1. Problèmes courants

Symptôme	Cause probable	Solution
Date incorrecte	Format de date invalide	Vérifier que l’objet Date est valide
Format incorrect	Locale incorrecte	Vérifier la locale ‘en-us’

9.2. Tests manuels

# Test local
npm run dev

# Vérification du format
# Vérifier que la date est affichée au format "Jan 1, 2024"

9.3. Logs et monitoring

Non applicable (composant statique).

10. Bonnes pratiques

10.1. Architecture

• ✅ Utiliser l’élément <time> pour l’accessibilité
• ✅ Fournir l’attribut datetime pour le SEO
• ✅ Typer les props avec TypeScript
• ✅ Utiliser toLocaleDateString pour le formatage localisé

10.2. Accessibilité

• ✅ Utiliser l’élément HTML sémantique <time>
• ✅ Fournir l’attribut datetime pour les lecteurs d’écran

10.3. Performance

• ✅ Éviter l’hydratation (pas d’interaction requise)
• ✅ Pas de JavaScript

10.4. Maintenance

• ✅ Mettre à jour la locale si nécessaire
• ✅ Mettre à jour le format de date si nécessaire

11. Évolutions et roadmap

11.1. Améliorations planifiées

• Support de différentes locales (via props)
• Support de différents formats de date (via props)
• Ajout de styles personnalisables

11.2. Limitations connues

• ❌ Locale hardcodée (‘en-us’)
• ❌ Format de date hardcodé (‘short’)
• ❌ Pas de support de l’heure
• ❌ Pas de styles personnalisables

12. Ressources liées

• Documentation Astro : Components
• Documentation MDN : time element
• Documentation MDN : toLocaleDateString
• Composants associés :
  • src/layouts/BlogPost.astro

13. Historique des modifications

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