Panupong WS

เป้าหมาย

สร้างพื้นที่ส่วนตัวที่ไม่ต้องพึ่ง platform ของคนอื่น รวบรวมงานที่กำลังสร้าง สิ่งที่เรียนรู้ และ resource ที่กลับมาใช้ได้จริง — ทั้งหมดอยู่ในที่เดียวที่ควบคุมเองได้

Architecture

src/
├── content/
│   ├── projects/     ← markdown files พร้อม frontmatter
│   └── resources/    ← markdown files พร้อม frontmatter
├── pages/
│   ├── index.astro   ← homepage ดึง collection จริง
│   ├── projects.astro
│   ├── resources.astro
│   ├── [slug].astro  ← dynamic detail pages
│   ├── search.astro  ← Pagefind search
│   └── rss.xml.ts    ← RSS feed
└── components/
    ├── Header.astro   ← sticky nav + hamburger
    ├── Footer.astro
    └── Card.astro     ← reusable card + stretched link

Tech Stack

Multi-Agent Development

เว็บนี้สร้างผ่านระบบ multi-agent บน tmux โดยมี 4 roles ทำงานพร้อมกัน:

• leader (Claude) — วางแผน มอบหมาย commit และ log
• frontend (Codex) — สร้างหน้าและ components
• content (Claude) — เขียน markdown content
• qa (Codex) — ตรวจสอบก่อน commit

ฟีเจอร์ที่สร้าง

Navigation & UX

• Breadcrumb nav — ทุก detail page มี หน้าแรก / Section / Title พร้อม aria-current="page"
• Table of Contents — auto-generate จาก headings พร้อม active highlight ด้วย IntersectionObserver
• Tag filter — กรอง projects/resources ด้วย tag พร้อม URL params (?tag=astro) และ noscript fallback
• Reading progress bar — แสดงบน detail pages เท่านั้น
• Keyboard shortcut — กด / จากทุกหน้าเพื่อไปยัง search

Performance & SEO

• View Transitions — Astro ClientRouter ทำ smooth page fade
• Anti-FOUC — inline script ตั้ง data-theme ก่อน render ครั้งแรก
• Dark mode — toggle + OS sync + localStorage persistence
• JSON-LD — WebSite, Article, Person, BreadcrumbList schema
• Sitemap + RSS — auto-generate ด้วย @astrojs/sitemap และ @astrojs/rss

Content Features

• Related content — เรียงตาม shared tags บน detail pages
• Prev/next navigation — ลำดับตาม date
• Copy code button — Clipboard API, appear on hover
• Reading time — คำนวณจาก word count ÷ 200
• Social sharing — Twitter/X + LinkedIn บน detail pages

สิ่งที่เรียนรู้

Astro 6 เปลี่ยน config location — src/content/config.ts กลายเป็น src/content.config.ts ที่ root ของ src — ต้องระวังเมื่ออ่าน tutorial เก่า

Static site ทำได้มากกว่าที่คิด — Pagefind, RSS, sitemap, tag filter ทำได้ทั้งหมดโดยไม่มี backend เลย

Content Collections ช่วย enforce quality — Zod schema ทำให้ frontmatter ผิดไม่ได้ build ไม่ผ่าน — เป็น guardrail ที่ดีมาก

View Transitions ต้องการ scroll reset เอง — astro:after-swap ต้อง window.scrollTo(0, 0) ด้วยตัวเอง เพราะ Astro ไม่ทำให้อัตโนมัติ

Dark mode FOUC — ต้องใส่ script inline ก่อน CSS link ทุกอัน ไม่ใช่ใน <script> ปกติที่ load ทีหลัง