reroute-js 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/_/README.md +59 -0
- package/_/basic/package.json +23 -0
- package/_/basic/src/client/App.tsx +10 -0
- package/_/basic/src/client/components/Counter.tsx +15 -0
- package/_/basic/src/client/index.html +12 -0
- package/_/basic/src/client/index.tsx +5 -0
- package/_/basic/src/client/routes/[404].tsx +18 -0
- package/_/basic/src/client/routes/about.tsx +25 -0
- package/_/basic/src/client/routes/index.tsx +57 -0
- package/_/basic/src/index.ts +20 -0
- package/_/basic/tsconfig.json +26 -0
- package/_/blog/package.json +23 -0
- package/_/blog/src/client/App.tsx +10 -0
- package/_/blog/src/client/components/.gitkeep +0 -0
- package/_/blog/src/client/index.html +12 -0
- package/_/blog/src/client/index.tsx +5 -0
- package/_/blog/src/client/routes/[404].tsx +18 -0
- package/_/blog/src/client/routes/about.tsx +25 -0
- package/_/blog/src/client/routes/blog/[404].tsx +11 -0
- package/_/blog/src/client/routes/blog/[layout].tsx +84 -0
- package/_/blog/src/client/routes/blog/[slug].tsx +11 -0
- package/_/blog/src/client/routes/blog/content/getting-started.tsx +30 -0
- package/_/blog/src/client/routes/blog/content/hello-world.tsx +29 -0
- package/_/blog/src/client/routes/blog/index.tsx +69 -0
- package/_/blog/src/client/routes/index.tsx +75 -0
- package/_/blog/src/index.ts +20 -0
- package/_/blog/tsconfig.json +26 -0
- package/package.json +2 -1
package/_/README.md
ADDED
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
# Reroute CLI Templates
|
|
2
|
+
|
|
3
|
+
This directory contains the scaffolding templates used by the `reroute init` command.
|
|
4
|
+
|
|
5
|
+
## Structure
|
|
6
|
+
|
|
7
|
+
Each subdirectory represents a template that users can choose from:
|
|
8
|
+
|
|
9
|
+
- `basic/` - Minimal Reroute application with basic routing
|
|
10
|
+
- `blog/` - Full-featured blog with content collections and layouts
|
|
11
|
+
|
|
12
|
+
## How It Works
|
|
13
|
+
|
|
14
|
+
When a user runs `reroute init my-app --template blog`, the CLI:
|
|
15
|
+
|
|
16
|
+
1. Copies all files from the `blog/` directory to the new project directory
|
|
17
|
+
2. Replaces template variables (e.g., `{{PROJECT_NAME}}`) with actual values
|
|
18
|
+
3. Runs `bun install` to install dependencies
|
|
19
|
+
|
|
20
|
+
## Template Variables
|
|
21
|
+
|
|
22
|
+
Templates can use the following variables that will be replaced during scaffolding:
|
|
23
|
+
|
|
24
|
+
- `{{PROJECT_NAME}}` - The name of the project being created
|
|
25
|
+
|
|
26
|
+
## Adding a New Template
|
|
27
|
+
|
|
28
|
+
To add a new template:
|
|
29
|
+
|
|
30
|
+
1. Create a new directory (e.g., `docs/`)
|
|
31
|
+
2. Add all necessary files with the complete project structure
|
|
32
|
+
3. Use `{{PROJECT_NAME}}` where dynamic replacement is needed
|
|
33
|
+
4. Update `init.ts` to include the new template in the template type union
|
|
34
|
+
5. Update the CLI README to document the new template
|
|
35
|
+
|
|
36
|
+
## File Organization
|
|
37
|
+
|
|
38
|
+
Templates should follow the standard Reroute project structure:
|
|
39
|
+
|
|
40
|
+
```
|
|
41
|
+
template-name/
|
|
42
|
+
├── package.json # Use {{PROJECT_NAME}} for the name field
|
|
43
|
+
├── .gitignore
|
|
44
|
+
└── src/
|
|
45
|
+
├── index.ts # Server entry point
|
|
46
|
+
└── client/
|
|
47
|
+
├── App.tsx
|
|
48
|
+
├── index.tsx
|
|
49
|
+
├── index.html # Use {{PROJECT_NAME}} in the title
|
|
50
|
+
├── routes/
|
|
51
|
+
└── components/
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## Notes
|
|
55
|
+
|
|
56
|
+
- TypeScript errors in template files are expected (e.g., missing imports) since they're isolated
|
|
57
|
+
- These errors will resolve once the template is copied to an actual project
|
|
58
|
+
- Keep templates minimal but functional - users can customize from there
|
|
59
|
+
- Ensure templates follow the project's code style (Biome)
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "{{PROJECT_NAME}}",
|
|
3
|
+
"description": "A Reroute application",
|
|
4
|
+
"version": "0.0.0",
|
|
5
|
+
"scripts": {
|
|
6
|
+
"start": "reroute gen && bun src/index.ts",
|
|
7
|
+
"dev": "reroute gen && bun --watch src/index.ts",
|
|
8
|
+
"build": "reroute gen && bun build src/index.ts --target bun --compile --outfile ./dist/app"
|
|
9
|
+
},
|
|
10
|
+
"private": true,
|
|
11
|
+
"dependencies": {
|
|
12
|
+
"reroute-js": "latest",
|
|
13
|
+
"elysia": "^1.4.13",
|
|
14
|
+
"react": "^19.2.0",
|
|
15
|
+
"react-dom": "^19.2.0"
|
|
16
|
+
},
|
|
17
|
+
"devDependencies": {
|
|
18
|
+
"@types/bun": "latest",
|
|
19
|
+
"@types/react": "^19.2.2",
|
|
20
|
+
"@types/react-dom": "^19.2.2",
|
|
21
|
+
"typescript": "^5"
|
|
22
|
+
}
|
|
23
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { RerouteProvider } from 'reroute-js/react';
|
|
2
|
+
import { artifacts } from '../../.reroute';
|
|
3
|
+
|
|
4
|
+
interface AppProps {
|
|
5
|
+
pathname?: string;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
export default function App({ pathname }: AppProps = {}) {
|
|
9
|
+
return <RerouteProvider from={{ pathname, ...artifacts }} />;
|
|
10
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { useState } from 'react';
|
|
2
|
+
|
|
3
|
+
export default function Counter() {
|
|
4
|
+
const [count, setCount] = useState(0);
|
|
5
|
+
const increase = () => setCount((c) => c + 1);
|
|
6
|
+
|
|
7
|
+
return (
|
|
8
|
+
<section>
|
|
9
|
+
<h2>Current count: {count}</h2>
|
|
10
|
+
<button type='button' onClick={increase}>
|
|
11
|
+
Increase
|
|
12
|
+
</button>
|
|
13
|
+
</section>
|
|
14
|
+
);
|
|
15
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<title>{{PROJECT_NAME}}</title>
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<div id="root"></div>
|
|
10
|
+
<script type="module" src="./index.tsx"></script>
|
|
11
|
+
</body>
|
|
12
|
+
</html>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export default function NotFound() {
|
|
2
|
+
return (
|
|
3
|
+
<div
|
|
4
|
+
style={{
|
|
5
|
+
padding: '2rem',
|
|
6
|
+
maxWidth: '800px',
|
|
7
|
+
margin: '0 auto',
|
|
8
|
+
textAlign: 'center',
|
|
9
|
+
}}
|
|
10
|
+
>
|
|
11
|
+
<h1>404 - Page Not Found</h1>
|
|
12
|
+
<p>The page you're looking for doesn't exist.</p>
|
|
13
|
+
<nav style={{ marginTop: '2rem' }}>
|
|
14
|
+
<a href='/'>← Back to Home</a>
|
|
15
|
+
</nav>
|
|
16
|
+
</div>
|
|
17
|
+
);
|
|
18
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
const meta = {
|
|
2
|
+
title: 'About',
|
|
3
|
+
description: 'Learn more about our application',
|
|
4
|
+
};
|
|
5
|
+
|
|
6
|
+
function About() {
|
|
7
|
+
return (
|
|
8
|
+
<div style={{ padding: '2rem', maxWidth: '800px', margin: '0 auto' }}>
|
|
9
|
+
<h1>About</h1>
|
|
10
|
+
<p>Welcome to your Reroute application!</p>
|
|
11
|
+
<p>
|
|
12
|
+
This page demonstrates a simple static route that maps from{' '}
|
|
13
|
+
<code>routes/about.tsx</code> to <code>/about</code>.
|
|
14
|
+
</p>
|
|
15
|
+
<nav style={{ marginTop: '2rem' }}>
|
|
16
|
+
<a href='/' style={{ marginRight: '1rem' }}>
|
|
17
|
+
← Back to Home
|
|
18
|
+
</a>
|
|
19
|
+
</nav>
|
|
20
|
+
</div>
|
|
21
|
+
);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export default About;
|
|
25
|
+
export { meta };
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { Link } from 'reroute-js/react';
|
|
2
|
+
import Counter from '../components/Counter';
|
|
3
|
+
|
|
4
|
+
export default function HomePage() {
|
|
5
|
+
return (
|
|
6
|
+
<main style={{ padding: '2rem', maxWidth: '1200px', margin: '0 auto' }}>
|
|
7
|
+
<h1>🏠 Welcome to Reroute!</h1>
|
|
8
|
+
<p>This is your new Reroute application.</p>
|
|
9
|
+
|
|
10
|
+
<section style={{ marginTop: '2rem' }}>
|
|
11
|
+
<h2>Navigation</h2>
|
|
12
|
+
<nav
|
|
13
|
+
style={{
|
|
14
|
+
display: 'flex',
|
|
15
|
+
gap: '1rem',
|
|
16
|
+
flexDirection: 'column',
|
|
17
|
+
maxWidth: '300px',
|
|
18
|
+
}}
|
|
19
|
+
>
|
|
20
|
+
<Link
|
|
21
|
+
to='/about'
|
|
22
|
+
style={{
|
|
23
|
+
padding: '0.5rem 1rem',
|
|
24
|
+
background: '#eee',
|
|
25
|
+
textDecoration: 'none',
|
|
26
|
+
borderRadius: '4px',
|
|
27
|
+
}}
|
|
28
|
+
>
|
|
29
|
+
About
|
|
30
|
+
</Link>
|
|
31
|
+
</nav>
|
|
32
|
+
</section>
|
|
33
|
+
|
|
34
|
+
<section
|
|
35
|
+
style={{
|
|
36
|
+
marginTop: '2rem',
|
|
37
|
+
padding: '1rem',
|
|
38
|
+
background: '#f5f5f5',
|
|
39
|
+
borderRadius: '8px',
|
|
40
|
+
}}
|
|
41
|
+
>
|
|
42
|
+
<h3>✨ Features</h3>
|
|
43
|
+
<ul>
|
|
44
|
+
<li>File-based routing</li>
|
|
45
|
+
<li>Client-side navigation (SPA)</li>
|
|
46
|
+
<li>Server-side rendering (SSR)</li>
|
|
47
|
+
<li>Type-safe route params</li>
|
|
48
|
+
<li>Automatic route generation</li>
|
|
49
|
+
</ul>
|
|
50
|
+
</section>
|
|
51
|
+
|
|
52
|
+
<section>
|
|
53
|
+
<Counter />
|
|
54
|
+
</section>
|
|
55
|
+
</main>
|
|
56
|
+
);
|
|
57
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { Elysia } from 'elysia';
|
|
2
|
+
import { createElement } from 'react';
|
|
3
|
+
import { reroute } from 'reroute-js/elysia';
|
|
4
|
+
import App from './client/App';
|
|
5
|
+
|
|
6
|
+
const IS_PRODUCTION = Bun.env.BUN_ENV === 'production';
|
|
7
|
+
|
|
8
|
+
const app = new Elysia()
|
|
9
|
+
.use(
|
|
10
|
+
reroute({
|
|
11
|
+
app: createElement(App),
|
|
12
|
+
minify: IS_PRODUCTION,
|
|
13
|
+
}),
|
|
14
|
+
)
|
|
15
|
+
.get('/api/message', () => ({ message: 'Hello from server' }))
|
|
16
|
+
.listen(Number(Bun.env.PORT || '3000'));
|
|
17
|
+
|
|
18
|
+
console.log(
|
|
19
|
+
`🦊 Reroute is running at ${app.server?.hostname}:${app.server?.port}`,
|
|
20
|
+
);
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ES2020",
|
|
4
|
+
"useDefineForClassFields": true,
|
|
5
|
+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
|
6
|
+
"module": "ESNext",
|
|
7
|
+
"skipLibCheck": true,
|
|
8
|
+
"moduleResolution": "bundler",
|
|
9
|
+
"isolatedModules": true,
|
|
10
|
+
"baseUrl": ".",
|
|
11
|
+
"rootDir": ".",
|
|
12
|
+
"declaration": true,
|
|
13
|
+
"declarationMap": true,
|
|
14
|
+
"outDir": "dist/types",
|
|
15
|
+
"emitDeclarationOnly": true,
|
|
16
|
+
"strict": true,
|
|
17
|
+
"noUnusedLocals": true,
|
|
18
|
+
"noUnusedParameters": true,
|
|
19
|
+
"noFallthroughCasesInSwitch": true,
|
|
20
|
+
"jsx": "react-jsx",
|
|
21
|
+
"types": ["bun", "node"],
|
|
22
|
+
"paths": {}
|
|
23
|
+
},
|
|
24
|
+
"include": ["packages/**/*.ts", "packages/**/*.tsx", "test/**/*.d.ts"],
|
|
25
|
+
"exclude": ["node_modules", "dist", "test"]
|
|
26
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "{{PROJECT_NAME}}",
|
|
3
|
+
"description": "A Reroute application",
|
|
4
|
+
"version": "0.0.0",
|
|
5
|
+
"scripts": {
|
|
6
|
+
"start": "reroute gen && bun src/index.ts",
|
|
7
|
+
"dev": "reroute gen && bun --watch src/index.ts",
|
|
8
|
+
"build": "reroute gen && bun build src/index.ts --target bun --compile --outfile ./dist/app"
|
|
9
|
+
},
|
|
10
|
+
"private": true,
|
|
11
|
+
"dependencies": {
|
|
12
|
+
"reroute-js": "latest",
|
|
13
|
+
"elysia": "^1.4.12",
|
|
14
|
+
"react": "^19.2.0",
|
|
15
|
+
"react-dom": "^19.2.0"
|
|
16
|
+
},
|
|
17
|
+
"devDependencies": {
|
|
18
|
+
"@types/bun": "latest",
|
|
19
|
+
"@types/react": "^19.2.2",
|
|
20
|
+
"@types/react-dom": "^19.2.2",
|
|
21
|
+
"typescript": "^5"
|
|
22
|
+
}
|
|
23
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { RerouteProvider } from 'reroute-js/react';
|
|
2
|
+
import { artifacts } from '../../.reroute';
|
|
3
|
+
|
|
4
|
+
interface AppProps {
|
|
5
|
+
pathname?: string;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
export default function App({ pathname }: AppProps = {}) {
|
|
9
|
+
return <RerouteProvider from={{ pathname, ...artifacts }} />;
|
|
10
|
+
}
|
|
File without changes
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<title>{{PROJECT_NAME}}</title>
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<div id="root"></div>
|
|
10
|
+
<script type="module" src="./index.tsx"></script>
|
|
11
|
+
</body>
|
|
12
|
+
</html>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export default function NotFound() {
|
|
2
|
+
return (
|
|
3
|
+
<div
|
|
4
|
+
style={{
|
|
5
|
+
padding: '2rem',
|
|
6
|
+
maxWidth: '800px',
|
|
7
|
+
margin: '0 auto',
|
|
8
|
+
textAlign: 'center',
|
|
9
|
+
}}
|
|
10
|
+
>
|
|
11
|
+
<h1>404 - Page Not Found</h1>
|
|
12
|
+
<p>The page you're looking for doesn't exist.</p>
|
|
13
|
+
<nav style={{ marginTop: '2rem' }}>
|
|
14
|
+
<a href='/'>← Back to Home</a>
|
|
15
|
+
</nav>
|
|
16
|
+
</div>
|
|
17
|
+
);
|
|
18
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
const meta = {
|
|
2
|
+
title: 'About',
|
|
3
|
+
description: 'Learn more about our application',
|
|
4
|
+
};
|
|
5
|
+
|
|
6
|
+
function About() {
|
|
7
|
+
return (
|
|
8
|
+
<div style={{ padding: '2rem', maxWidth: '800px', margin: '0 auto' }}>
|
|
9
|
+
<h1>About</h1>
|
|
10
|
+
<p>Welcome to your Reroute application!</p>
|
|
11
|
+
<p>
|
|
12
|
+
This page demonstrates a simple static route that maps from{' '}
|
|
13
|
+
<code>routes/about.tsx</code> to <code>/about</code>.
|
|
14
|
+
</p>
|
|
15
|
+
<nav style={{ marginTop: '2rem' }}>
|
|
16
|
+
<a href='/' style={{ marginRight: '1rem' }}>
|
|
17
|
+
← Back to Home
|
|
18
|
+
</a>
|
|
19
|
+
</nav>
|
|
20
|
+
</div>
|
|
21
|
+
);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export default About;
|
|
25
|
+
export { meta };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export default function BlogNotFound() {
|
|
2
|
+
return (
|
|
3
|
+
<div style={{ padding: '2rem', textAlign: 'center' }}>
|
|
4
|
+
<h1>Post Not Found</h1>
|
|
5
|
+
<p>The blog post you're looking for doesn't exist.</p>
|
|
6
|
+
<nav style={{ marginTop: '2rem' }}>
|
|
7
|
+
<a href='/blog'>← Back to Blog</a>
|
|
8
|
+
</nav>
|
|
9
|
+
</div>
|
|
10
|
+
);
|
|
11
|
+
}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import { Link, Outlet } from 'reroute-js/react';
|
|
2
|
+
|
|
3
|
+
export default function BlogLayout() {
|
|
4
|
+
return (
|
|
5
|
+
<div style={{ minHeight: '100vh', background: '#f9f9f9' }}>
|
|
6
|
+
{/* Blog Header */}
|
|
7
|
+
<header
|
|
8
|
+
style={{
|
|
9
|
+
background: '#fff',
|
|
10
|
+
borderBottom: '1px solid #e0e0e0',
|
|
11
|
+
padding: '1rem 2rem',
|
|
12
|
+
}}
|
|
13
|
+
>
|
|
14
|
+
<div style={{ maxWidth: '800px', margin: '0 auto' }}>
|
|
15
|
+
<nav
|
|
16
|
+
style={{
|
|
17
|
+
display: 'flex',
|
|
18
|
+
alignItems: 'center',
|
|
19
|
+
justifyContent: 'space-between',
|
|
20
|
+
}}
|
|
21
|
+
>
|
|
22
|
+
<Link
|
|
23
|
+
to='/blog'
|
|
24
|
+
style={{
|
|
25
|
+
fontSize: '1.5rem',
|
|
26
|
+
fontWeight: 'bold',
|
|
27
|
+
textDecoration: 'none',
|
|
28
|
+
color: '#333',
|
|
29
|
+
}}
|
|
30
|
+
>
|
|
31
|
+
📝 Blog
|
|
32
|
+
</Link>
|
|
33
|
+
<div
|
|
34
|
+
style={{ display: 'flex', gap: '1.5rem', alignItems: 'center' }}
|
|
35
|
+
>
|
|
36
|
+
<Link
|
|
37
|
+
to='/'
|
|
38
|
+
style={{
|
|
39
|
+
textDecoration: 'none',
|
|
40
|
+
color: '#666',
|
|
41
|
+
fontSize: '0.875rem',
|
|
42
|
+
}}
|
|
43
|
+
>
|
|
44
|
+
Home
|
|
45
|
+
</Link>
|
|
46
|
+
<Link
|
|
47
|
+
to='/about'
|
|
48
|
+
style={{
|
|
49
|
+
textDecoration: 'none',
|
|
50
|
+
color: '#666',
|
|
51
|
+
fontSize: '0.875rem',
|
|
52
|
+
}}
|
|
53
|
+
>
|
|
54
|
+
About
|
|
55
|
+
</Link>
|
|
56
|
+
</div>
|
|
57
|
+
</nav>
|
|
58
|
+
</div>
|
|
59
|
+
</header>
|
|
60
|
+
|
|
61
|
+
{/* Blog Content */}
|
|
62
|
+
<main>
|
|
63
|
+
<div style={{ maxWidth: '800px', margin: '0 auto' }}>
|
|
64
|
+
<Outlet />
|
|
65
|
+
</div>
|
|
66
|
+
</main>
|
|
67
|
+
|
|
68
|
+
{/* Blog Footer */}
|
|
69
|
+
<footer
|
|
70
|
+
style={{
|
|
71
|
+
marginTop: '4rem',
|
|
72
|
+
padding: '2rem',
|
|
73
|
+
textAlign: 'center',
|
|
74
|
+
color: '#666',
|
|
75
|
+
fontSize: '0.875rem',
|
|
76
|
+
borderTop: '1px solid #e0e0e0',
|
|
77
|
+
background: '#fff',
|
|
78
|
+
}}
|
|
79
|
+
>
|
|
80
|
+
<p>© 2024 {{ PROJECT_NAME }}. Built with Reroute.</p>
|
|
81
|
+
</footer>
|
|
82
|
+
</div>
|
|
83
|
+
);
|
|
84
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
const meta = {
|
|
2
|
+
title: 'Getting Started with Reroute',
|
|
3
|
+
description: 'Learn how to use Reroute for your next project',
|
|
4
|
+
excerpt: 'A guide to getting started with Reroute framework',
|
|
5
|
+
date: '2024-01-02',
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
function BlogPost() {
|
|
9
|
+
return (
|
|
10
|
+
<div>
|
|
11
|
+
<h1>Getting Started with Reroute</h1>
|
|
12
|
+
<p>
|
|
13
|
+
Reroute is a fullstack framework built on Bun, React, and Elysia. It
|
|
14
|
+
provides file-based routing, server-side rendering, and content
|
|
15
|
+
collections.
|
|
16
|
+
</p>
|
|
17
|
+
<h2>Features</h2>
|
|
18
|
+
<ul>
|
|
19
|
+
<li>File-based routing with dynamic parameters</li>
|
|
20
|
+
<li>Server-side rendering (SSR)</li>
|
|
21
|
+
<li>Type-safe route definitions</li>
|
|
22
|
+
<li>Content collections for blogs and docs</li>
|
|
23
|
+
<li>Built on modern tech: Bun, React, Elysia</li>
|
|
24
|
+
</ul>
|
|
25
|
+
</div>
|
|
26
|
+
);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
export { meta };
|
|
30
|
+
export default BlogPost;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
const meta = {
|
|
2
|
+
title: 'Hello World',
|
|
3
|
+
description: 'Welcome to our first blog post!',
|
|
4
|
+
excerpt: 'This is our first post using Reroute',
|
|
5
|
+
date: '2024-01-01',
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
const ssr = {
|
|
9
|
+
head: [
|
|
10
|
+
'<meta property="og:type" content="article" />',
|
|
11
|
+
'<meta name="twitter:card" content="summary_large_image" />',
|
|
12
|
+
],
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
function BlogPost() {
|
|
16
|
+
return (
|
|
17
|
+
<div>
|
|
18
|
+
<h1>Hello World</h1>
|
|
19
|
+
<p>Welcome to our blog! This is our first post.</p>
|
|
20
|
+
<p>
|
|
21
|
+
Reroute makes it easy to create content-driven applications with
|
|
22
|
+
file-based routing and automatic content collections.
|
|
23
|
+
</p>
|
|
24
|
+
</div>
|
|
25
|
+
);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export { meta, ssr };
|
|
29
|
+
export default BlogPost;
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { Link, useContent } from 'reroute-js/react';
|
|
2
|
+
|
|
3
|
+
const meta = {
|
|
4
|
+
title: 'Blog',
|
|
5
|
+
description: 'Read our latest posts',
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
function BlogIndex() {
|
|
9
|
+
const { items } = useContent({
|
|
10
|
+
collection: 'blog',
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
return (
|
|
14
|
+
<div style={{ padding: '2rem' }}>
|
|
15
|
+
<h1>Latest Posts</h1>
|
|
16
|
+
<p>Welcome to our blog! Here are our latest posts:</p>
|
|
17
|
+
|
|
18
|
+
<div
|
|
19
|
+
style={{
|
|
20
|
+
marginTop: '2rem',
|
|
21
|
+
display: 'flex',
|
|
22
|
+
flexDirection: 'column',
|
|
23
|
+
gap: '1.5rem',
|
|
24
|
+
}}
|
|
25
|
+
>
|
|
26
|
+
{items.map((post) => (
|
|
27
|
+
<article
|
|
28
|
+
key={post.slug}
|
|
29
|
+
style={{
|
|
30
|
+
padding: '1.5rem',
|
|
31
|
+
border: '1px solid #e0e0e0',
|
|
32
|
+
borderRadius: '8px',
|
|
33
|
+
background: '#fff',
|
|
34
|
+
}}
|
|
35
|
+
>
|
|
36
|
+
<h2 style={{ margin: '0 0 0.5rem 0' }}>
|
|
37
|
+
<Link
|
|
38
|
+
to={post.href}
|
|
39
|
+
style={{ textDecoration: 'none', color: '#0066cc' }}
|
|
40
|
+
>
|
|
41
|
+
{String(post.meta?.title || post.name)}
|
|
42
|
+
</Link>
|
|
43
|
+
</h2>
|
|
44
|
+
<time style={{ fontSize: '0.875rem', color: '#666' }}>
|
|
45
|
+
{post.meta?.date ? String(post.meta.date) : ''}
|
|
46
|
+
</time>
|
|
47
|
+
<p style={{ marginTop: '0.75rem', color: '#333' }}>
|
|
48
|
+
{String(post.meta?.excerpt || '')}
|
|
49
|
+
</p>
|
|
50
|
+
<Link
|
|
51
|
+
to={post.href}
|
|
52
|
+
style={{
|
|
53
|
+
display: 'inline-block',
|
|
54
|
+
marginTop: '0.5rem',
|
|
55
|
+
color: '#0066cc',
|
|
56
|
+
textDecoration: 'none',
|
|
57
|
+
}}
|
|
58
|
+
>
|
|
59
|
+
Read more →
|
|
60
|
+
</Link>
|
|
61
|
+
</article>
|
|
62
|
+
))}
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
export default BlogIndex;
|
|
69
|
+
export { meta };
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import { Link } from 'reroute-js/react';
|
|
2
|
+
|
|
3
|
+
export default function HomePage() {
|
|
4
|
+
return (
|
|
5
|
+
<main style={{ padding: '2rem', maxWidth: '1200px', margin: '0 auto' }}>
|
|
6
|
+
<h1>🏠 Welcome to Reroute!</h1>
|
|
7
|
+
<p>This is your new blog built with Reroute.</p>
|
|
8
|
+
|
|
9
|
+
<section style={{ marginTop: '2rem' }}>
|
|
10
|
+
<h2>Navigation</h2>
|
|
11
|
+
<nav
|
|
12
|
+
style={{
|
|
13
|
+
display: 'flex',
|
|
14
|
+
gap: '1rem',
|
|
15
|
+
flexDirection: 'column',
|
|
16
|
+
maxWidth: '300px',
|
|
17
|
+
}}
|
|
18
|
+
>
|
|
19
|
+
<Link
|
|
20
|
+
to='/about'
|
|
21
|
+
style={{
|
|
22
|
+
padding: '0.5rem 1rem',
|
|
23
|
+
background: '#eee',
|
|
24
|
+
textDecoration: 'none',
|
|
25
|
+
borderRadius: '4px',
|
|
26
|
+
}}
|
|
27
|
+
>
|
|
28
|
+
About
|
|
29
|
+
</Link>
|
|
30
|
+
<Link
|
|
31
|
+
to='/blog'
|
|
32
|
+
style={{
|
|
33
|
+
padding: '0.5rem 1rem',
|
|
34
|
+
background: '#eee',
|
|
35
|
+
textDecoration: 'none',
|
|
36
|
+
borderRadius: '4px',
|
|
37
|
+
}}
|
|
38
|
+
>
|
|
39
|
+
Blog
|
|
40
|
+
</Link>
|
|
41
|
+
<Link
|
|
42
|
+
to='/blog/hello-world'
|
|
43
|
+
style={{
|
|
44
|
+
padding: '0.5rem 1rem',
|
|
45
|
+
background: '#eee',
|
|
46
|
+
textDecoration: 'none',
|
|
47
|
+
borderRadius: '4px',
|
|
48
|
+
}}
|
|
49
|
+
>
|
|
50
|
+
First Blog Post
|
|
51
|
+
</Link>
|
|
52
|
+
</nav>
|
|
53
|
+
</section>
|
|
54
|
+
|
|
55
|
+
<section
|
|
56
|
+
style={{
|
|
57
|
+
marginTop: '2rem',
|
|
58
|
+
padding: '1rem',
|
|
59
|
+
background: '#f5f5f5',
|
|
60
|
+
borderRadius: '8px',
|
|
61
|
+
}}
|
|
62
|
+
>
|
|
63
|
+
<h3>✨ Features</h3>
|
|
64
|
+
<ul>
|
|
65
|
+
<li>File-based routing</li>
|
|
66
|
+
<li>Client-side navigation (SPA)</li>
|
|
67
|
+
<li>Server-side rendering (SSR)</li>
|
|
68
|
+
<li>Type-safe route params</li>
|
|
69
|
+
<li>Automatic route generation</li>
|
|
70
|
+
<li>Content collections</li>
|
|
71
|
+
</ul>
|
|
72
|
+
</section>
|
|
73
|
+
</main>
|
|
74
|
+
);
|
|
75
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { Elysia } from 'elysia';
|
|
2
|
+
import { createElement } from 'react';
|
|
3
|
+
import { reroute } from 'reroute-js/elysia';
|
|
4
|
+
import App from './client/App';
|
|
5
|
+
|
|
6
|
+
const IS_PRODUCTION = Bun.env.BUN_ENV === 'production';
|
|
7
|
+
|
|
8
|
+
const app = new Elysia()
|
|
9
|
+
.use(
|
|
10
|
+
reroute({
|
|
11
|
+
app: createElement(App),
|
|
12
|
+
minify: IS_PRODUCTION,
|
|
13
|
+
}),
|
|
14
|
+
)
|
|
15
|
+
.get('/api/message', () => ({ message: 'Hello from server' }))
|
|
16
|
+
.listen(Number(Bun.env.PORT || '3000'));
|
|
17
|
+
|
|
18
|
+
console.log(
|
|
19
|
+
`🦊 Reroute is running at ${app.server?.hostname}:${app.server?.port}`,
|
|
20
|
+
);
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ES2020",
|
|
4
|
+
"useDefineForClassFields": true,
|
|
5
|
+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
|
6
|
+
"module": "ESNext",
|
|
7
|
+
"skipLibCheck": true,
|
|
8
|
+
"moduleResolution": "bundler",
|
|
9
|
+
"isolatedModules": true,
|
|
10
|
+
"baseUrl": ".",
|
|
11
|
+
"rootDir": ".",
|
|
12
|
+
"declaration": true,
|
|
13
|
+
"declarationMap": true,
|
|
14
|
+
"outDir": "dist/types",
|
|
15
|
+
"emitDeclarationOnly": true,
|
|
16
|
+
"strict": true,
|
|
17
|
+
"noUnusedLocals": true,
|
|
18
|
+
"noUnusedParameters": true,
|
|
19
|
+
"noFallthroughCasesInSwitch": true,
|
|
20
|
+
"jsx": "react-jsx",
|
|
21
|
+
"types": ["bun", "node"],
|
|
22
|
+
"paths": {}
|
|
23
|
+
},
|
|
24
|
+
"include": ["packages/**/*.ts", "packages/**/*.tsx", "test/**/*.d.ts"],
|
|
25
|
+
"exclude": ["node_modules", "dist", "test"]
|
|
26
|
+
}
|
package/package.json
CHANGED