Blog Index

Blog Index

Documentation technique

Type de ressource : Route Astro (Page SSG)
Fichier source : src/pages/blog/index.astro
Statut : Actif

1. Vue d’ensemble

1.1. Description

Page d’index du blog affichant la liste de tous les articles. Utilise Astro content collections pour récupérer les articles. Affiche les articles dans une grille avec l’image héro, le titre et la date de publication.

1.2. Objectif

• Afficher la liste des articles de blog
• Fournir une navigation vers les articles individuels
• Tester l’intégration Astro content collections

1.3. Caractéristiques

Propriété	Valeur
URL publique	/blog
Mode de rendu	SSG
Type	Page HTML
Méthode HTTP	GET
Authentification requise	Non
Cache	Par défaut Cloudflare

2. Architecture et flux

[Requête utilisateur]
     │
     ▼
[Cloudflare Pages / Edge]
     │  • Routage vers Astro
     ▼
[Astro Route (blog/index.astro)]
     │  • Récupération des articles via getCollection('blog')
     │  • Tri par date de publication
     │  • Rendu de la grille d'articles
     ▼
[Réponse HTML]

2.2. Composants impliqués

Composant	Rôle	Couche
blog/index.astro	Définition de la route	L2 (Astro)
getCollection('blog')	Récupération des articles	L2 (Astro)
BaseHead	Métadonnées SEO globales	L2 (Astro)
Header	Navigation globale	L2 (Astro)
Footer	Pied de page global	L2 (Astro)
FormattedDate	Formatage des dates	L2 (Astro)

3. Implémentation

3.1. Code de la route1/2

3.1. Code de la route2/2

---
import { Image } from 'astro:assets';
import { getCollection } from 'astro:content';
import BaseHead from '../../components/BaseHead.astro';
import Footer from '../../components/Footer.astro';
import FormattedDate from '../../components/FormattedDate.astro';
import Header from '../../components/Header.astro';
import { SITE_DESCRIPTION, SITE_TITLE } from '../../consts';

const posts = (await getCollection('blog')).sort(
  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
);
---

<!doctype html>
<html lang="en">
  <head>
    <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
    <style>
      main {
        width: 960px;
      }
      ul {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        list-style-type: none;
        margin: 0;
        padding: 0;
      }
      ul li {
        width: calc(50% - 1rem);
      }
      /* ... styles responsive ... */
    </style>
  </head>
  <body>
    <Header />
    <main>
      <section>
        <ul>
          {
            posts.map((post) => (
              <li>
                <a href={`/blog/${post.id}/`}>
                  {post.data.heroImage && (
                    <Image width={720} height={360} src={post.data.heroImage} alt="" />
                  )}
                  <h4 class="title">{post.data.title}</h4>
                  <p class="date">
                    <FormattedDate date={post.data.pubDate} />
                  </p>
                </a>
              </li>
            ))
          }
        </ul>
      </section>
    </main>
    <Footer />
  </body>
</html>

4. Données et requêtes GROQ

4.1. Requête principale

Aucune requête GROQ n’est utilisée (Astro content collections).

4.2. Requêtes secondaires

Aucune requête secondaire n’est utilisée.

4.3. Types TypeScript associés

// Type CollectionEntry généré par Astro
export type CollectionEntry<TCollectionName> = {
  id: string;
  slug: string;
  body: string;
  collection: TCollectionName;
  data: {
    title: string;
    description: string;
    pubDate: Date;
    updatedDate?: Date;
    heroImage?: ImageMetadata;
  };
};

5. Paramètres et validation

5.1. Paramètres d’URL

Aucun paramètre d’URL n’est utilisé.

5.2. Query strings

Aucune query string n’est utilisée.

5.3. Gestion des erreurs

Code HTTP	Condition	Réponse
200	Succès	Page HTML
500	Erreur content collections	Page d’erreur Astro

6. Stratégie de cache

6.1. En-têtes de cache

Mode	Cache-Control	CDN-Cache-Control	Rationale
SSG (build time)	Non configuré	Non configuré	Par défaut Cloudflare

6.2. Implémentation dans la route

Non implémenté - pas de headers de cache explicites.

7. SEO et métadonnées

7.1. Balises meta

Balise	Source	Fallback
<title>	SITE_TITLE (const)	-
<meta name="description">	SITE_DESCRIPTION (const)	-
Meta tags globaux	BaseHead	-

7.2. Sitemap

