Skip to content
AMN Docs

FormattedDate

FormattedDate

Documentation technique

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é

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

Terminal window
# 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

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