# Astro Tina Starter

Astro 6.1.7 + Tina CMS starter template with Tailwind CSS 4.x

## Tech Stack

- **Framework:** Astro 6.1.7 (static mode)
- **CMS:** Tina CMS (self-hosted)
- **Styling:** Tailwind CSS 4.x with `@tailwindcss/vite`
- **Language:** TypeScript

## Features

- Self-hosted Tina CMS with schema-based content
- Tailwind CSS 4.x using `@tailwindcss/vite` plugin
- ConsentOS + Tracking Scripts (GA4, Facebook Pixel, etc.)
- Docker-ready with nginx
- Thai language support foundation

## Quick Start

```bash
# Install dependencies
npm install

# Start development (accessible at http://0.0.0.0:4321)
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.

## ConsentOS + Tracking

This template includes ConsentOS (`consent.moreminimore.com`) for PDPA-compliant consent management and auto-blocking of tracking scripts.

### Environment Variables

```bash
# ConsentOS
PUBLIC_CONSENT_SITE_ID=your-site-id
PUBLIC_CONSENT_API_BASE=https://consent.moreminimore.com

# Analytics
PUBLIC_GA4_ID=G-XXXXXXXXXX
PUBLIC_GTM_ID=GTM-XXXXXXX
PUBLIC_UMAMI_URL=https://umami.example.com
PUBLIC_UMAMI_WEBSITE_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
PUBLIC_CLARITY_ID=xxxxxxxxxx

# Marketing
PUBLIC_FB_PIXEL_ID=123456789
PUBLIC_GOOGLE_ADS_ID=AW-123456789
PUBLIC_TIKTOK_PIXEL_ID=XXXXXXXX
PUBLIC_LINE_CHANNEL_ID=1234567890
```

### How It Works

1. `TrackingScripts.astro` contains all tracking codes with `data-consent-category` attributes
2. ConsentOS `consent-loader.js` scans and auto-blocks scripts until user consent
3. Categories: `analytics`, `marketing`

## Project Structure

```
astro-tina-starter/
├── .tina/
│   ├── config.ts       # Tina CMS configuration
│   └── schema.ts       # Content schema definitions
├── src/
│   ├── styles/
│   │   └── global.css  # Tailwind v4 styles
│   ├── layouts/
│   │   └── Layout.astro
│   ├── pages/
│   │   └── index.astro
│   ├── components/
│   │   ├── Header.astro
│   │   └── TrackingScripts.astro  # Tracking scripts
│   └── content/
│       └── config.ts   # Tina content collections
├── Dockerfile
├── nginx.conf
└── 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;
}
```

## Docker

```bash
# Build
docker build -t astro-tina .

# Run
docker run -p 8080:80 astro-tina
```

## License

MIT