• ✅ Cette route est-elle incluse dans le sitemap ? Oui
• ✅ Fréquence de mise à jour : daily
• ✅ Priorité : 0.8

7.3. Indexation Pagefind

• ❌ Cette route est-elle indexée par Pagefind ? Non (Pagefind non configuré)

8. Composants UI utilisés

Composant	Fichier	Rôle	Hydratation
BaseHead	src/components/BaseHead.astro	Métadonnées SEO	Aucune
Header	src/components/Header.astro	Navigation globale	Aucune
Footer	src/components/Footer.astro	Pied de page global	Aucune
FormattedDate	src/components/FormattedDate.astro	Formatage des dates	Aucune

9. Sécurité

9.1. Accès et authentification

Condition	Comportement
Accès public	Page accessible sans authentification

9.2. Validation des entrées

Non applicable (pas de paramètres d’entrée).

9.3. En-têtes de sécurité

Non implémenté dans cette route (à configurer via Middleware Cloudflare).

10. Débogage et troubleshooting

10.1. Problèmes courants

Symptôme	Cause probable	Solution
Articles non affichés	Collection blog vide	Ajouter des articles dans src/content/blog/
Images non affichées	Images manquantes	Vérifier que les images existent dans src/content/blog/

10.2. Logs et monitoring

# Logs de développement
npm run dev

# Logs de build
npm run build -- --verbose

# Vérification des types
npx astro check

10.3. Tests manuels

# Test de la route en local
curl -I http://localhost:4321/blog

11. Bonnes pratiques

11.1. Architecture

• ✅ Utilisation d’Astro content collections pour les articles
• ✅ Tri par date de publication
• ✅ Images optimisées via Astro Assets

11.2. Performance

• ✅ Pas de JavaScript inutile
• ✅ Images optimisées (width, height spécifiés)
• ✅ SSG pour le rendu statique

11.3. Maintenance

• ✅ Ajouter des articles dans src/content/blog/
• ✅ Vérifier les images avant publication

12. Évolutions et roadmap

12.1. Améliorations planifiées

• Pagination pour les articles
• Filtrage par catégorie
• Indexation Pagefind
• Support du mode preview

12.2. Limitations connues

• ❌ Pas de pagination
• ❌ Pas de filtres
• ❌ Pas de support du mode preview
• ❌ Pas d’indexation Pagefind
• ❌ Langue hardcodée en ‘en’

13. Ressources liées

• Documentation Astro : Routing
• Documentation Astro : Content Collections
• Fichiers concernés :
  • src/pages/blog/index.astro
  • src/content/blog/
  • src/components/BaseHead.astro
  • src/components/Header.astro
  • src/components/Footer.astro
  • src/components/FormattedDate.astro

14. Historique des modifications

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

Switch to normal mode

ContentsSpeaker viewToggle fullscreenExport as PDF

Contents

Close

Blog Index

1. 1. Vue d’ensemble2
2. 1.1. Description3
3. 1.2. Objectif4
4. 1.3. Caractéristiques5
5. 2. Architecture et flux6
6. 2.2. Composants impliqués7
7. 3. Implémentation8
8. 3.1. Code de la route9
9. 4. Données et requêtes GROQ11
10. 4.1. Requête principale12
11. 4.2. Requêtes secondaires13
12. 4.3. Types TypeScript associés14
13. 5. Paramètres et validation15
14. 5.1. Paramètres d’URL16
15. 5.2. Query strings17
16. 5.3. Gestion des erreurs18
17. 6. Stratégie de cache19
18. 6.1. En-têtes de cache20
19. 6.2. Implémentation dans la route21
20. 7. SEO et métadonnées22
21. 7.1. Balises meta23
22. 7.2. Sitemap24
23. 7.3. Indexation Pagefind25
24. 8. Composants UI utilisés26
25. 9. Sécurité27
26. 9.1. Accès et authentification28
27. 9.2. Validation des entrées29
28. 9.3. En-têtes de sécurité30
29. 10. Débogage et troubleshooting31
30. 10.1. Problèmes courants32
31. 10.2. Logs et monitoring33
32. 10.3. Tests manuels34
33. 11. Bonnes pratiques35
34. 11.1. Architecture36
35. 11.2. Performance37
36. 11.3. Maintenance38
37. 12. Évolutions et roadmap39
38. 12.1. Améliorations planifiées40
39. 12.2. Limitations connues41
40. 13. Ressources liées42
41. 14. Historique des modifications43