Enhanced Blog Experience with MDX

Welcome to our enhanced blog powered by MDX! This post demonstrates the powerful custom components we've built to make technical content more engaging and interactive.

MDX allows us to seamlessly blend Markdown with React components for a rich reading experience.

What is MDX?

MDX is a format that lets you write JSX in your Markdown documents. This means you can import and use React components alongside your regular Markdown content.

Custom Components Available

1. Alert Components

We have different types of alerts for various use cases:

2. Callout Boxes

3. Technology Stack Display

4. Code Blocks with Syntax Highlighting

Here's an example of our enhanced code blocks:

// Custom MDX component example
export function CustomAlert({ type, children }: AlertProps) {
  const styles = {
    info: 'bg-blue-50 border-blue-200 text-blue-800',
    warning: 'bg-yellow-50 border-yellow-200 text-yellow-800',
    error: 'bg-red-50 border-red-200 text-red-800',
    success: 'bg-green-50 border-green-200 text-green-800'
  }
  
  return (
    <div className={`border rounded-lg p-4 ${styles[type]}`}>
      {children}
    </div>
  )
}

You can also use inline code like npm install @mdx-js/react within paragraphs.

5. Enhanced Links

• Internal links: Check out our work (these stay within the site)
• External links: Visit Next.js docs (these open in new tabs with external icons)

6. Interactive Demos

Advanced Features

Tables with Custom Styling

Feature	Status	Notes
MDX Support	✅ Complete	Full React component integration
Syntax Highlighting	✅ Complete	Using rehype-highlight
Custom Components	✅ Complete	Alert, Callout, Demo, and more
Responsive Design	✅ Complete	Mobile-first approach
SEO Optimization	🚧 In Progress	Meta tags and structured data

Blockquotes

"The best way to learn is by doing. MDX allows us to create interactive learning experiences directly within our blog posts."

— VietProHub Engineering Team

Lists and Organization

Key benefits of our MDX setup:

1. Rich Content: Seamlessly mix Markdown with React components
2. Syntax Highlighting: Beautiful code blocks with language-specific highlighting
3. Custom Components: Purpose-built components for technical content
4. Responsive Design: Looks great on all devices
5. SEO Friendly: Proper meta tags and structured content

Technical Implementation:

• Next.js 15 with App Router
• @mdx-js/react for component integration
• rehype-highlight for syntax highlighting
• Custom components with Tailwind CSS styling
• TypeScript for type safety

Getting Started

To start using these enhanced MDX features in your own posts:

1. Create a new .mdx file in the content directory
2. Add the required frontmatter
3. Use any of our custom components
4. The content will be automatically processed and styled

---

This post demonstrates the power of combining Markdown with React components for technical content. All components are fully responsive and accessible.