Kunthawat Greethong
628298183a
Major changes: - Replace Payload CMS with Tina CMS (self-hosted) - Add Astro DB for consent logging (PDPA compliant) - Update Tailwind v3 to v4 (@tailwindcss/vite plugin) - Add astro-tina-starter template - Rewrite consent template for Astro (ConsentBanner.astro, Astro DB, Nano Stores) - Add install-tina-backend.sh for self-hosted Tina per customer - Rename convert-astro.sh to migrate-tina.sh - Add AGENTS.md template for generated websites - Delete all Payload/Next.js files Technical updates: - Astro DB using defineDb with eq operators for queries - Tailwind v4 with @theme block - Tina CMS local development mode - Proper Astro API routes for consent Research-verified with official documentation (April 2026)
199 lines
3.9 KiB
Markdown
199 lines
3.9 KiB
Markdown
# Astro Tina Starter - Agent Knowledge Base
|
|
|
|
**Generated:** 2026-04-17
|
|
**Version:** 1.0.0
|
|
**Type:** Astro 6 + Tina CMS Starter Template
|
|
|
|
---
|
|
|
|
## OVERVIEW
|
|
|
|
Starter template for building websites with Astro 6, Tina CMS, and Tailwind CSS 4.x.
|
|
|
|
### Tech Stack
|
|
|
|
| Component | Technology | Version |
|
|
|-----------|------------|---------|
|
|
| Framework | Astro | 6.1.7 |
|
|
| CMS | Tina CMS | 2.x |
|
|
| Styling | Tailwind CSS | 4.x |
|
|
| Database | Astro DB | 0.14.x |
|
|
| State | Nano Stores | 0.11.x |
|
|
|
|
### Key Features
|
|
|
|
- Self-hosted Tina CMS with schema-based content
|
|
- Tailwind CSS 4.x using `@tailwindcss/vite` plugin
|
|
- Astro DB for consent logging (PDPA compliant)
|
|
- Thai language support with Noto Sans Thai
|
|
- Docker-ready deployment
|
|
|
|
---
|
|
|
|
## PROJECT STRUCTURE
|
|
|
|
```
|
|
astro-tina-starter/
|
|
├── .tina/
|
|
│ ├── config.ts # Tina CMS configuration
|
|
│ └── schema.ts # Content schema definitions
|
|
├── db/
|
|
│ ├── config.ts # Astro DB schema
|
|
│ └── seed.ts # Database seed script
|
|
├── src/
|
|
│ ├── styles/
|
|
│ │ └── global.css # Tailwind v4 styles + @theme
|
|
│ ├── layouts/
|
|
│ │ └── Layout.astro
|
|
│ ├── pages/
|
|
│ │ └── index.astro
|
|
│ ├── components/
|
|
│ │ └── Header.astro
|
|
│ └── content/
|
|
│ ├── config.ts # Astro content collections
|
|
│ ├── posts/ # Blog posts (MDX)
|
|
│ ├── pages/ # Static pages (MDX)
|
|
│ └── settings/ # Site settings (JSON)
|
|
├── public/
|
|
│ └── favicon.svg
|
|
├── Dockerfile
|
|
├── astro.config.mjs
|
|
├── tsconfig.json
|
|
└── package.json
|
|
```
|
|
|
|
---
|
|
|
|
## IMPORTANT CONVENTIONS
|
|
|
|
### Tailwind CSS 4.x Setup
|
|
|
|
**CRITICAL:** This template uses `@tailwindcss/vite` plugin, NOT `@astrojs/tailwind`.
|
|
|
|
```javascript
|
|
// astro.config.mjs
|
|
import tailwindcss from '@tailwindcss/vite'
|
|
|
|
export default defineConfig({
|
|
vite: {
|
|
plugins: [tailwindcss()],
|
|
},
|
|
})
|
|
```
|
|
|
|
```css
|
|
/* src/styles/global.css */
|
|
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--color-primary: #1a1a1a;
|
|
--color-accent: #3b82f6;
|
|
}
|
|
```
|
|
|
|
### Tina CMS Content
|
|
|
|
Tina CMS manages content in `src/content/`:
|
|
- `posts/` - Blog posts (MDX format)
|
|
- `pages/` - Static pages (MDX format)
|
|
- `settings/` - Site settings (JSON format)
|
|
|
|
Schema defined in `.tina/schema.ts`.
|
|
|
|
### Astro DB Schema
|
|
|
|
Consent log table for PDPA compliance in `db/config.ts`.
|
|
|
|
---
|
|
|
|
## CREDENTIALS
|
|
|
|
No external API credentials required for this template.
|
|
|
|
### Optional Environment Variables
|
|
|
|
| Variable | Description |
|
|
|----------|-------------|
|
|
| `TINA_TOKEN` | Tina CMS production authentication |
|
|
| `TINA_CLIENT_ID` | Tina CMS client ID |
|
|
| `DATABASE_URL` | Custom database connection (optional) |
|
|
|
|
---
|
|
|
|
## COMMANDS
|
|
|
|
```bash
|
|
# Install dependencies
|
|
npm install
|
|
|
|
# Development
|
|
npm run dev # Full dev (Tina + Astro)
|
|
npm run dev:astro # Astro only
|
|
npm run dev:tina # Tina CMS only
|
|
|
|
# Build
|
|
npm run build # Production build
|
|
npm run preview # Preview production build
|
|
|
|
# Database
|
|
npm run db:push # Push schema to database
|
|
npm run db:seed # Seed database
|
|
```
|
|
|
|
---
|
|
|
|
## PDPA COMPLIANCE
|
|
|
|
Template includes consent logging via Astro DB:
|
|
|
|
```typescript
|
|
// db/config.ts
|
|
export const ConsentLog = defineTable({
|
|
columns: {
|
|
action: text(),
|
|
purpose: text(),
|
|
analytics: boolean(),
|
|
marketing: boolean(),
|
|
functional: boolean(),
|
|
userAgent: text(),
|
|
ip: text(),
|
|
timestamp: text(),
|
|
},
|
|
})
|
|
```
|
|
|
|
---
|
|
|
|
## ANTI-PATTERNS
|
|
|
|
- **NEVER** use `@astrojs/tailwind` (deprecated)
|
|
- **ALWAYS** use `@tailwindcss/vite` for Tailwind v4
|
|
- **NEVER** commit environment files (.env)
|
|
|
|
---
|
|
|
|
## DEPLOYMENT
|
|
|
|
### Docker
|
|
|
|
```bash
|
|
docker build -t astro-tina-starter .
|
|
docker run -p 8080:80 astro-tina-starter
|
|
```
|
|
|
|
### Manual
|
|
|
|
```bash
|
|
npm install
|
|
npm run build
|
|
# Serve dist/ folder with any static server
|
|
```
|
|
|
|
---
|
|
|
|
## NOTES
|
|
|
|
- Tina CMS admin: http://localhost:4321/admin
|
|
- Astro default port: 4321
|
|
- Tina dev server: 3001
|