Feature: Update blog listing page

Update blog listing page

This is a sub-issue for #15

Overview

Refactor the existing Blogs.jsx component to work with our new Markdown-based blog system and enhance the user interface for browsing blogs.

Tasks

• Modify Blogs.jsx to load blog data from Markdown files using the new utility functions
• Implement tag filtering with a clean UI for selecting categories
• Update blog cards to display frontmatter metadata (title, author, date, read time, tags)
• Create responsive grid layout that works on all device sizes
• Add pagination if the number of blogs exceeds a certain threshold
• Ensure proper routing to individual blog posts via slug-based URLs
• Add loading states and error handling for blog data fetching
• Implement basic search functionality (optional)

Technical Details

• Use the getAllBlogs utility from Sub-Issue #16
• Implement client-side filtering for tags
• Optimize image loading with lazy loading techniques
• Ensure accessibility compliance for all interactive elements

Definition of Done

• Blog listing page successfully displays blogs from Markdown files
• Tag filtering works correctly
• UI is responsive and visually consistent with the site design
• Clicking on a blog card navigates to the correct blog detail page
• Performance is optimized for quick loading

Start with the existing Blogs.jsx component and the getAllBlogs utility from sub-issue #16. Trace the current blog detail route and data shape before planning the listing changes. Done means Markdown-backed blogs render with metadata, tag filtering, responsive cards, correct slug navigation, loading and error states, and lazy-loaded images.