@emberkit/cli 0.3.1 → 0.5.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/commands/create.js +36 -780
- package/dist/templates/api.js +280 -0
- package/dist/templates/blog.js +358 -0
- package/dist/templates/dashboard.js +407 -0
- package/dist/templates/index.js +179 -38
- package/dist/templates/minimal.js +89 -0
- package/dist/templates/projects.js +536 -0
- package/dist/templates/saas.js +539 -0
- package/dist/utils/filesystem.js +19 -0
- package/package.json +1 -1
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
export const minimalTemplate = {
|
|
2
|
+
"package.json": `{
|
|
3
|
+
"name": "{{name}}",
|
|
4
|
+
"version": "0.1.0",
|
|
5
|
+
"private": true,
|
|
6
|
+
"type": "module",
|
|
7
|
+
"scripts": {
|
|
8
|
+
"dev": "emberkit dev",
|
|
9
|
+
"build": "emberkit build",
|
|
10
|
+
"preview": "emberkit preview"
|
|
11
|
+
},
|
|
12
|
+
"dependencies": {
|
|
13
|
+
"@emberkit/core": "^0.2.4"
|
|
14
|
+
},
|
|
15
|
+
"devDependencies": {
|
|
16
|
+
"@emberkit/cli": "^0.2.4",
|
|
17
|
+
"typescript": "^5.7.0",
|
|
18
|
+
"vite": "^6.0.0"
|
|
19
|
+
}
|
|
20
|
+
}`,
|
|
21
|
+
"tsconfig.json": `{
|
|
22
|
+
"compilerOptions": {
|
|
23
|
+
"target": "ES2022",
|
|
24
|
+
"module": "ESNext",
|
|
25
|
+
"moduleResolution": "bundler",
|
|
26
|
+
"jsx": "react-jsx",
|
|
27
|
+
"jsxImportSource": "@emberkit/core",
|
|
28
|
+
"strict": true,
|
|
29
|
+
"esModuleInterop": true,
|
|
30
|
+
"skipLibCheck": true,
|
|
31
|
+
"forceConsistentCasingInFileNames": true,
|
|
32
|
+
"resolveJsonModule": true,
|
|
33
|
+
"isolatedModules": true,
|
|
34
|
+
"noEmit": true,
|
|
35
|
+
"lib": ["ES2022", "DOM", "DOM.Iterable"]
|
|
36
|
+
},
|
|
37
|
+
"include": ["src"],
|
|
38
|
+
"exclude": ["node_modules", "dist"]
|
|
39
|
+
}`,
|
|
40
|
+
"vite.config.ts": `import { defineConfig } from 'vite';
|
|
41
|
+
import { emberkitVitePlugin } from '@emberkit/core/vite-plugin';
|
|
42
|
+
|
|
43
|
+
export default defineConfig({
|
|
44
|
+
plugins: [emberkitVitePlugin()],
|
|
45
|
+
server: {
|
|
46
|
+
port: 3000,
|
|
47
|
+
host: 'localhost',
|
|
48
|
+
},
|
|
49
|
+
esbuild: {
|
|
50
|
+
jsxImportSource: '@emberkit/core',
|
|
51
|
+
},
|
|
52
|
+
});`,
|
|
53
|
+
"index.html": `<!DOCTYPE html>
|
|
54
|
+
<html lang="en">
|
|
55
|
+
<head>
|
|
56
|
+
<meta charset="UTF-8">
|
|
57
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
58
|
+
<title>{{name}}</title>
|
|
59
|
+
</head>
|
|
60
|
+
<body id="app">
|
|
61
|
+
<script type="module" src="/src/index.tsx"></script>
|
|
62
|
+
</body>
|
|
63
|
+
</html>`,
|
|
64
|
+
"src/index.tsx": `import { render } from '@emberkit/core';
|
|
65
|
+
import { routes } from 'virtual:emberkit-routes';
|
|
66
|
+
import App from './routes/index';
|
|
67
|
+
|
|
68
|
+
const root = document.getElementById('app');
|
|
69
|
+
|
|
70
|
+
if (root) {
|
|
71
|
+
try {
|
|
72
|
+
render(App, root, { routes });
|
|
73
|
+
} catch (error) {
|
|
74
|
+
console.error('[entry] Render error:', error);
|
|
75
|
+
}
|
|
76
|
+
}`,
|
|
77
|
+
"src/routes/index.tsx": `import type { RouteComponent } from '@emberkit/core';
|
|
78
|
+
|
|
79
|
+
const Home: RouteComponent = () => {
|
|
80
|
+
return (
|
|
81
|
+
<div style={{ fontFamily: 'system-ui, sans-serif', maxWidth: '600px', margin: '2rem auto', padding: '0 1rem' }}>
|
|
82
|
+
<h1>{{name}}</h1>
|
|
83
|
+
<p>Built with EmberKit</p>
|
|
84
|
+
</div>
|
|
85
|
+
);
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
export default Home;`,
|
|
89
|
+
};
|
|
@@ -0,0 +1,536 @@
|
|
|
1
|
+
export const starterFiles = {
|
|
2
|
+
"package.json": `{
|
|
3
|
+
"name": "{{name}}",
|
|
4
|
+
"version": "0.1.0",
|
|
5
|
+
"private": true,
|
|
6
|
+
"type": "module",
|
|
7
|
+
"scripts": {
|
|
8
|
+
"dev": "emberkit dev",
|
|
9
|
+
"build": "emberkit build",
|
|
10
|
+
"preview": "emberkit preview"
|
|
11
|
+
},
|
|
12
|
+
"dependencies": {
|
|
13
|
+
"@emberkit/core": "^0.2.4"
|
|
14
|
+
},
|
|
15
|
+
"devDependencies": {
|
|
16
|
+
"@emberkit/cli": "^0.2.4",
|
|
17
|
+
"typescript": "^5.7.0",
|
|
18
|
+
"vite": "^6.0.0",
|
|
19
|
+
"tailwindcss": "^4.0.0",
|
|
20
|
+
"@tailwindcss/vite": "^4.0.0"
|
|
21
|
+
}
|
|
22
|
+
}`,
|
|
23
|
+
"tsconfig.json": `{
|
|
24
|
+
"compilerOptions": {
|
|
25
|
+
"target": "ES2022",
|
|
26
|
+
"module": "ESNext",
|
|
27
|
+
"moduleResolution": "bundler",
|
|
28
|
+
"jsx": "react-jsx",
|
|
29
|
+
"jsxImportSource": "@emberkit/core",
|
|
30
|
+
"strict": true,
|
|
31
|
+
"esModuleInterop": true,
|
|
32
|
+
"skipLibCheck": true,
|
|
33
|
+
"forceConsistentCasingInFileNames": true,
|
|
34
|
+
"resolveJsonModule": true,
|
|
35
|
+
"isolatedModules": true,
|
|
36
|
+
"noEmit": true,
|
|
37
|
+
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
|
38
|
+
"paths": {
|
|
39
|
+
"@/*": ["./src/*"]
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
"include": ["src"],
|
|
43
|
+
"exclude": ["node_modules", "dist"]
|
|
44
|
+
}`,
|
|
45
|
+
"vite.config.ts": `import { defineConfig } from 'vite';
|
|
46
|
+
import { emberkitVitePlugin } from '@emberkit/core/vite-plugin';
|
|
47
|
+
import tailwindcss from '@tailwindcss/vite';
|
|
48
|
+
|
|
49
|
+
export default defineConfig({
|
|
50
|
+
plugins: [emberkitVitePlugin(), tailwindcss()],
|
|
51
|
+
server: {
|
|
52
|
+
port: 3000,
|
|
53
|
+
host: 'localhost',
|
|
54
|
+
},
|
|
55
|
+
esbuild: {
|
|
56
|
+
jsxImportSource: '@emberkit/core',
|
|
57
|
+
},
|
|
58
|
+
});`,
|
|
59
|
+
"index.html": `<!DOCTYPE html>
|
|
60
|
+
<html lang="en">
|
|
61
|
+
<head>
|
|
62
|
+
<meta charset="UTF-8">
|
|
63
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
64
|
+
<title>{{name}}</title>
|
|
65
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
66
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
67
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
68
|
+
</head>
|
|
69
|
+
<body id="app">
|
|
70
|
+
<script type="module" src="/src/index.tsx"></script>
|
|
71
|
+
</body>
|
|
72
|
+
</html>`,
|
|
73
|
+
"src/index.tsx": `import { render } from '@emberkit/core';
|
|
74
|
+
import { routes } from 'virtual:emberkit-routes';
|
|
75
|
+
import App from './routes/_layout';
|
|
76
|
+
import './styles.css';
|
|
77
|
+
|
|
78
|
+
const root = document.getElementById('app');
|
|
79
|
+
|
|
80
|
+
if (root) {
|
|
81
|
+
try {
|
|
82
|
+
render(App, root, { routes });
|
|
83
|
+
} catch (error) {
|
|
84
|
+
console.error('[entry] Render error:', error);
|
|
85
|
+
}
|
|
86
|
+
}`,
|
|
87
|
+
"src/styles.css": `@import "tailwindcss";
|
|
88
|
+
|
|
89
|
+
@theme {
|
|
90
|
+
--color-ember-50: #fff7ed;
|
|
91
|
+
--color-ember-100: #ffedd5;
|
|
92
|
+
--color-ember-200: #fed7aa;
|
|
93
|
+
--color-ember-300: #fdba74;
|
|
94
|
+
--color-ember-400: #fb923c;
|
|
95
|
+
--color-ember-500: #f97316;
|
|
96
|
+
--color-ember-600: #ea580c;
|
|
97
|
+
--color-ember-700: #c2410c;
|
|
98
|
+
--color-ember-800: #9a3412;
|
|
99
|
+
--color-ember-900: #7c2d12;
|
|
100
|
+
--font-sans: 'Inter', system-ui, sans-serif;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
body {
|
|
104
|
+
@apply bg-slate-900 text-slate-200 font-sans min-h-screen;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
a {
|
|
108
|
+
@apply text-inherit no-underline transition-colors;
|
|
109
|
+
}`,
|
|
110
|
+
"src/routes/_layout.tsx": `import type { RouteComponent } from '@emberkit/core';
|
|
111
|
+
import { Head } from '@emberkit/core';
|
|
112
|
+
|
|
113
|
+
const Layout: RouteComponent = ({ children }) => {
|
|
114
|
+
return (
|
|
115
|
+
<>
|
|
116
|
+
<Head>
|
|
117
|
+
<title>{{name}}</title>
|
|
118
|
+
<meta name="description" content="Built with EmberKit" />
|
|
119
|
+
</Head>
|
|
120
|
+
<div className="flex flex-col min-h-screen">
|
|
121
|
+
<header className="border-b border-slate-800 bg-slate-900/50 backdrop-blur sticky top-0 z-50">
|
|
122
|
+
<div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
123
|
+
<a href="/" className="flex items-center gap-2 group">
|
|
124
|
+
<span className="text-2xl">🔥</span>
|
|
125
|
+
<span className="text-xl font-bold bg-gradient-to-r from-ember-400 to-ember-500 bg-clip-text text-transparent">
|
|
126
|
+
{{name}}
|
|
127
|
+
</span>
|
|
128
|
+
</a>
|
|
129
|
+
<nav className="flex items-center gap-6">
|
|
130
|
+
<a href="/" className="text-slate-400 hover:text-ember-500 font-medium">Home</a>
|
|
131
|
+
<a href="/about" className="text-slate-400 hover:text-ember-500 font-medium">About</a>
|
|
132
|
+
<a href="https://emberkit.dev/docs" target="_blank" className="text-slate-400 hover:text-ember-500 font-medium">
|
|
133
|
+
Docs <span className="text-xs">↗</span>
|
|
134
|
+
</a>
|
|
135
|
+
</nav>
|
|
136
|
+
</div>
|
|
137
|
+
</header>
|
|
138
|
+
<main className="flex-1">{children}</main>
|
|
139
|
+
<footer className="border-t border-slate-800 py-8 text-center text-slate-500">
|
|
140
|
+
<p>Built with <a href="https://emberkit.dev" className="text-ember-500 hover:underline">EmberKit</a></p>
|
|
141
|
+
</footer>
|
|
142
|
+
</div>
|
|
143
|
+
</>
|
|
144
|
+
);
|
|
145
|
+
};
|
|
146
|
+
|
|
147
|
+
export default Layout;`,
|
|
148
|
+
"src/routes/index.tsx": `import type { RouteComponent } from '@emberkit/core';
|
|
149
|
+
import { signal } from '@emberkit/core';
|
|
150
|
+
|
|
151
|
+
const HomePage: RouteComponent = () => {
|
|
152
|
+
const count = signal(0);
|
|
153
|
+
|
|
154
|
+
return (
|
|
155
|
+
<div className="max-w-6xl mx-auto px-6 py-16 space-y-20">
|
|
156
|
+
<section className="text-center space-y-6">
|
|
157
|
+
<h1 className="text-5xl md:text-6xl font-extrabold tracking-tight">
|
|
158
|
+
Welcome to <span className="bg-gradient-to-r from-ember-400 via-ember-500 to-ember-600 bg-clip-text text-transparent">{{name}}</span>
|
|
159
|
+
</h1>
|
|
160
|
+
<p className="text-xl text-slate-400 max-w-2xl mx-auto">
|
|
161
|
+
A minimalist TypeScript-first JSX framework built for speed and simplicity.
|
|
162
|
+
Get started in seconds with hot module replacement and zero-config routing.
|
|
163
|
+
</p>
|
|
164
|
+
<div className="flex gap-4 justify-center pt-4">
|
|
165
|
+
<a href="/about" className="px-6 py-3 bg-ember-500 hover:bg-ember-600 text-white font-semibold rounded-lg transition-all hover:scale-105">
|
|
166
|
+
Learn More
|
|
167
|
+
</a>
|
|
168
|
+
<a href="https://emberkit.dev/docs" target="_blank" className="px-6 py-3 border border-slate-700 hover:border-ember-500 text-slate-300 hover:text-ember-500 font-semibold rounded-lg transition-all">
|
|
169
|
+
Read Docs →
|
|
170
|
+
</a>
|
|
171
|
+
</div>
|
|
172
|
+
</section>
|
|
173
|
+
|
|
174
|
+
<section className="grid md:grid-cols-3 gap-6">
|
|
175
|
+
<div className="p-6 rounded-xl border border-slate-800 bg-slate-800/30 hover:border-ember-500/50 transition-colors group">
|
|
176
|
+
<div className="text-3xl mb-4">⚡</div>
|
|
177
|
+
<h3 className="text-lg font-semibold mb-2">Lightning Fast</h3>
|
|
178
|
+
<p className="text-slate-400">Sub-10KB runtime with tree-shakeable architecture</p>
|
|
179
|
+
</div>
|
|
180
|
+
<div className="p-6 rounded-xl border border-slate-800 bg-slate-800/30 hover:border-ember-500/50 transition-colors group">
|
|
181
|
+
<div className="text-3xl mb-4">🔯</div>
|
|
182
|
+
<h3 className="text-lg font-semibold mb-2">TypeScript First</h3>
|
|
183
|
+
<p className="text-slate-400">Full type safety with intelligent autocomplete</p>
|
|
184
|
+
</div>
|
|
185
|
+
<div className="p-6 rounded-xl border border-slate-800 bg-slate-800/30 hover:border-ember-500/50 transition-colors group">
|
|
186
|
+
<div className="text-3xl mb-4">🛖</div>
|
|
187
|
+
<h3 className="text-lg font-semibold mb-2">File-Based Routing</h3>
|
|
188
|
+
<p className="text-slate-400">Routes automatically created from your file structure</p>
|
|
189
|
+
</div>
|
|
190
|
+
</section>
|
|
191
|
+
|
|
192
|
+
<section className="p-8 rounded-2xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 border border-slate-700 text-center">
|
|
193
|
+
<h2 className="text-2xl font-bold mb-6">Interactive Counter Demo</h2>
|
|
194
|
+
<div className="flex items-center justify-center gap-6">
|
|
195
|
+
<button
|
|
196
|
+
className="w-12 h-12 rounded-lg bg-slate-800 border border-slate-700 hover:bg-ember-500 hover:border-ember-500 text-ember-500 hover:text-white text-xl transition-all"
|
|
197
|
+
onClick={() => count.value--}
|
|
198
|
+
>
|
|
199
|
+
−
|
|
200
|
+
</button>
|
|
201
|
+
<span className="text-5xl font-bold tabular-nums min-w-[80px]">{count}</span>
|
|
202
|
+
<button
|
|
203
|
+
className="w-12 h-12 rounded-lg bg-slate-800 border border-slate-700 hover:bg-ember-500 hover:border-ember-500 text-ember-500 hover:text-white text-xl transition-all"
|
|
204
|
+
onClick={() => count.value++}
|
|
205
|
+
>
|
|
206
|
+
+
|
|
207
|
+
</button>
|
|
208
|
+
</div>
|
|
209
|
+
<p className="text-slate-500 mt-4 text-sm">Try clicking the buttons!</p>
|
|
210
|
+
</section>
|
|
211
|
+
|
|
212
|
+
<section className="text-center py-8">
|
|
213
|
+
<div className="inline-flex items-center gap-3 px-4 py-2 rounded-full bg-ember-500/10 border border-ember-500/20 text-ember-400">
|
|
214
|
+
<span className="w-2 h-2 rounded-full bg-ember-500 animate-pulse"></span>
|
|
215
|
+
<span className="text-sm font-medium">Ready to build something amazing?</span>
|
|
216
|
+
</div>
|
|
217
|
+
</section>
|
|
218
|
+
</div>
|
|
219
|
+
);
|
|
220
|
+
};
|
|
221
|
+
|
|
222
|
+
export default HomePage;`,
|
|
223
|
+
"src/routes/about.tsx": `import type { RouteComponent } from '@emberkit/core';
|
|
224
|
+
import { Head } from '@emberkit/core';
|
|
225
|
+
|
|
226
|
+
const AboutPage: RouteComponent = () => {
|
|
227
|
+
return (
|
|
228
|
+
<div className="max-w-3xl mx-auto px-6 py-16">
|
|
229
|
+
<Head>
|
|
230
|
+
<title>About - {{name}}</title>
|
|
231
|
+
</Head>
|
|
232
|
+
<h1 className="text-4xl font-bold mb-6">About {{name}}</h1>
|
|
233
|
+
<p className="text-slate-400 text-lg leading-relaxed mb-8">
|
|
234
|
+
EmberKit is a minimalist TypeScript-first JSX framework built for speed and simplicity.
|
|
235
|
+
It combines the best of modern frontend development with a lightweight runtime.
|
|
236
|
+
</p>
|
|
237
|
+
<div className="grid sm:grid-cols-3 gap-4 mb-8">
|
|
238
|
+
<div className="p-4 rounded-lg bg-slate-800/50 border border-slate-700">
|
|
239
|
+
<span className="text-ember-500 text-sm font-semibold">SPA & SSR</span>
|
|
240
|
+
<p className="text-slate-500 text-sm mt-1">Works in both modes</p>
|
|
241
|
+
</div>
|
|
242
|
+
<div className="p-4 rounded-lg bg-slate-800/50 border border-slate-700">
|
|
243
|
+
<span className="text-ember-500 text-sm font-semibold">Zero Config</span>
|
|
244
|
+
<p className="text-slate-500 text-sm mt-1">Sensible defaults</p>
|
|
245
|
+
</div>
|
|
246
|
+
<div className="p-4 rounded-lg bg-slate-800/50 border border-slate-700">
|
|
247
|
+
<span className="text-ember-500 text-sm font-semibold">HMR</span>
|
|
248
|
+
<p className="text-slate-500 text-sm mt-1">Hot module replacement</p>
|
|
249
|
+
</div>
|
|
250
|
+
</div>
|
|
251
|
+
<a href="/" className="inline-flex items-center gap-2 text-ember-500 hover:text-ember-400 font-medium">
|
|
252
|
+
← Back to Home
|
|
253
|
+
</a>
|
|
254
|
+
</div>
|
|
255
|
+
);
|
|
256
|
+
};
|
|
257
|
+
|
|
258
|
+
export default AboutPage;`,
|
|
259
|
+
};
|
|
260
|
+
export const withUiTemplate = {
|
|
261
|
+
"package.json": `{
|
|
262
|
+
"name": "{{name}}",
|
|
263
|
+
"version": "0.1.0",
|
|
264
|
+
"private": true,
|
|
265
|
+
"type": "module",
|
|
266
|
+
"scripts": {
|
|
267
|
+
"dev": "emberkit dev",
|
|
268
|
+
"build": "emberkit build",
|
|
269
|
+
"preview": "emberkit preview",
|
|
270
|
+
"lint": "eslint src --ext .ts,.tsx",
|
|
271
|
+
"format": "prettier --write \\"src/**/*.{ts,tsx}\\""
|
|
272
|
+
},
|
|
273
|
+
"dependencies": {
|
|
274
|
+
"@emberkit/core": "^0.2.4",
|
|
275
|
+
"@emberkit/ui": "^0.2.3"
|
|
276
|
+
},
|
|
277
|
+
"devDependencies": {
|
|
278
|
+
"@emberkit/cli": "^0.2.4",
|
|
279
|
+
"typescript": "^5.7.0",
|
|
280
|
+
"vite": "^6.0.0",
|
|
281
|
+
"tailwindcss": "^4.0.0",
|
|
282
|
+
"@tailwindcss/vite": "^4.0.0"
|
|
283
|
+
}
|
|
284
|
+
}`,
|
|
285
|
+
"tsconfig.json": `{
|
|
286
|
+
"compilerOptions": {
|
|
287
|
+
"target": "ES2022",
|
|
288
|
+
"module": "ESNext",
|
|
289
|
+
"moduleResolution": "bundler",
|
|
290
|
+
"jsx": "react-jsx",
|
|
291
|
+
"jsxImportSource": "@emberkit/core",
|
|
292
|
+
"strict": true,
|
|
293
|
+
"esModuleInterop": true,
|
|
294
|
+
"skipLibCheck": true,
|
|
295
|
+
"forceConsistentCasingInFileNames": true,
|
|
296
|
+
"resolveJsonModule": true,
|
|
297
|
+
"isolatedModules": true,
|
|
298
|
+
"noEmit": true,
|
|
299
|
+
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
|
300
|
+
"paths": {
|
|
301
|
+
"@/*": ["./src/*"]
|
|
302
|
+
}
|
|
303
|
+
},
|
|
304
|
+
"include": ["src"],
|
|
305
|
+
"exclude": ["node_modules", "dist"]
|
|
306
|
+
}`,
|
|
307
|
+
"vite.config.ts": `import { defineConfig } from 'vite';
|
|
308
|
+
import { emberkitVitePlugin } from '@emberkit/core/vite-plugin';
|
|
309
|
+
import tailwindcss from '@tailwindcss/vite';
|
|
310
|
+
|
|
311
|
+
export default defineConfig({
|
|
312
|
+
plugins: [emberkitVitePlugin(), tailwindcss()],
|
|
313
|
+
server: {
|
|
314
|
+
port: 3000,
|
|
315
|
+
host: 'localhost',
|
|
316
|
+
},
|
|
317
|
+
esbuild: {
|
|
318
|
+
jsxImportSource: '@emberkit/core',
|
|
319
|
+
},
|
|
320
|
+
});`,
|
|
321
|
+
"index.html": `<!DOCTYPE html>
|
|
322
|
+
<html lang="en">
|
|
323
|
+
<head>
|
|
324
|
+
<meta charset="UTF-8">
|
|
325
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
326
|
+
<title>{{name}}</title>
|
|
327
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
328
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
329
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
330
|
+
</head>
|
|
331
|
+
<body id="app">
|
|
332
|
+
<script type="module" src="/src/index.tsx"></script>
|
|
333
|
+
</body>
|
|
334
|
+
</html>`,
|
|
335
|
+
"src/index.tsx": `import { render } from '@emberkit/core';
|
|
336
|
+
import { routes } from 'virtual:emberkit-routes';
|
|
337
|
+
import App from './routes/_layout';
|
|
338
|
+
import './styles.css';
|
|
339
|
+
|
|
340
|
+
const root = document.getElementById('app');
|
|
341
|
+
|
|
342
|
+
if (root) {
|
|
343
|
+
try {
|
|
344
|
+
render(App, root, { routes });
|
|
345
|
+
} catch (error) {
|
|
346
|
+
console.error('[entry] Render error:', error);
|
|
347
|
+
}
|
|
348
|
+
}`,
|
|
349
|
+
"src/styles.css": `@import "tailwindcss";
|
|
350
|
+
|
|
351
|
+
@theme {
|
|
352
|
+
--color-ember-50: #fff7ed;
|
|
353
|
+
--color-ember-100: #ffedd5;
|
|
354
|
+
--color-ember-200: #fed7aa;
|
|
355
|
+
--color-ember-300: #fdba74;
|
|
356
|
+
--color-ember-400: #fb923c;
|
|
357
|
+
--color-ember-500: #f97316;
|
|
358
|
+
--color-ember-600: #ea580c;
|
|
359
|
+
--color-ember-700: #c2410c;
|
|
360
|
+
--color-ember-800: #9a3412;
|
|
361
|
+
--color-ember-900: #7c2d12;
|
|
362
|
+
--font-family-sans: 'Inter', system-ui, sans-serif;
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
body {
|
|
366
|
+
@apply bg-slate-900 text-slate-200 font-sans;
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
a {
|
|
370
|
+
@apply text-inherit no-underline;
|
|
371
|
+
}`,
|
|
372
|
+
"src/routes/_layout.tsx": `import type { RouteComponent } from '@emberkit/core';
|
|
373
|
+
import { Head } from '@emberkit/core';
|
|
374
|
+
import { DefaultLayout } from '@emberkit/ui';
|
|
375
|
+
|
|
376
|
+
const Layout: RouteComponent = ({ children }) => {
|
|
377
|
+
return (
|
|
378
|
+
<>
|
|
379
|
+
<Head>
|
|
380
|
+
<title>{{name}}</title>
|
|
381
|
+
<meta name="description" content="Built with EmberKit UI" />
|
|
382
|
+
</Head>
|
|
383
|
+
<DefaultLayout
|
|
384
|
+
logo={<span className="text-ember-500 font-bold text-xl">🔥 {{name}}</span>}
|
|
385
|
+
navItems={[
|
|
386
|
+
{ label: 'Home', href: '/' },
|
|
387
|
+
{ label: 'About', href: '/about' },
|
|
388
|
+
{ label: 'Docs', href: 'https://emberkit.dev/docs', external: true },
|
|
389
|
+
]}
|
|
390
|
+
>
|
|
391
|
+
{children}
|
|
392
|
+
</DefaultLayout>
|
|
393
|
+
</>
|
|
394
|
+
);
|
|
395
|
+
};
|
|
396
|
+
|
|
397
|
+
export default Layout;`,
|
|
398
|
+
"src/routes/index.tsx": `import type { RouteComponent } from '@emberkit/core';
|
|
399
|
+
import { Button, Card, Heading, Text, Badge, Input } from '@emberkit/ui';
|
|
400
|
+
import { signal } from '@emberkit/core';
|
|
401
|
+
|
|
402
|
+
const HomePage: RouteComponent = () => {
|
|
403
|
+
const email = signal('');
|
|
404
|
+
|
|
405
|
+
return (
|
|
406
|
+
<div className="space-y-16">
|
|
407
|
+
<section className="text-center py-16">
|
|
408
|
+
<Heading level="h1" size="4xl" weight="bold" className="mb-4">
|
|
409
|
+
Welcome to <span className="text-ember-500">{{name}}</span>
|
|
410
|
+
</Heading>
|
|
411
|
+
<Text size="xl" color="muted" className="max-w-2xl mx-auto mb-8">
|
|
412
|
+
A modern starter template with EmberKit UI components and Tailwind CSS.
|
|
413
|
+
Build beautiful interfaces with our pre-built component library.
|
|
414
|
+
</Text>
|
|
415
|
+
<div className="flex gap-4 justify-center">
|
|
416
|
+
<Button variant="primary" size="lg">
|
|
417
|
+
Get Started
|
|
418
|
+
</Button>
|
|
419
|
+
<Button variant="secondary" size="lg">
|
|
420
|
+
View Docs
|
|
421
|
+
</Button>
|
|
422
|
+
</div>
|
|
423
|
+
</section>
|
|
424
|
+
|
|
425
|
+
<section>
|
|
426
|
+
<Heading level="h2" size="2xl" weight="semibold" className="mb-8 text-center">
|
|
427
|
+
UI Components
|
|
428
|
+
</Heading>
|
|
429
|
+
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
430
|
+
<Card padding="lg">
|
|
431
|
+
<Badge variant="primary" size="sm" className="mb-2">Button</Badge>
|
|
432
|
+
<Heading level="h3" size="lg" weight="semibold" className="mb-2">
|
|
433
|
+
Button Variants
|
|
434
|
+
</Heading>
|
|
435
|
+
<Text color="muted" className="mb-4">
|
|
436
|
+
Primary, secondary, ghost, and more button styles.
|
|
437
|
+
</Text>
|
|
438
|
+
<div className="flex gap-2 flex-wrap">
|
|
439
|
+
<Button variant="primary">Primary</Button>
|
|
440
|
+
<Button variant="secondary">Secondary</Button>
|
|
441
|
+
<Button variant="ghost">Ghost</Button>
|
|
442
|
+
</div>
|
|
443
|
+
</Card>
|
|
444
|
+
|
|
445
|
+
<Card padding="lg">
|
|
446
|
+
<Badge variant="success" size="sm" className="mb-2">Cards</Badge>
|
|
447
|
+
<Heading level="h3" size="lg" weight="semibold" className="mb-2">
|
|
448
|
+
Card Component
|
|
449
|
+
</Heading>
|
|
450
|
+
<Text color="muted" className="mb-4">
|
|
451
|
+
Flexible card layout with padding variants.
|
|
452
|
+
</Text>
|
|
453
|
+
<Card padding="md" className="bg-slate-800">
|
|
454
|
+
<Text>Card content here</Text>
|
|
455
|
+
</Card>
|
|
456
|
+
</Card>
|
|
457
|
+
|
|
458
|
+
<Card padding="lg">
|
|
459
|
+
<Badge variant="info" size="sm" className="mb-2">Forms</Badge>
|
|
460
|
+
<Heading level="h3" size="lg" weight="semibold" className="mb-2">
|
|
461
|
+
Form Inputs
|
|
462
|
+
</Heading>
|
|
463
|
+
<Text color="muted" className="mb-4">
|
|
464
|
+
Styled input with label support.
|
|
465
|
+
</Text>
|
|
466
|
+
<Input
|
|
467
|
+
label="Email"
|
|
468
|
+
placeholder="Enter your email"
|
|
469
|
+
value={email.value}
|
|
470
|
+
onChange={(e) => { email.value = e.currentTarget.value; }}
|
|
471
|
+
/>
|
|
472
|
+
</Card>
|
|
473
|
+
</div>
|
|
474
|
+
</section>
|
|
475
|
+
|
|
476
|
+
<section className="text-center py-16 bg-slate-800/50 rounded-xl">
|
|
477
|
+
<Heading level="h2" size="2xl" weight="semibold" className="mb-4">
|
|
478
|
+
Ready to get started?
|
|
479
|
+
</Heading>
|
|
480
|
+
<Text color="muted" className="max-w-xl mx-auto mb-6">
|
|
481
|
+
Install dependencies and start building your next project with EmberKit.
|
|
482
|
+
</Text>
|
|
483
|
+
<Button variant="primary" size="lg">
|
|
484
|
+
Create Project →
|
|
485
|
+
</Button>
|
|
486
|
+
</section>
|
|
487
|
+
</div>
|
|
488
|
+
);
|
|
489
|
+
};
|
|
490
|
+
|
|
491
|
+
export default HomePage;`,
|
|
492
|
+
"src/routes/about.tsx": `import type { RouteComponent } from '@emberkit/core';
|
|
493
|
+
import { Head } from '@emberkit/core';
|
|
494
|
+
import { Heading, Text, Button } from '@emberkit/ui';
|
|
495
|
+
|
|
496
|
+
const AboutPage: RouteComponent = () => {
|
|
497
|
+
return (
|
|
498
|
+
<div className="max-w-2xl mx-auto py-12">
|
|
499
|
+
<Head>
|
|
500
|
+
<title>About - {{name}}</title>
|
|
501
|
+
</Head>
|
|
502
|
+
<Heading level="h1" size="3xl" weight="bold" className="mb-6">
|
|
503
|
+
About {{name}}
|
|
504
|
+
</Heading>
|
|
505
|
+
<Text size="lg" color="muted" className="mb-8">
|
|
506
|
+
This project was created with EmberKit and the UI component library.
|
|
507
|
+
It demonstrates how to build modern, beautiful interfaces with our
|
|
508
|
+
pre-built components and Tailwind CSS.
|
|
509
|
+
</Text>
|
|
510
|
+
<div className="space-y-4">
|
|
511
|
+
<div className="flex items-center gap-3 p-4 bg-slate-800 rounded-lg">
|
|
512
|
+
<span className="text-ember-500 text-2xl">✓</span>
|
|
513
|
+
<Text>TypeScript-first development</Text>
|
|
514
|
+
</div>
|
|
515
|
+
<div className="flex items-center gap-3 p-4 bg-slate-800 rounded-lg">
|
|
516
|
+
<span className="text-ember-500 text-2xl">✓</span>
|
|
517
|
+
<Text>Pre-built UI components</Text>
|
|
518
|
+
</div>
|
|
519
|
+
<div className="flex items-center gap-3 p-4 bg-slate-800 rounded-lg">
|
|
520
|
+
<span className="text-ember-500 text-2xl">✓</span>
|
|
521
|
+
<Text>Tailwind CSS integration</Text>
|
|
522
|
+
</div>
|
|
523
|
+
<div className="flex items-center gap-3 p-4 bg-slate-800 rounded-lg">
|
|
524
|
+
<span className="text-ember-500 text-2xl">✓</span>
|
|
525
|
+
<Text>File-based routing</Text>
|
|
526
|
+
</div>
|
|
527
|
+
</div>
|
|
528
|
+
<div className="mt-8">
|
|
529
|
+
<Button variant="secondary">← Back to Home</Button>
|
|
530
|
+
</div>
|
|
531
|
+
</div>
|
|
532
|
+
);
|
|
533
|
+
};
|
|
534
|
+
|
|
535
|
+
export default AboutPage;`,
|
|
536
|
+
};
|