reroute-js 0.6.0 → 0.7.0

package/_/blog/src/client/routes/markdown-demo.md

@@ -0,0 +1,169 @@
+---
+title: Markdown Routes Demo
+description: This page is rendered directly from a markdown file in the routes directory
+date: 2025-01-15
+slug: markdown-demo
+excerpt: Learn how Reroute natively supports markdown files as routes with frontmatter
+---
+
+# Native Markdown Routes
+
+Welcome to a page that's **entirely written in markdown**! This file lives in `src/client/routes/markdown-demo.md` and is automatically converted to a route by Reroute.
+
+## How It Works
+
+1. Drop a `.md` or `.mdx` file in your routes directory
+2. Add frontmatter at the top for metadata
+3. Reroute automatically converts it to a React component
+4. The route is available at the filename path
+
+## Frontmatter Support
+
+The metadata at the top of this file (between `---` delimiters) becomes the page's meta tags:
+
+```yaml
+---
+title: Markdown Routes Demo
+description: This page is rendered directly from a markdown file
+date: 2025-01-15
+slug: markdown-demo
+---
+```
+
+This data is used for:
+- `<title>` tags
+- `<meta name="description">` tags
+- Open Graph and Twitter cards
+- Content collections
+
+## Syntax Highlighting
+
+Code blocks automatically get syntax highlighting with Shiki:
+
+### TypeScript
+
+```typescript
+interface BlogPost {
+  title: string;
+  slug: string;
+  date: string;
+  content: string;
+}
+
+async function getPost(slug: string): Promise<BlogPost> {
+  const response = await fetch(`/api/posts/${slug}`);
+  return response.json();
+}
+```
+
+### JavaScript
+
+```javascript
+const fibonacci = (n) => {
+  if (n <= 1) return n;
+  return fibonacci(n - 1) + fibonacci(n - 2);
+};
+
+console.log(fibonacci(10));
+```
+
+### Bash
+
+```bash
+# Install Reroute
+bunx reroute-js init my-blog --template blog
+
+# Navigate and start
+cd my-blog
+bun dev
+```
+
+## Rich Formatting
+
+You can use all standard markdown features:
+
+### Lists
+
+**Unordered:**
+- First item
+- Second item with **bold text**
+- Third item with *italic text*
+- Fourth item with `inline code`
+
+**Ordered:**
+1. Step one
+2. Step two
+3. Step three
+
+### Task Lists
+
+- [x] Create markdown processor
+- [x] Add frontmatter support
+- [x] Integrate with routing system
+- [ ] Add more examples
+
+### Blockquotes
+
+> "The best way to predict the future is to invent it."
+> — Alan Kay
+
+### Tables
+
+| Feature | Status | Package |
+|---------|--------|---------|
+| Markdown Routes | ✅ | Built-in |
+| Frontmatter | ✅ | Built-in |
+| Syntax Highlighting | ✅ | shiki |
+| GFM Support | ✅ | remark-gfm |
+
+### Text Styling
+
+You can use **bold**, *italic*, ***bold and italic***, ~~strikethrough~~, and `inline code`.
+
+### Links
+
+Check out the [Reroute repository](https://github.com/stewones/reroute) on GitHub!
+
+## Horizontal Rule
+
+---
+
+## Why Markdown Routes?
+
+Markdown routes are perfect for:
+
+- 📝 **Blog posts** - Write content without JSX boilerplate
+- 📚 **Documentation** - Focus on content, not components
+- 📄 **Static pages** - About, terms, privacy policy, etc.
+- ⚡ **Fast authoring** - Use any markdown editor
+
+## Under the Hood
+
+When you run `reroute gen`:
+
+1. The CLI scans for `.md` and `.mdx` files
+2. Parses frontmatter using a built-in parser
+3. Generates a React component wrapper
+4. Saves it to `.reroute/markdown/`
+5. Routes system imports it like any other route
+
+The generated component uses the `<Markdown>` component with optional Shiki highlighting and GFM support!
+
+## Next Steps
+
+Try creating your own markdown routes:
+
+```bash
+# Create a new markdown file
+touch src/client/routes/my-page.md
+
+# Add some frontmatter and content
+# Run the generator
+bun dev
+```
+
+Your page will be available at `/my-page`!
+
+---
+
+*This entire page was written in plain markdown* ✨

package/_/blog/src/client/routes/markdown.tsx

@@ -0,0 +1,160 @@
+import { Link, Markdown } from 'reroute-js/react';
+
+export default function MarkdownDemo() {
+	const exampleContent = `
+# Markdown Demo Page
+
+Welcome to the **Markdown demo**! This page demonstrates Reroute's native markdown support with syntax highlighting.
+
+## Quick Start
+
+Simply import the \`Markdown\` component and pass your content:
+
+\`\`\`tsx
+import { Markdown } from 'reroute-js/react';
+
+<Markdown>
+  # Your content here
+</Markdown>
+\`\`\`
+
+## Code Examples
+
+### JavaScript
+
+\`\`\`javascript
+const greet = (name) => {
+  console.log(\`Hello, \${name}!\`);
+};
+
+greet('Reroute');
+\`\`\`
+
+### TypeScript
+
+\`\`\`typescript
+interface Route {
+  path: string;
+  component: React.ComponentType;
+}
+
+const routes: Route[] = [
+  { path: '/', component: HomePage },
+  { path: '/blog', component: BlogPage },
+];
+\`\`\`
+
+### JSON
+
+\`\`\`json
+{
+  "name": "reroute-app",
+  "version": "1.0.0",
+  "dependencies": {
+    "react-markdown": "^10.1.0",
+    "shiki": "^3.14.0"
+  }
+}
+\`\`\`
+
+## Lists and Formatting
+
+### Unordered List
+- Item one
+- Item two with **bold text**
+- Item three with *italic text*
+- Item four with \`inline code\`
+
+### Ordered List
+1. First step
+2. Second step
+3. Third step
+
+### Task List
+- [x] Add markdown support
+- [x] Integrate Shiki
+- [x] Create examples
+- [ ] Add more themes
+
+## Blockquotes
+
+> "Markdown makes writing for the web easy and enjoyable."
+> — Someone who loves markdown
+
+## Tables
+
+| Package | Purpose | Required |
+|---------|---------|----------|
+| react-markdown | Markdown renderer | ✅ Yes |
+| remark-gfm | GitHub features | 🔶 Optional |
+| shiki | Syntax highlighting | 🔶 Optional |
+
+## Links and Emphasis
+
+Check out the [Reroute documentation](https://github.com/stewones/reroute) for more info!
+
+You can use **bold**, *italic*, ***bold and italic***, ~~strikethrough~~, and \`inline code\`.
+
+## Horizontal Rule
+
+---
+
+That's all for this demo! 🚀
+`;
+
+	return (
+		<main style={{ padding: '2rem', maxWidth: '900px', margin: '0 auto' }}>
+			<nav style={{ marginBottom: '2rem' }}>
+				<Link
+					to='/'
+					style={{
+						padding: '0.5rem 1rem',
+						background: '#0066cc',
+						color: '#fff',
+						textDecoration: 'none',
+						borderRadius: '4px',
+						display: 'inline-block',
+					}}
+				>
+					← Back to Home
+				</Link>
+			</nav>
+
+			<div
+				style={{
+					background: '#1e1e1e',
+					padding: '2rem',
+					borderRadius: '8px',
+					color: '#d4d4d4',
+				}}
+			>
+				<Markdown theme='github-dark' gfm={true} highlight={true}>
+					{exampleContent}
+				</Markdown>
+			</div>
+
+			<section
+				style={{
+					marginTop: '2rem',
+					padding: '1rem',
+					background: '#f0f9ff',
+					borderRadius: '8px',
+					border: '1px solid #bfdbfe',
+				}}
+			>
+				<h3 style={{ marginTop: 0, color: '#1e40af' }}>💡 Pro Tips</h3>
+				<ul style={{ color: '#1e3a8a' }}>
+					<li>
+						The Markdown component only bundles dependencies you actually use
+					</li>
+					<li>Shiki provides VS Code-quality syntax highlighting</li>
+					<li>
+						GitHub Flavored Markdown adds tables, task lists, and more (with
+						remark-gfm)
+					</li>
+					<li>Customize themes and components for your design system</li>
+				</ul>
+			</section>
+		</main>
+	);
+}

package/_/blog/src/index.ts

@@ -12,9 +12,12 @@ const app = new Elysia()
 			minify: IS_PRODUCTION,
 		}),
 	)
