feat: update website-creator to static mode with ConsentOS + tracking scripts

- Remove Astro DB (no longer needed for consent logging)
- Change from SSR to static output mode
- Add TrackingScripts.astro with GA4, GTM, Umami, Clarity, FB Pixel, Google Ads, TikTok, LINE
- Use ConsentOS consent-loader.js for auto-blocking tracking scripts
- Update Dockerfile to nginx static hosting
- Remove old consent template (custom consent no longer needed)
- Update SKILL.md, AGENTS.md, README.md documentation
- Add nginx.conf for static hosting
This commit is contained in:
2026-04-21 21:19:32 +07:00
parent d1edc9cd6c
commit c38cc4ae26
19 changed files with 378 additions and 1099 deletions

View File

@@ -4,21 +4,17 @@ Astro 6.1.7 + Tina CMS starter template with Tailwind CSS 4.x
## Tech Stack
- **Framework:** Astro 6.1.7 (SSR mode)
- **Framework:** Astro 6.1.7 (static 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
- ConsentOS + Tracking Scripts (GA4, Facebook Pixel, etc.)
- Docker-ready with nginx
- Thai language support foundation
## Quick Start
@@ -41,40 +37,36 @@ During development, access Tina CMS at:
For production, you'll need a TINA_TOKEN environment variable.
## Easypanel Deployment
## ConsentOS + Tracking
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
This template includes ConsentOS (`consent.moreminimore.com`) for PDPA-compliant consent management and auto-blocking of tracking scripts.
### Environment Variables
```bash
# Required for persistent storage
OUT_DIR=/data
# ConsentOS
PUBLIC_CONSENT_SITE_ID=your-site-id
PUBLIC_CONSENT_API_BASE=https://consent.moreminimore.com
# Optional - Tina CMS
TINA_TOKEN=your-tina-token
# 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
# Optional - External database (instead of local SQLite)
# TURSO_DATABASE_URL=libsql://your-db.turso.io
# TURSO_AUTH_TOKEN=your-auth-token
# Marketing
PUBLIC_FB_PIXEL_ID=123456789
PUBLIC_GOOGLE_ADS_ID=AW-123456789
PUBLIC_TIKTOK_PIXEL_ID=XXXXXXXX
PUBLIC_LINE_CHANNEL_ID=1234567890
```
### Easypanel Setup
### How It Works
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`
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
@@ -83,22 +75,20 @@ 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.)
│ │ ── index.astro
│ ├── components/
│ │ ── Header.astro
│ │ ── Header.astro
│ │ └── TrackingScripts.astro # Tracking scripts
│ └── content/
│ └── config.ts # Tina content collections
├── Dockerfile # Multi-stage Node.js (not nginx)
├── Dockerfile
├── nginx.conf
└── package.json
```
@@ -116,34 +106,16 @@ The configuration is done via CSS `@theme` block in `src/styles/global.css`.
}
```
## Astro DB
## Docker
The template includes a consent-log table for PDPA compliance:
```bash
# Build
docker build -t astro-tina .
```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 } });
# Run
docker run -p 8080:80 astro-tina
```
Database file location: `/data/astro.db` (persistent across redeployments)
## License
MIT
MIT