Detecting your theme preference to prevent flashing...
Ce Site Web - Blog de 4skl
Publié le

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 !