-	.get('/message', () => ({ message: 'Hello from server' }))
+	.get('/message', () => {
+		console.log('[api] log from my api');
+		return { message: 'Hello from server' };
+	})
 	.listen(Number(Bun.env.PORT || '3000'));
 
 console.log(
-	`🦊 Elysia Reroute is running at ${app.server?.hostname}:${app.server?.port} on ${Bun.env.NODE_ENV || 'development'}`,
+	`[reroute] Blog running at ${app.server?.hostname}:${app.server?.port} on ${Bun.env.NODE_ENV || 'development'}`,
 );

package/_/store/package.json

@@ -4,10 +4,10 @@
 	"description": "A Reroute store application with Tailwind CSS v4",
 	"private": true,
 	"scripts": {
-		"postinstall": "reroute 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"
 	},
 	"dependencies": {
 		"reroute-js": "latest",

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

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

package/_/store/src/index.ts

@@ -16,5 +16,5 @@ const app = new Elysia()
 	.listen(Number(Bun.env.PORT || '3001'));
 
 console.log(
-	`🛒 Reroute Store is running at ${app.server?.hostname}:${app.server?.port} on ${Bun.env.NODE_ENV || 'development'}`,
+	`[reroute] Store running at ${app.server?.hostname}:${app.server?.port} on ${Bun.env.NODE_ENV || 'development'}`,
 );

package/cli/bin.d.ts

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