Enhance MDX content features

[tyaga001]

Overview

Improve our MDX implementation with better code snippets, interactive demos, and contextual components.

Features to Implement

1. Enhanced Code Snippets

• Switch to Shiki for syntax highlighting
• Add line highlighting
• Copy button with animation
• Line numbers toggle
• Multiple language support

2. Interactive Demos

• Create reusable demo wrapper component
• Add controls system for demos
• Implement state management for demos
• Add reset functionality

3. Contextual Components

• Add Smart Aside component with variants:
  • Info
  • Warning
  • Success
  • Error
• Style cohesion between nested components

Technical Implementation

Code Snippet Component

interface CodeSnippetProps {
  code: string;
  language: string;
  highlightLines?: number[];
  showLineNumbers?: boolean;
  filename?: string;
}

Demo Component

interface DemoProps {
  defaultState: Record<string, any>;
  controls: Control[];
  children: React.ReactNode;
}

Acceptance Criteria

• Shiki syntax highlighting works
• Code snippets support all required languages
• Demo component handles state correctly
• Contextual components nest properly
• Copy functionality works

Performance Requirements

• Shiki highlighting at build time
• Lazy loading for interactive components
• Optimized bundle size

Resources

• Josh Comeau's Blog Implementation

Priority: High

[nirnejak]

@tyaga001 These points can be removed since these are done in #58

• Switch to Shiki for syntax highlighting
• Add line highlighting
• Copy button with animation
• Multiple language support