Ce Site Web
Ce site web a évolué vers une plateforme de blog multilingue sophistiquée construite avec Astro, offrant des capacités avancées d’internationalisation et de thèmes.
🌍 Architecture Multilingue
Le site supporte maintenant des URLs propres et optimisées SEO pour le contenu français et anglais :
- Anglais :
/en/blog/nom-article
- Français :
/fr/blog/nom-article
- Défauts intelligents : Les visiteurs sont automatiquement redirigés vers
/en/
par défaut
La structure linguistique est organisée avec des dossiers (/content/blog/en/
, /content/blog/fr/
) plutôt que des suffixes de fichiers, créant une architecture plus propre et maintenable.
🎨 Système de Thèmes Avancé
Le système de thèmes a été complètement repensé pour éliminer le problème courant du “flash blanc” lors du chargement des thèmes sombres :
- Détection Intelligente : Respecte automatiquement les préférences système et mémorise votre choix
- Prévention du Flash : Écran de chargement personnalisé avec messages linguistiques pour éviter les transitions de thème brusques
- Commutation Instantanée : Les changements de thème s’appliquent immédiatement sans rechargement de page
- Style Moderne : Les variables CSS permettent des dégradés sophistiqués et des effets de glassmorphisme
🚀 Fonctionnalités Techniques
- Composants Interactifs : MDX permet l’intégration de composants React directement dans le contenu Markdown
- Déploiement Automatisé : GitHub Actions fournit un CI/CD transparent vers GitHub Pages
- Performance Optimisée : Scores Lighthouse 100/100 avec chargement optimisé
- SEO Amélioré : URLs canoniques appropriées, données OpenGraph et meta tags spécifiques aux langues
Ce compteur démontre l’intégration transparente de composants React dans le contenu Markdown, illustrant la puissance de MDX pour créer des expériences dynamiques et engageantes.
🔧 Points Forts de l’Architecture
Le site présente une architecture moderne basée sur des composants :
- Routage linguistique avec génération automatique d’URLs
- Persistance de thème entre les sessions et chargements de page
- Design responsive avec approche mobile-first
- Structure de dossiers propre pour une gestion facile du contenu
L’évolution d’un simple blog vers cette plateforme riche en fonctionnalités démontre comment des décisions d’architecture réfléchies peuvent créer des applications web maintenables et évolutives tout en préservant une excellente expérience utilisateur.
N’hésitez pas à explorer le code source sur GitHub ou à me contacter pour des questions et suggestions !