Website Features Demo

🎉 Modern Blog Features

This page showcases all the modern features implemented in our Astro blog. Try them out and see how they enhance the user experience!

Dark/Light Theme Toggle

Click the theme toggle button in the header to switch between light and dark modes. The theme preference is saved in localStorage.

Search Functionality

Click the search icon in the header to open the search box. You can search for blog posts and navigate quickly.

Back to Top Button

Scroll down on this page to see the floating "Back to Top" button appear. It provides smooth scrolling back to the top.

Responsive Design

The website is fully responsive with a mobile-first approach. Try resizing your browser or view on different devices.

Desktop View
Tablet View
Mobile View

Code Block Features

Hover over code blocks in blog posts to see the copy button. This makes it easy to copy code snippets. 

// Example code block
const greeting = "Hello, World!";
console.log(greeting);

Content Collections

Blog posts are managed with Astro's content collections, supporting:

  • ✅ Markdown and MDX files
  • ✅ Frontmatter validation with TypeScript
  • ✅ Automatic date sorting
  • ✅ Tag-based organization
  • ✅ SEO-friendly URLs

Design System

Built with a comprehensive CSS custom properties system for consistent theming:

Accent Color
Success
Warning
Error

Performance Features

Optimized for speed and user experience:

  • 🚀 Static site generation with Astro
  • 📱 Mobile-first responsive design
  • 🎨 Atomic CSS with UnoCSS
  • ⚡ Lazy loading images
  • 🔧 Optimized fonts and icons
  • 📊 Reading progress indicator

Scroll Testing Area

This extra content helps test the back-to-top button functionality.

Look for the "Back to Top" button
in the bottom right corner!