reroute-js 0.5.0 → 0.7.0

package/README.md

@@ -14,6 +14,7 @@ Reroute is a dead-simple file-based routing framework for building full-stack Re
 ### 🛠️ CLI Tools
 - 🚀 **`reroute init`** - Scaffold new projects with templates (basic, blog, store)
 - 🔨 **`reroute gen`** - Generate content registry and route artifacts
+- ⚡ **`reroute dev`** - Start development environment with side-by-side logs and colored output
 
 ### 📄 Content Management
 - 📚 **Content Collections** - Organize content by collections (blog posts, docs, etc.)
@@ -23,6 +24,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 +170,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/_/basic/package.json

@@ -3,10 +3,10 @@
 	"description": "A Reroute application",
 	"version": "0.0.0",
 	"scripts": {
-		"postinstall": "reroute-js boot",
-		"start": "reroute gen && bun src/index.ts",
-		"dev": "reroute gen --watch & bun --watch src/index.ts",
-		"build": "reroute gen && bun build src/index.ts --target bun --compile --outfile ./dist/app"
+		"types": "tsc --noEmit",
+		"start": "reroute start",
+		"dev": "reroute dev",
+		"build": "reroute build"
 	},
 	"private": true,
 	"dependencies": {

package/_/basic/src/client/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<title>{{PROJECT_NAME}}</title>
+		<title>Reroute Basic Example</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 	</head>
 	<body>

package/_/basic/src/index.ts

@@ -15,6 +15,4 @@ const app = new Elysia()
 	.get('/api/message', () => ({ message: 'Hello from server' }))
 	.listen(Number(Bun.env.PORT || '3000'));
 
-console.log(
-	`🦊 Reroute is running at ${app.server?.hostname}:${app.server?.port}`,
-);
+console.log(`[reroute] Running at ${app.server?.hostname}:${app.server?.port}`);

package/_/blog/package.json

@@ -3,10 +3,10 @@
 	"description": "A Reroute application",
 	"version": "0.0.0",
 	"scripts": {
-		"postinstall": "reroute-js boot",
-		"start": "reroute gen && bun src/index.ts",
-		"dev": "reroute gen --watch & bun --watch src/index.ts",
-		"build": "reroute gen && bun build src/index.ts --target bun --compile --outfile ./dist/app"
+		"types": "tsc --noEmit",
+		"start": "reroute start",
+		"dev": "reroute dev",
+		"build": "reroute build"
 	},
 	"private": true,
 	"dependencies": {

package/_/blog/src/client/App.tsx

@@ -6,5 +6,6 @@ interface AppProps {
 }
 
 export default function App({ pathname }: AppProps = {}) {
+	console.log('[app] app mounted');
 	return <RerouteProvider from={{ pathname, ...artifacts }} />;
 }

package/_/blog/src/client/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
-        <title>{{PROJECT_NAME}}</title>
+        <title>Reroute App</title>
 
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     </head>

package/_/blog/src/client/routes/blog/content/1-hello-world.tsx

@@ -18,7 +18,7 @@ function BlogPost() {
 	return (
 		<div>
 			<h1>Hello World</h1>
-			<p>Welcome to my blog!!</p>
+			<p>Welcome to my blog!!!</p>
 		</div>
 	);
 }

package/_/blog/src/client/routes/blog/content/3-markdown-with-syntax-highlighting.mdx

@@ -0,0 +1,213 @@
+---
+title: Markdown with Syntax Highlighting
+description: Learn how to use markdown with beautiful syntax highlighting powered by Shiki
+excerpt: A complete guide to using markdown in Reroute with Shiki syntax highlighting
+date: 2025-11-04
+---
+
+# Markdown with Syntax Highlighting
+
+Reroute now supports **native markdown rendering** with beautiful syntax highlighting powered by [Shiki](https://shiki.style/)!
+
+## Features
+
+- ✅ **GitHub Flavored Markdown** - Tables, task lists, strikethrough, and more
+- ✅ **Syntax Highlighting** - Powered by Shiki with VS Code themes
+- ✅ **Zero Config** - Works out of the box when packages are installed
+- ✅ **Optional** - Only included when you need it
+
+## Installation
+
+To use markdown in your Reroute project:
+
+```bash
+# Required: Markdown renderer
+bun add react-markdown
+
+# Optional: GitHub Flavored Markdown support
+bun add remark-gfm
+
+# Optional: Syntax highlighting
+bun add -d @shikijs/rehype
+```
+
+## Basic Usage
+
+Import the Markdown component and pass your content as children:
+
+```tsx
+import { Markdown } from 'reroute-js/react';
+
+export default function MyPost() {
+  return (
+    <Markdown>
+      {/* Your markdown content here */}
+      # Hello World
+      This is **bold** and this is *italic*.
+    </Markdown>
+  );
+}
+```
+
+## Code Highlighting
+
+Shiki provides beautiful syntax highlighting for many languages:
+
+### TypeScript Example
+
+```typescript
+interface User {
+  id: number;
+  name: string;
+  email: string;
+}
+
+async function fetchUser(id: number): Promise<User> {
+  const response = await fetch(`/api/users/${id}`);
+  return response.json();
+}
+```
+
+### React Component
+
+```tsx
+import { useState } from 'react';
+import { Link } from 'reroute-js/react';
+
+export default function Counter() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <h2>Count: {count}</h2>
+      <button onClick={() => setCount(count + 1)}>
+        Increment
+      </button>
+      <Link to="/">Home</Link>
+    </div>
+  );
+}
+```
+
+### Python Example
+
+```python
+def fibonacci(n: int) -> list[int]:
+    """Generate fibonacci sequence up to n terms."""
+    if n <= 0:
+        return []
+    elif n == 1:
+        return [0]
+
+    sequence = [0, 1]
+    for i in range(2, n):
+        sequence.append(sequence[i-1] + sequence[i-2])
+
+    return sequence
+
+# Generate first 10 fibonacci numbers
+print(fibonacci(10))
+```
+
+## GitHub Flavored Markdown
+
+With `remark-gfm`, you get additional features:
+
+### Tables
+
+| Feature | Status | Notes |
+|---------|--------|-------|
+| Markdown | ✅ | react-markdown |
+| Syntax Highlighting | ✅ | Shiki |
+| GFM Support | ✅ | remark-gfm |
+| Auto Detection | ✅ | CLI integration |
+
+### Task Lists
+
+- [x] Install react-markdown
+- [x] Add optional Shiki support
+- [x] Create example blog post
+- [ ] Write more documentation
+
+### Strikethrough
+
+~~This is outdated information~~ Use the new Markdown component instead!
+
+### Autolinks
+
+Check out the docs at https://github.com/stewones/reroute
+
+## Advanced Configuration
+
+You can customize the Markdown component with various options:
+
+```tsx
+<Markdown
+  theme="github-light"
+  gfm={true}
+  highlight={true}
+  className="prose prose-slate"
+>
+  {markdownContent}
+</Markdown>
+```
+
+## Custom Components
+
+Override default HTML elements with your own components:
+
+```tsx
+<Markdown
+  components={{
+    h1: ({ children }) => (
+      <h1 className="text-4xl font-bold mb-4">
+        {children}
+      </h1>
+    ),
+    a: ({ href, children }) => (
+      <Link to={href} className="text-blue-500 hover:underline">
+        {children}
+      </Link>
+    ),
+  }}
+>
+  {content}
+</Markdown>
+```
+
+## Performance
+
+The Markdown component uses dynamic imports to avoid bundling dependencies you don't need:
+
+- **react-markdown**: Only loaded if you use the component
+- **remark-gfm**: Only loaded if GFM features are enabled
+- **shiki**: Only loaded if syntax highlighting is enabled
+
+This keeps your bundle size minimal! 📦
+
+## Integration with Content Collections
+
+Markdown works seamlessly with Reroute's content system:
+
+```tsx
+import { useContent } from 'reroute-js/react';
+import { Markdown } from 'reroute-js/react';
+
+export default function BlogPost() {
+  const posts = useContent('blog');
+  const post = posts[0];
+
+  return (
+    <article>
+      <h1>{post.meta.title}</h1>
+      <Markdown>{post.content}</Markdown>
+    </article>
+  );
+}
+```
+
+## Conclusion
+
+With markdown support, Reroute makes it easy to create content-rich applications with beautiful code examples. The optional nature of the dependencies means you only pay for what you use!
+
+Happy writing! 🎉

package/_/blog/src/client/routes/blog/content/4-content-in-markdown.md

@@ -0,0 +1,143 @@
+---
+title: Content in Markdown
+description: Learn how to use markdown files in Reroute content collections for easy blog authoring
+date: 2025-11-05
+excerpt: Markdown files work seamlessly in content collections - no JSX needed!
+---
+
+# Writing Blog Posts in Markdown
+
+This blog post is written entirely in **markdown** and lives in the `content/` directory as a `.md` file. No JSX, no React components - just pure markdown!
+
+## Content Collections + Markdown
+
+Reroute's content system now supports markdown files natively. Simply drop a `.md` or `.mdx` file in your content collection directory:
+
+```bash
+src/client/routes/blog/content/
+├── 1-hello-world.tsx          # Traditional TSX
+├── 2-what-is-reroute.tsx      # Traditional TSX
+├── 3-markdown-with-syntax.tsx # TSX with Markdown component
+└── 4-content-in-markdown.md   # 🎉 Pure markdown!
+```
+
+## The Best of Both Worlds
+
+You get all the benefits of content collections:
+
+✅ **Automatic indexing** - Appears in `useContent('blog')`
+✅ **Frontmatter metadata** - Title, description, date, etc.
+✅ **Type-safe routing** - Works with `<ContentRoute>`
+✅ **Code splitting** - Individual chunk per post
+✅ **Syntax highlighting** - Beautiful code blocks with Shiki
+
+But with the simplicity of markdown authoring!
+
+## Writing Content
+
+### Headings and Text
+
+Use standard markdown syntax. Text can be **bold**, *italic*, or ***both***. You can also use ~~strikethrough~~ and `inline code`.
+
+### Code Blocks
+
+Syntax highlighting works automatically:
+
+```typescript
+import { useContent } from 'reroute-js/react';
+
+export default function BlogIndex() {
+  const posts = useContent('blog');
+
+  return (
+    <div>
+      {posts.map(post => (
+        <article key={post.slug}>
+          <h2>{post.meta.title}</h2>
+          <p>{post.meta.excerpt}</p>
+        </article>
+      ))}
+    </div>
+  );
+}
+```
+
+```javascript
+// Works with any language
+const greet = (name) => {
+  console.log(`Hello, ${name}!`);
+};
+
+greet('Markdown');
+```
+
+### Lists
+
+**Task lists:**
+- [x] Add markdown support to routes
+- [x] Add markdown support to content collections
+- [x] Write example blog post
+- [ ] Write more posts!
+
+**Regular lists:**
+1. Write your post in markdown
+2. Save it to the content directory
+3. Run `reroute gen`
+4. Your post is live!
+
+### Tables
+
+| Feature | Markdown | TSX |
+|---------|----------|-----|
+| Syntax | Simple | Verbose |
+| Learning Curve | Easy | React knowledge needed |
+| Flexibility | Good | Excellent |
+| Speed | Fast | Fast |
+
+### Blockquotes
+
+> "Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format."
+> — John Gruber, creator of Markdown
+
+## How It Works
+
+When you run `reroute gen`:
+
+1. The CLI scans for markdown files in content directories
+2. Parses frontmatter for metadata
+3. Converts to a React component wrapper
+4. Builds it like any other content file
+5. Available via `useContent()` or `<ContentRoute>`
+
+## When to Use Markdown
+
+**Use markdown files when:**
+- ✅ Writing blog posts or articles
+- ✅ Creating documentation
+- ✅ Content-focused pages
+- ✅ Quick authoring without React complexity
+
+**Use TSX files when:**
+- 🎯 Need custom components or interactivity
+- 🎯 Complex layouts or data fetching
+- 🎯 Dynamic content with state management
+- 🎯 Integration with external APIs
+
+## Mixing and Matching
+
+The beauty of Reroute is that you can mix both approaches:
+
+```
+blog/content/
+├── simple-post.md        # Pure markdown
+├── interactive-demo.tsx  # Full React component
+└── hybrid-post.mdx       # Markdown with JSX (coming soon!)
+```
+
+Use the right tool for each piece of content!
+
+## Conclusion
+
+Markdown support in content collections makes Reroute even more powerful for content-driven sites. Write your content in the format that makes sense for each piece.
+
+Happy blogging! 🚀