Feature: Implement blog detail page

Implement blog detail page

This is a sub-issue of #15

Overview

Create or update the BlogDetail.jsx component to render individual blog posts from Markdown files with proper formatting and navigation.

Tasks

• Update BlogDetail.jsx to fetch and display a single blog post using the slug from URL parameters
• Implement Markdown rendering with appropriate styling for different elements (headings, lists, code blocks, etc.)
• Add metadata section displaying author, date, read time, and tags
• Include author information with optional GitHub profile link
• Create navigation controls to return to the blog listing
• Add social sharing functionality (optional)
• Implement related posts section based on tags (optional)
• Add syntax highlighting for code blocks

Technical Details

• Use the getBlogBySlug utility from Issue #16
• Implement responsive design for the blog content
• Ensure proper rendering of embedded images and other media
• Use semantic HTML for better accessibility and SEO
• Add proper metadata for search engines

Definition of Done

• Blog detail page correctly renders Markdown content with appropriate styling
• Metadata is clearly displayed at the top of the post
• Navigation controls work properly
• Page is responsive across different devices
• Code blocks render with syntax highlighting

Start with BlogDetail.jsx and the getBlogBySlug utility from issue #16, then trace how the slug is supplied by the URL. The work is done when one Markdown post renders with styled content, metadata, navigation, responsive semantic markup, and syntax-highlighted code blocks as described in the definition of done.