# Astro Tina Starter

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

## Tech Stack

- **Framework:** Astro 6.1.7 (SSR mode)
- **CMS:** Tina CMS (self-hosted)
- **Styling:** Tailwind CSS 4.x with `@tailwindcss/vite`
- **Database:** Astro DB (LibSQL/SQLite)
- **Adapter:** @astrojs/node (SSR)
- **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)
- SSR mode for API routes
- Docker-ready with persistent storage
- Thai language support foundation

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

## Easypanel Deployment

This template is designed for **Easypanel** with persistent volume support.

### Important: Persistent Storage

**Astro DB stores SQLite at `/data/`** - this directory is mounted as a persistent volume in Easypanel.

When deploying:
1. Set environment variable `OUT_DIR=/data`
2. Mount persistent volume to `/data` in Easypanel
3. Database will persist across redeployments

### Environment Variables

```bash
# Required for persistent storage
OUT_DIR=/data

# Optional - Tina CMS
TINA_TOKEN=your-tina-token

# Optional - External database (instead of local SQLite)
# TURSO_DATABASE_URL=libsql://your-db.turso.io
# TURSO_AUTH_TOKEN=your-auth-token
```

### Easypanel Setup

1. Create new service from Git repo
2. Set build command: `npm run build`
3. Set start command: `node dist/server/entry.mjs`
4. Add environment variable: `OUT_DIR=/data`
5. Mount persistent volume to `/data`

## 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
│   │   └── api/        # API routes (consent, etc.)
│   ├── components/
│   │   └── Header.astro
│   └── content/
│       └── config.ts   # Tina content collections
├── Dockerfile          # Multi-stage Node.js (not nginx)
└── 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
import { defineDb, defineTable, column } from 'astro:db';

const ConsentLog = defineTable({
  columns: {
    id: column.number({ primaryKey: true }),
    action: column.text(),
    purpose: column.text(),
    analytics: column.boolean({ default: false }),
    marketing: column.boolean({ default: false }),
    functional: column.boolean({ default: false }),
    userAgent: column.text({ optional: true }),
    ip: column.text({ optional: true }),
    timestamp: column.date(),
    sessionId: column.text({ optional: true }),
  },
});

export default defineDb({ tables: { ConsentLog } });
```

Database file location: `/data/astro.db` (persistent across redeployments)

## License

MIT