feat: add PreviewableCode component with Mermaid and PlantUML support

[xianminx]

Overview

This PR introduces a new PreviewableCode component that enhances code block rendering in MDX by providing an interactive tabbed interface for previewable content. It supports rendering of Mermaid diagrams and PlantUML diagrams directly in the browser.

Key Features

• Interactive tabbed interface to switch between code and preview views
• Built-in support for Mermaid diagrams with client-side rendering
• Built-in support for PlantUML diagrams with server-side rendering
• Graceful fallback to standard code display for non-previewable blocks
• Error handling and display for diagram rendering failures
• Responsive design with dark mode support

Technical Details

• Added new components:
  • PreviewableCode.tsx: Main component for handling previewable code blocks
  • Mermaid.tsx: Client-side Mermaid diagram renderer
  • PlantUML.tsx: Server-side PlantUML diagram renderer
• Updated MDXComponents.tsx to use the new PreviewableCode component
• Added new dependencies:
  • mermaid: For client-side diagram rendering
  • plantuml-encoder: For PlantUML diagram encoding
  • @types/plantuml-encoder: TypeScript type definitions

Usage Examples

The component can be used in MDX files with the following syntax:

```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
```

```plantuml
@startuml
abstract        abstract
abstract class  "abstract class"
annotation      annotation
circle          circle
()              circle_short_form
class           class
@enduml
```

Testing

• Added a new blog post previewable_code.mdx with examples and documentation
• Tested both Mermaid and PlantUML diagram rendering
• Verified dark mode compatibility
• Checked responsive design on various screen sizes

Notes

• PlantUML diagrams are rendered using the public PlantUML server
• Mermaid diagrams are rendered client-side using mermaid.js

[vercel]

@xianminx is attempting to deploy a commit to the timlrx's projects Team on Vercel.

A member of the Team first needs to authorize it.

[xianminx]

@timlrx
Hi, I've drafted a solution for previewing and rendering both Mermaid and PlantUML diagrams. I'm open to discussing other possible approaches.

For client-side Mermaid rendering, I understand it can be heavy. However, if we render Mermaid diagrams at build time, the mermaid.js library requires a browser environment for layout. Running it in Node.js would necessitate heavier tools like Puppeteer or Playwright. In comparison, client-side rendering seems like the more efficient option.

For PlantUML rendering, due to its heavy dependency on Java, the simplest approach is to leverage the official online service for previewing diagrams.

Looking forward to your thoughts!

Link issue #394 and PR #971
cc @rtkelly13 @aloisdg @abernier