diff --git a/skills/website-creator/SKILL.md b/skills/website-creator/SKILL.md index 530895a..3456a10 100644 --- a/skills/website-creator/SKILL.md +++ b/skills/website-creator/SKILL.md @@ -522,54 +522,58 @@ const { post } = Astro.props; 2. **Terms of Service** — ใช้ `templates/terms-of-service.md` -3. **Consent System** — ใช้ consent script จาก `consent.moreminimore.com` +3. **ConsentOS + Tracking Scripts** — ใช้ `src/components/TrackingScripts.astro` -**Environment Variables สำหรับ Consent:** +**Template มี TrackingScripts.astro ที่รองรับ:** + +| Category | Script | ENV Variable | +|----------|--------|-------------| +| Analytics | Google Analytics 4 | `PUBLIC_GA4_ID` | +| Analytics | Google Tag Manager | `PUBLIC_GTM_ID` | +| Analytics | Umami | `PUBLIC_UMAMI_URL`, `PUBLIC_UMAMI_WEBSITE_ID` | +| Analytics | Microsoft Clarity | `PUBLIC_CLARITY_ID` | +| Marketing | Facebook Pixel | `PUBLIC_FB_PIXEL_ID` | +| Marketing | Google Ads | `PUBLIC_GOOGLE_ADS_ID` | +| Marketing | TikTok Pixel | `PUBLIC_TIKTOK_PIXEL_ID` | +| Marketing | LINE Channel Tag | `PUBLIC_LINE_CHANNEL_ID` | + +**Environment Variables:** ```bash -# .env -CONSENT_SITE_ID=your-site-id-here -CONSENT_API_BASE=https://consent.moreminimore.com +# ConsentOS +PUBLIC_CONSENT_SITE_ID=your-consent-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 ``` -**เพิ่ม Consent Script ใน Layout:** +**Tracking Flow:** -```astro ---- -// src/layouts/Layout.astro -const { title, description } = Astro.props; -const consentSiteId = import.meta.env.PUBLIC_CONSENT_SITE_ID || 'demo'; -const consentApiBase = import.meta.env.PUBLIC_CONSENT_API_BASE || 'https://consent.moreminimore.com'; ---- - - - - - - - {title} - - - - - - - - - +``` +TrackingScripts.astro (data-consent-category attributes) + ↓ +ConsentOS consent-loader.js (scan + auto-block) + ↓ +Scripts execute only after user consent ``` -**Consent Options:** -- Accept All / Reject All / Customize -- ถ้า reject → ไม่ load GA4/marketing scripts -- Server-side logging ใน consent service ของตัวเอง +**Consent Categories:** +- **Analytics** — GA4, GTM, Umami, Clarity +- **Marketing** — Facebook Pixel, TikTok, LINE, Google Ads -**3.1 Right to be Forgotten** -- Consent service มี API สำหรับลบข้อมูล user +**Right to be Forgotten:** +- ConsentOS มี API สำหรับลบข้อมูล user --- diff --git a/skills/website-creator/scripts/migrate-tina.sh b/skills/website-creator/scripts/migrate-tina.sh index 996dae0..e7400f7 100755 --- a/skills/website-creator/scripts/migrate-tina.sh +++ b/skills/website-creator/scripts/migrate-tina.sh @@ -6,8 +6,7 @@ # # This script migrates websites to Astro + Tina CMS: # - Converts content to Tina CMS format -# - Sets up Astro DB for consent logging -# - Adds PDPA-compliant consent system +# - Sets up external consent system integration # - Preserves content and structure # # Requirements: @@ -49,8 +48,7 @@ Examples: Features: - Detects source website technology (Astro, Next.js, etc.) - Converts content to Tina CMS format - - Sets up Astro DB for consent logging (PDPA compliant) - - Adds cookie consent banner with Thai law compliance + - Sets up external consent system integration - Preserves SEO metadata and content structure EOF @@ -160,22 +158,6 @@ migrate_content() { log_success "Content migration complete" } -add_consent_system() { - log_info "Adding PDPA-compliant consent system..." - - local consent_template="$(dirname "$(dirname "$(readlink -f "$0")")")/templates/consent" - - if [ ! -d "$consent_template" ]; then - log_warning "Consent template not found, skipping" - return - fi - - # Copy consent files - cp -r "$consent_template"/* "$TARGET_PATH/src/components/consent/" 2>/dev/null || true - - log_success "Consent system added" -} - create_tina_schema() { log_info "Creating Tina CMS schema..." @@ -302,25 +284,14 @@ Self-hosted Git-based CMS for visual content editing. ### ✅ Tailwind CSS 4.x Latest Tailwind with @tailwindcss/vite plugin. -### ✅ Astro DB -Built-in database for consent logging and dynamic content. - -### ✅ PDPA Consent System -Thai Personal Data Protection Act compliant cookie consent: -- Cookie banner with Accept/Reject/Preferences -- Consent logging in Astro DB -- API endpoint for consent management - -### ✅ Nano Stores -Lightweight client-side state management. +### ✅ External Consent System +Integration with consent.moreminimore.com for PDPA compliance. ## Project Structure \`\`\` $TARGET_PATH/ ├── src/ -│ ├── components/ -│ │ └── consent/ # PDPA consent system │ ├── content/ │ │ ├── posts/ # Blog posts (Tina managed) │ │ └── pages/ # Static pages (Tina managed) @@ -332,8 +303,6 @@ $TARGET_PATH/ │ └── global.css ├── .tina/ │ └── schema.ts # Tina content schema -├── db/ -│ └── config.ts # Astro DB config ├── Dockerfile └── AGENTS.md # AI agent instructions \`\`\` @@ -377,16 +346,6 @@ This will install: - Auth.js for authentication - Database adapter for content storage - Git provider for content management - -## PDPA Compliance - -The consent system logs: -- User consent choices (accept/reject) -- Cookie categories (analytics, marketing, functional) -- Timestamp and user agent -- IP address (for compliance auditing) - -Logs are stored in Astro DB and can be exported for compliance reporting. EOF log_success "Migration report: $TARGET_PATH/MIGRATION_REPORT.md" @@ -423,7 +382,6 @@ main() { analyze_source_content copy_template migrate_content - add_consent_system create_tina_schema create_migration_report diff --git a/skills/website-creator/scripts/new-project.sh b/skills/website-creator/scripts/new-project.sh index 684938b..ccf0d5d 100755 --- a/skills/website-creator/scripts/new-project.sh +++ b/skills/website-creator/scripts/new-project.sh @@ -36,8 +36,7 @@ Creates: - Astro 6.1.7 framework - Tailwind CSS 4.x - Tina CMS (self-hosted) - - Astro DB for consent logging - - PDPA-compliant consent system + - External consent system integration EOF } @@ -105,26 +104,6 @@ copy_template() { log_success "Template copied" } -copy_consent_system() { - log_info "Adding PDPA consent system..." - - local consent_template="$SKILL_DIR/templates/consent" - - if [ -d "$consent_template" ]; then - mkdir -p "$PROJECT_PATH/src/components/consent" - cp "$consent_template/ConsentBanner.astro" "$PROJECT_PATH/src/components/consent/" 2>/dev/null || true - cp "$consent_template/stores/"* "$PROJECT_PATH/src/stores/" 2>/dev/null || true - - mkdir -p "$PROJECT_PATH/src/pages/api" - cp "$consent_template/api/consent.ts" "$PROJECT_PATH/src/pages/api/" 2>/dev/null || true - - mkdir -p "$PROJECT_PATH/db" - cp "$consent_template/db/config.ts" "$PROJECT_PATH/db/" 2>/dev/null || true - fi - - log_success "Consent system added" -} - copy_legal_templates() { log_info "Copying PDPA legal templates..." @@ -163,6 +142,9 @@ setup_environment() { cat > .env << 'EOF' PUBLIC_SITE_URL=http://localhost:4321 TINA_TOKEN=your-tina-token +TINA_CLIENT_ID=your-client-id +PUBLIC_CONSENT_SITE_ID=your-consent-site-id +PUBLIC_CONSENT_API_BASE=https://consent.moreminimore.com EOF log_success "Created default .env" fi @@ -203,7 +185,6 @@ main() { check_requirements setup_directory copy_template - copy_consent_system copy_legal_templates install_dependencies setup_environment diff --git a/skills/website-creator/templates/astro-tina-starter/.env.example b/skills/website-creator/templates/astro-tina-starter/.env.example index 82bf356..6e1e38d 100644 --- a/skills/website-creator/templates/astro-tina-starter/.env.example +++ b/skills/website-creator/templates/astro-tina-starter/.env.example @@ -7,11 +7,36 @@ PUBLIC_SITE_URL=https://your-domain.com TINA_TOKEN=your-tina-token-from-tina-cloud TINA_CLIENT_ID=your-client-id -# Astro DB - Persistent Storage -# IMPORTANT: Set OUT_DIR to /data for Docker/Easypanel persistent volume -# This ensures database persists across redeployments -OUT_DIR=/data +# ConsentOS - Consent Management (moreminimore.com) +PUBLIC_CONSENT_SITE_ID=your-consent-site-id +PUBLIC_CONSENT_API_BASE=https://consent.moreminimore.com -# Optional: External Turso database (if using external DB instead of local SQLite) -# TURSO_DATABASE_URL=libsql://your-db.turso.io -# TURSO_AUTH_TOKEN=your-auth-token +# ===== TRACKING SCRIPTS ===== +# All tracking scripts are blocked by ConsentOS until user gives consent + +# --- Analytics --- +# Google Analytics 4 +PUBLIC_GA4_ID=G-XXXXXXXXXX + +# Google Tag Manager +PUBLIC_GTM_ID=GTM-XXXXXXX + +# Umami (self-hosted analytics) +PUBLIC_UMAMI_URL=https://umami.example.com +PUBLIC_UMAMI_WEBSITE_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx + +# Microsoft Clarity (heatmaps) +PUBLIC_CLARITY_ID=xxxxxxxxxx + +# --- Marketing / Advertising --- +# Facebook Pixel +PUBLIC_FB_PIXEL_ID=123456789 + +# Google Ads Conversion +PUBLIC_GOOGLE_ADS_ID=AW-123456789 + +# TikTok Pixel +PUBLIC_TIKTOK_PIXEL_ID=XXXXXXXX + +# LINE Channel Tag (Thailand) +PUBLIC_LINE_CHANNEL_ID=1234567890 diff --git a/skills/website-creator/templates/astro-tina-starter/AGENTS.md b/skills/website-creator/templates/astro-tina-starter/AGENTS.md index 08ec486..51500df 100644 --- a/skills/website-creator/templates/astro-tina-starter/AGENTS.md +++ b/skills/website-creator/templates/astro-tina-starter/AGENTS.md @@ -1,7 +1,7 @@ # Astro Tina Starter - Agent Knowledge Base -**Generated:** 2026-04-17 -**Version:** 1.0.0 +**Generated:** 2026-04-17 +**Version:** 2.0.0 **Type:** Astro 6 + Tina CMS Starter Template --- @@ -17,16 +17,14 @@ Starter template for building websites with Astro 6, Tina CMS, and Tailwind CSS | Framework | Astro | 6.1.7 | | CMS | Tina CMS | 2.x | | Styling | Tailwind CSS | 4.x | -| Database | Astro DB | 0.14.x | -| State | Nano Stores | 0.11.x | ### Key Features - Self-hosted Tina CMS with schema-based content - Tailwind CSS 4.x using `@tailwindcss/vite` plugin -- Astro DB for consent logging (PDPA compliant) +- External consent system integration - Thai language support with Noto Sans Thai -- Docker-ready deployment +- Docker-ready with nginx --- @@ -37,9 +35,6 @@ astro-tina-starter/ ├── .tina/ │ ├── config.ts # Tina CMS configuration │ └── schema.ts # Content schema definitions -├── db/ -│ ├── config.ts # Astro DB schema -│ └── seed.ts # Database seed script ├── src/ │ ├── styles/ │ │ └── global.css # Tailwind v4 styles + @theme @@ -48,7 +43,8 @@ astro-tina-starter/ │ ├── pages/ │ │ └── index.astro │ ├── components/ -│ │ └── Header.astro +│ │ ├── Header.astro +│ │ └── TrackingScripts.astro # Tracking scripts (GA4, FB Pixel, etc.) │ └── content/ │ ├── config.ts # Astro content collections │ ├── posts/ # Blog posts (MDX) @@ -57,6 +53,7 @@ astro-tina-starter/ ├── public/ │ └── favicon.svg ├── Dockerfile +├── nginx.conf ├── astro.config.mjs ├── tsconfig.json └── package.json @@ -100,9 +97,33 @@ Tina CMS manages content in `src/content/`: Schema defined in `.tina/schema.ts`. -### Astro DB Schema +### ConsentOS + Tracking System -Consent log table for PDPA compliance in `db/config.ts`. +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` --- @@ -116,7 +137,17 @@ No external API credentials required for this template. |----------|-------------| | `TINA_TOKEN` | Tina CMS production authentication | | `TINA_CLIENT_ID` | Tina CMS client ID | -| `DATABASE_URL` | Custom database connection (optional) | +| `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 | --- @@ -127,39 +158,13 @@ No external API credentials required for this template. npm install # Development -npm run dev # Full dev (Tina + Astro) -npm run dev:astro # Astro only -npm run dev:tina # Tina CMS only +npm run dev # Build -npm run build # Production build -npm run preview # Preview production build +npm run build -# Database -npm run db:push # Push schema to database -npm run db:seed # Seed database -``` - ---- - -## PDPA COMPLIANCE - -Template includes consent logging via Astro DB: - -```typescript -// db/config.ts -export const ConsentLog = defineTable({ - columns: { - action: text(), - purpose: text(), - analytics: boolean(), - marketing: boolean(), - functional: boolean(), - userAgent: text(), - ip: text(), - timestamp: text(), - }, -}) +# Preview +npm run preview ``` --- @@ -181,6 +186,10 @@ docker build -t astro-tina-starter . docker run -p 8080:80 astro-tina-starter ``` +### Easypanel + +Static hosting - no persistent volume needed. + ### Manual ```bash diff --git a/skills/website-creator/templates/astro-tina-starter/Dockerfile b/skills/website-creator/templates/astro-tina-starter/Dockerfile index f9488a2..140be6f 100644 --- a/skills/website-creator/templates/astro-tina-starter/Dockerfile +++ b/skills/website-creator/templates/astro-tina-starter/Dockerfile @@ -1,3 +1,4 @@ +# Build stage FROM node:20-alpine AS builder WORKDIR /app @@ -7,19 +8,17 @@ RUN npm install COPY . . RUN npm run build -FROM node:20-alpine AS runner +# Static files stage +FROM nginx:alpine AS runner WORKDIR /app -RUN mkdir -p /data +# Copy static files from builder COPY --from=builder /app/dist ./dist -COPY --from=builder /app/package.json ./ -RUN npm install --omit=dev -ENV HOST=0.0.0.0 -ENV PORT=4321 -ENV NODE_ENV=production +# Copy nginx config +COPY nginx.conf /etc/nginx/http.d/default.conf -EXPOSE 4321 +EXPOSE 80 -CMD ["node", "dist/server/entry.mjs"] \ No newline at end of file +CMD ["nginx", "-g", "daemon off;"] diff --git a/skills/website-creator/templates/astro-tina-starter/README.md b/skills/website-creator/templates/astro-tina-starter/README.md index 13fc516..ba38f70 100644 --- a/skills/website-creator/templates/astro-tina-starter/README.md +++ b/skills/website-creator/templates/astro-tina-starter/README.md @@ -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 \ No newline at end of file +MIT diff --git a/skills/website-creator/templates/astro-tina-starter/astro.config.mjs b/skills/website-creator/templates/astro-tina-starter/astro.config.mjs index 8fd2915..6c03f5b 100644 --- a/skills/website-creator/templates/astro-tina-starter/astro.config.mjs +++ b/skills/website-creator/templates/astro-tina-starter/astro.config.mjs @@ -1,13 +1,13 @@ import { defineConfig } from 'astro/config' import tailwindcss from '@tailwindcss/vite' import tina from 'tinacms' -import node from '@astrojs/node' import { fileURLToPath } from 'url' import path from 'path' const __dirname = path.dirname(fileURLToPath(import.meta.url)) export default defineConfig({ + site: 'https://example.com', integrations: [ tina({ enabled: !!process.env.TINA_TOKEN, @@ -28,10 +28,7 @@ export default defineConfig({ }, }, }, - output: 'server', - adapter: node({ - mode: 'standalone' - }), + output: 'static', build: { assets: '_assets', }, diff --git a/skills/website-creator/templates/astro-tina-starter/db/config.ts b/skills/website-creator/templates/astro-tina-starter/db/config.ts deleted file mode 100644 index 0ebd67d..0000000 --- a/skills/website-creator/templates/astro-tina-starter/db/config.ts +++ /dev/null @@ -1,22 +0,0 @@ -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, - }, -}); \ No newline at end of file diff --git a/skills/website-creator/templates/astro-tina-starter/db/seed.ts b/skills/website-creator/templates/astro-tina-starter/db/seed.ts deleted file mode 100644 index b9522f6..0000000 --- a/skills/website-creator/templates/astro-tina-starter/db/seed.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { db } from 'astro:db' -import { sql } from 'astro/db' - -export default async function seed() { - // Seed default settings if needed - console.log('Database seeded successfully') -} diff --git a/skills/website-creator/templates/astro-tina-starter/nginx.conf b/skills/website-creator/templates/astro-tina-starter/nginx.conf new file mode 100644 index 0000000..0908018 --- /dev/null +++ b/skills/website-creator/templates/astro-tina-starter/nginx.conf @@ -0,0 +1,14 @@ +server { + listen 80; + root /app/dist; + index index.html; + + location / { + try_files $uri $uri/ $uri.html =404; + } + + location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ { + expires 1y; + add_header Cache-Control "public, immutable"; + } +} diff --git a/skills/website-creator/templates/astro-tina-starter/package.json b/skills/website-creator/templates/astro-tina-starter/package.json index 6dd9860..a8a853e 100644 --- a/skills/website-creator/templates/astro-tina-starter/package.json +++ b/skills/website-creator/templates/astro-tina-starter/package.json @@ -1,7 +1,7 @@ { "name": "astro-tina-starter", "type": "module", - "version": "1.0.0", + "version": "2.0.0", "description": "Astro 6 + Tina CMS starter template with Tailwind CSS 4.x", "scripts": { "dev": "tinacms dev --port 3001 & astro dev", @@ -9,19 +9,14 @@ "dev:tina": "tinacms dev --port 3001", "build": "tinacms build && astro build", "preview": "astro preview", - "astro": "astro", - "db:push": "astro db push", - "db:seed": "astro db seed" + "astro": "astro" }, "dependencies": { "@astrojs/check": "^0.9.4", - "@astrojs/db": "^0.14.3", - "@astrojs/node": "^9.0.0", - "@nanostores/react": "^0.7.3", + "@astrojs/mdx": "^4.0.0", "@tailwindcss/typography": "^0.5.15", "@tailwindcss/vite": "^4.0.0", "astro": "^6.1.7", - "nanostores": "^0.11.3", "react": "^18.3.1", "react-dom": "^18.3.1", "tailwindcss": "^4.0.0", diff --git a/skills/website-creator/templates/astro-tina-starter/src/components/TrackingScripts.astro b/skills/website-creator/templates/astro-tina-starter/src/components/TrackingScripts.astro new file mode 100644 index 0000000..51d0abc --- /dev/null +++ b/skills/website-creator/templates/astro-tina-starter/src/components/TrackingScripts.astro @@ -0,0 +1,167 @@ +--- +const ga4Id = import.meta.env.PUBLIC_GA4_ID +const gtmId = import.meta.env.PUBLIC_GTM_ID +const umamiUrl = import.meta.env.PUBLIC_UMAMI_URL +const umamiWebsiteId = import.meta.env.PUBLIC_UMAMI_WEBSITE_ID +const clarityId = import.meta.env.PUBLIC_CLARITY_ID +const fbPixelId = import.meta.env.PUBLIC_FB_PIXEL_ID +const googleAdsId = import.meta.env.PUBLIC_GOOGLE_ADS_ID +const tiktokPixelId = import.meta.env.PUBLIC_TIKTOK_PIXEL_ID +const lineChannelId = import.meta.env.PUBLIC_LINE_CHANNEL_ID +--- + + +{ga4Id && ( + +)} +{ga4Id && ( + +)} + + +{gtmId && ( + +)} + + +{umamiUrl && umamiWebsiteId && ( + +)} + + +{clarityId && ( + +)} + + +{fbPixelId && ( + +)} +{fbPixelId && ( + +)} + + +{googleAdsId && ( + +)} + + +{tiktokPixelId && ( + +)} + + +{lineChannelId && ( + +)} diff --git a/skills/website-creator/templates/astro-tina-starter/src/layouts/Layout.astro b/skills/website-creator/templates/astro-tina-starter/src/layouts/Layout.astro index 1428be4..216bcfb 100644 --- a/skills/website-creator/templates/astro-tina-starter/src/layouts/Layout.astro +++ b/skills/website-creator/templates/astro-tina-starter/src/layouts/Layout.astro @@ -1,5 +1,6 @@ --- import "@/styles/global.css" +import TrackingScripts from "@/components/TrackingScripts.astro" interface Props { title?: string @@ -10,6 +11,9 @@ const { title = "Astro Tina Starter", description = "Astro 6 + Tina CMS starter template", } = Astro.props + +const consentSiteId = import.meta.env.PUBLIC_CONSENT_SITE_ID || 'demo' +const consentApiBase = import.meta.env.PUBLIC_CONSENT_API_BASE || 'https://consent.moreminimore.com' --- @@ -23,5 +27,15 @@ const { + + + + + + diff --git a/skills/website-creator/templates/consent/ConsentBanner.astro b/skills/website-creator/templates/consent/ConsentBanner.astro deleted file mode 100644 index 9b87291..0000000 --- a/skills/website-creator/templates/consent/ConsentBanner.astro +++ /dev/null @@ -1,447 +0,0 @@ ---- -/** - * PDPA Consent Banner Component for Astro + Tina - * Replaces cookie-banner.tsx from Next.js+Payload - * - * Usage: Import and add to your layout - */ - -interface Props { - /** Optional: Custom privacy policy URL */ - privacyPolicyUrl?: string; -} - -const { privacyPolicyUrl = "/privacy-policy" } = Astro.props; ---- - - - - - - \ No newline at end of file diff --git a/skills/website-creator/templates/consent/README.md b/skills/website-creator/templates/consent/README.md deleted file mode 100644 index c3a46dc..0000000 --- a/skills/website-creator/templates/consent/README.md +++ /dev/null @@ -1,147 +0,0 @@ -# PDPA Consent Logging Template - -Template สำหรับเพิ่ม PDPA consent logging ใน Astro + Tina (Astro DB) - -## Files - -``` -consent/ -├── ConsentBanner.astro # Consent banner component -├── api/ -│ └── consent.ts # API endpoints (GET, POST, DELETE) -├── db/ -│ └── config.ts # Astro DB schema (defineTable) -├── stores/ -│ └── consent.ts # Nano Stores for client state -└── README.md # This file -``` - -## วิธีใช้ (Astro) - -### 1. เพิ่ม Astro DB Schema - -Copy `db/config.ts` ไปที่ `src/db/config.ts`: - -```ts -// src/db/config.ts -import { defineTable, column } from 'astro:db'; - -export 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 }), - }, -}); -``` - -### 2. สร้าง API Endpoint - -Copy `api/consent.ts` ไปที่ `src/pages/api/consent.ts` - -### 3. เพิ่ม ConsentBanner Component - -Copy `ConsentBanner.astro` ไปที่ `src/components/consent/ConsentBanner.astro` - -### 4. เพิ่มใน Layout - -เพิ่ม `` ใน `src/layouts/Layout.astro`: - -```astro ---- -import ConsentBanner from '../components/consent/ConsentBanner.astro'; ---- - - - - - - - -``` - -## API - -### POST /api/consent - -บันทึก consent action - -**Request:** -```json -{ - "action": "accept", - "purpose": "all", - "analytics": true, - "marketing": false, - "functional": true -} -``` - -**Response:** -```json -{ - "success": true, - "doc": { - "id": 1, - "action": "accept", - "purpose": "all", - "analytics": true, - "marketing": false, - "functional": true, - "userAgent": "Mozilla/5.0...", - "ip": "127.0.0.1", - "timestamp": "2026-04-10T00:00:00.000Z" - } -} -``` - -### GET /api/consent - -ดึง consent logs - -```bash -curl "http://localhost:4321/api/consent" -``` - -### DELETE /api/consent - -Right to be forgotten (ลบข้อมูลตาม พ.ร.บ.) - -```bash -curl -X DELETE "http://localhost:4321/api/consent?sessionId=xxx" -``` - -## Nano Stores Usage - -```ts -import { consentStore, hasAnalyticsConsent, hasMarketingConsent } from './stores/consent'; - -// Subscribe to changes -consentStore.subscribe((state) => { - console.log('Consent changed:', state); -}); - -// Check consent -if (hasAnalyticsConsent()) { - // Load analytics -} -``` - -## UX - -- **ยอมรับทั้งหมด** - เปิดทุกคุกกี้ -- **ปฏิเสธทั้งหมด** - ปิดทุกคุกกี้ (ยกเว้น functional) -- **ตั้งค่าคุกกี้** - แผงปรับแต่งเอง - -## ⚠️ Pitfalls สำคัญ - -1. **Astro DB ต้องรันบน server-side** - ใช้ `APIRoute` import -2. **Nano Stores รันบน client-side** - ใช้ `