reroute-js 0.5.0 → 0.7.0

package/_/blog/src/client/routes/blog/content/5-mdx-with-components.mdx

@@ -0,0 +1,267 @@
+---
+title: MDX with React Components
+description: Learn how to use React components directly in your markdown content with MDX
+date: 2025-11-06
+excerpt: MDX lets you import and use React components inside markdown - true component composition!
+---
+
+# MDX with React Component
+
+This page is written in **MDX** - which means we can use React components directly in our markdown! 🎉
+
+## What is MDX?
+
+MDX is markdown with JSX. It lets you:
+- Import React components
+- Use them inline with your content
+- Create interactive documentation
+- Build component-driven content
+
+## Custom Components Example
+
+Here's a custom React component embedded in this markdown:
+
+export function Highlight({ children, color = '#667eea' }) {
+  return (
+    <span style={{
+      background: `linear-gradient(135deg, ${color} 0%, ${color}dd 100%)`,
+      color: 'white',
+      padding: '0.25rem 0.75rem',
+      borderRadius: '6px',
+      fontWeight: '600',
+      display: 'inline-block'
+    }}>
+      {children}
+    </span>
+  );
+}
+
+You can use custom components inline: <Highlight>This is highlighted!</Highlight> or with different colors: <Highlight color="#22c55e">Green highlight</Highlight>
+
+Pretty cool, right? These components are defined right in this MDX file and work with SSR!
+
+## Using Standard HTML
+
+You can use standard HTML elements in your MDX. Links work as regular anchor tags:
+
+<div style={{
+  padding: '1rem',
+  background: '#f0f9ff',
+  borderRadius: '8px',
+  border: '2px solid #bfdbfe'
+}}>
+  {/* Use a div instead of p to avoid nested paragraphs */}
+  <div style={{ margin: '0 0 0.5rem 0', fontWeight: '600', color: '#1e40af' }}>
+    Quick Navigation:
+  </div>
+  <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
+    <a
+      href="/"
+      style={{
+        padding: '0.5rem 1rem',
+        background: '#3b82f6',
+        color: 'white',
+        borderRadius: '6px',
+        textDecoration: 'none',
+        fontSize: '0.9rem'
+      }}
+    >
+      <span>Home</span>
+    </a>
+    <a
+      href="/blog"
+      style={{
+        padding: '0.5rem 1rem',
+        background: '#3b82f6',
+        color: 'white',
+        borderRadius: '6px',
+        textDecoration: 'none',
+        fontSize: '0.9rem'
+      }}
+    >
+      <span>Blog</span>
+    </a>
+    <a
+      href="/markdown-demo"
+      style={{
+        padding: '0.5rem 1rem',
+        background: '#3b82f6',
+        color: 'white',
+        borderRadius: '6px',
+        textDecoration: 'none',
+        fontSize: '0.9rem'
+      }}
+    >
+      <span>Markdown Demo</span>
+    </a>
+  </div>
+</div>
+
+## Alert Component
+
+Let's create a reusable alert component inline:
+
+export function Alert({ type = 'info', children }) {
+  const colors = {
+    info: { bg: '#dbeafe', border: '#3b82f6', text: '#1e40af' },
+    success: { bg: '#dcfce7', border: '#22c55e', text: '#166534' },
+    warning: { bg: '#fef3c7', border: '#f59e0b', text: '#92400e' },
+    error: { bg: '#fee2e2', border: '#ef4444', text: '#991b1b' }
+  };
+  const style = colors[type] || colors.info;
+  return (
+    <div style={{
+      padding: '1rem 1.25rem',
+      background: style.bg,
+      border: `2px solid ${style.border}`,
+      borderRadius: '8px',
+      color: style.text,
+      margin: '1rem 0'
+    }}>
+      {children}
+    </div>
+  );
+}
+
+Now we can use it throughout our content:
+
+<Alert type="info">
+  💡 **Tip:** MDX files require the `@mdx-js/mdx` package. Install it with: `bun add @mdx-js/mdx`
+</Alert>
+
+<Alert type="success">
+  ✅ **Success:** You're now using real React components in markdown!
+</Alert>
+
+<Alert type="warning">
+  ⚠️ **Warning:** MDX files are compiled at build time, so changes require running `reroute gen`.
+</Alert>
+
+<Alert type="error">
+  🚫 **Error Example:** This is what error messages might look like.
+</Alert>
+
+## Code Examples Still Work
+
+You can still use regular markdown features like code blocks:
+
+```typescript
+// MDX compiles to JSX at build time
+import { MyComponent } from './components/MyComponent';
+
+export default function BlogPost() {
+  return (
+    <div>
+      <h1>Hello from TSX!</h1>
+      <MyComponent />
+    </div>
+  );
+}
+```
+
+And even mix JSX with markdown syntax!
+
+## Data Visualization
+
+Let's create a simple bar chart component:
+
+export function BarChart({ data }) {
+  const max = Math.max(...data.map(d => d.value));
+  return (
+    <div style={{ margin: '2rem 0' }}>
+      {data.map((item, i) => (
+        <div key={i} style={{ marginBottom: '0.75rem' }}>
+          <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '1rem'
+          }}>
+            <span style={{
+              minWidth: '100px',
+              fontWeight: '600',
+              fontSize: '0.9rem'
+            }}>
+              {item.label}
+            </span>
+            <div style={{
+              flex: 1,
+              background: '#e5e7eb',
+              borderRadius: '4px',
+              overflow: 'hidden'
+            }}>
+              <div style={{
+                width: `${(item.value / max) * 100}%`,
+                background: 'linear-gradient(90deg, #3b82f6, #8b5cf6)',
+                padding: '0.5rem',
+                color: 'white',
+                fontSize: '0.85rem',
+                fontWeight: '600',
+                textAlign: 'right',
+                minWidth: '40px'
+              }}>
+                {item.value}
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+<BarChart data={[
+  { label: 'React', value: 95 },
+  { label: 'TypeScript', value: 88 },
+  { label: 'Bun', value: 92 },
+  { label: 'Elysia', value: 85 },
+  { label: 'MDX', value: 90 }
+]} />
+
+## When to Use MDX
+
+**Use MDX when you need:**
+- ✅ Custom styled components in documentation
+- ✅ Data visualizations in blog posts (use static data)
+- ✅ Custom UI elements mixed with content
+- ✅ Reusable component patterns
+- ✅ Rich formatted content
+
+**Use regular Markdown when:**
+- 📝 Simple content without interactivity
+- 📝 Faster build times (no JSX compilation)
+- 📝 Content-only pages
+- 📝 Working with non-technical writers
+
+## Installation & Setup
+
+To use MDX in your Reroute project:
+
+```bash
+# Required for MDX support
+bun add @mdx-js/mdx
+
+# Already required for markdown
+bun add react-markdown
+
+# Optional: Enhanced markdown features
+bun add remark-gfm
+
+# Optional: Syntax highlighting
+bun add -d @shikijs/rehype
+```
+
+Then just create `.mdx` files in your routes or content directories!
+
+## Conclusion
+
+MDX gives you the best of both worlds: the simplicity of markdown with the power of React components. Perfect for creating rich, beautifully formatted documentation and content-driven applications.
+
+**Note:** Content in MDX files is rendered in isolation during SSR. For interactive components with hooks or components that need React context (like `<Link>`), use plain HTML or import from client-side files wrapped with `<ClientOnly>`.
+
+<Alert type="success">
+  🎉 **That's it!** You now know how to use MDX with Reroute. Go build something amazing!
+</Alert>
+
+---
+
+*This entire page was written in MDX and includes live React components!* ✨

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

@@ -62,6 +62,65 @@ function BlogIndex() {
 					</article>
 				))}
 			</div>
+
+			{/* Fragment Navigation Demo */}
+			<div
+				style={{
+					marginTop: '3rem',
+					padding: '1.5rem',
+					background: '#f0f8ff',
+					border: '2px solid #0066cc',
+					borderRadius: '8px',
+				}}
+			>
+				<h3 style={{ marginTop: 0 }}>🎯 New Feature: Fragment Navigation</h3>
+				<p style={{ marginBottom: '1rem' }}>
+					Check out our documentation to learn about the new{' '}
+					<code>fragment</code> prop for automatic scrolling to specific
+					sections!
+				</p>
+				<div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+					<Link
+						to='/docs'
+						fragment='installation'
+						style={{
+							padding: '0.5rem 1rem',
+							background: '#0066cc',
+							color: '#fff',
+							textDecoration: 'none',
+							borderRadius: '4px',
+						}}
+					>
+						Jump to Installation →
+					</Link>
+					<Link
+						to='/docs'
+						fragment='examples'
+						style={{
+							padding: '0.5rem 1rem',
+							background: '#28a745',
+							color: '#fff',
+							textDecoration: 'none',
+							borderRadius: '4px',
+						}}
+					>
+						View Examples →
+					</Link>
+					<Link
+						to='/docs'
+						fragment='api-reference'
+						style={{
+							padding: '0.5rem 1rem',
+							background: '#6c757d',
+							color: '#fff',
+							textDecoration: 'none',
+							borderRadius: '4px',
+						}}
+					>
+						API Reference →
+					</Link>
+				</div>
+			</div>
 		</div>
 	);
 }