สถาปัตยกรรมเว็บนี้ (Platform)

Base/stack ของ private-docs และ design การทำงาน — 2 surface (Docs อ่าน + Decks นำเสนอ) บน Astro + React islands, deploy Cloudflare Pages

อัปเดต: 2026-06-04

ภาพรวมว่าเว็บนี้ สร้างด้วยอะไร และ ทำงานอย่างไร — สำหรับคนที่จะมาต่อยอด/ดูแลต่อ

Stack

ชั้น	ใช้อะไร	บทบาท
Base framework	Astro (static SSG)	แกนหลัก — build เป็น HTML static, ship JS เท่าที่จำเป็น (ADR-0001)
Interactivity	React 18 (`@astrojs/react`)	“islands” — component โต้ตอบ hydrate เฉพาะจุด (เช่น `StepFlow`)
Presentation	reveal.js	deck นำเสนอแบบออกแบบสไลด์เอง (ADR-0003)
Diagram	HTML/CSS (box flows) + mermaid (เฉพาะ sequence)	กล่อง-ลูกศร = HTML (ไม่ clip), ลำดับ = mermaid
Markdown ขยาย	`remark-directive` + `remark-docs.mjs`	`:::note/tip/warning/details` + แปลง ```mermaid
Deploy	GitHub Actions → Cloudflare Pages	push `main` → build → deploy static

theme.cssEXIM tokens · dark/light · no-flash

↓

A · DOCS (อ่าน)src/content/docs/**.md

↓

[...slug].astro → DocLayout
sidebar + TOC + search

↓

Read = scroll · Present(เร็ว) = auto-slice (viewer.ts)

B · DECKS (นำเสนอ)src/pages/present/*.astro

↓

PresentLayout + reveal-deck.ts
reveal.js สไลด์ออกแบบเอง

↓

fragment build-up · ฝัง React island สด

ส่วนกลางใช้ร่วม: enhance.ts (mermaid + ปุ่ม copy + ปุ่มขยาย diagram + โหลดฟอนต์ก่อนวัด)

เนื้อหาเป็น Markdown ใน content collection (src/content/docs/<group>/*.md)

เปิดที่ /docs/... → DocLayout (sidebar จัดกลุ่มตาม group, TOC, search, ปุ่มธีม/นำเสนอ)
Read = อ่าน scroll ยาว · Present (เร็ว) = ปุ่ม ”▶ นำเสนอ” หั่นที่ ##/# เป็นสไลด์ (viewer.ts)
เพิ่มเอกสาร = วางไฟล์ .md ใหม่ + ใส่ frontmatter (title, description, group, order)

reveal.js deck ออกแบบสไลด์เอง (src/pages/present/<name>.astro)

full-screen ผ่าน PresentLayout + init ด้วย reveal-deck.ts
สไลด์ sparse/visual (cover · cards · pills · 1 diagram) + .fragment เผยทีละจุด + ฝัง component สด
ปรากฏเป็น การ์ด featured บน Hub

ที่	หน้าที่
`src/styles/theme.css`	สี/ฟอนต์ EXIM + dark/light — แก้สีที่นี่ที่เดียว
`src/styles/reveal-exim.css`	ธีม reveal.js (deck)
`src/scripts/viewer.ts`	doc Present (clone-slider)
`src/scripts/reveal-deck.ts`	deck init (reveal + mermaid + theme sync)
`src/scripts/enhance.ts`	mermaid · copy code · ขยาย diagram · โหลดฟอนต์
`src/scripts/search.ts`	ค้นข้ามเอกสาร
`src/layouts/`	`DocLayout` (อ่าน) · `PresentLayout` (deck) · `BaseLayout` (hub/preview)
`src/pages/`	`index.astro` (hub) · `docs/[...slug].astro` · `present/*.astro`
`src/plugins/remark-docs.mjs`	callout/details + mermaid fence
`docs/adr/`	บันทึกการตัดสินใจ (ADR)

push main→ GitHub Actions→ npm ci + build→ Cloudflare Pages

main → production · branch อื่น → preview deploy (ไฟล์ .github/workflows/deploy.yml)
ต้องตั้ง secret CLOUDFLARE_API_TOKEN + CLOUDFLARE_ACCOUNT_ID ใน repo

ดูไฟล์เต็มได้ที่ docs/adr/ ใน repo