🍪 การยินยอมตาม พ.ร.บ.คุ้มครองข้อมูลส่วนบุคคล
เราใช้คุกกี้เพื่อปรับปรุงประสบการณ์...
```
2. **`db/config.ts`** — Astro DB schema:
```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: 'static',
// Astro DB รวมอยู่แล้ว ไม่ต้องติดตั้งเพิ่ม
});
```
**3.3 Right to be Forgotten**
- API endpoint สำหรับลบข้อมูล user
---
### Step 8: SEO Setup
**เรียก skills: `seo-analyzers` + `seo-geo` + `seo-multi-channel`**
1. **Meta tags ทุกหน้า** — ใช้ frontmatter จาก MDX หรือ static
2. **sitemap.xml** — Astro ใช้ `@astrojs/sitemap`
3. **robots.txt**
4. **Open Graph images** — **ใช้ `picture-it` สร้าง OG image template ที่ consistent**
5. **JSON-LD structured data**
6. **Thai language optimization**
```bash
# ติดตั้ง sitemap
npx astro add sitemap
```
```javascript
// astro.config.mjs
import sitemap from '@astrojs/sitemap';
export default defineConfig({
site: 'https://example.com',
integrations: [sitemap(), tina()],
});
```
---
### Step 9: Preview + QA
```bash
npm run dev
```
**ก่อน QA — เรียก skills ตามลำดับ:**
1. **`code-review-and-quality`** — Full multi-axis code review ก่อน delivery
2. **`performance-optimization`** — Performance audit + fixes
3. **`browser-testing-with-devtools`** — ทดสอบใน real browser
**จากนั้นเรียก `dogfood` สำหรับ exploratory QA:**
```bash
/skill dogfood
"ทดสอบ user journey:
1. ดู home page → คลิก services
2. ดู about us
3. กรอก contact form
4. ทดสอบ cookie consent popup
5. ตรวจ PDPA compliance (privacy policy, terms)
6. ตรวจ mobile responsive
7. ตรวจ SEO meta tags ทุกหน้า"
```
ให้ user ตรวจสอบ → รอ feedback → แก้ไข → รอ approve
---
### Step 10: Deploy
**เรียก skill: `easypanel-deploy`**
```bash
/skill easypanel-deploy
"deploy ไปยัง easypanel server
server: openclaw-vps
project: my-website
domain: example.com
git repo: https://github.com/user/my-website"
```
---
## Workflow B: ปรับปรุงเว็บที่มีอยู่แล้ว (Existing Repo)
### ความหมายของ "Existing Repo"
Repo ที่มีโครงสร้าง Astro + Tina แล้ว แต่ยังไม่สมบูรณ์ — เช่น:
- มี starter template แต่ไม่มี content
- มี design tokens แล้วแต่ยังไม่มี pages
- มีบางหน้าแต่ต้องการปรับปรุงเนื้อหา/design
**ไม่ใช่** 新规 creation — มี codebase อยู่แล้ว ปรับในที่เดิม
---
### ขั้นตอน
```
[1] ตรวจสอบ repo ที่มี (terminal/find ดูโครงสร้าง)
│
[2] สำรวจ: astro.config.mjs, components, pages, design tokens
│
[3] สำรวจ content ที่มี (Posts, Pages จากเว็บเดิม) → วางแผน Migration
│
[4] Migrate content เข้า Tina CMS
│
[5] ตรวจสอบ /admin ว่าเห็น Posts + Pages พร้อมแก้ไขได้
│
[6] Integrate: อัปเดต Pages ให้อ่านจาก Tina แทน hardcode
│ (ดู **Design + Tina Integration** ด้านบน)
│
[7] สรุปสิ่งที่มี vs สิ่งที่ขาด → แผน Sitemap
│
[8] ถามคำถามที่ขาด (content, portfolio, pricing, dark/light)
│
[9] รอ approve
↓
จากนั้น → Workflow A Step 3 เป็นต้นไป (พัฒนา Components + Pages)
```
---
## Migration: Next.js + Payload → Astro + Tina
**ใช้ script ที่มีอยู่แล้ว:**
```bash
# Migrate existing website ไป Astro + Tina
bash skills/website-creator/scripts/migrate-tina.sh /path/to/existing-site /path/to/migrated-site
```
**Script ทำอะไร:**
1. Detect source technology (Astro, Next.js, Remix, etc.)
2. Analyze source content
3. Copy Astro+Tina template
4. Migrate content (MD/MDX files)
5. Add PDPA consent system
6. Create Tina schema
7. Generate migration report
### Content Migration Checklist
| จาก Payload | ไป Tina |
|------------|---------|
| `payload.find()` | Astro content collections |
| `RichText` component | MDX files |
| `payload.config.ts` collections | `.tina/schema.ts` collections |
| MongoDB/PostgreSQL | Astro DB (built-in) |
| `/admin` | `/admin` (Tina visual editor) |
| Payload Auth | Tina Auth (optional) |
---
## Astro Content Collections
Astro ใช้ content collections สำหรับ type-safe content management:
### สร้าง Collection
```typescript
// src/content/config.ts
import { defineCollection, z } from 'astro:content';
const postsCollection = defineCollection({
type: 'content',
schema: z.object({
title: z.string(),
description: z.string().optional(),
publishedAt: z.date().optional(),
author: z.string().optional(),
image: z.string().optional(),
}),
});
const pagesCollection = defineCollection({
type: 'content',
schema: z.object({
title: z.string(),
description: z.string().optional(),
}),
});
export const collections = {
posts: postsCollection,
pages: pagesCollection,
};
```
### ใช้ Collection
```astro
---
// src/pages/blog/[slug].astro
import { getCollection } from 'astro:content';
export async function getStaticPaths() {
const posts = await getCollection('posts');
return posts.map((post) => ({
params: { slug: post.slug },
props: { post },
}));
}
const { post } = Astro.props;
const { Content } = await post.render();
---