diff --git a/.opencode/package-lock.json b/.opencode/package-lock.json index a427e44..811c883 100644 --- a/.opencode/package-lock.json +++ b/.opencode/package-lock.json @@ -5,7 +5,7 @@ "packages": { "": { "dependencies": { - "@opencode-ai/plugin": "1.4.7" + "@opencode-ai/plugin": "1.4.8" } }, "node_modules/@msgpackr-extract/msgpackr-extract-darwin-arm64": { @@ -87,18 +87,18 @@ ] }, "node_modules/@opencode-ai/plugin": { - "version": "1.4.7", - "resolved": "https://registry.npmjs.org/@opencode-ai/plugin/-/plugin-1.4.7.tgz", - "integrity": "sha512-RbzMl7ILvQDHpZNvqzi6RCYaGcB3eBwNIMRZww467drLvMd1eOwr4/qAurrvYDsIIEctE6cKsrLuSGIKCW/Fxg==", + "version": "1.4.8", + "resolved": "https://registry.npmjs.org/@opencode-ai/plugin/-/plugin-1.4.8.tgz", + "integrity": "sha512-arbggGAwR7vE6d5a/Ra8A7yECXYcOAPyRbJHzkofLLiVzyclsThFaL2SSCZw/UNJJTtt3L7JGl95phFodJq8tQ==", "license": "MIT", "dependencies": { - "@opencode-ai/sdk": "1.4.7", + "@opencode-ai/sdk": "1.4.8", "effect": "4.0.0-beta.48", "zod": "4.1.8" }, "peerDependencies": { - "@opentui/core": ">=0.1.99", - "@opentui/solid": ">=0.1.99" + "@opentui/core": ">=0.1.100", + "@opentui/solid": ">=0.1.100" }, "peerDependenciesMeta": { "@opentui/core": { @@ -110,9 +110,9 @@ } }, "node_modules/@opencode-ai/sdk": { - "version": "1.4.7", - "resolved": "https://registry.npmjs.org/@opencode-ai/sdk/-/sdk-1.4.7.tgz", - "integrity": "sha512-onEtaooQyoDP5gTShQeQSf0Sd8V7949G9pPNyIyRXnVtFqyDIhUDLGtL/a/+EIW9x5s+Y6lDy/3oVoGMvQ0rQQ==", + "version": "1.4.8", + "resolved": "https://registry.npmjs.org/@opencode-ai/sdk/-/sdk-1.4.8.tgz", + "integrity": "sha512-DTN0TwRxuBxdm2JvJO3Dg7Vp9/j8PFpTS/26qD6Mzi6UPI5+NBxgcDVkozKygi55Goj3AAQGJPp63qzbdc+8ag==", "license": "MIT", "dependencies": { "cross-spawn": "7.0.6" diff --git a/skills/diagram-design b/skills/diagram-design new file mode 160000 index 0000000..66d0d6a --- /dev/null +++ b/skills/diagram-design @@ -0,0 +1 @@ +Subproject commit 66d0d6ab76930a2116c492537f17510ba8892542 diff --git a/skills/html-ppt b/skills/html-ppt new file mode 160000 index 0000000..15fb85f --- /dev/null +++ b/skills/html-ppt @@ -0,0 +1 @@ +Subproject commit 15fb85f05b3092b00e5a4eb181227339fe1af679 diff --git a/skills/website-creator/SKILL.md b/skills/website-creator/SKILL.md index 0b1dd02..530895a 100644 --- a/skills/website-creator/SKILL.md +++ b/skills/website-creator/SKILL.md @@ -1,7 +1,7 @@ --- name: website-creator description: สร้างเว็บไซต์เต็มรูปแบบด้วย Astro + Tina CMS พร้อม Workflow สำหรับเว็บใหม่และ Migration ครอบคลุม Design System, Content Collections, Auth, SEO, PDPA Compliance และ Deploy -tags: [astro, website, website-development, website-creation, migration, tailwindcss, thai, pdpa, seo, tina-cms, astro-db, image-generation, picture-it] +tags: [astro, website, website-development, website-creation, migration, tailwindcss, thai, pdpa, seo, tina-cms, image-generation, picture-it] category: software-development related_skills: - spec-driven-development @@ -22,8 +22,8 @@ related_skills: **Astro + Tina CMS Stack:** - **Astro 6.x** — Static site generator ที่เร็วมาก รองรับ React/Vue/Svelte components - **Tina CMS** — Self-hosted Git-based CMS สำหรับ visual content editing -- **Astro DB** — Built-in database (libSQL) สำหรับ consent logs และ dynamic content - **Tailwind CSS 4.x** — ใช้ `@tailwindcss/vite` plugin +- **External Consent System** — Consent script จาก `consent.moreminimore.com` **Pattern อ้างอิง:** ใช้ template ที่มีอยู่แล้ว: `templates/astro-tina-starter/` @@ -32,7 +32,6 @@ related_skills: ``` src/ ├── components/ # Astro/React components -│ └── consent/ # PDPA consent system ├── content/ # Tina CMS content (MDX) │ ├── posts/ # Blog posts │ ├── pages/ # Static pages @@ -42,11 +41,8 @@ src/ ├── pages/ │ ├── index.astro # Home page │ └── [...slug].astro # Dynamic pages -├── stores/ # Nano Stores (client state) ├── styles/ │ └── global.css # Tailwind v4 + @theme -├── db/ -│ └── config.ts # Astro DB schema └── env.d.ts .tina/ # Tina CMS configuration @@ -59,21 +55,20 @@ package.json ### Static vs SSR -- **SSR (default สำหรับ consent):** ใช้ `output: 'server'` สำหรับ API routes + consent logging -- **Static:** Pre-built HTML + รันบน CDN (ไม่มี backend) +- **Static (default):** Pre-built HTML + รันบน CDN +- **SSR/Hybrid:** ใช้เมื่อต้องการ API routes หรือ dynamic content - **Hybrid:** บางหน้า static บางหน้า dynamic -**สำหรับ Easypanel:** ใช้ SSR mode เพื่อรองรับ Astro DB API routes +**สำหรับ Easypanel:** ใช้ `output: 'static'` หรือ `output: 'hybrid'` (ถ้าต้องการ API routes) ## Critical Configuration Rules -### 1. astro.config.mjs (Tailwind v4 + Tina + SSR) +### 1. astro.config.mjs (Tailwind v4 + Tina) ```javascript import { defineConfig } from 'astro/config' import tailwindcss from '@tailwindcss/vite' import tina from 'tinacms' -import node from '@astrojs/node' export default defineConfig({ integrations: [ @@ -85,11 +80,7 @@ export default defineConfig({ vite: { plugins: [tailwindcss()], // Tailwind v4 ใช้ @tailwindcss/vite }, - output: 'server', - adapter: node({ mode: 'standalone' }), - server: { - port: 4321, - }, + output: 'static', // หรือ 'hybrid' ถ้าต้องการ API routes }) ``` @@ -100,10 +91,7 @@ export default defineConfig({ "dependencies": { "astro": "^6.1.7", "@tinacms/cli": "^2.1.0", - "tinacms": "^2.2.0", - "@astrojs/db": "^0.14.0", - "nanostores": "^0.11.0", - "@nanostores/preact": "^0.5.0" + "tinacms": "^2.2.0" }, "devDependencies": { "@tailwindcss/vite": "^4.0.0", @@ -534,115 +522,54 @@ const { post } = Astro.props; 2. **Terms of Service** — ใช้ `templates/terms-of-service.md` -3. **PDPA Topics ที่ต้องครอบคลุม:** +3. **Consent System** — ใช้ consent script จาก `consent.moreminimore.com` -**3.1 Cookie Consent Popup** -- ไม่ block content -- Options: Accept All, Reject All, Customize -- ถ้า reject → ไม่ load GA4/marketing scripts +**Environment Variables สำหรับ Consent:** -**3.2 Consent Logging (PDPA)** -- เก็บ log ลง Astro DB (ไม่ต้อง MongoDB ภายนอก) -- ระบุ: action, purpose, analytics/marketing/functional flags, ip, userAgent, timestamp +```bash +# .env +CONSENT_SITE_ID=your-site-id-here +CONSENT_API_BASE=https://consent.moreminimore.com +``` -**ไฟล์ที่ต้องสร้าง:** - -1. **`ConsentBanner.astro`** — Consent banner component (มีใน template) +**เพิ่ม Consent Script ใน Layout:** ```astro --- -// src/components/consent/ConsentBanner.astro -import { consentStore } from '@/stores/consent'; +// 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} + + + + - + + + + ``` -2. **`db/config.ts`** — Astro DB schema: +**Consent Options:** +- Accept All / Reject All / Customize +- ถ้า reject → ไม่ load GA4/marketing scripts +- Server-side logging ใน consent service ของตัวเอง -```typescript -// src/db/config.ts -import { defineDb, column } from 'astro:db'; - -export const ConsentLog = defineTable({ - columns: { - id: column serial({ 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({ default: { now: true } }), - sessionId: column text({ optional: true }), - }, -}); -``` - -3. **`src/pages/api/consent.ts`** — API endpoint: - -```typescript -// src/pages/api/consent.ts -import type { APIRoute } from 'astro'; -import { db, ConsentLog } from 'astro:db'; - -export const POST: APIRoute = async ({ request }) => { - const body = await request.json(); - const { action, purpose, analytics, marketing, functional } = body; - - const ip = request.headers.get('x-forwarded-for')?.split(',')[0] || 'unknown'; - const userAgent = request.headers.get('user-agent') || 'unknown'; - - await db.insert(ConsentLog).values({ - action, - purpose, - analytics, - marketing, - functional, - userAgent, - ip, - }); - - return new Response(JSON.stringify({ success: true }), { - status: 200, - headers: { 'Content-Type': 'application/json' }, - }); -}; -``` - -4. **เพิ่มใน astro.config.mjs:** - -```javascript -// astro.config.mjs -import { defineConfig } from 'astro/config'; -import tailwindcss from '@tailwindcss/vite'; -import tina from 'tinacms'; - -export default defineConfig({ - integrations: [tina()], - vite: { plugins: [tailwindcss()] }, - output: 'server', - adapter: node({ mode: 'standalone' }), -}); -``` - -**3.3 Right to be Forgotten** -- API endpoint สำหรับลบข้อมูล user +**3.1 Right to be Forgotten** +- Consent service มี API สำหรับลบข้อมูล user --- @@ -927,9 +854,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 @@ -955,26 +879,9 @@ astro-tina-starter/ **Features ที่มี:** - Astro 6.1.7 + Tina CMS 2.x - Tailwind CSS 4.x with `@tailwindcss/vite` -- Astro DB for consent logging -- Nano Stores for client state - Thai language support - Docker-ready - -### PDPA Consent Template (`templates/consent/`) - -Template สำหรับ PDPA consent system: - -``` -consent/ -├── ConsentBanner.astro # Consent banner component -├── api/ -│ ├── consent.ts # API endpoints -│ └── route.ts # Astro API route -├── db/ -│ └── config.ts # Astro DB ConsentLog table -└── stores/ - └── consent.ts # Nano Stores -``` +- External consent system integration --- @@ -1057,20 +964,6 @@ npm install -D @tailwindcss/vite @import "tailwindcss"; # ไม่ใช่ @tailwind base; @tailwind components; @tailwind utilities; ``` -### Astro DB not working - -**Error:** `Cannot find module 'astro:db'` หรือ tables not found - -**ทางแก้:** - -```bash -# Push schema to database -npm run db:push - -# ตรวจสอบว่ามี astro:db import ถูกต้อง -import { db, ConsentLog } from 'astro:db'; -``` - ### Tina Admin not loading **อาการ:** `/admin` แสดง blank page หรือ error @@ -1123,23 +1016,6 @@ const { Content } = await post.render(); ``` -### Static build vs SSR - -**อาการ:** API routes ไม่ทำงานหลัง build - -**ทางแก้:** - -ถ้าต้องการใช้ API routes (เช่น consent API): - -```javascript -// astro.config.mjs -export default defineConfig({ - output: 'hybrid', // หรือ 'server' สำหรับทุกหน้า dynamic -}); -``` - -แล้วเพิ่ม `export const prerender = false;` ใน API route files. - --- ## Key Principles