Detecting your theme preference to prevent flashing...
This Website - 4skl's blog
Published on

This Website


This website has evolved into a sophisticated multilingual blog platform built with Astro, featuring advanced internationalization and theming capabilities.

🌍 Multilingual Architecture

The site now supports clean, SEO-friendly URLs for both English and French content:

  • English: /en/blog/post-name
  • French: /fr/blog/post-name
  • Smart defaults: Visitors are automatically redirected to /en/ by default

The language structure is organized with folders (/content/blog/en/, /content/blog/fr/) rather than file suffixes, creating a cleaner and more maintainable architecture.

🎨 Advanced Theming System

The theme system has been completely redesigned to eliminate the common “white flash” problem when loading dark themes:

  • Smart Detection: Automatically respects your system preference and remembers your choice
  • Flash Prevention: Custom loading screen with language-aware messaging prevents jarring theme transitions
  • Instant Switching: Theme changes apply immediately without page reload
  • Modern Styling: CSS variables enable sophisticated gradients and glassmorphism effects

🚀 Technical Features

  • Interactive Components: MDX enables React components directly in Markdown content
  • Automated Deployment: GitHub Actions provide seamless CI/CD to GitHub Pages
  • Performance Optimized: 100/100 Lighthouse scores with optimized loading
  • SEO Enhanced: Proper canonical URLs, OpenGraph data, and language-specific meta tags

This counter demonstrates the seamless integration of React components within Markdown content, showcasing the power of MDX for creating dynamic, engaging experiences.

🔧 Architecture Highlights

The site features a modern, component-based architecture:

  • Language-aware routing with automatic URL generation
  • Theme persistence across sessions and page loads
  • Responsive design with mobile-first approach
  • Clean folder structure for easy content management

The evolution from a simple blog to this feature-rich platform demonstrates how thoughtful architecture decisions can create maintainable, scalable web applications while preserving excellent user experience.