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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user