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)
105 lines
2.2 KiB
Markdown
105 lines
2.2 KiB
Markdown
# Astro Tina Starter
|
|
|
|
Astro 6.1.7 + Tina CMS starter template with Tailwind CSS 4.x
|
|
|
|
## Tech Stack
|
|
|
|
- **Framework:** Astro 6.1.7
|
|
- **CMS:** Tina CMS (self-hosted)
|
|
- **Styling:** Tailwind CSS 4.x with `@tailwindcss/vite`
|
|
- **Database:** Astro DB (LibSQL)
|
|
- **State:** Nano Stores + React
|
|
- **Language:** TypeScript
|
|
|
|
## Features
|
|
|
|
- Self-hosted Tina CMS with schema-based content
|
|
- Tailwind CSS 4.x using `@tailwindcss/vite` plugin
|
|
- Astro DB for consent logging (PDPA compliant)
|
|
- Nano Stores for client-side state management
|
|
- Thai language support foundation
|
|
- Docker-ready deployment
|
|
|
|
## Quick Start
|
|
|
|
```bash
|
|
# Install dependencies
|
|
npm install
|
|
|
|
# Start development
|
|
npm run dev
|
|
|
|
# Build for production
|
|
npm run build
|
|
```
|
|
|
|
## Tina CMS Access
|
|
|
|
During development, access Tina CMS at:
|
|
- http://localhost:4321/admin
|
|
|
|
For production, you'll need a TINA_TOKEN environment variable.
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
astro-tina-starter/
|
|
├── .tina/
|
|
│ ├── config.ts # Tina CMS configuration
|
|
│ └── schema.ts # Content schema definitions
|
|
├── db/
|
|
│ ├── config.ts # Astro DB schema (consent logs)
|
|
│ └── seed.ts # Database seed script
|
|
├── src/
|
|
│ ├── styles/
|
|
│ │ └── global.css # Tailwind v4 styles
|
|
│ ├── layouts/
|
|
│ │ └── Layout.astro
|
|
│ ├── pages/
|
|
│ │ └── index.astro
|
|
│ ├── components/
|
|
│ │ └── Header.astro
|
|
│ └── content/
|
|
│ └── config.ts # Tina content collections
|
|
├── Dockerfile
|
|
└── package.json
|
|
```
|
|
|
|
## Tailwind CSS 4.x
|
|
|
|
This template uses Tailwind CSS 4.x with the `@tailwindcss/vite` plugin.
|
|
The configuration is done via CSS `@theme` block in `src/styles/global.css`.
|
|
|
|
```css
|
|
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--color-primary: #1a1a1a;
|
|
--color-accent: #3b82f6;
|
|
}
|
|
```
|
|
|
|
## Astro DB
|
|
|
|
The template includes a consent-log table for PDPA compliance:
|
|
|
|
```ts
|
|
// db/config.ts
|
|
export const ConsentLog = defineTable({
|
|
columns: {
|
|
action: text(),
|
|
purpose: text(),
|
|
analytics: boolean(),
|
|
marketing: boolean(),
|
|
functional: boolean(),
|
|
userAgent: text(),
|
|
ip: text(),
|
|
timestamp: text(),
|
|
},
|
|
})
|
|
```
|
|
|
|
## License
|
|
|
|
MIT
|