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)
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/viteplugin - Astro DB for consent logging (PDPA compliant)
- Nano Stores for client-side state management
- Thai language support foundation
- Docker-ready deployment
Quick Start
# Install dependencies
npm install
# Start development
npm run dev
# Build for production
npm run build
Tina CMS Access
During development, access Tina CMS at:
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.
@import "tailwindcss";
@theme {
--color-primary: #1a1a1a;
--color-accent: #3b82f6;
}
Astro DB
The template includes a consent-log table for PDPA compliance:
// 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