reroute-js 0.4.4 → 0.6.0

package/README.md

@@ -23,6 +23,17 @@ Reroute is a dead-simple file-based routing framework for building full-stack Re
 - 🎯 **Dynamic Imports** - Code-split content chunks for optimal loading
 - 📦 **Collection Chunking** - Individual module bundles per content item
 
+### 📝 Markdown & MDX Support
+- 📄 **Native Markdown Routes** - Drop `.md` or `.mdx` files directly in your routes directory
+- 🎨 **Syntax Highlighting** - Beautiful code blocks powered by Shiki with VS Code themes
+- 📋 **Frontmatter Support** - YAML frontmatter for page metadata (title, description, date, etc.)
+- ⚛️ **True MDX Support** - Import and use React components inside markdown with `@mdx-js/mdx`
+- 🧩 **Component Composition** - Mix JSX components with markdown content seamlessly
+- 🔧 **Zero Config** - Automatic detection and processing when react-markdown is installed
+- 🎯 **GitHub Flavored Markdown** - Tables, task lists, strikethrough with remark-gfm
+- ⚡ **Optional Dependencies** - Only bundle what you use (markdown, GFM, Shiki, MDX)
+- 🧩 **Markdown Component** - Programmatic markdown rendering with `<Markdown>` component
+
 ### ⚛️ React Integration
 - ⚡ **React 19** - Built with the latest React version for optimal performance
 - 🪝 **Router Hooks**:
@@ -158,6 +169,136 @@ Notes:
 - Data is injected as `window.__REROUTE_DATA__` and read during hydration
 - Use with existing content features (useContent); both can be seeded in the same page
 
+## 📝 Markdown Routes
+
+Reroute supports native markdown and MDX files as routes with frontmatter support and syntax highlighting.
+
+### Installation
+
+```bash
+# Required for markdown support
+bun add react-markdown
+
+# Optional: GitHub Flavored Markdown (tables, task lists, etc.)
+bun add remark-gfm
+
+# Optional: Syntax highlighting with Shiki
+bun add -d @shikijs/rehype
+
+# Optional: MDX support (use React components in markdown)
+bun add @mdx-js/mdx
+```
+
+### Creating Markdown Routes
+
+Simply create `.md` files in your routes directory:
+
+```markdown
+<!-- src/client/routes/about.md -->
+---
+title: About Us
+description: Learn more about our company
+date: 2025-01-15
+---
+
+# About Us
+
+Welcome to our **amazing** company! We build great things.
+
+## Our Mission
+
+We strive to create the best developer experience possible.
+
+```typescript
+// Example code block with syntax highlighting
+const greeting = "Hello, World!";
+console.log(greeting);
+```
+
+Check out our [documentation](/docs) for more info!
+```
+
+The route will be automatically available at `/about` with:
+- Automatic `<title>` and `<meta>` tag generation from frontmatter
+- Syntax highlighting for code blocks (if Shiki is installed)
+- GitHub Flavored Markdown support (if remark-gfm is installed)
+
+### Creating MDX Routes with Components
+
+For interactive content with React components, use `.mdx` files:
+
+```mdx
+<!-- src/client/routes/interactive.mdx -->
+---
+title: Interactive Demo
+description: MDX with React components
+date: 2025-01-17
+---
+
+import { Link } from 'reroute-js/react';
+import { useState } from 'react';
+
+# Interactive Content
+
+This page uses React components!
+
+export function Counter() {
+  const [count, setCount] = useState(0);
+  return (
+    <div>
+      <p>Count: {count}</p>
+      <button onClick={() => setCount(count + 1)}>
+        Increment
+      </button>
+    </div>
+  );
+}
+
+<Counter />
+
+You can also use imported components:
+
+<Link to="/">Go Home</Link>
+```
+
+**MDX Support requires:**
+- `@mdx-js/mdx` package installed
+- `.mdx` file extension
+- React components imported at the top
+
+### Programmatic Markdown Rendering
+
+Use the `<Markdown>` component to render markdown content dynamically:
+
+```tsx
+import { Markdown } from 'reroute-js/react';
+
+export default function MyPage() {
+  const content = `# Hello\nThis is **markdown** content.`;
+
+  return (
+    <Markdown
+      theme="github-dark"
+      gfm={true}
+      highlight={true}
+    >
+      {content}
+    </Markdown>
+  );
+}
+```
+
+### Features
+
+- **Frontmatter**: YAML metadata for SEO and content organization
+- **Syntax Highlighting**: Powered by Shiki via @shikijs/rehype with VS Code themes
+- **GFM Support**: Tables, task lists, strikethrough, autolinks
+- **MDX Support**: Import and use React components in `.mdx` files
+- **Component Composition**: Mix markdown with JSX seamlessly
+- **Type Safety**: Full TypeScript support
+- **Zero Config**: Automatic detection when packages are installed
+- **Optional**: Only bundle dependencies you actually use
+
 
 ## 📖 Learn More
 

package/cli/bin.d.ts

@@ -1,5 +1,5 @@
 /**
- * reroute-js v0.4.4
+ * reroute-js v0.6.0
  *
  * @license MIT
  * @copyright 2025 stewones <hi@stewan.io>