feat: add diagram-design and html-ppt skills
- Add cathrynlavery/diagram-design: 13 editorial diagram types (architecture, flowchart, sequence, state machine, ER, timeline, etc.) as standalone HTML/SVG - Add lewislulu/html-ppt-skill: 36 themes, 31 layouts, 47 animations, presenter mode for HTML presentations - Security check: both repos verified clean (no malware, no data exfiltration)
This commit is contained in:
20
.opencode/package-lock.json
generated
20
.opencode/package-lock.json
generated
@@ -5,7 +5,7 @@
|
|||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@opencode-ai/plugin": "1.4.7"
|
"@opencode-ai/plugin": "1.4.8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@msgpackr-extract/msgpackr-extract-darwin-arm64": {
|
"node_modules/@msgpackr-extract/msgpackr-extract-darwin-arm64": {
|
||||||
@@ -87,18 +87,18 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"node_modules/@opencode-ai/plugin": {
|
"node_modules/@opencode-ai/plugin": {
|
||||||
"version": "1.4.7",
|
"version": "1.4.8",
|
||||||
"resolved": "https://registry.npmjs.org/@opencode-ai/plugin/-/plugin-1.4.7.tgz",
|
"resolved": "https://registry.npmjs.org/@opencode-ai/plugin/-/plugin-1.4.8.tgz",
|
||||||
"integrity": "sha512-RbzMl7ILvQDHpZNvqzi6RCYaGcB3eBwNIMRZww467drLvMd1eOwr4/qAurrvYDsIIEctE6cKsrLuSGIKCW/Fxg==",
|
"integrity": "sha512-arbggGAwR7vE6d5a/Ra8A7yECXYcOAPyRbJHzkofLLiVzyclsThFaL2SSCZw/UNJJTtt3L7JGl95phFodJq8tQ==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@opencode-ai/sdk": "1.4.7",
|
"@opencode-ai/sdk": "1.4.8",
|
||||||
"effect": "4.0.0-beta.48",
|
"effect": "4.0.0-beta.48",
|
||||||
"zod": "4.1.8"
|
"zod": "4.1.8"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"@opentui/core": ">=0.1.99",
|
"@opentui/core": ">=0.1.100",
|
||||||
"@opentui/solid": ">=0.1.99"
|
"@opentui/solid": ">=0.1.100"
|
||||||
},
|
},
|
||||||
"peerDependenciesMeta": {
|
"peerDependenciesMeta": {
|
||||||
"@opentui/core": {
|
"@opentui/core": {
|
||||||
@@ -110,9 +110,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@opencode-ai/sdk": {
|
"node_modules/@opencode-ai/sdk": {
|
||||||
"version": "1.4.7",
|
"version": "1.4.8",
|
||||||
"resolved": "https://registry.npmjs.org/@opencode-ai/sdk/-/sdk-1.4.7.tgz",
|
"resolved": "https://registry.npmjs.org/@opencode-ai/sdk/-/sdk-1.4.8.tgz",
|
||||||
"integrity": "sha512-onEtaooQyoDP5gTShQeQSf0Sd8V7949G9pPNyIyRXnVtFqyDIhUDLGtL/a/+EIW9x5s+Y6lDy/3oVoGMvQ0rQQ==",
|
"integrity": "sha512-DTN0TwRxuBxdm2JvJO3Dg7Vp9/j8PFpTS/26qD6Mzi6UPI5+NBxgcDVkozKygi55Goj3AAQGJPp63qzbdc+8ag==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"cross-spawn": "7.0.6"
|
"cross-spawn": "7.0.6"
|
||||||
|
|||||||
1
skills/diagram-design
Submodule
1
skills/diagram-design
Submodule
Submodule skills/diagram-design added at 66d0d6ab76
1
skills/html-ppt
Submodule
1
skills/html-ppt
Submodule
Submodule skills/html-ppt added at 15fb85f05b
@@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
name: website-creator
|
name: website-creator
|
||||||
description: สร้างเว็บไซต์เต็มรูปแบบด้วย Astro + Tina CMS พร้อม Workflow สำหรับเว็บใหม่และ Migration ครอบคลุม Design System, Content Collections, Auth, SEO, PDPA Compliance และ Deploy
|
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
|
category: software-development
|
||||||
related_skills:
|
related_skills:
|
||||||
- spec-driven-development
|
- spec-driven-development
|
||||||
@@ -22,8 +22,8 @@ related_skills:
|
|||||||
**Astro + Tina CMS Stack:**
|
**Astro + Tina CMS Stack:**
|
||||||
- **Astro 6.x** — Static site generator ที่เร็วมาก รองรับ React/Vue/Svelte components
|
- **Astro 6.x** — Static site generator ที่เร็วมาก รองรับ React/Vue/Svelte components
|
||||||
- **Tina CMS** — Self-hosted Git-based CMS สำหรับ visual content editing
|
- **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
|
- **Tailwind CSS 4.x** — ใช้ `@tailwindcss/vite` plugin
|
||||||
|
- **External Consent System** — Consent script จาก `consent.moreminimore.com`
|
||||||
|
|
||||||
**Pattern อ้างอิง:** ใช้ template ที่มีอยู่แล้ว: `templates/astro-tina-starter/`
|
**Pattern อ้างอิง:** ใช้ template ที่มีอยู่แล้ว: `templates/astro-tina-starter/`
|
||||||
|
|
||||||
@@ -32,7 +32,6 @@ related_skills:
|
|||||||
```
|
```
|
||||||
src/
|
src/
|
||||||
├── components/ # Astro/React components
|
├── components/ # Astro/React components
|
||||||
│ └── consent/ # PDPA consent system
|
|
||||||
├── content/ # Tina CMS content (MDX)
|
├── content/ # Tina CMS content (MDX)
|
||||||
│ ├── posts/ # Blog posts
|
│ ├── posts/ # Blog posts
|
||||||
│ ├── pages/ # Static pages
|
│ ├── pages/ # Static pages
|
||||||
@@ -42,11 +41,8 @@ src/
|
|||||||
├── pages/
|
├── pages/
|
||||||
│ ├── index.astro # Home page
|
│ ├── index.astro # Home page
|
||||||
│ └── [...slug].astro # Dynamic pages
|
│ └── [...slug].astro # Dynamic pages
|
||||||
├── stores/ # Nano Stores (client state)
|
|
||||||
├── styles/
|
├── styles/
|
||||||
│ └── global.css # Tailwind v4 + @theme
|
│ └── global.css # Tailwind v4 + @theme
|
||||||
├── db/
|
|
||||||
│ └── config.ts # Astro DB schema
|
|
||||||
└── env.d.ts
|
└── env.d.ts
|
||||||
|
|
||||||
.tina/ # Tina CMS configuration
|
.tina/ # Tina CMS configuration
|
||||||
@@ -59,21 +55,20 @@ package.json
|
|||||||
|
|
||||||
### Static vs SSR
|
### Static vs SSR
|
||||||
|
|
||||||
- **SSR (default สำหรับ consent):** ใช้ `output: 'server'` สำหรับ API routes + consent logging
|
- **Static (default):** Pre-built HTML + รันบน CDN
|
||||||
- **Static:** Pre-built HTML + รันบน CDN (ไม่มี backend)
|
- **SSR/Hybrid:** ใช้เมื่อต้องการ API routes หรือ dynamic content
|
||||||
- **Hybrid:** บางหน้า static บางหน้า dynamic
|
- **Hybrid:** บางหน้า static บางหน้า dynamic
|
||||||
|
|
||||||
**สำหรับ Easypanel:** ใช้ SSR mode เพื่อรองรับ Astro DB API routes
|
**สำหรับ Easypanel:** ใช้ `output: 'static'` หรือ `output: 'hybrid'` (ถ้าต้องการ API routes)
|
||||||
|
|
||||||
## Critical Configuration Rules
|
## Critical Configuration Rules
|
||||||
|
|
||||||
### 1. astro.config.mjs (Tailwind v4 + Tina + SSR)
|
### 1. astro.config.mjs (Tailwind v4 + Tina)
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
import { defineConfig } from 'astro/config'
|
import { defineConfig } from 'astro/config'
|
||||||
import tailwindcss from '@tailwindcss/vite'
|
import tailwindcss from '@tailwindcss/vite'
|
||||||
import tina from 'tinacms'
|
import tina from 'tinacms'
|
||||||
import node from '@astrojs/node'
|
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
integrations: [
|
integrations: [
|
||||||
@@ -85,11 +80,7 @@ export default defineConfig({
|
|||||||
vite: {
|
vite: {
|
||||||
plugins: [tailwindcss()], // Tailwind v4 ใช้ @tailwindcss/vite
|
plugins: [tailwindcss()], // Tailwind v4 ใช้ @tailwindcss/vite
|
||||||
},
|
},
|
||||||
output: 'server',
|
output: 'static', // หรือ 'hybrid' ถ้าต้องการ API routes
|
||||||
adapter: node({ mode: 'standalone' }),
|
|
||||||
server: {
|
|
||||||
port: 4321,
|
|
||||||
},
|
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -100,10 +91,7 @@ export default defineConfig({
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"astro": "^6.1.7",
|
"astro": "^6.1.7",
|
||||||
"@tinacms/cli": "^2.1.0",
|
"@tinacms/cli": "^2.1.0",
|
||||||
"tinacms": "^2.2.0",
|
"tinacms": "^2.2.0"
|
||||||
"@astrojs/db": "^0.14.0",
|
|
||||||
"nanostores": "^0.11.0",
|
|
||||||
"@nanostores/preact": "^0.5.0"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@tailwindcss/vite": "^4.0.0",
|
"@tailwindcss/vite": "^4.0.0",
|
||||||
@@ -534,115 +522,54 @@ const { post } = Astro.props;
|
|||||||
|
|
||||||
2. **Terms of Service** — ใช้ `templates/terms-of-service.md`
|
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**
|
**Environment Variables สำหรับ Consent:**
|
||||||
- ไม่ block content
|
|
||||||
- Options: Accept All, Reject All, Customize
|
|
||||||
- ถ้า reject → ไม่ load GA4/marketing scripts
|
|
||||||
|
|
||||||
**3.2 Consent Logging (PDPA)**
|
```bash
|
||||||
- เก็บ log ลง Astro DB (ไม่ต้อง MongoDB ภายนอก)
|
# .env
|
||||||
- ระบุ: action, purpose, analytics/marketing/functional flags, ip, userAgent, timestamp
|
CONSENT_SITE_ID=your-site-id-here
|
||||||
|
CONSENT_API_BASE=https://consent.moreminimore.com
|
||||||
|
```
|
||||||
|
|
||||||
**ไฟล์ที่ต้องสร้าง:**
|
**เพิ่ม Consent Script ใน Layout:**
|
||||||
|
|
||||||
1. **`ConsentBanner.astro`** — Consent banner component (มีใน template)
|
|
||||||
|
|
||||||
```astro
|
```astro
|
||||||
---
|
---
|
||||||
// src/components/consent/ConsentBanner.astro
|
// src/layouts/Layout.astro
|
||||||
import { consentStore } from '@/stores/consent';
|
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';
|
||||||
---
|
---
|
||||||
|
|
||||||
<div id="pdpa-consent-banner" class="consent-banner">
|
<!DOCTYPE html>
|
||||||
<h3>🍪 การยินยอมตาม พ.ร.บ.คุ้มครองข้อมูลส่วนบุคคล</h3>
|
<html lang="th">
|
||||||
<p>เราใช้คุกกี้เพื่อปรับปรุงประสบการณ์...</p>
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
<div class="consent-banner__buttons">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<button id="consent-accept-all">ยอมรับทั้งหมด</button>
|
<title>{title}</title>
|
||||||
<button id="consent-reject-all">ปฏิเสธทั้งหมด</button>
|
<meta name="description" content={description} />
|
||||||
<button id="consent-show-preferences">ตั้งค่าคุกกี้</button>
|
</head>
|
||||||
</div>
|
<body>
|
||||||
</div>
|
<slot />
|
||||||
|
|
||||||
<script>
|
<!-- Consent Script -->
|
||||||
import { consentStore } from './stores/consent';
|
<script
|
||||||
// ... consent logic
|
src={`${consentApiBase}/consent-loader.js`}
|
||||||
</script>
|
data-site-id={consentSiteId}
|
||||||
|
data-api-base={consentApiBase}
|
||||||
|
></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
```
|
```
|
||||||
|
|
||||||
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
|
**3.1 Right to be Forgotten**
|
||||||
// src/db/config.ts
|
- Consent service มี API สำหรับลบข้อมูล user
|
||||||
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
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -927,9 +854,6 @@ astro-tina-starter/
|
|||||||
├── .tina/
|
├── .tina/
|
||||||
│ ├── config.ts # Tina CMS configuration
|
│ ├── config.ts # Tina CMS configuration
|
||||||
│ └── schema.ts # Content schema definitions
|
│ └── schema.ts # Content schema definitions
|
||||||
├── db/
|
|
||||||
│ ├── config.ts # Astro DB schema
|
|
||||||
│ └── seed.ts # Database seed script
|
|
||||||
├── src/
|
├── src/
|
||||||
│ ├── styles/
|
│ ├── styles/
|
||||||
│ │ └── global.css # Tailwind v4 styles + @theme
|
│ │ └── global.css # Tailwind v4 styles + @theme
|
||||||
@@ -955,26 +879,9 @@ astro-tina-starter/
|
|||||||
**Features ที่มี:**
|
**Features ที่มี:**
|
||||||
- Astro 6.1.7 + Tina CMS 2.x
|
- Astro 6.1.7 + Tina CMS 2.x
|
||||||
- Tailwind CSS 4.x with `@tailwindcss/vite`
|
- Tailwind CSS 4.x with `@tailwindcss/vite`
|
||||||
- Astro DB for consent logging
|
|
||||||
- Nano Stores for client state
|
|
||||||
- Thai language support
|
- Thai language support
|
||||||
- Docker-ready
|
- Docker-ready
|
||||||
|
- External consent system integration
|
||||||
### 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
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -1057,20 +964,6 @@ npm install -D @tailwindcss/vite
|
|||||||
@import "tailwindcss"; # ไม่ใช่ @tailwind base; @tailwind components; @tailwind utilities;
|
@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
|
### Tina Admin not loading
|
||||||
|
|
||||||
**อาการ:** `/admin` แสดง blank page หรือ error
|
**อาการ:** `/admin` แสดง blank page หรือ error
|
||||||
@@ -1123,23 +1016,6 @@ const { Content } = await post.render();
|
|||||||
<Content />
|
<Content />
|
||||||
```
|
```
|
||||||
|
|
||||||
### 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
|
## Key Principles
|
||||||
|
|||||||
Reference in New Issue
Block a user