Colophon
เว็บนี้สร้างด้วยอะไร ตัดสินใจเลือกอะไรและทำไม — รายละเอียดสำหรับคนที่สนใจ craft เบื้องหลัง
Stack
- Astro 5 Framework หลัก — เลือกเพราะ zero JS by default, Content Collections, และ static output ที่ไม่ต้องการ server
- TypeScript เปิด strict mode ทุกไฟล์ ช่วยจับ error ก่อน build ได้มาก โดยเฉพาะใน frontmatter schema
- Zod validate schema ของ Content Collections — ถ้า frontmatter ผิด Astro จะ error ตอน build ไม่ใช่ตอน runtime
- GSAP + ScrollTrigger animation library เพียงตัวเดียวที่ใช้ — ใช้กับ View Transitions ผ่าน gsap.context() cleanup
- Pagefind client-side search ที่ index ตอน build time ไม่ต้องการ backend หรือ API key
ทำไม Static
- เร็ว HTML พร้อม serve จาก CDN ทันที ไม่มี database query หรือ server render per request
- ง่าย ไม่มี server process ที่ต้องดูแล ไม่มี downtime จาก backend
- ทน ไฟล์ HTML/CSS/JS อยู่ได้นานโดยไม่ต้อง update dependency บ่อย
- ถูก ค่า hosting ขั้นต่ำ หรือฟรีถ้าใช้ GitHub Pages
Typography
- Inter ใช้สำหรับ UI, labels, metadata — อ่านง่ายบนหน้าจอทุกขนาด ออกแบบมาสำหรับ digital โดยเฉพาะ
- Noto Sans Thai ใช้สำหรับข้อความภาษาไทย — ส่วนหนึ่งของ Noto family ที่ครอบคลุมทุกภาษา ดู consistent กับ Inter
- Type Scale ใช้ Perfect Fourth ratio (1.333) — clamp() สำหรับ fluid sizing บน heading หลัก
- Line Height 1.55 สำหรับ UI, 1.7 สำหรับ prose — อ่านภาษาไทยที่ line-height ต่ำจะแน่นเกินไป
Color System
- Accent: #2563eb Blue-600 จาก Tailwind palette — ผ่าน WCAG AA contrast บน white background
- CSS Custom Properties ไม่ใช้ CSS framework เขียน variable เอง --text, --accent, --line, --surface เพื่อ control ทุก detail
- Dark Mode [data-theme='dark'] attribute บน <html> แทน @media prefers-color-scheme เพื่อให้ user override ได้
- Anti-FOUC Inline script ใน <head> อ่าน localStorage ก่อน browser render ป้องกัน flash of wrong theme
Content Management
- Markdown + Frontmatter เนื้อหาทุกชิ้นอยู่ในไฟล์ .md — version control ด้วย git, diff อ่านง่าย, portable
- Custom Admin Panel /admin ใช้ GitHub Contents API โดยตรง — อ่าน/เขียน/ลบไฟล์ .md ผ่าน browser โดยไม่ต้องมี backend
- GitHub OAuth Authentication ผ่าน GitHub OAuth — token เก็บใน localStorage ฝั่ง client เท่านั้น
Deployment
- Railway Auto-deploy จาก GitHub push ทุก commit — build Astro static output แล้ว serve ด้วย Express.js
- Domain panupongws.com — custom domain ผ่าน Railway environment
- Build Time ประมาณ 3–5 วินาทีสำหรับ 425+ หน้า — fast เพราะ Astro ใช้ Vite เป็น build tool และมี incremental build cache
Development Environment
- WSL2 + Ubuntu development environment หลัก — รัน Astro dev server และ build บน Linux
- tmux แบ่ง session สำหรับ leader/frontend/content/qa — multi-agent workflow ผ่าน tmux send-keys
- VS Code + Astro Extension syntax highlighting, IntelliSense, และ type checking สำหรับ .astro files
- Claude Code AI assistant ที่ช่วย build เว็บนี้ — ทำงานแบบ multi-agent orchestration ผ่าน tmux sessions