create-atsdc-stack 1.1.0 → 1.2.1
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/.claude/settings.local.json +3 -1
- package/CLAUDE.md +236 -215
- package/CONTRIBUTING.md +342 -342
- package/INSTALLATION.md +359 -359
- package/LICENSE +201 -201
- package/README.md +405 -405
- package/app/.env.example +17 -17
- package/app/.github/labeler.yml +61 -0
- package/app/.github/workflows/browser-tests.yml +101 -0
- package/app/.github/workflows/check.yml +24 -0
- package/app/.github/workflows/greetings.yml +16 -0
- package/app/.github/workflows/label.yml +22 -0
- package/app/.github/workflows/stale.yml +27 -0
- package/app/.github/workflows/summary.yml +34 -0
- package/app/.stylelintrc.json +8 -0
- package/app/README.md +251 -251
- package/app/astro.config.mjs +83 -83
- package/app/drizzle.config.ts +16 -16
- package/app/package.json +66 -52
- package/app/playwright.config.ts +27 -0
- package/app/public/manifest.webmanifest +36 -36
- package/app/pwa-assets.config.ts +8 -0
- package/app/src/components/Card.astro +36 -36
- package/app/src/db/initialize.ts +107 -107
- package/app/src/db/schema.ts +72 -72
- package/app/src/db/validations.ts +158 -158
- package/app/src/layouts/Layout.astro +63 -63
- package/app/src/lib/config.ts +36 -36
- package/app/src/lib/content-converter.ts +141 -141
- package/app/src/lib/dom-utils.ts +230 -230
- package/app/src/lib/exa-search.ts +269 -269
- package/app/src/pages/api/chat.ts +91 -91
- package/app/src/pages/api/posts.ts +350 -350
- package/app/src/pages/index.astro +87 -87
- package/app/src/styles/components/button.scss +152 -152
- package/app/src/styles/components/card.scss +180 -180
- package/app/src/styles/components/form.scss +240 -240
- package/app/src/styles/global.scss +141 -141
- package/app/src/styles/pages/index.scss +80 -80
- package/app/src/styles/reset.scss +83 -83
- package/app/src/styles/variables/globals.scss +96 -96
- package/app/src/styles/variables/mixins.scss +238 -238
- package/app/tests/browser.test.nopause.ts +10 -0
- package/app/tests/browser.test.ts +13 -0
- package/bin/cli.js +1151 -1151
- package/package.json +8 -6
- package/app/.astro/settings.json +0 -5
- package/app/.astro/types.d.ts +0 -1
package/CLAUDE.md
CHANGED
|
@@ -1,215 +1,236 @@
|
|
|
1
|
-
# CLAUDE.md
|
|
2
|
-
|
|
3
|
-
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
|
4
|
-
|
|
5
|
-
## Project Overview
|
|
6
|
-
|
|
7
|
-
The ATSDC Stack is a full-stack web application framework built with Astro, TypeScript, SCSS, Drizzle ORM, and Clerk. It's designed as both a production-ready template and a CLI tool for scaffolding new projects.
|
|
8
|
-
|
|
9
|
-
This is a monorepo with two main parts:
|
|
10
|
-
|
|
11
|
-
- **
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
#
|
|
22
|
-
npm run build # Type-check and build for production
|
|
23
|
-
npm run preview # Preview production build locally
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
-
|
|
46
|
-
-
|
|
47
|
-
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
**
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
1
|
+
# CLAUDE.md
|
|
2
|
+
|
|
3
|
+
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
|
4
|
+
|
|
5
|
+
## Project Overview
|
|
6
|
+
|
|
7
|
+
The ATSDC Stack is a full-stack web application framework built with Astro, TypeScript, SCSS, Drizzle ORM, and Clerk. It's designed as both a production-ready template and a CLI tool for scaffolding new projects.
|
|
8
|
+
|
|
9
|
+
This is a monorepo with two main parts:
|
|
10
|
+
|
|
11
|
+
- **Root**: CLI tool for scaffolding new projects (`create-atsdc-stack`)
|
|
12
|
+
- **app/**: The actual Astro application template
|
|
13
|
+
|
|
14
|
+
## Development Commands
|
|
15
|
+
|
|
16
|
+
### Root Directory Commands
|
|
17
|
+
|
|
18
|
+
These commands can be run from the root directory (they delegate to the app workspace):
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
npm run dev # Start dev server at http://localhost:4321
|
|
22
|
+
npm run build # Type-check and build for production
|
|
23
|
+
npm run preview # Preview production build locally
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
### App Directory Commands
|
|
27
|
+
|
|
28
|
+
Database commands should be run from the `app/` directory:
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
cd app
|
|
32
|
+
|
|
33
|
+
npx drizzle-kit push # Push schema changes to database (no migrations)
|
|
34
|
+
npx drizzle-kit generate # Generate migration files from schema
|
|
35
|
+
npx drizzle-kit migrate # Apply pending migrations
|
|
36
|
+
npx drizzle-kit studio # Open Drizzle Studio GUI for database
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Architecture Overview
|
|
40
|
+
|
|
41
|
+
### Database Layer (Drizzle ORM)
|
|
42
|
+
|
|
43
|
+
**Key files:**
|
|
44
|
+
|
|
45
|
+
- `app/src/db/schema.ts` - Table definitions using Drizzle ORM
|
|
46
|
+
- `app/src/db/validations.ts` - Zod schemas for runtime validation
|
|
47
|
+
- `app/src/db/initialize.ts` - Database client initialization and utilities
|
|
48
|
+
- `app/drizzle.config.ts` - Drizzle Kit configuration
|
|
49
|
+
|
|
50
|
+
**Important patterns:**
|
|
51
|
+
|
|
52
|
+
- Uses **NanoID** (21 chars) for all primary keys, not UUIDs or auto-increment
|
|
53
|
+
- All IDs are `varchar(21)` with `.$defaultFn(() => nanoid())`
|
|
54
|
+
- TypeScript types are inferred: `typeof posts.$inferSelect` and `typeof posts.$inferInsert`
|
|
55
|
+
- Zod validation schemas mirror database schemas but add runtime validation
|
|
56
|
+
- Use `@vercel/postgres` for connection pooling, wrapped by Drizzle
|
|
57
|
+
|
|
58
|
+
### API Routes
|
|
59
|
+
|
|
60
|
+
**Location:** `app/src/pages/api/`
|
|
61
|
+
|
|
62
|
+
**Pattern:** Each file exports HTTP methods as named exports:
|
|
63
|
+
|
|
64
|
+
```typescript
|
|
65
|
+
export const GET: APIRoute = async ({ request, url }) => { ... }
|
|
66
|
+
export const POST: APIRoute = async ({ request }) => { ... }
|
|
67
|
+
export const PUT: APIRoute = async ({ request }) => { ... }
|
|
68
|
+
export const DELETE: APIRoute = async ({ request, url }) => { ... }
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
**Key conventions:**
|
|
72
|
+
|
|
73
|
+
1. Always validate inputs with Zod schemas from `validations.ts`
|
|
74
|
+
2. Return JSON responses with proper status codes (200, 201, 400, 404, 500)
|
|
75
|
+
3. Handle `ZodError` separately from generic errors
|
|
76
|
+
4. Use Drizzle query builder, not raw SQL
|
|
77
|
+
5. For query params, use `url.searchParams.get()` and validate with Zod
|
|
78
|
+
|
|
79
|
+
**Example:** See `app/src/pages/api/posts.ts` for complete CRUD implementation
|
|
80
|
+
|
|
81
|
+
### AI Integration (Vercel AI SDK v5+)
|
|
82
|
+
|
|
83
|
+
**Location:** `app/src/pages/api/chat.ts`
|
|
84
|
+
|
|
85
|
+
**Key pattern:** Uses AI Gateway - no provider-specific packages needed!
|
|
86
|
+
|
|
87
|
+
```typescript
|
|
88
|
+
import { streamText } from 'ai';
|
|
89
|
+
|
|
90
|
+
const result = streamText({
|
|
91
|
+
model: 'openai/gpt-4o', // or 'anthropic/claude-3-5-sonnet-20241022'
|
|
92
|
+
messages: validatedData.messages,
|
|
93
|
+
apiKey: process.env.OPENAI_API_KEY, // Pass the appropriate API key
|
|
94
|
+
});
|
|
95
|
+
|
|
96
|
+
return result.toDataStreamResponse();
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
**Supported formats:** `openai/`, `anthropic/`, `google/`, etc.
|
|
100
|
+
|
|
101
|
+
### SCSS Architecture
|
|
102
|
+
|
|
103
|
+
**Critical rules:**
|
|
104
|
+
|
|
105
|
+
1. **NO inline `<style>` tags** in `.astro` files (except truly standalone components)
|
|
106
|
+
2. **NO utility classes** - use semantic class names (`.btn`, `.card`, not `.px-4`)
|
|
107
|
+
3. All styles in external `.scss` files under `app/src/styles/`
|
|
108
|
+
4. Component styles: `app/src/styles/components/`
|
|
109
|
+
5. Page styles: `app/src/styles/pages/`
|
|
110
|
+
6. Global variables auto-imported via Vite config: `@use "@/styles/variables/globals.scss" as *;`
|
|
111
|
+
|
|
112
|
+
**Import pattern in .astro files:**
|
|
113
|
+
|
|
114
|
+
```astro
|
|
115
|
+
---
|
|
116
|
+
import '@/styles/components/button.scss';
|
|
117
|
+
import '@/styles/pages/example.scss';
|
|
118
|
+
---
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
**Styling modifiers (in order of preference):**
|
|
122
|
+
|
|
123
|
+
1. Data attributes: `<button class="btn" data-variant="primary" data-size="lg">`
|
|
124
|
+
2. Class chaining: `<button class="btn primary lg">`
|
|
125
|
+
|
|
126
|
+
**SCSS organization:**
|
|
127
|
+
|
|
128
|
+
- `variables/globals.scss` - Colors, spacing, typography
|
|
129
|
+
- `variables/mixins.scss` - Reusable mixins like `@include flex-center`
|
|
130
|
+
- `reset.scss` - CSS reset
|
|
131
|
+
- `global.scss` - Global base styles
|
|
132
|
+
|
|
133
|
+
### TypeScript Path Aliases
|
|
134
|
+
|
|
135
|
+
Configured in `app/tsconfig.json`:
|
|
136
|
+
|
|
137
|
+
```json
|
|
138
|
+
{
|
|
139
|
+
"@/*": ["src/*"],
|
|
140
|
+
"@db/*": ["src/db/*"],
|
|
141
|
+
"@styles/*": ["src/styles/*"],
|
|
142
|
+
"@components/*": ["src/components/*"]
|
|
143
|
+
}
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
**Usage:**
|
|
147
|
+
|
|
148
|
+
```typescript
|
|
149
|
+
import { db } from '@/db/initialize';
|
|
150
|
+
import { posts } from '@/db/schema';
|
|
151
|
+
import '@/styles/components/card.scss';
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
### Authentication (Clerk)
|
|
155
|
+
|
|
156
|
+
- Pre-configured in `app/astro.config.mjs`
|
|
157
|
+
- Middleware: Create `app/src/middleware.ts` with `clerkMiddleware()` to protect routes
|
|
158
|
+
- User IDs stored as `authorId` in database (varchar 255)
|
|
159
|
+
- React components available via `@clerk/clerk-react`
|
|
160
|
+
|
|
161
|
+
### Progressive Web App (PWA)
|
|
162
|
+
|
|
163
|
+
- Configured via `vite-plugin-pwa` in `astro.config.mjs`
|
|
164
|
+
- Auto-updates enabled (`registerType: 'autoUpdate'`)
|
|
165
|
+
- Manifest and service worker auto-generated
|
|
166
|
+
- Assets should be in `app/public/` (pwa-192x192.png, pwa-512x512.png)
|
|
167
|
+
|
|
168
|
+
## Environment Variables
|
|
169
|
+
|
|
170
|
+
**Required:**
|
|
171
|
+
|
|
172
|
+
- `DATABASE_URL` - PostgreSQL connection string
|
|
173
|
+
- `PUBLIC_CLERK_PUBLISHABLE_KEY` - Clerk publishable key
|
|
174
|
+
- `CLERK_SECRET_KEY` - Clerk secret key
|
|
175
|
+
- `OPENAI_API_KEY` - OpenAI API key (for AI features)
|
|
176
|
+
|
|
177
|
+
**Setup:** Copy `.env.example` to `.env` and fill in values
|
|
178
|
+
|
|
179
|
+
## Key Design Decisions
|
|
180
|
+
|
|
181
|
+
1. **NanoID over UUID/auto-increment:** URL-safe, shorter, equally collision-resistant
|
|
182
|
+
2. **Vercel Postgres over node-postgres:** Better connection pooling for serverless
|
|
183
|
+
3. **Drizzle over Prisma:** Closer to SQL, better TypeScript inference, lighter weight
|
|
184
|
+
4. **Zod validation separate from schema:** Allows different validation rules for create/update operations
|
|
185
|
+
5. **SCSS over Tailwind:** Enforces semantic naming, better for large teams and maintainability
|
|
186
|
+
6. **Astro server mode:** Enables API routes and dynamic rendering with Vercel adapter
|
|
187
|
+
|
|
188
|
+
## Common Patterns
|
|
189
|
+
|
|
190
|
+
### Creating a new database table
|
|
191
|
+
|
|
192
|
+
1. Define schema in `app/src/db/schema.ts` using NanoID for primary key
|
|
193
|
+
2. Create Zod schemas in `app/src/db/validations.ts` for create/update operations
|
|
194
|
+
3. Export TypeScript types: `export type MyModel = typeof myTable.$inferSelect`
|
|
195
|
+
4. Push to database: `npm run db:push` (dev) or `npm run db:generate && npm run db:migrate` (prod)
|
|
196
|
+
|
|
197
|
+
### Creating a new API route
|
|
198
|
+
|
|
199
|
+
1. Create file in `app/src/pages/api/[name].ts`
|
|
200
|
+
2. Export named HTTP method handlers: `GET`, `POST`, `PUT`, `DELETE`
|
|
201
|
+
3. Validate inputs with Zod schemas
|
|
202
|
+
4. Use Drizzle ORM for database operations
|
|
203
|
+
5. Return JSON responses with proper error handling
|
|
204
|
+
|
|
205
|
+
### Adding new styles
|
|
206
|
+
|
|
207
|
+
1. Create `.scss` file in appropriate location (`components/` or `pages/`)
|
|
208
|
+
2. Import in `.astro` component: `import '@/styles/components/mycomponent.scss'`
|
|
209
|
+
3. Use semantic class names with data attributes for modifiers
|
|
210
|
+
4. Access global variables/mixins automatically (via Vite config)
|
|
211
|
+
|
|
212
|
+
## Testing Database Connection
|
|
213
|
+
|
|
214
|
+
```typescript
|
|
215
|
+
import { getDatabaseHealth } from '@/db/initialize';
|
|
216
|
+
|
|
217
|
+
const health = await getDatabaseHealth();
|
|
218
|
+
// Returns: { connected: boolean, tablesExist: boolean, timestamp: Date }
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
## Deployment
|
|
222
|
+
|
|
223
|
+
Configured for **Vercel** deployment with:
|
|
224
|
+
|
|
225
|
+
- Adapter: `@astrojs/vercel` (serverless mode)
|
|
226
|
+
- Build command: `npm run build`
|
|
227
|
+
- Output directory: `app/dist/`
|
|
228
|
+
- Environment variables must be set in Vercel project settings
|
|
229
|
+
|
|
230
|
+
## Workspace Structure
|
|
231
|
+
|
|
232
|
+
This is an npm workspace:
|
|
233
|
+
|
|
234
|
+
- Root `package.json` contains CLI tooling and workspace configuration
|
|
235
|
+
- `app/package.json` contains the Astro application dependencies
|
|
236
|
+
- Commands run from root are proxied to the app workspace via `--workspace=app`
|