create-rari-app 0.1.12 → 0.2.0
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/dist/index.js +6 -9
- package/package.json +4 -4
- package/templates/default/gitignore +0 -2
- package/templates/default/index.html +10 -4
- package/templates/default/package.json +11 -12
- package/templates/default/src/app/about/page.tsx +30 -0
- package/templates/default/src/app/globals.css +1 -0
- package/templates/default/src/app/layout.tsx +42 -0
- package/templates/default/src/app/page.tsx +18 -0
- package/templates/default/src/components/ServerTime.tsx +0 -2
- package/templates/default/src/App.tsx +0 -61
- package/templates/default/src/main.tsx +0 -13
- package/templates/default/src/pages/about.tsx +0 -240
- package/templates/default/src/pages/index.tsx +0 -196
- package/templates/default/src/styles/index.css +0 -28
package/dist/index.js
CHANGED
|
@@ -109,23 +109,20 @@ async function copyTemplate(templatePath, projectPath, options) {
|
|
|
109
109
|
"README.md",
|
|
110
110
|
"railway.toml",
|
|
111
111
|
"render.yaml",
|
|
112
|
-
"src/main.tsx",
|
|
113
|
-
"src/App.tsx",
|
|
114
112
|
"src/vite-env.d.ts",
|
|
115
|
-
"src/
|
|
113
|
+
"src/app/globals.css",
|
|
114
|
+
"src/app/layout.tsx",
|
|
115
|
+
"src/app/page.tsx",
|
|
116
|
+
"src/app/about/page.tsx",
|
|
116
117
|
"src/components/Welcome.tsx",
|
|
117
118
|
"src/components/ServerTime.tsx",
|
|
118
|
-
"src/pages/index.tsx",
|
|
119
|
-
"src/pages/about.tsx",
|
|
120
119
|
"gitignore"
|
|
121
120
|
];
|
|
121
|
+
await mkdir(join(projectPath, "src", "app", "about"), { recursive: true });
|
|
122
122
|
await mkdir(join(projectPath, "src", "components"), { recursive: true });
|
|
123
|
-
await mkdir(join(projectPath, "src", "styles"), { recursive: true });
|
|
124
|
-
await mkdir(join(projectPath, "src", "pages"), { recursive: true });
|
|
125
123
|
for (const file of templateFiles) {
|
|
126
124
|
const sourcePath = join(templatePath, file);
|
|
127
|
-
const
|
|
128
|
-
const destPath = join(projectPath, destFile);
|
|
125
|
+
const destPath = join(projectPath, file === "gitignore" ? ".gitignore" : file);
|
|
129
126
|
try {
|
|
130
127
|
let content = await readFile(sourcePath, "utf-8");
|
|
131
128
|
content = content.replace(/\{\{PROJECT_NAME\}\}/g, options.name).replace(/\{\{PACKAGE_MANAGER\}\}/g, options.packageManager);
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "create-rari-app",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.2.0",
|
|
5
5
|
"description": "Create Runtime Accelerated Rendering Infrastructure (Rari) applications with no build configuration",
|
|
6
6
|
"author": "Ryan Skinner",
|
|
7
7
|
"license": "MIT",
|
|
@@ -50,10 +50,10 @@
|
|
|
50
50
|
"picocolors": "^1.1.1"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
|
-
"@types/node": "^24.
|
|
53
|
+
"@types/node": "^24.9.1",
|
|
54
54
|
"@typescript/native-preview": "7.0.0-dev.20250611.1",
|
|
55
|
-
"eslint": "^9.
|
|
56
|
-
"oxlint": "^1.
|
|
55
|
+
"eslint": "^9.38.0",
|
|
56
|
+
"oxlint": "^1.23.0",
|
|
57
57
|
"tsdown": "^0.12.9"
|
|
58
58
|
}
|
|
59
59
|
}
|
|
@@ -1,12 +1,18 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
|
+
|
|
3
4
|
<head>
|
|
4
|
-
<meta charset="UTF-8"
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0"
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
7
|
<title>{{PROJECT_NAME}}</title>
|
|
8
|
+
<script type="module">
|
|
9
|
+
import '/src/app/globals.css';
|
|
10
|
+
import 'virtual:rari-entry-client';
|
|
11
|
+
</script>
|
|
7
12
|
</head>
|
|
8
|
-
|
|
13
|
+
|
|
14
|
+
<body class="min-h-screen bg-gray-50 text-gray-900">
|
|
9
15
|
<div id="root"></div>
|
|
10
|
-
<script type="module" src="/src/main.tsx"></script>
|
|
11
16
|
</body>
|
|
17
|
+
|
|
12
18
|
</html>
|
|
@@ -10,8 +10,7 @@
|
|
|
10
10
|
"scripts": {
|
|
11
11
|
"build": "{{PACKAGE_MANAGER}} clean && {{PACKAGE_MANAGER}} typecheck && vite build",
|
|
12
12
|
"dev": "NODE_OPTIONS='--max-http-header-size=1048576' vite",
|
|
13
|
-
"start": "rari start",
|
|
14
|
-
"start:local": "rari start",
|
|
13
|
+
"start": "NODE_ENV=production rari start",
|
|
15
14
|
"deploy:railway": "rari deploy railway",
|
|
16
15
|
"deploy:render": "rari deploy render",
|
|
17
16
|
"clean": "rm -rf dist",
|
|
@@ -21,19 +20,19 @@
|
|
|
21
20
|
},
|
|
22
21
|
"dependencies": {
|
|
23
22
|
"rari": "latest",
|
|
24
|
-
"react": "^19.
|
|
25
|
-
"react-dom": "^19.
|
|
23
|
+
"react": "^19.2.0",
|
|
24
|
+
"react-dom": "^19.2.0"
|
|
26
25
|
},
|
|
27
26
|
"devDependencies": {
|
|
28
|
-
"@tailwindcss/vite": "^4.1.
|
|
29
|
-
"@types/node": "^24.
|
|
30
|
-
"@types/react": "^19.
|
|
31
|
-
"@types/react-dom": "^19.
|
|
27
|
+
"@tailwindcss/vite": "^4.1.15",
|
|
28
|
+
"@types/node": "^24.9.1",
|
|
29
|
+
"@types/react": "^19.2.2",
|
|
30
|
+
"@types/react-dom": "^19.2.2",
|
|
32
31
|
"@typescript/native-preview": "7.0.0-dev.20250611.1",
|
|
33
32
|
"@vitejs/plugin-react-oxc": "^0.2.3",
|
|
34
|
-
"eslint": "^9.
|
|
35
|
-
"oxlint": "^1.
|
|
36
|
-
"rolldown-vite": "^7.1.
|
|
37
|
-
"tailwindcss": "^4.1.
|
|
33
|
+
"eslint": "^9.38.0",
|
|
34
|
+
"oxlint": "^1.23.0",
|
|
35
|
+
"rolldown-vite": "^7.1.19",
|
|
36
|
+
"tailwindcss": "^4.1.15"
|
|
38
37
|
}
|
|
39
38
|
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/* eslint-disable react-refresh/only-export-components */
|
|
2
|
+
import type { PageProps } from 'rari/client'
|
|
3
|
+
|
|
4
|
+
export default function AboutPage(_params: PageProps) {
|
|
5
|
+
return (
|
|
6
|
+
<div className="space-y-6">
|
|
7
|
+
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
|
|
8
|
+
<h1 className="text-4xl font-bold text-gray-900 mb-4">About</h1>
|
|
9
|
+
<p className="text-lg text-gray-600 mb-4">
|
|
10
|
+
This is a Rari application using the app router.
|
|
11
|
+
</p>
|
|
12
|
+
<p className="text-gray-600">
|
|
13
|
+
Rari is a performance-first React framework powered by Rust, featuring:
|
|
14
|
+
</p>
|
|
15
|
+
<ul className="list-disc list-inside text-gray-600 mt-4 space-y-2">
|
|
16
|
+
<li>React Server Components</li>
|
|
17
|
+
<li>File-based routing</li>
|
|
18
|
+
<li>Server Actions</li>
|
|
19
|
+
<li>Zero-config setup</li>
|
|
20
|
+
<li>Fast development experience</li>
|
|
21
|
+
</ul>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
)
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
export const metadata = {
|
|
28
|
+
title: 'About | {{PROJECT_NAME}}',
|
|
29
|
+
description: 'Learn more about this Rari application',
|
|
30
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import "tailwindcss";
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
/* eslint-disable react-refresh/only-export-components */
|
|
2
|
+
import type { LayoutProps } from 'rari/client'
|
|
3
|
+
|
|
4
|
+
export default function RootLayout({ children }: LayoutProps) {
|
|
5
|
+
return (
|
|
6
|
+
<div className="min-h-screen">
|
|
7
|
+
<nav className="bg-white border-b border-gray-200 sticky top-0 z-50 shadow-sm">
|
|
8
|
+
<div className="max-w-7xl mx-auto px-6">
|
|
9
|
+
<div className="flex items-center justify-between h-16">
|
|
10
|
+
<div className="flex items-center gap-2">
|
|
11
|
+
<span className="text-2xl font-bold text-gray-900">{{ PROJECT_NAME }}</span>
|
|
12
|
+
</div>
|
|
13
|
+
<ul className="flex gap-1 list-none m-0">
|
|
14
|
+
<li>
|
|
15
|
+
<a
|
|
16
|
+
href="/"
|
|
17
|
+
className="px-4 py-2 text-sm font-medium text-gray-700 no-underline hover:text-gray-900 hover:bg-gray-50 rounded-md transition-colors"
|
|
18
|
+
>
|
|
19
|
+
Home
|
|
20
|
+
</a>
|
|
21
|
+
</li>
|
|
22
|
+
<li>
|
|
23
|
+
<a
|
|
24
|
+
href="/about"
|
|
25
|
+
className="px-4 py-2 text-sm font-medium text-gray-700 no-underline hover:text-gray-900 hover:bg-gray-50 rounded-md transition-colors"
|
|
26
|
+
>
|
|
27
|
+
About
|
|
28
|
+
</a>
|
|
29
|
+
</li>
|
|
30
|
+
</ul>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
</nav>
|
|
34
|
+
<main className="max-w-7xl mx-auto px-6 py-8">{children}</main>
|
|
35
|
+
</div>
|
|
36
|
+
)
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
export const metadata = {
|
|
40
|
+
title: '{{PROJECT_NAME}}',
|
|
41
|
+
description: 'A Rari application',
|
|
42
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/* eslint-disable react-refresh/only-export-components */
|
|
2
|
+
import type { PageProps } from 'rari/client'
|
|
3
|
+
import ServerTime from '../components/ServerTime'
|
|
4
|
+
import Welcome from '../components/Welcome'
|
|
5
|
+
|
|
6
|
+
export default function HomePage(_params: PageProps) {
|
|
7
|
+
return (
|
|
8
|
+
<div className="space-y-8">
|
|
9
|
+
<Welcome />
|
|
10
|
+
<ServerTime />
|
|
11
|
+
</div>
|
|
12
|
+
)
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export const metadata = {
|
|
16
|
+
title: 'Home | {{PROJECT_NAME}}',
|
|
17
|
+
description: 'Welcome to your new Rari application',
|
|
18
|
+
}
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import { RouterProvider, useRouter } from 'rari/client'
|
|
2
|
-
import { routes } from '../.rari/routes'
|
|
3
|
-
|
|
4
|
-
function NotFoundPage() {
|
|
5
|
-
return (
|
|
6
|
-
<div className="min-h-screen bg-[#0d1117] text-[#f0f6fc] flex items-center justify-center">
|
|
7
|
-
<div className="text-center">
|
|
8
|
-
<h1 className="text-4xl font-bold mb-4">404 - Page Not Found</h1>
|
|
9
|
-
<p className="text-gray-400 mb-8">
|
|
10
|
-
The page you're looking for doesn't exist.
|
|
11
|
-
</p>
|
|
12
|
-
<a
|
|
13
|
-
href="/"
|
|
14
|
-
className="bg-[#fd7e14] hover:bg-[#e8590c] text-white px-6 py-3 rounded-lg font-semibold transition-colors"
|
|
15
|
-
>
|
|
16
|
-
Go Home
|
|
17
|
-
</a>
|
|
18
|
-
</div>
|
|
19
|
-
</div>
|
|
20
|
-
)
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
const routerConfig = {
|
|
24
|
-
notFoundComponent: NotFoundPage,
|
|
25
|
-
basePath: '',
|
|
26
|
-
useHash: false,
|
|
27
|
-
caseSensitive: false,
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
function App() {
|
|
31
|
-
return (
|
|
32
|
-
<RouterProvider config={routerConfig} routes={routes}>
|
|
33
|
-
<Routes />
|
|
34
|
-
</RouterProvider>
|
|
35
|
-
)
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
function Routes() {
|
|
39
|
-
const { currentRoute } = useRouter()
|
|
40
|
-
|
|
41
|
-
if (!currentRoute) {
|
|
42
|
-
return <NotFoundPage />
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
const Component = currentRoute.route.component
|
|
46
|
-
const { params, searchParams } = currentRoute
|
|
47
|
-
|
|
48
|
-
if (!Component) {
|
|
49
|
-
return <NotFoundPage />
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
return (
|
|
53
|
-
<Component
|
|
54
|
-
params={params}
|
|
55
|
-
searchParams={searchParams}
|
|
56
|
-
meta={currentRoute.route.meta}
|
|
57
|
-
/>
|
|
58
|
-
)
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
export default App
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import ReactDOM from 'react-dom/client'
|
|
3
|
-
import App from './App.tsx'
|
|
4
|
-
import './styles/index.css'
|
|
5
|
-
|
|
6
|
-
import 'virtual:rsc-integration'
|
|
7
|
-
import 'virtual:rsc-client-components'
|
|
8
|
-
|
|
9
|
-
ReactDOM.createRoot(document.getElementById('root')!).render(
|
|
10
|
-
<React.StrictMode>
|
|
11
|
-
<App />
|
|
12
|
-
</React.StrictMode>,
|
|
13
|
-
)
|
|
@@ -1,240 +0,0 @@
|
|
|
1
|
-
import type { PageProps } from 'rari/client'
|
|
2
|
-
import { Link } from 'rari/client'
|
|
3
|
-
|
|
4
|
-
export default function AboutPage({ params, searchParams }: PageProps) {
|
|
5
|
-
return (
|
|
6
|
-
<div className="min-h-screen bg-gradient-to-br from-green-50 to-blue-100 py-8 px-4">
|
|
7
|
-
<div className="max-w-4xl mx-auto">
|
|
8
|
-
<div className="text-center mb-12">
|
|
9
|
-
<h1 className="text-5xl font-bold text-gray-900 mb-4">
|
|
10
|
-
About
|
|
11
|
-
{' '}
|
|
12
|
-
<span className="bg-gradient-to-r from-green-600 to-blue-600 bg-clip-text text-transparent">
|
|
13
|
-
Rari
|
|
14
|
-
</span>
|
|
15
|
-
</h1>
|
|
16
|
-
<p className="text-xl text-gray-600 mb-8">
|
|
17
|
-
Learn more about the Runtime Accelerated Rendering Infrastructure
|
|
18
|
-
</p>
|
|
19
|
-
<div className="inline-flex items-center px-4 py-2 bg-blue-100 text-blue-800 rounded-lg">
|
|
20
|
-
<svg
|
|
21
|
-
className="w-5 h-5 mr-2"
|
|
22
|
-
fill="currentColor"
|
|
23
|
-
viewBox="0 0 20 20"
|
|
24
|
-
>
|
|
25
|
-
<path
|
|
26
|
-
fillRule="evenodd"
|
|
27
|
-
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
|
|
28
|
-
clipRule="evenodd"
|
|
29
|
-
/>
|
|
30
|
-
</svg>
|
|
31
|
-
Static route: /about
|
|
32
|
-
</div>
|
|
33
|
-
</div>
|
|
34
|
-
|
|
35
|
-
<div className="grid gap-8 md:grid-cols-2 mb-12">
|
|
36
|
-
<div className="bg-white rounded-xl p-8 shadow-sm">
|
|
37
|
-
<h2 className="text-2xl font-semibold mb-4 text-gray-900">
|
|
38
|
-
🚀 What is Rari?
|
|
39
|
-
</h2>
|
|
40
|
-
<p className="text-gray-600 mb-4">
|
|
41
|
-
Rari is a next-generation React framework powered by a
|
|
42
|
-
custom-built Rust runtime. It provides performance-optimized
|
|
43
|
-
server-side rendering with seamless client-side hydration.
|
|
44
|
-
</p>
|
|
45
|
-
<ul className="space-y-2 text-gray-600">
|
|
46
|
-
<li className="flex items-center">
|
|
47
|
-
<span className="text-green-500 mr-2">✓</span>
|
|
48
|
-
React Server Components with Rust runtime
|
|
49
|
-
</li>
|
|
50
|
-
<li className="flex items-center">
|
|
51
|
-
<span className="text-green-500 mr-2">✓</span>
|
|
52
|
-
4x faster than Next.js under load
|
|
53
|
-
</li>
|
|
54
|
-
<li className="flex items-center">
|
|
55
|
-
<span className="text-green-500 mr-2">✓</span>
|
|
56
|
-
Zero-config setup
|
|
57
|
-
</li>
|
|
58
|
-
<li className="flex items-center">
|
|
59
|
-
<span className="text-green-500 mr-2">✓</span>
|
|
60
|
-
Universal NPM package support
|
|
61
|
-
</li>
|
|
62
|
-
</ul>
|
|
63
|
-
</div>
|
|
64
|
-
|
|
65
|
-
<div className="bg-white rounded-xl p-8 shadow-sm">
|
|
66
|
-
<h2 className="text-2xl font-semibold mb-4 text-gray-900">
|
|
67
|
-
⚡ Performance Benefits
|
|
68
|
-
</h2>
|
|
69
|
-
<div className="space-y-4">
|
|
70
|
-
<div className="p-4 bg-green-50 rounded-lg">
|
|
71
|
-
<div className="text-lg font-semibold text-green-800">
|
|
72
|
-
4.04x Faster Under Load
|
|
73
|
-
</div>
|
|
74
|
-
<div className="text-sm text-green-600">
|
|
75
|
-
4.23ms vs Next.js 17.11ms
|
|
76
|
-
</div>
|
|
77
|
-
</div>
|
|
78
|
-
<div className="p-4 bg-blue-50 rounded-lg">
|
|
79
|
-
<div className="text-lg font-semibold text-blue-800">
|
|
80
|
-
3.74x More Throughput
|
|
81
|
-
</div>
|
|
82
|
-
<div className="text-sm text-blue-600">
|
|
83
|
-
10,586 req/s vs Next.js 2,832 req/s
|
|
84
|
-
</div>
|
|
85
|
-
</div>
|
|
86
|
-
<div className="p-4 bg-purple-50 rounded-lg">
|
|
87
|
-
<div className="text-lg font-semibold text-purple-800">
|
|
88
|
-
46% Smaller Bundles
|
|
89
|
-
</div>
|
|
90
|
-
<div className="text-sm text-purple-600">
|
|
91
|
-
400KB vs Next.js 742KB
|
|
92
|
-
</div>
|
|
93
|
-
</div>
|
|
94
|
-
</div>
|
|
95
|
-
</div>
|
|
96
|
-
</div>
|
|
97
|
-
|
|
98
|
-
<div className="bg-white rounded-xl p-8 shadow-sm border border-gray-200 mb-8">
|
|
99
|
-
<h2 className="text-2xl font-bold text-gray-900 mb-6">
|
|
100
|
-
Key Features
|
|
101
|
-
</h2>
|
|
102
|
-
|
|
103
|
-
<div className="grid gap-6 md:grid-cols-3">
|
|
104
|
-
<div className="text-center">
|
|
105
|
-
<div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-4">
|
|
106
|
-
<svg
|
|
107
|
-
className="w-6 h-6 text-blue-600"
|
|
108
|
-
fill="none"
|
|
109
|
-
stroke="currentColor"
|
|
110
|
-
viewBox="0 0 24 24"
|
|
111
|
-
>
|
|
112
|
-
<path
|
|
113
|
-
strokeLinecap="round"
|
|
114
|
-
strokeLinejoin="round"
|
|
115
|
-
strokeWidth={2}
|
|
116
|
-
d="M13 10V3L4 14h7v7l9-11h-7z"
|
|
117
|
-
/>
|
|
118
|
-
</svg>
|
|
119
|
-
</div>
|
|
120
|
-
<h3 className="font-semibold text-gray-900 mb-2">
|
|
121
|
-
High-performance RSC
|
|
122
|
-
</h3>
|
|
123
|
-
<p className="text-sm text-gray-600">
|
|
124
|
-
React Server Components powered by Rust runtime
|
|
125
|
-
</p>
|
|
126
|
-
</div>
|
|
127
|
-
|
|
128
|
-
<div className="text-center">
|
|
129
|
-
<div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-4">
|
|
130
|
-
<svg
|
|
131
|
-
className="w-6 h-6 text-green-600"
|
|
132
|
-
fill="none"
|
|
133
|
-
stroke="currentColor"
|
|
134
|
-
viewBox="0 0 24 24"
|
|
135
|
-
>
|
|
136
|
-
<path
|
|
137
|
-
strokeLinecap="round"
|
|
138
|
-
strokeLinejoin="round"
|
|
139
|
-
strokeWidth={2}
|
|
140
|
-
d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"
|
|
141
|
-
/>
|
|
142
|
-
</svg>
|
|
143
|
-
</div>
|
|
144
|
-
<h3 className="font-semibold text-gray-900 mb-2">
|
|
145
|
-
File-based Routing
|
|
146
|
-
</h3>
|
|
147
|
-
<p className="text-sm text-gray-600">
|
|
148
|
-
Automatic route generation based on your file structure
|
|
149
|
-
</p>
|
|
150
|
-
</div>
|
|
151
|
-
|
|
152
|
-
<div className="text-center">
|
|
153
|
-
<div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mx-auto mb-4">
|
|
154
|
-
<svg
|
|
155
|
-
className="w-6 h-6 text-purple-600"
|
|
156
|
-
fill="none"
|
|
157
|
-
stroke="currentColor"
|
|
158
|
-
viewBox="0 0 24 24"
|
|
159
|
-
>
|
|
160
|
-
<path
|
|
161
|
-
strokeLinecap="round"
|
|
162
|
-
strokeLinejoin="round"
|
|
163
|
-
strokeWidth={2}
|
|
164
|
-
d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
|
|
165
|
-
/>
|
|
166
|
-
</svg>
|
|
167
|
-
</div>
|
|
168
|
-
<h3 className="font-semibent text-gray-900 mb-2">Zero Config</h3>
|
|
169
|
-
<p className="text-sm text-gray-600">
|
|
170
|
-
Works out of the box with pre-built binaries
|
|
171
|
-
</p>
|
|
172
|
-
</div>
|
|
173
|
-
</div>
|
|
174
|
-
</div>
|
|
175
|
-
|
|
176
|
-
<div className="bg-white rounded-xl p-8 shadow-sm border border-gray-200 mb-8">
|
|
177
|
-
<h2 className="text-2xl font-bold text-gray-900 mb-6">
|
|
178
|
-
Route Information
|
|
179
|
-
</h2>
|
|
180
|
-
<div className="p-4 bg-gray-50 rounded-lg">
|
|
181
|
-
<div className="text-sm text-gray-700">
|
|
182
|
-
<div className="mb-2">
|
|
183
|
-
<strong>File:</strong>
|
|
184
|
-
{' '}
|
|
185
|
-
<code className="bg-gray-200 px-2 py-1 rounded">
|
|
186
|
-
src/pages/about.tsx
|
|
187
|
-
</code>
|
|
188
|
-
</div>
|
|
189
|
-
<div className="mb-2">
|
|
190
|
-
<strong>Route:</strong>
|
|
191
|
-
{' '}
|
|
192
|
-
<code className="bg-gray-200 px-2 py-1 rounded">/about</code>
|
|
193
|
-
</div>
|
|
194
|
-
{Object.keys(params).length > 0 && (
|
|
195
|
-
<div className="mb-2">
|
|
196
|
-
<strong>Params:</strong>
|
|
197
|
-
{' '}
|
|
198
|
-
<code className="bg-gray-200 px-2 py-1 rounded">
|
|
199
|
-
{JSON.stringify(params)}
|
|
200
|
-
</code>
|
|
201
|
-
</div>
|
|
202
|
-
)}
|
|
203
|
-
{Object.keys(searchParams).length > 0 && (
|
|
204
|
-
<div>
|
|
205
|
-
<strong>Search Params:</strong>
|
|
206
|
-
{' '}
|
|
207
|
-
<code className="bg-gray-200 px-2 py-1 rounded">
|
|
208
|
-
{JSON.stringify(searchParams)}
|
|
209
|
-
</code>
|
|
210
|
-
</div>
|
|
211
|
-
)}
|
|
212
|
-
</div>
|
|
213
|
-
</div>
|
|
214
|
-
</div>
|
|
215
|
-
|
|
216
|
-
<div className="text-center">
|
|
217
|
-
<Link
|
|
218
|
-
to="/"
|
|
219
|
-
className="inline-flex items-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
|
|
220
|
-
>
|
|
221
|
-
<svg
|
|
222
|
-
className="w-5 h-5 mr-2"
|
|
223
|
-
fill="none"
|
|
224
|
-
stroke="currentColor"
|
|
225
|
-
viewBox="0 0 24 24"
|
|
226
|
-
>
|
|
227
|
-
<path
|
|
228
|
-
strokeLinecap="round"
|
|
229
|
-
strokeLinejoin="round"
|
|
230
|
-
strokeWidth={2}
|
|
231
|
-
d="M10 19l-7-7m0 0l7-7m-7 7h18"
|
|
232
|
-
/>
|
|
233
|
-
</svg>
|
|
234
|
-
Back to Home
|
|
235
|
-
</Link>
|
|
236
|
-
</div>
|
|
237
|
-
</div>
|
|
238
|
-
</div>
|
|
239
|
-
)
|
|
240
|
-
}
|
|
@@ -1,196 +0,0 @@
|
|
|
1
|
-
import type { PageProps } from 'rari/client'
|
|
2
|
-
import { Link } from 'rari/client'
|
|
3
|
-
import { useState } from 'react'
|
|
4
|
-
import ServerTime from '../components/ServerTime'
|
|
5
|
-
import Welcome from '../components/Welcome'
|
|
6
|
-
|
|
7
|
-
export default function HomePage({ params, searchParams }: PageProps) {
|
|
8
|
-
const [count, setCount] = useState(0)
|
|
9
|
-
|
|
10
|
-
return (
|
|
11
|
-
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 py-8 px-4">
|
|
12
|
-
<div className="max-w-4xl mx-auto">
|
|
13
|
-
<div className="text-center mb-12">
|
|
14
|
-
<h1 className="text-5xl font-bold text-gray-900 mb-4">
|
|
15
|
-
Welcome to
|
|
16
|
-
{' '}
|
|
17
|
-
<span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
|
|
18
|
-
Rari
|
|
19
|
-
</span>
|
|
20
|
-
</h1>
|
|
21
|
-
<p className="text-xl text-gray-600 mb-8">
|
|
22
|
-
Runtime Accelerated Rendering Infrastructure with File-Based Routing
|
|
23
|
-
</p>
|
|
24
|
-
<div className="inline-flex items-center px-4 py-2 bg-green-100 text-green-800 rounded-lg">
|
|
25
|
-
<svg
|
|
26
|
-
className="w-5 h-5 mr-2"
|
|
27
|
-
fill="currentColor"
|
|
28
|
-
viewBox="0 0 20 20"
|
|
29
|
-
>
|
|
30
|
-
<path
|
|
31
|
-
fillRule="evenodd"
|
|
32
|
-
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
33
|
-
clipRule="evenodd"
|
|
34
|
-
/>
|
|
35
|
-
</svg>
|
|
36
|
-
File-based routing is active!
|
|
37
|
-
</div>
|
|
38
|
-
</div>
|
|
39
|
-
|
|
40
|
-
<div className="grid gap-8 md:grid-cols-2 mb-12">
|
|
41
|
-
<div className="bg-white rounded-xl p-8 shadow-sm">
|
|
42
|
-
<h2 className="text-2xl font-semibold mb-4 text-gray-900">
|
|
43
|
-
Client Interaction
|
|
44
|
-
</h2>
|
|
45
|
-
<p className="text-gray-600 mb-6">
|
|
46
|
-
This counter runs in the browser with React's client-side
|
|
47
|
-
interactivity.
|
|
48
|
-
</p>
|
|
49
|
-
<div className="flex items-center gap-4">
|
|
50
|
-
<button
|
|
51
|
-
onClick={() => setCount(count - 1)}
|
|
52
|
-
className="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
|
|
53
|
-
type="button"
|
|
54
|
-
>
|
|
55
|
-
-
|
|
56
|
-
</button>
|
|
57
|
-
<span className="text-2xl font-bold text-gray-900 min-w-[2rem] text-center">
|
|
58
|
-
{count}
|
|
59
|
-
</span>
|
|
60
|
-
<button
|
|
61
|
-
onClick={() => setCount(count + 1)}
|
|
62
|
-
className="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors"
|
|
63
|
-
type="button"
|
|
64
|
-
>
|
|
65
|
-
+
|
|
66
|
-
</button>
|
|
67
|
-
</div>
|
|
68
|
-
</div>
|
|
69
|
-
|
|
70
|
-
<div className="space-y-6">
|
|
71
|
-
<Welcome />
|
|
72
|
-
<ServerTime />
|
|
73
|
-
</div>
|
|
74
|
-
</div>
|
|
75
|
-
|
|
76
|
-
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 mb-12">
|
|
77
|
-
<div className="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
|
|
78
|
-
<h3 className="text-lg font-semibold text-gray-900 mb-3">
|
|
79
|
-
🏠 Home Page
|
|
80
|
-
</h3>
|
|
81
|
-
<p className="text-gray-600 mb-4">
|
|
82
|
-
You're currently on the home page (pages/index.tsx)
|
|
83
|
-
</p>
|
|
84
|
-
<div className="text-sm text-gray-500">
|
|
85
|
-
Route:
|
|
86
|
-
{' '}
|
|
87
|
-
<code className="bg-gray-100 px-2 py-1 rounded">/</code>
|
|
88
|
-
</div>
|
|
89
|
-
</div>
|
|
90
|
-
|
|
91
|
-
<Link
|
|
92
|
-
to="/about"
|
|
93
|
-
className="bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:shadow-md transition-shadow block"
|
|
94
|
-
>
|
|
95
|
-
<h3 className="text-lg font-semibold text-gray-900 mb-3">
|
|
96
|
-
📄 About Page
|
|
97
|
-
</h3>
|
|
98
|
-
<p className="text-gray-600 mb-4">Learn more about this project</p>
|
|
99
|
-
<div className="text-sm text-gray-500">
|
|
100
|
-
Route:
|
|
101
|
-
{' '}
|
|
102
|
-
<code className="bg-gray-100 px-2 py-1 rounded">/about</code>
|
|
103
|
-
</div>
|
|
104
|
-
</Link>
|
|
105
|
-
</div>
|
|
106
|
-
|
|
107
|
-
<div className="bg-white rounded-xl p-8 shadow-sm border border-gray-200 mb-8">
|
|
108
|
-
<h2 className="text-2xl font-bold text-gray-900 mb-6">
|
|
109
|
-
File-Based Routing
|
|
110
|
-
</h2>
|
|
111
|
-
|
|
112
|
-
<div className="grid gap-6 md:grid-cols-2">
|
|
113
|
-
<div>
|
|
114
|
-
<h3 className="text-lg font-semibold text-gray-900 mb-3">
|
|
115
|
-
How it works
|
|
116
|
-
</h3>
|
|
117
|
-
<p className="text-gray-600 mb-4">
|
|
118
|
-
Rari automatically generates routes based on your file structure
|
|
119
|
-
in the
|
|
120
|
-
{' '}
|
|
121
|
-
<code className="bg-gray-100 px-2 py-1 rounded">src/pages</code>
|
|
122
|
-
{' '}
|
|
123
|
-
directory.
|
|
124
|
-
</p>
|
|
125
|
-
<div className="space-y-2 text-sm">
|
|
126
|
-
<div className="p-3 bg-gray-50 rounded-lg">
|
|
127
|
-
<div className="font-mono text-gray-700 mb-1">
|
|
128
|
-
pages/index.tsx
|
|
129
|
-
</div>
|
|
130
|
-
<div className="text-gray-500">→ Routes to "/"</div>
|
|
131
|
-
</div>
|
|
132
|
-
<div className="p-3 bg-gray-50 rounded-lg">
|
|
133
|
-
<div className="font-mono text-gray-700 mb-1">
|
|
134
|
-
pages/about.tsx
|
|
135
|
-
</div>
|
|
136
|
-
<div className="text-gray-500">→ Routes to "/about"</div>
|
|
137
|
-
</div>
|
|
138
|
-
</div>
|
|
139
|
-
</div>
|
|
140
|
-
|
|
141
|
-
<div>
|
|
142
|
-
<h3 className="text-lg font-semibold text-gray-900 mb-3">
|
|
143
|
-
Current Route
|
|
144
|
-
</h3>
|
|
145
|
-
<div className="p-4 bg-blue-50 rounded-lg">
|
|
146
|
-
<div className="text-sm text-blue-800">
|
|
147
|
-
<div>
|
|
148
|
-
Path:
|
|
149
|
-
{' '}
|
|
150
|
-
<code className="bg-blue-100 px-2 py-1 rounded">/</code>
|
|
151
|
-
</div>
|
|
152
|
-
{Object.keys(params).length > 0 && (
|
|
153
|
-
<div className="mt-1">
|
|
154
|
-
Params:
|
|
155
|
-
{' '}
|
|
156
|
-
<code className="bg-blue-100 px-2 py-1 rounded">
|
|
157
|
-
{JSON.stringify(params)}
|
|
158
|
-
</code>
|
|
159
|
-
</div>
|
|
160
|
-
)}
|
|
161
|
-
{Object.keys(searchParams).length > 0 && (
|
|
162
|
-
<div className="mt-1">
|
|
163
|
-
Search:
|
|
164
|
-
{' '}
|
|
165
|
-
<code className="bg-blue-100 px-2 py-1 rounded">
|
|
166
|
-
{JSON.stringify(searchParams)}
|
|
167
|
-
</code>
|
|
168
|
-
</div>
|
|
169
|
-
)}
|
|
170
|
-
</div>
|
|
171
|
-
</div>
|
|
172
|
-
</div>
|
|
173
|
-
</div>
|
|
174
|
-
</div>
|
|
175
|
-
|
|
176
|
-
<div className="mt-12 text-center">
|
|
177
|
-
<p className="text-gray-500 text-sm">
|
|
178
|
-
Edit
|
|
179
|
-
{' '}
|
|
180
|
-
<code className="bg-gray-100 px-2 py-1 rounded text-xs">
|
|
181
|
-
src/pages/index.tsx
|
|
182
|
-
</code>
|
|
183
|
-
{' '}
|
|
184
|
-
or create new files in
|
|
185
|
-
{' '}
|
|
186
|
-
<code className="bg-gray-100 px-2 py-1 rounded text-xs">
|
|
187
|
-
src/pages/
|
|
188
|
-
</code>
|
|
189
|
-
{' '}
|
|
190
|
-
to see file-based routing in action!
|
|
191
|
-
</p>
|
|
192
|
-
</div>
|
|
193
|
-
</div>
|
|
194
|
-
</div>
|
|
195
|
-
)
|
|
196
|
-
}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
@import "tailwindcss";
|
|
2
|
-
|
|
3
|
-
:root {
|
|
4
|
-
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
5
|
-
line-height: 1.5;
|
|
6
|
-
font-weight: 400;
|
|
7
|
-
|
|
8
|
-
color-scheme: light dark;
|
|
9
|
-
color: rgba(255, 255, 255, 0.87);
|
|
10
|
-
background-color: #242424;
|
|
11
|
-
|
|
12
|
-
font-synthesis: none;
|
|
13
|
-
text-rendering: optimizeLegibility;
|
|
14
|
-
-webkit-font-smoothing: antialiased;
|
|
15
|
-
-moz-osx-font-smoothing: grayscale;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
body {
|
|
19
|
-
margin: 0;
|
|
20
|
-
display: flex;
|
|
21
|
-
place-items: center;
|
|
22
|
-
min-width: 320px;
|
|
23
|
-
min-height: 100vh;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
#root {
|
|
27
|
-
width: 100%;
|
|
28
|
-
}
|