# Astro Tina Starter - Agent Knowledge Base

**Generated:** 2026-04-17
**Version:** 2.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 |

### Key Features

- Self-hosted Tina CMS with schema-based content
- Tailwind CSS 4.x using `@tailwindcss/vite` plugin
- External consent system integration
- Thai language support with Noto Sans Thai
- Docker-ready with nginx

---

## PROJECT STRUCTURE

```
astro-tina-starter/
├── .tina/
│   ├── config.ts       # Tina CMS configuration
│   └── schema.ts       # Content schema definitions
├── src/
│   ├── styles/
│   │   └── global.css  # Tailwind v4 styles + @theme
│   ├── layouts/
│   │   └── Layout.astro
│   ├── pages/
│   │   └── index.astro
│   ├── components/
│   │   ├── Header.astro
│   │   └── TrackingScripts.astro  # Tracking scripts (GA4, FB Pixel, etc.)
│   └── content/
│       ├── config.ts   # Astro content collections
│       ├── posts/       # Blog posts (MDX)
│       ├── pages/       # Static pages (MDX)
│       └── settings/    # Site settings (JSON)
├── public/
│   └── favicon.svg
├── Dockerfile
├── nginx.conf
├── 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`.

### ConsentOS + Tracking System

ConsentOS (`consent.moreminimore.com`) manages consent and blocking:

```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
```

**Tracking Scripts:**
- `TrackingScripts.astro` - contains all tracking scripts
- Scripts are auto-blocked by ConsentOS until user consent
- Categories: `analytics`, `marketing`

---

## 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 |
| `PUBLIC_CONSENT_SITE_ID` | ConsentOS site ID |
| `PUBLIC_CONSENT_API_BASE` | ConsentOS API base URL |
| `PUBLIC_GA4_ID` | Google Analytics 4 |
| `PUBLIC_GTM_ID` | Google Tag Manager |
| `PUBLIC_UMAMI_URL` | Umami analytics URL |
| `PUBLIC_UMAMI_WEBSITE_ID` | Umami website ID |
| `PUBLIC_CLARITY_ID` | Microsoft Clarity |
| `PUBLIC_FB_PIXEL_ID` | Facebook Pixel |
| `PUBLIC_GOOGLE_ADS_ID` | Google Ads conversion ID |
| `PUBLIC_TIKTOK_PIXEL_ID` | TikTok Pixel |
| `PUBLIC_LINE_CHANNEL_ID` | LINE Channel Tag |

---

## COMMANDS

```bash
# Install dependencies
npm install

# Development
npm run dev

# Build
npm run build

# Preview
npm run preview
```

---

## 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
```

### Easypanel

Static hosting - no persistent volume needed.

### 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