Poetora MDX

This package provides MDX components, plugins, and utilities for processing Markdown with embedded React components. It includes both client-side and server-side functionality with full TypeScript support.

Installation

pnpm add @poetora/mdx

Usage

Client-Side Rendering

import { MDXClient } from "@poetora/mdx/client";

function MyComponent() {
  return (
    <MDXClient
      compiledSource={compiledMDX}
      components={customComponents}
      scope={{ customData: "value" }}
    />
  );
}

Server-Side Processing

import { serialize, MDXRemote } from "@poetora/mdx/server";

// Serialize MDX content
const serialized = await serialize({
  source: mdxSource,
  scope: { data: "value" },
});

// Render with RSC
function ServerPage() {
  return (
    <MDXRemote
      source={mdxSource}
      components={components}
      scope={{ data: "value" }}
    />
  );
}

Custom Plugins

import { rehypeSyntaxHighlighting, remarkMath } from "@poetora/mdx/plugins";

const plugins = {
  remarkPlugins: [remarkMath],
  rehypePlugins: [[rehypeSyntaxHighlighting, { theme: "github-dark" }]],
};

Development

# Build the package
pnpm build

# Watch mode for development
pnpm dev

# Type checking
pnpm type-check

# Clean build artifacts
pnpm clean