La Méta-Construction : L'Architecture de ce Blog Astro

Plutôt que d’opter pour une solution clé en main, j’ai décidé de faire de mon portfolio un projet à part entière. C’était l’occasion parfaite de construire une plateforme sur mesure, performante, et qui reflète ma manière de penser l’architecture logicielle. Ce blog est donc bâti sur Astro, avec une pincée de SolidJS pour l’interactivité et MDX pour une écriture enrichie. Voici comment il fonctionne.

1. Le Cœur du Système : Astro Content Collections pour la Type-Safety

La pierre angulaire de l’organisation du contenu est la fonctionnalité Content Collections d’Astro. Au lieu de simples fichiers Markdown jetés dans un dossier, chaque article est structuré et, surtout, typé.

Toutes les métadonnées (le frontmatter) de mes articles doivent respecter un schéma que j’ai défini dans src/content/config.ts :

// src/content/config.ts
import { defineCollection, z } from "astro:content";

const blogCollection = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    summary: z.string(),
    date: z.date(),
    draft: z.boolean().optional(),
    tags: z.array(z.string()),
    // ... potentiellement d'autres champs comme demoUrl, repoUrl
  }),
});

export const collections = {
  'blog': blogCollection,
};

L’avantage est énorme :

• Zéro faute de frappe : Fini les titel au lieu de title ou les dates dans un format incorrect. Astro lance une erreur pendant la construction si le schéma n’est pas respecté.
• Auto-complétion : Mon éditeur de code connaît la structure et me propose les champs lorsque j’écris un nouvel article.
• Organisation : Tous les articles sont regroupés dans src/content/blog/, chacun dans son propre dossier, ce qui permet de stocker les images relatives à l’article au même endroit.

2. L’Expérience Utilisateur : Filtrage par Tags avec SolidJS

Un blog statique, c’est bien, mais il faut de l’interactivité. Pour le système de filtrage par tags, j’ai utilisé l’architecture en îles d’Astro en intégrant un composant SolidJS (/src/components/Blog.tsx).

Le processus est simple et efficace :

1. Extraction des tags : La page principale du blog (/src/pages/blog/index.astro) récupère tous les articles, en extrait tous les tags uniques et les trie par ordre alphabétique.
2. Composant Réactif : Ces tags sont passés au composant SolidJS qui gère son propre état réactif.
3. Filtrage en temps réel : Chaque clic sur un tag met à jour l’état, et une fonction createEffect filtre la liste des articles affichés sans recharger la page.

C’est un exemple parfait de la philosophie d’Astro : du HTML statique par défaut, et des “îles d’interactivité” ciblées là où c’est nécessaire.

3. La Performance et l’Optimisation : Les Sprites SVG

Pour gérer les icônes (soleil, lune, réseaux sociaux, technologies), j’ai adopté une approche moderne et performante : les sprites SVG. Plutôt que de charger des dizaines de petits fichiers d’icônes, j’ai regroupé toutes les icônes dans quelques fichiers SVG principaux (ex: /public/ui.svg, /public/stack.svg).

Chaque icône est définie comme un <symbol> avec un id unique. Pour l’afficher, j’utilise simplement une balise <svg> avec une référence <use> :

<!-- Affichage de l'icône "soleil" -->
<svg>
  <use href="/ui.svg#sun"></use>
</svg>

<!-- Affichage de l'icône "Astro" -->
<svg>
  <use href="/stack.svg#astro"></use>
</svg>

Les bénéfices :

• Moins de requêtes HTTP : Le navigateur charge un seul fichier pour plusieurs icônes.
• Mise en cache efficace.
• Stylisation facile : Je peux changer la couleur et la taille des icônes directement avec CSS en utilisant fill="currentColor".

C’est une approche délibérée pour optimiser la vitesse de chargement et la maintenabilité du site.

4. La Génération des Pages : Layouts et Routage Dynamique

La magie d’Astro réside dans sa capacité à générer des pages statiques à partir de contenu.

• Routage Dynamique : Le fichier src/pages/blog/[...slug].astro sert de modèle pour tous mes articles de blog. Grâce à la fonction getStaticPaths, Astro parcourt ma collection de contenu et génère une page HTML unique pour chaque article.
• Layouts Réutilisables : Pour maintenir une cohérence visuelle, j’utilise des layouts. ArticleTopLayout.astro gère l’en-tête de l’article (titre, date, résumé, liens de démo), tandis que ArticleBottomLayout.astro s’occupe du rendu du contenu Markdown et de la navigation “Article Précédent/Suivant”.

Conclusion

Construire ce blog a été bien plus qu’un simple exercice de style. C’est une démonstration pratique de la manière dont des technologies modernes comme Astro peuvent être orchestrées pour créer des sites à la fois extrêmement performants, agréables à maintenir et riches en fonctionnalités. Chaque choix, des Content Collections aux sprites SVG, a été fait avec l’objectif de créer une fondation solide et évolutive. Ce blog n’est pas seulement un contenant pour mes projets, il est un projet en soi.