clawfire 0.2.0 → 0.3.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/README.md +23 -8
- package/dist/cli.js +14 -4
- package/dist/dev-server-TGEKP4YE.js +2347 -0
- package/dist/dev.cjs +1165 -38
- package/dist/dev.cjs.map +1 -1
- package/dist/dev.d.cts +19 -23
- package/dist/dev.d.ts +19 -23
- package/dist/dev.js +1165 -38
- package/dist/dev.js.map +1 -1
- package/package.json +1 -1
- package/templates/CLAUDE.md +18 -1
- package/templates/starter/.vscode/settings.json +11 -0
- package/templates/starter/CLAUDE.md +84 -4
- package/templates/starter/app/components/footer.html +5 -0
- package/templates/starter/app/components/nav.html +14 -0
- package/templates/starter/app/pages/_404.html +9 -0
- package/templates/starter/app/pages/_layout.html +46 -0
- package/templates/starter/app/pages/about.html +84 -0
- package/templates/starter/app/pages/index.html +192 -0
- package/templates/starter/app/pages/todos/index.html +173 -0
- package/templates/starter/package.json +2 -1
- package/templates/starter/public/index.html +9 -330
- package/templates/starter/tailwind.config.js +27 -0
- package/dist/dev-server-QTNE5N7I.js +0 -1220
package/package.json
CHANGED
package/templates/CLAUDE.md
CHANGED
|
@@ -15,13 +15,22 @@ This is a Clawfire project — an AI-First Firebase app framework.
|
|
|
15
15
|
## Project Structure
|
|
16
16
|
```
|
|
17
17
|
app/
|
|
18
|
+
pages/ ← File-based page routing (Tailwind + layouts)
|
|
19
|
+
_layout.html ← Root layout (wraps all pages, <slot />)
|
|
20
|
+
index.html ← Home page (/)
|
|
21
|
+
about.html ← /about page
|
|
22
|
+
todos/
|
|
23
|
+
index.html ← /todos page
|
|
24
|
+
components/ ← Reusable HTML components (<c-name />)
|
|
25
|
+
nav.html ← <c-nav /> navigation
|
|
26
|
+
footer.html ← <c-footer /> footer
|
|
18
27
|
routes/ ← API route handlers (file-based routing)
|
|
19
28
|
schemas/ ← Model definitions (Firestore collections)
|
|
20
29
|
generated/ ← Auto-generated files (DO NOT EDIT)
|
|
21
30
|
api-client.ts ← Typed API client
|
|
22
31
|
manifest.json ← API manifest
|
|
23
32
|
functions/ ← Firebase Functions entry point
|
|
24
|
-
public/ ← Static files
|
|
33
|
+
public/ ← Static files (CSS, images, fonts)
|
|
25
34
|
firebase.json ← Firebase config
|
|
26
35
|
firestore.rules ← Firestore security rules
|
|
27
36
|
clawfire.config.ts ← Clawfire configuration
|
|
@@ -61,6 +70,14 @@ export const Product = defineModel({
|
|
|
61
70
|
});
|
|
62
71
|
```
|
|
63
72
|
|
|
73
|
+
### Page System
|
|
74
|
+
File-based page routing with layouts and components:
|
|
75
|
+
- `app/pages/about.html` → `/about`
|
|
76
|
+
- `_layout.html` wraps pages via `<slot />`
|
|
77
|
+
- `<c-name />` inserts `app/components/name.html`
|
|
78
|
+
- SPA navigation: internal links swap content without reload
|
|
79
|
+
- Tailwind CSS via CDN (no build step)
|
|
80
|
+
|
|
64
81
|
### All APIs are POST
|
|
65
82
|
Clawfire does not use HTTP methods. Everything is POST with JSON body.
|
|
66
83
|
|
|
@@ -28,6 +28,16 @@ This is a **Clawfire** project — an AI-First Firebase app framework.
|
|
|
28
28
|
```
|
|
29
29
|
app/
|
|
30
30
|
store.ts ← 인메모리 데이터 저장소 (Firebase 없이 동작)
|
|
31
|
+
pages/ ← 파일 기반 페이지 라우팅 (프론트엔드)
|
|
32
|
+
_layout.html ← 루트 레이아웃 (모든 페이지 래핑)
|
|
33
|
+
_404.html ← 404 에러 페이지
|
|
34
|
+
index.html ← 홈 페이지 (/)
|
|
35
|
+
about.html ← /about 페이지
|
|
36
|
+
todos/
|
|
37
|
+
index.html ← /todos 페이지
|
|
38
|
+
components/ ← 재사용 HTML 컴포넌트
|
|
39
|
+
nav.html ← <c-nav /> 네비게이션
|
|
40
|
+
footer.html ← <c-footer /> 푸터
|
|
31
41
|
routes/ ← API 라우트 핸들러 (파일 기반 라우팅)
|
|
32
42
|
health.ts ← 서버 상태 확인
|
|
33
43
|
todos/ ← Todo CRUD
|
|
@@ -37,8 +47,7 @@ app/
|
|
|
37
47
|
delete.ts
|
|
38
48
|
schemas/ ← Firestore 모델 정의
|
|
39
49
|
todo.ts
|
|
40
|
-
public/
|
|
41
|
-
index.html ← 프론트엔드 (바닐라 JS, 빌드 불필요)
|
|
50
|
+
public/ ← 정적 파일 (CSS, JS, 이미지, 폰트)
|
|
42
51
|
generated/ ← 자동 생성 파일 (DO NOT EDIT)
|
|
43
52
|
functions/
|
|
44
53
|
index.ts ← Firebase Functions 진입점 (배포용)
|
|
@@ -200,9 +209,80 @@ app/routes/products/
|
|
|
200
209
|
|
|
201
210
|
`npm run dev` → 라우트 자동 발견, 핫 리로드.
|
|
202
211
|
|
|
203
|
-
### Step 5: Frontend
|
|
212
|
+
### Step 5: Frontend 페이지 추가
|
|
204
213
|
|
|
205
|
-
`
|
|
214
|
+
`app/pages/products/index.html`에 UI 페이지 생성. 레이아웃과 컴포넌트 자동 적용.
|
|
215
|
+
|
|
216
|
+
---
|
|
217
|
+
|
|
218
|
+
## Page System (프론트엔드)
|
|
219
|
+
|
|
220
|
+
Clawfire는 파일 기반 페이지 라우팅을 지원합니다. `app/pages/` 디렉터리가 있으면 자동 활성화.
|
|
221
|
+
|
|
222
|
+
### 페이지 라우팅
|
|
223
|
+
|
|
224
|
+
```
|
|
225
|
+
app/pages/index.html → /
|
|
226
|
+
app/pages/about.html → /about
|
|
227
|
+
app/pages/todos/index.html → /todos
|
|
228
|
+
app/pages/blog/index.html → /blog
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
### 레이아웃 (`_layout.html`)
|
|
232
|
+
|
|
233
|
+
`_layout.html`은 해당 디렉터리와 하위 페이지를 래핑합니다.
|
|
234
|
+
`<slot />`이 페이지 콘텐츠로 대체됩니다.
|
|
235
|
+
|
|
236
|
+
```html
|
|
237
|
+
<!DOCTYPE html>
|
|
238
|
+
<html>
|
|
239
|
+
<head>...</head>
|
|
240
|
+
<body>
|
|
241
|
+
<c-nav />
|
|
242
|
+
<main><slot /></main>
|
|
243
|
+
<c-footer />
|
|
244
|
+
</body>
|
|
245
|
+
</html>
|
|
246
|
+
```
|
|
247
|
+
|
|
248
|
+
중첩 레이아웃 지원: 하위 디렉터리의 `_layout.html`이 상위 레이아웃 내에 중첩됩니다.
|
|
249
|
+
|
|
250
|
+
### 컴포넌트 (`<c-name />`)
|
|
251
|
+
|
|
252
|
+
`app/components/name.html` 파일이 `<c-name />`으로 자동 삽입됩니다.
|
|
253
|
+
|
|
254
|
+
```html
|
|
255
|
+
<!-- app/components/nav.html의 내용이 여기에 삽입 -->
|
|
256
|
+
<c-nav />
|
|
257
|
+
<c-footer />
|
|
258
|
+
```
|
|
259
|
+
|
|
260
|
+
### 메타데이터 (`<!-- @key: value -->`)
|
|
261
|
+
|
|
262
|
+
페이지 파일 상단에 메타데이터를 HTML 주석으로 작성합니다:
|
|
263
|
+
|
|
264
|
+
```html
|
|
265
|
+
<!-- @title: About Us -->
|
|
266
|
+
<!-- @description: Learn about our team -->
|
|
267
|
+
<h1>About</h1>
|
|
268
|
+
```
|
|
269
|
+
|
|
270
|
+
### 404 페이지
|
|
271
|
+
|
|
272
|
+
`app/pages/_404.html`이 존재하면 매칭되지 않는 URL에 자동 표시됩니다.
|
|
273
|
+
|
|
274
|
+
### SPA 네비게이션
|
|
275
|
+
|
|
276
|
+
내부 링크(`<a href="/about">`)는 자동으로 SPA 방식으로 작동합니다.
|
|
277
|
+
전체 페이지 리로드 없이 `#clawfire-page` 영역만 교체됩니다.
|
|
278
|
+
|
|
279
|
+
- `clawfire:navigate` 이벤트로 페이지 전환 감지 가능
|
|
280
|
+
- `data-active` 속성으로 현재 네비게이션 활성화 상태 표시
|
|
281
|
+
- 외부 링크, target="_blank", Ctrl/Meta 클릭은 기본 동작 유지
|
|
282
|
+
|
|
283
|
+
### Tailwind CSS
|
|
284
|
+
|
|
285
|
+
루트 레이아웃에 Tailwind CDN이 포함되어 있습니다. 빌드 불필요.
|
|
206
286
|
|
|
207
287
|
---
|
|
208
288
|
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<nav class="sticky top-0 z-40 bg-zinc-950/80 backdrop-blur-md border-b border-zinc-800">
|
|
2
|
+
<div class="max-w-4xl mx-auto px-4 flex items-center justify-between h-14">
|
|
3
|
+
<a href="/" class="text-brand-500 font-bold text-lg tracking-tight hover:text-brand-400 transition-colors">
|
|
4
|
+
Clawfire
|
|
5
|
+
</a>
|
|
6
|
+
<div class="flex items-center gap-1" id="nav-links">
|
|
7
|
+
<a href="/" class="px-3 py-1.5 text-sm text-zinc-400 hover:text-zinc-200 border-b-2 border-transparent transition-colors">Home</a>
|
|
8
|
+
<a href="/todos" class="px-3 py-1.5 text-sm text-zinc-400 hover:text-zinc-200 border-b-2 border-transparent transition-colors">Todos</a>
|
|
9
|
+
<a href="/about" class="px-3 py-1.5 text-sm text-zinc-400 hover:text-zinc-200 border-b-2 border-transparent transition-colors">About</a>
|
|
10
|
+
<a href="http://localhost:3456" target="_blank" class="ml-2 px-3 py-1.5 text-xs bg-zinc-800 text-zinc-400 rounded-md hover:bg-zinc-700 hover:text-zinc-200 transition-colors">API Playground ↗</a>
|
|
11
|
+
<a href="https://www.npmjs.com/package/clawfire" target="_blank" class="ml-1 px-2 py-1 text-xs text-zinc-500 hover:text-brand-400 transition-colors" title="npm package">npm ↗</a>
|
|
12
|
+
</div>
|
|
13
|
+
</div>
|
|
14
|
+
</nav>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<!-- @title: 404 — Page Not Found -->
|
|
2
|
+
<div class="flex flex-col items-center justify-center py-24 text-center">
|
|
3
|
+
<div class="text-6xl font-bold text-zinc-700 mb-4">404</div>
|
|
4
|
+
<h1 class="text-2xl font-semibold text-zinc-300 mb-2">Page Not Found</h1>
|
|
5
|
+
<p class="text-zinc-500 mb-8">The page you're looking for doesn't exist.</p>
|
|
6
|
+
<a href="/" class="px-6 py-2 bg-brand-500 text-white rounded-lg hover:bg-brand-600 transition-colors font-medium">
|
|
7
|
+
Go Home
|
|
8
|
+
</a>
|
|
9
|
+
</div>
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Clawfire App</title>
|
|
7
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
8
|
+
<script>
|
|
9
|
+
tailwind.config = {
|
|
10
|
+
theme: {
|
|
11
|
+
extend: {
|
|
12
|
+
colors: {
|
|
13
|
+
brand: {
|
|
14
|
+
50: '#fff7ed',
|
|
15
|
+
100: '#ffedd5',
|
|
16
|
+
200: '#fed7aa',
|
|
17
|
+
300: '#fdba74',
|
|
18
|
+
400: '#fb923c',
|
|
19
|
+
500: '#f97316',
|
|
20
|
+
600: '#ea580c',
|
|
21
|
+
700: '#c2410c',
|
|
22
|
+
800: '#9a3412',
|
|
23
|
+
900: '#7c2d12',
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
},
|
|
27
|
+
},
|
|
28
|
+
};
|
|
29
|
+
</script>
|
|
30
|
+
<style>
|
|
31
|
+
[data-active="true"] {
|
|
32
|
+
color: #f97316 !important;
|
|
33
|
+
border-bottom-color: #f97316 !important;
|
|
34
|
+
}
|
|
35
|
+
</style>
|
|
36
|
+
</head>
|
|
37
|
+
<body class="bg-zinc-950 text-zinc-200 min-h-screen flex flex-col">
|
|
38
|
+
<c-nav />
|
|
39
|
+
|
|
40
|
+
<main class="flex-1 w-full max-w-4xl mx-auto px-4 py-8">
|
|
41
|
+
<slot />
|
|
42
|
+
</main>
|
|
43
|
+
|
|
44
|
+
<c-footer />
|
|
45
|
+
</body>
|
|
46
|
+
</html>
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
<!-- @title: About — Clawfire -->
|
|
2
|
+
|
|
3
|
+
<div class="max-w-2xl mx-auto">
|
|
4
|
+
<h1 class="text-3xl font-bold mb-6">
|
|
5
|
+
About <span class="text-brand-500">Clawfire</span>
|
|
6
|
+
</h1>
|
|
7
|
+
|
|
8
|
+
<p class="text-zinc-400 mb-4 text-lg leading-relaxed">
|
|
9
|
+
Clawfire is an AI-First Firebase app framework. You describe what you want,
|
|
10
|
+
and Claude builds it — APIs, models, auth, security rules, and deployment.
|
|
11
|
+
</p>
|
|
12
|
+
|
|
13
|
+
<p class="text-zinc-500 mb-8 text-sm">
|
|
14
|
+
<a href="https://www.npmjs.com/package/clawfire" target="_blank" class="text-brand-400 hover:underline">View on npm ↗</a>
|
|
15
|
+
</p>
|
|
16
|
+
|
|
17
|
+
<!-- Stack -->
|
|
18
|
+
<div class="bg-zinc-900 border border-zinc-800 rounded-xl p-6 mb-8">
|
|
19
|
+
<h2 class="text-xl font-semibold mb-4">Stack</h2>
|
|
20
|
+
<div class="grid grid-cols-2 gap-3 text-sm">
|
|
21
|
+
<div class="text-zinc-500">Database</div>
|
|
22
|
+
<div class="text-zinc-300">Firestore</div>
|
|
23
|
+
<div class="text-zinc-500">Auth</div>
|
|
24
|
+
<div class="text-zinc-300">Firebase Auth</div>
|
|
25
|
+
<div class="text-zinc-500">Hosting</div>
|
|
26
|
+
<div class="text-zinc-300">Firebase Hosting</div>
|
|
27
|
+
<div class="text-zinc-500">Backend</div>
|
|
28
|
+
<div class="text-zinc-300">Firebase Functions</div>
|
|
29
|
+
<div class="text-zinc-500">Schema</div>
|
|
30
|
+
<div class="text-zinc-300">Zod</div>
|
|
31
|
+
<div class="text-zinc-500">Language</div>
|
|
32
|
+
<div class="text-zinc-300">TypeScript</div>
|
|
33
|
+
<div class="text-zinc-500">Styling</div>
|
|
34
|
+
<div class="text-zinc-300">Tailwind CSS (CDN)</div>
|
|
35
|
+
<div class="text-zinc-500">Framework</div>
|
|
36
|
+
<div class="text-zinc-300 font-medium text-brand-400">Clawfire</div>
|
|
37
|
+
</div>
|
|
38
|
+
<p class="text-xs text-zinc-600 mt-4">
|
|
39
|
+
This stack is fixed by design. Clawfire is opinionated — one way to do things, done well.
|
|
40
|
+
</p>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<!-- AI Skills -->
|
|
44
|
+
<div class="bg-zinc-900 border border-zinc-800 rounded-xl p-6 mb-8">
|
|
45
|
+
<h2 class="text-xl font-semibold mb-4">AI Skills</h2>
|
|
46
|
+
<p class="text-zinc-500 text-sm mb-4">Run these in Claude Code to manage your project:</p>
|
|
47
|
+
<div class="space-y-3">
|
|
48
|
+
<div class="flex items-start gap-3">
|
|
49
|
+
<code class="text-brand-400 text-sm font-mono whitespace-nowrap">/clawfire-init</code>
|
|
50
|
+
<span class="text-zinc-400 text-sm">Initialize project & connect Firebase</span>
|
|
51
|
+
</div>
|
|
52
|
+
<div class="flex items-start gap-3">
|
|
53
|
+
<code class="text-brand-400 text-sm font-mono whitespace-nowrap">/clawfire-api</code>
|
|
54
|
+
<span class="text-zinc-400 text-sm">Create/modify APIs with auto client generation</span>
|
|
55
|
+
</div>
|
|
56
|
+
<div class="flex items-start gap-3">
|
|
57
|
+
<code class="text-brand-400 text-sm font-mono whitespace-nowrap">/clawfire-model</code>
|
|
58
|
+
<span class="text-zinc-400 text-sm">Create/modify models with auto rules & indexes</span>
|
|
59
|
+
</div>
|
|
60
|
+
<div class="flex items-start gap-3">
|
|
61
|
+
<code class="text-brand-400 text-sm font-mono whitespace-nowrap">/clawfire-auth</code>
|
|
62
|
+
<span class="text-zinc-400 text-sm">Configure authentication & authorization</span>
|
|
63
|
+
</div>
|
|
64
|
+
<div class="flex items-start gap-3">
|
|
65
|
+
<code class="text-brand-400 text-sm font-mono whitespace-nowrap">/clawfire-deploy</code>
|
|
66
|
+
<span class="text-zinc-400 text-sm">Deploy to Firebase (explicit request only)</span>
|
|
67
|
+
</div>
|
|
68
|
+
<div class="flex items-start gap-3">
|
|
69
|
+
<code class="text-brand-400 text-sm font-mono whitespace-nowrap">/clawfire-diagnose</code>
|
|
70
|
+
<span class="text-zinc-400 text-sm">Detect issues & suggest fixes</span>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
|
|
75
|
+
<!-- Links -->
|
|
76
|
+
<div class="bg-zinc-900 border border-zinc-800 rounded-xl p-6">
|
|
77
|
+
<h2 class="text-xl font-semibold mb-4">Links</h2>
|
|
78
|
+
<div class="space-y-2 text-sm">
|
|
79
|
+
<div><a href="https://www.npmjs.com/package/clawfire" target="_blank" class="text-brand-400 hover:underline">npm package ↗</a></div>
|
|
80
|
+
<div><a href="https://github.com/nohsangwoo/autofire" target="_blank" class="text-zinc-400 hover:text-brand-400 transition-colors">GitHub repository ↗</a></div>
|
|
81
|
+
<div><a href="http://localhost:3456" target="_blank" class="text-zinc-400 hover:text-brand-400 transition-colors">API Playground ↗</a></div>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
<!-- @title: Clawfire — AI-First Firebase Framework -->
|
|
2
|
+
<!-- @description: Speak. Build. Deploy. Your comprehensive getting started dashboard. -->
|
|
3
|
+
|
|
4
|
+
<!-- Hero -->
|
|
5
|
+
<div class="text-center py-12 mb-8">
|
|
6
|
+
<h1 class="text-5xl font-bold mb-4">
|
|
7
|
+
<span class="bg-gradient-to-r from-brand-400 to-brand-600 bg-clip-text text-transparent">Clawfire</span>
|
|
8
|
+
</h1>
|
|
9
|
+
<p class="text-xl text-zinc-400 mb-2">AI-First Firebase App Framework</p>
|
|
10
|
+
<p class="text-zinc-500 mb-4">Speak. Build. Deploy.</p>
|
|
11
|
+
<a href="https://www.npmjs.com/package/clawfire" target="_blank" class="inline-flex items-center gap-2 text-sm text-zinc-500 hover:text-brand-400 transition-colors">
|
|
12
|
+
<img src="https://img.shields.io/npm/v/clawfire?color=f97316&label=npm" alt="npm version" class="h-5" />
|
|
13
|
+
</a>
|
|
14
|
+
</div>
|
|
15
|
+
|
|
16
|
+
<!-- You're looking at it -->
|
|
17
|
+
<div class="bg-brand-500/5 border border-brand-500/20 rounded-xl p-5 mb-8">
|
|
18
|
+
<div class="flex items-start gap-3">
|
|
19
|
+
<span class="text-brand-400 text-xl mt-0.5">💡</span>
|
|
20
|
+
<div>
|
|
21
|
+
<p class="text-sm text-zinc-300 font-medium mb-1">You're looking at the page system in action</p>
|
|
22
|
+
<p class="text-sm text-zinc-500">
|
|
23
|
+
This page is <code class="text-brand-400 bg-zinc-800 px-1.5 py-0.5 rounded text-xs">app/pages/index.html</code>.
|
|
24
|
+
The layout wrapping it is <code class="text-brand-400 bg-zinc-800 px-1.5 py-0.5 rounded text-xs">app/pages/_layout.html</code>.
|
|
25
|
+
The nav above is <code class="text-brand-400 bg-zinc-800 px-1.5 py-0.5 rounded text-xs"><c-nav /></code> from <code class="text-brand-400 bg-zinc-800 px-1.5 py-0.5 rounded text-xs">app/components/nav.html</code>.
|
|
26
|
+
Edit any of these files and see changes instantly.
|
|
27
|
+
</p>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
<!-- Quick Actions -->
|
|
33
|
+
<div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-10">
|
|
34
|
+
<a href="/todos" class="flex flex-col items-center gap-2 p-4 bg-zinc-900 border border-zinc-800 rounded-xl hover:border-brand-500/50 transition-colors group">
|
|
35
|
+
<span class="text-2xl">☑</span>
|
|
36
|
+
<span class="text-sm font-medium text-zinc-300 group-hover:text-brand-400 transition-colors">Todo App</span>
|
|
37
|
+
</a>
|
|
38
|
+
<a href="http://localhost:3456" target="_blank" class="flex flex-col items-center gap-2 p-4 bg-zinc-900 border border-zinc-800 rounded-xl hover:border-brand-500/50 transition-colors group">
|
|
39
|
+
<span class="text-2xl">⚡</span>
|
|
40
|
+
<span class="text-sm font-medium text-zinc-300 group-hover:text-brand-400 transition-colors">API Playground</span>
|
|
41
|
+
</a>
|
|
42
|
+
<a href="/about" class="flex flex-col items-center gap-2 p-4 bg-zinc-900 border border-zinc-800 rounded-xl hover:border-brand-500/50 transition-colors group">
|
|
43
|
+
<span class="text-2xl">📚</span>
|
|
44
|
+
<span class="text-sm font-medium text-zinc-300 group-hover:text-brand-400 transition-colors">About</span>
|
|
45
|
+
</a>
|
|
46
|
+
<a href="https://www.npmjs.com/package/clawfire" target="_blank" class="flex flex-col items-center gap-2 p-4 bg-zinc-900 border border-zinc-800 rounded-xl hover:border-brand-500/50 transition-colors group">
|
|
47
|
+
<span class="text-2xl">📦</span>
|
|
48
|
+
<span class="text-sm font-medium text-zinc-300 group-hover:text-brand-400 transition-colors">npm Docs</span>
|
|
49
|
+
</a>
|
|
50
|
+
</div>
|
|
51
|
+
|
|
52
|
+
<!-- Project Structure -->
|
|
53
|
+
<div class="bg-zinc-900 border border-zinc-800 rounded-xl p-6 mb-8">
|
|
54
|
+
<h2 class="text-lg font-semibold mb-4">Project Structure</h2>
|
|
55
|
+
<div class="font-mono text-sm space-y-0.5 text-zinc-400">
|
|
56
|
+
<div><span class="text-brand-400">app/pages/</span> <span class="text-zinc-600 ml-2">← File-based page routing (this page lives here)</span></div>
|
|
57
|
+
<div class="pl-4">_layout.html <span class="text-zinc-600 ml-2">← Root layout wrapping all pages</span></div>
|
|
58
|
+
<div class="pl-4">index.html <span class="text-zinc-600 ml-2">← Home page (<code class="text-zinc-500">/</code>)</span></div>
|
|
59
|
+
<div class="pl-4">about.html <span class="text-zinc-600 ml-2">← <code class="text-zinc-500">/about</code></span></div>
|
|
60
|
+
<div class="pl-4">todos/index.html <span class="text-zinc-600 ml-2">← <code class="text-zinc-500">/todos</code></span></div>
|
|
61
|
+
<div class="mt-2"><span class="text-brand-400">app/components/</span> <span class="text-zinc-600 ml-2">← Reusable HTML components</span></div>
|
|
62
|
+
<div class="pl-4">nav.html <span class="text-zinc-600 ml-2">← Used as <code class="text-zinc-500"><c-nav /></code></span></div>
|
|
63
|
+
<div class="pl-4">footer.html <span class="text-zinc-600 ml-2">← Used as <code class="text-zinc-500"><c-footer /></code></span></div>
|
|
64
|
+
<div class="mt-2"><span class="text-brand-400">app/routes/</span> <span class="text-zinc-600 ml-2">← API endpoints (POST, Zod validation)</span></div>
|
|
65
|
+
<div class="pl-4">health.ts <span class="text-zinc-600 ml-2">← <code class="text-zinc-500">POST /api/health</code></span></div>
|
|
66
|
+
<div class="pl-4">todos/*.ts <span class="text-zinc-600 ml-2">← Todo CRUD APIs</span></div>
|
|
67
|
+
<div class="mt-2"><span class="text-brand-400">app/schemas/</span> <span class="text-zinc-600 ml-2">← Firestore model definitions</span></div>
|
|
68
|
+
<div class="mt-2"><span class="text-brand-400">public/</span> <span class="text-zinc-600 ml-2">← Static assets (CSS, images, fonts)</span></div>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
|
|
72
|
+
<!-- How Pages Work -->
|
|
73
|
+
<h2 class="text-lg font-semibold mb-4">How Pages Work</h2>
|
|
74
|
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-10">
|
|
75
|
+
<div class="bg-zinc-900 border border-zinc-800 rounded-xl p-5">
|
|
76
|
+
<div class="text-brand-500 text-xl mb-2">📄</div>
|
|
77
|
+
<h3 class="font-semibold text-sm mb-2">File Routing</h3>
|
|
78
|
+
<p class="text-zinc-500 text-xs mb-3">File path = page URL. No config needed.</p>
|
|
79
|
+
<div class="font-mono text-xs space-y-1 text-zinc-400">
|
|
80
|
+
<div><code class="text-brand-400">app/pages/about.html</code> → <code>/about</code></div>
|
|
81
|
+
<div><code class="text-brand-400">app/pages/todos/index.html</code> → <code>/todos</code></div>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
|
|
85
|
+
<div class="bg-zinc-900 border border-zinc-800 rounded-xl p-5">
|
|
86
|
+
<div class="text-brand-500 text-xl mb-2">🎨</div>
|
|
87
|
+
<h3 class="font-semibold text-sm mb-2">Layouts</h3>
|
|
88
|
+
<p class="text-zinc-500 text-xs mb-3"><code class="text-brand-400 bg-zinc-800 px-1 rounded">_layout.html</code> wraps all pages in that directory.</p>
|
|
89
|
+
<div class="font-mono text-xs text-zinc-400">
|
|
90
|
+
<code class="text-brand-400"><slot /></code> is replaced with page content.
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
|
|
94
|
+
<div class="bg-zinc-900 border border-zinc-800 rounded-xl p-5">
|
|
95
|
+
<div class="text-brand-500 text-xl mb-2">🧩</div>
|
|
96
|
+
<h3 class="font-semibold text-sm mb-2">Components</h3>
|
|
97
|
+
<p class="text-zinc-500 text-xs mb-3"><code class="text-brand-400 bg-zinc-800 px-1 rounded"><c-name /></code> inserts <code class="text-brand-400 bg-zinc-800 px-1 rounded">app/components/name.html</code>.</p>
|
|
98
|
+
<div class="font-mono text-xs text-zinc-400">
|
|
99
|
+
<code class="text-brand-400"><c-nav /></code>, <code class="text-brand-400"><c-footer /></code>
|
|
100
|
+
</div>
|
|
101
|
+
</div>
|
|
102
|
+
|
|
103
|
+
<div class="bg-zinc-900 border border-zinc-800 rounded-xl p-5">
|
|
104
|
+
<div class="text-brand-500 text-xl mb-2">⚡</div>
|
|
105
|
+
<h3 class="font-semibold text-sm mb-2">SPA Navigation</h3>
|
|
106
|
+
<p class="text-zinc-500 text-xs mb-3">Internal links swap page content without full reload.</p>
|
|
107
|
+
<div class="font-mono text-xs text-zinc-400">
|
|
108
|
+
Try clicking <a href="/about" class="text-brand-400 underline">About</a> or <a href="/todos" class="text-brand-400 underline">Todos</a> above.
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
</div>
|
|
112
|
+
|
|
113
|
+
<!-- How APIs Work -->
|
|
114
|
+
<div class="bg-zinc-900 border border-zinc-800 rounded-xl p-6 mb-8">
|
|
115
|
+
<h2 class="text-lg font-semibold mb-4">How APIs Work</h2>
|
|
116
|
+
<p class="text-zinc-500 text-sm mb-4">
|
|
117
|
+
Every file in <code class="text-brand-400 bg-zinc-800 px-1.5 py-0.5 rounded text-xs">app/routes/</code> becomes a POST endpoint.
|
|
118
|
+
Define input/output with Zod schemas, and get type safety + auto-generated docs.
|
|
119
|
+
</p>
|
|
120
|
+
<div class="bg-zinc-950 rounded-lg p-4 font-mono text-xs text-zinc-400 overflow-x-auto mb-4">
|
|
121
|
+
<div class="text-zinc-600">// app/routes/todos/create.ts</div>
|
|
122
|
+
<div><span class="text-purple-400">import</span> { defineAPI, z } <span class="text-purple-400">from</span> <span class="text-green-400">"clawfire"</span>;</div>
|
|
123
|
+
<div class="mt-2"><span class="text-purple-400">export default</span> <span class="text-blue-400">defineAPI</span>({</div>
|
|
124
|
+
<div class="pl-4">input: z.<span class="text-blue-400">object</span>({ title: z.<span class="text-blue-400">string</span>() }),</div>
|
|
125
|
+
<div class="pl-4">output: z.<span class="text-blue-400">object</span>({ todo: z.<span class="text-blue-400">object</span>({ id: z.<span class="text-blue-400">string</span>(), title: z.<span class="text-blue-400">string</span>() }) }),</div>
|
|
126
|
+
<div class="pl-4">meta: { description: <span class="text-green-400">"Create a todo"</span>, auth: <span class="text-green-400">"public"</span> },</div>
|
|
127
|
+
<div class="pl-4">handler: <span class="text-purple-400">async</span> (input) => { <span class="text-zinc-600">/* ... */</span> },</div>
|
|
128
|
+
<div>});</div>
|
|
129
|
+
</div>
|
|
130
|
+
<a href="http://localhost:3456" target="_blank" class="inline-flex items-center gap-2 px-4 py-2 bg-brand-500 text-white rounded-lg hover:bg-brand-600 transition-colors font-medium text-sm">
|
|
131
|
+
Open Playground ↗
|
|
132
|
+
</a>
|
|
133
|
+
</div>
|
|
134
|
+
|
|
135
|
+
<!-- Firebase Stack -->
|
|
136
|
+
<div class="bg-zinc-900 border border-zinc-800 rounded-xl p-6 mb-8">
|
|
137
|
+
<h2 class="text-lg font-semibold mb-4">Firebase Stack</h2>
|
|
138
|
+
<div class="grid grid-cols-2 gap-x-8 gap-y-2 text-sm mb-4">
|
|
139
|
+
<div class="text-zinc-500">Database</div><div class="text-zinc-300">Firestore</div>
|
|
140
|
+
<div class="text-zinc-500">Auth</div><div class="text-zinc-300">Firebase Auth</div>
|
|
141
|
+
<div class="text-zinc-500">Hosting</div><div class="text-zinc-300">Firebase Hosting</div>
|
|
142
|
+
<div class="text-zinc-500">Backend</div><div class="text-zinc-300">Firebase Functions</div>
|
|
143
|
+
<div class="text-zinc-500">Schema</div><div class="text-zinc-300">Zod</div>
|
|
144
|
+
<div class="text-zinc-500">Language</div><div class="text-zinc-300">TypeScript</div>
|
|
145
|
+
<div class="text-zinc-500">Styling</div><div class="text-zinc-300">Tailwind CSS (CDN)</div>
|
|
146
|
+
</div>
|
|
147
|
+
<p class="text-xs text-zinc-600">
|
|
148
|
+
Deploy with <code class="text-brand-400 bg-zinc-800 px-1 py-0.5 rounded">/clawfire-deploy</code> in Claude Code.
|
|
149
|
+
App goes to Firebase Hosting, APIs to Firebase Functions.
|
|
150
|
+
</p>
|
|
151
|
+
</div>
|
|
152
|
+
|
|
153
|
+
<!-- AI Skills -->
|
|
154
|
+
<div class="bg-zinc-900 border border-zinc-800 rounded-xl p-6 mb-8">
|
|
155
|
+
<h2 class="text-lg font-semibold mb-4">AI Skills</h2>
|
|
156
|
+
<p class="text-zinc-500 text-sm mb-4">Run these in <a href="https://claude.ai/claude-code" target="_blank" class="text-brand-400 hover:underline">Claude Code</a> to manage your entire project:</p>
|
|
157
|
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
158
|
+
<div class="flex items-start gap-3">
|
|
159
|
+
<code class="text-brand-400 text-xs font-mono whitespace-nowrap bg-zinc-800 px-2 py-1 rounded">/clawfire-init</code>
|
|
160
|
+
<span class="text-zinc-400 text-xs">Initialize project & connect Firebase</span>
|
|
161
|
+
</div>
|
|
162
|
+
<div class="flex items-start gap-3">
|
|
163
|
+
<code class="text-brand-400 text-xs font-mono whitespace-nowrap bg-zinc-800 px-2 py-1 rounded">/clawfire-api</code>
|
|
164
|
+
<span class="text-zinc-400 text-xs">Create/modify APIs + auto client generation</span>
|
|
165
|
+
</div>
|
|
166
|
+
<div class="flex items-start gap-3">
|
|
167
|
+
<code class="text-brand-400 text-xs font-mono whitespace-nowrap bg-zinc-800 px-2 py-1 rounded">/clawfire-model</code>
|
|
168
|
+
<span class="text-zinc-400 text-xs">Create/modify models + auto rules & indexes</span>
|
|
169
|
+
</div>
|
|
170
|
+
<div class="flex items-start gap-3">
|
|
171
|
+
<code class="text-brand-400 text-xs font-mono whitespace-nowrap bg-zinc-800 px-2 py-1 rounded">/clawfire-auth</code>
|
|
172
|
+
<span class="text-zinc-400 text-xs">Configure authentication & authorization</span>
|
|
173
|
+
</div>
|
|
174
|
+
<div class="flex items-start gap-3">
|
|
175
|
+
<code class="text-brand-400 text-xs font-mono whitespace-nowrap bg-zinc-800 px-2 py-1 rounded">/clawfire-deploy</code>
|
|
176
|
+
<span class="text-zinc-400 text-xs">Deploy to Firebase (explicit request only)</span>
|
|
177
|
+
</div>
|
|
178
|
+
<div class="flex items-start gap-3">
|
|
179
|
+
<code class="text-brand-400 text-xs font-mono whitespace-nowrap bg-zinc-800 px-2 py-1 rounded">/clawfire-diagnose</code>
|
|
180
|
+
<span class="text-zinc-400 text-xs">Detect issues & suggest fixes</span>
|
|
181
|
+
</div>
|
|
182
|
+
</div>
|
|
183
|
+
</div>
|
|
184
|
+
|
|
185
|
+
<!-- Links -->
|
|
186
|
+
<div class="flex flex-wrap justify-center gap-4 pb-8 text-sm">
|
|
187
|
+
<a href="https://www.npmjs.com/package/clawfire" target="_blank" class="text-zinc-500 hover:text-brand-400 transition-colors">npm ↗</a>
|
|
188
|
+
<span class="text-zinc-700">|</span>
|
|
189
|
+
<a href="https://github.com/nohsangwoo/autofire" target="_blank" class="text-zinc-500 hover:text-brand-400 transition-colors">GitHub ↗</a>
|
|
190
|
+
<span class="text-zinc-700">|</span>
|
|
191
|
+
<a href="http://localhost:3456" target="_blank" class="text-zinc-500 hover:text-brand-400 transition-colors">API Playground ↗</a>
|
|
192
|
+
</div>
|