Changelog
ประวัติการอัปเดตเว็บนี้ — features ใหม่ การแก้ไข และการปรับปรุงต่างๆ
v3.3 latest
มิถุนายน 2026 - ใหม่ Light / Dark / System theme toggle — 3-state cycle บน Header: dark (🌙) → light (☀️) → system (🖥) บันทึกใน localStorage, system mode ฟัง prefers-color-scheme เปลี่ยนแบบ real-time
- แก้ไข Light mode CSS audit ครบทุกหน้า — แก้ hardcoded dark colors ใน 16 pages (notes, reading, about, stats, changelog, cv, tags, search ฯลฯ) ให้มี light-mode base + [data-theme='dark'] overrides ทุก selector
- ประสิทธิภาพ Self-host fonts — ย้าย Inter, Noto Sans Thai, Kanit จาก Google Fonts มา serve เองใน /public/fonts/ (30 WOFF2 files) ตัด cross-origin font latency ออก Performance score นิ่งขึ้น
- แก้ไข Print CSS /cv สมบูรณ์ — @page A4 margin 14/16mm, ซ่อน site header/footer/nav, font sizes เป็น pt, skills 2 columns, break-inside: avoid ทุก section, URL ตาม href แสดงด้วย ::after
- ใหม่ Bookmarks → Content Collection — ย้าย 44 items จาก hardcoded array เป็น 9 YAML files ใน src/content/bookmarks/ เพิ่มลด bookmark ได้โดยไม่แตะ template
- เนื้อหา TIL: "YAML dates ใน Astro Content Collections" — quoted vs unquoted date, ผลกระทบกับ z.date() / z.coerce.date(), วิธีแก้แบบสม่ำเสมอ
- แก้ไข Dark theme ไม่หายตอน navigate — เพิ่ม data-theme="dark" บน <html> ใน Layout.astro และให้ astro:after-swap อ่าน theme จาก localStorage แทน hardcode
- ดีไซน์ Index page: เปลี่ยน "WS" → "WorkSpace" ทั้ง hero sub-label และ Explore section
v3.2
มิถุนายน 2026 - ประสิทธิภาพ PageSpeed Insights 90+ ทุก category บน mobile — /home: 91/100/100/100 · /: 91/100/100/100 (Performance / Accessibility / Best Practices / SEO)
- แก้ไข LCP fix บน /home — ลบ opacity:0 ออกจาก GSAP hero h1 animation ทำให้ Lighthouse วัด LCP ตอน h1 render จริง ไม่ใช่ตอน animation จบ (~3s → ~0.4s)
- แก้ไข LCP fix บน / — ลบ opacity:0 ออกจาก GSAP ip-hero-name animation เหตุผลเดียวกัน ทำให้ Performance score นิ่งกว่าเดิม
- แก้ไข WCAG AA contrast — เปลี่ยน #475569 เป็น #64748b บน text elements 20+ จุด ครอบคลุม Footer, TableOfContents และทุกหน้า — Accessibility 100 บน mobile
- แก้ไข Google Fonts async loading — เปลี่ยนจาก render-blocking stylesheet เป็น media="print" + onload pattern พร้อม WOFF2 preload ลด blocking time
- แก้ไข OG image และ apple-touch-icon แก้จาก .svg เป็น .png — social preview และ iOS home screen icon แสดงถูกต้อง
- แก้ไข GSAP immediateRender:false บน .ip-stmt-line — ป้องกัน GSAP override CSS color ก่อน ScrollTrigger fire ทำให้ contrast ผ่าน Lighthouse axe-core
v3.1
มิถุนายน 2026 - ใหม่ /reading/[id] detail pages — หนังสือทุกเล่มมี permalink เฉพาะตัวแล้ว พร้อม metadata, บันทึกส่วนตัว และ related books
- แก้ไข /reading list — ชื่อหนังสือทุกเล่มเป็น link ไปยัง detail page (กำลังอ่าน/อ่านแล้ว/อยากอ่าน ครบ)
- ใหม่ /notes/[slug] — เพิ่ม "Notes ที่เกี่ยวข้อง" section หลัง prev/next nav (เหมือน /resources/[slug] ที่มีอยู่แล้ว)
- แก้ไข /now — "กำลังอ่าน" section ดึงข้อมูลจาก reading collection จริงๆ แทนการ hardcode — เชื่อมลิงก์ไปยัง /reading/[id]
v3.0
มิถุนายน 2026 - เนื้อหา เพิ่ม notes 6 entries ใหม่ — js-intl-api, ts-exhaustive-check, git-rebase-onto, astro-actions, css-text-wrap-balance, js-array-flat-flatmap
- เนื้อหา เพิ่ม resources 4 entries ใหม่ — Drizzle ORM, Astro SSR, Cloudflare Workers, Turborepo Monorepo
- เนื้อหา เพิ่ม projects 3 entries ใหม่ — URL Shortener CLI, Markdown to PDF, Color Contrast Checker
- เนื้อหา เพิ่ม reading 4 entries ใหม่ — The Mythical Man-Month (Brooks), A Mind for Numbers (Oakley), The Lean Startup (Ries), Range (Epstein)
v2.9
มิถุนายน 2026 - เนื้อหา เพิ่ม projects 3 entries ใหม่ — Schema Markup Generator, CSS Animation Library, Site Screenshot Tool
- เนื้อหา เพิ่ม notes 6 entries ใหม่ — astro-middleware, js-event-delegation, ts-declaration-merging, git-sparse-checkout, css-starting-style, js-error-types
- เนื้อหา เพิ่ม resources 4 entries ใหม่ — Turso & LibSQL, Bun Runtime, OpenAI API, HTMX
- เนื้อหา เพิ่ม reading 4 entries ใหม่ — Show Your Work! (Kleon), Building a Second Brain (Forte), Thinking Fast and Slow (Kahneman), Make It Stick (Brown et al.)
v2.8
มิถุนายน 2026 - แก้ไข Home page: แก้ bug allTags ไม่รวม reading tags — Tags count ใน hero stats ตรงกับ /tags page แล้ว
- เนื้อหา เพิ่ม projects 4 entries ใหม่ — Product Catalog Validator, Astro SEO Audit, Chrome Extension Starter, Daily Summary Bot
- เนื้อหา เพิ่ม notes 6 entries ใหม่ — ts-conditional-types, js-performance-api, css-anchor-positioning, html-lazy-loading, git-blame-ignore-revs, js-fetch-stream
- เนื้อหา เพิ่ม resources 4 entries ใหม่ — Astro RSS Feed, Tailwind CSS v4, Service Workers, Web Storage Guide
- เนื้อหา เพิ่ม reading 3 entries ใหม่ — Atomic Habits (Clear), Clean Architecture (Martin), Deep Work (Newport)
v2.7
มิถุนายน 2026 - ใหม่ Bookmarks: เพิ่ม 2 category ใหม่ — "E-commerce & Product" (Google Merchant, Search Console, Rich Results) และ "Performance & Testing" (WebPageTest, axe, WAVE, Speedlify)
- แก้ไข /now: update "กำลังเรียน" ให้สะท้อน CSS สมัยใหม่, TypeScript advanced types และ Web Performance ที่กำลังลงมือจริง
- เนื้อหา เพิ่ม notes 6 entries ใหม่ — js-abort-controller, css-grid-areas, html-form-validation, ts-mapped-types, js-web-workers, css-view-transitions
- เนื้อหา เพิ่ม resources 4 entries ใหม่ — pnpm Guide, Accessibility Testing Tools, Content Security Policy, SQLite for Web Devs
v2.6
มิถุนายน 2026 - แก้ไข /tags: รวม reading collection — tags และ entries จาก books ปรากฏใน /tags และ /tags/[tag] แล้ว (เดิม missing)
- เนื้อหา เพิ่ม notes 6 entries ใหม่ — css-cascade-layers, js-nullish-coalescing, ts-utility-types, html-picture-element, js-set-operations, git-reflog
- เนื้อหา เพิ่ม resources 4 entries ใหม่ — GitHub CLI Guide, CSS Print Styles, Astro Image Optimization, SVG Sprites & Icon System
- แก้ไข Colophon: อัพเดทจำนวนหน้าเป็น 320+
v2.5
มิถุนายน 2026 - ใหม่ Stats page: เพิ่ม Books stat card (finished/reading/backlog) + average rating จาก reading collection
- ใหม่ Home page: เพิ่ม "Books" ใน hero stats + section "กำลังอ่านอยู่" แสดงหนังสือที่กำลังอ่านจริง
- ใหม่ Landing page Explore grid: เพิ่ม /cv เป็น item ที่ 9
- เนื้อหา เพิ่ม notes 6 entries ใหม่ — css-color-mix, css-logical-properties, ts-template-literal-types, js-weakmap-weakset, js-generators, ts-discriminated-unions
- เนื้อหา เพิ่ม reading 4 entries ใหม่ — Shape Up (Singer), Refactoring UI (Wathan/Schoger), Four Rules of Simple Design (Haines), Web Performance in Action (Wagner)
v2.4
มิถุนายน 2026 - ใหม่ เพิ่มหน้า /cv — web-native CV สำหรับ Panupong Wongsorn พร้อม print / save PDF รองรับ dark mode
- เนื้อหา เพิ่ม notes 12 entries ใหม่ — css-subgrid, js-promise-allsettled, html-popover-api, ts-satisfies-operator, git-cherry-pick, css-oklch, js-object-groupby, ts-branded-types, git-interactive-rebase, css-nesting, html-details-summary, js-crypto-uuid
- เนื้อหา เพิ่ม reading 6 entries ใหม่ — Atomic Design (Frost), Don't Make Me Think (Krug), Eloquent JavaScript (Haverbeke), JavaScript Good Parts (Crockford), CSS Secrets (Verou), Learning TypeScript (Goldberg)
- แก้ไข /now ตัวเลข dynamic — Resources, Projects, Notes นับจาก Content Collection แบบ real-time ไม่ hardcode
v2.3
มิถุนายน 2026 - ใหม่ เปลี่ยนชื่อเว็บ → Panupong WS — สอดคล้องกับ domain panupongws.com; "WS" ย่อจากนามสกุล ทำงานคู่ขนานกับ workspace
- ใหม่ ออกแบบ favicon และ OG image ใหม่ทั้งหมด — dark theme, "P" ใน cyan-purple gradient (favicon), "Panupong" ขาว + "WS" ไซยาน (OG 1200×630)
- แก้ไข Tagline ใหม่: "Built. Designed. Rendered." — สื่อถึง tech + dev + graphic design ทั้งสาม concept
- แก้ไข manifest.json, landing page และ admin อัพเดทชื่อใหม่ครบทุกจุด
v2.2
มิถุนายน 2026 - เนื้อหา เพิ่ม notes 12 entries ใหม่ — typescript-as-const, git-stash-message, css-clamp-fluid, js-structuredclone, html-dialog-element, ts-unknown-vs-any, vscode-workspace-settings, css-focus-visible, js-array-at, git-bisect, ts-process-env-types, css-custom-property-scope
- ใหม่ ย้าย /reading ไปเป็น Content Collection — 13 หนังสือเป็น .md files พร้อม Zod schema (status, rating, yearRead) เพิ่มหนังสือใหม่ได้โดยแค่สร้างไฟล์
- แก้ไข แก้ Astro markdown deprecation warning — ย้าย rehypePlugins เข้า unified({...}) จาก @astrojs/markdown-remark เป็น markdown.processor
- แก้ไข /home และ /tags: เพิ่ม Notes ใน hero stats, featured section, allTags — ตัวเลขและ content ครบถ้วน
- แก้ไข Landing page (/) totalTags นับรวม notes tags แล้ว; Explore grid เพิ่มลิงก์ /notes และ /reading
- แก้ไข อัพเดท /now — วันที่ 15 มิ.ย. 2026, ตัวเลข content 83/33/18, สิ่งที่กำลังเรียน (a11y, Content Collections, multi-agent)
v2.1
มิถุนายน 2026 - ใหม่ เพิ่มหน้า /notes — short-form TIL content collection พร้อม listing และ detail pages (/notes/[slug])
- ใหม่ เพิ่มหน้า /reading — รายการหนังสือแบ่งเป็น กำลังอ่าน / อ่านแล้ว / backlog พร้อม rating และ notes
- แก้ไข Tag routes รวม notes collection — /tags/svg, /tags/pagefind และ notes-only tags อื่นๆ ไม่ 404 อีกต่อไป; หน้า /tags/[tag] แสดง Notes section เพิ่มเติม
- แก้ไข Mobile menu accessibility — เปลี่ยน checkbox+label[aria-hidden] เป็น button[aria-expanded][aria-controls] รองรับ keyboard Tab และ screen reader ได้ถูกต้อง
- แก้ไข RSS feed และ Stats page รวม notes collection — ผู้ติดตาม RSS เห็น notes ใหม่, สถิติหน้า /stats แสดงยอด Notes ครบ
v2.0
มิถุนายน 2026 - ดีไซน์ Lifestyle redesign — เพิ่ม Green (#16a34a) เป็น secondary color คู่กับ Blue: bg gradient, btn-primary, reading progress bar, skill chips ล้วนเปลี่ยนจาก blue→cyan เป็น blue→green
- เนื้อหา About page: role เปลี่ยนเป็น "E-commerce Specialist", bio และ timeline เขียนใหม่ให้ตรงตัวตนจริง (CS degree มทร.ตะวันออก, motorcycle aftermarket parts e-commerce, web dev เป็น hobby)
- เนื้อหา index.astro: tagline เปลี่ยนจาก "frontend" เป็น "web, AI และ automation" / now.astro: เพิ่มบริบทงานหลักและ lifestyle จริง
- เนื้อหา เพิ่ม resources: Prompt Engineering Guide, Claude API & Anthropic SDK, AI Agents Patterns, CSS Scroll Snap
- เนื้อหา เพิ่ม projects: E-commerce Content AI (Claude API + product descriptions), AI Prompt Library (CLI สำหรับจัดการ prompts)
- ใหม่ Bookmarks: เพิ่ม category "AI & Automation" — Anthropic Console, n8n, LLM Visualization และอื่นๆ
v1.9
มิถุนายน 2026 - ใหม่ Hero stats บนหน้าแรกเป็น clickable links — Projects, Resources, Tags, และ Stats → แต่ละตัวลิงก์ไปหน้าที่เกี่ยวข้อง
- เนื้อหา เพิ่ม resources: CSS Nesting (native &, Chrome 120+), JavaScript Design Patterns (Singleton/Observer/Factory/Strategy/Command/Decorator), HTML Forms & Native Validation (Constraint Validation API)
- เนื้อหา เพิ่ม projects: CSS Variable Toolkit (npm package สำหรับ design tokens), quick-note-cli (terminal notepad ใน ~/.notes/)
v1.8
มิถุนายน 2026 - ใหม่ เพิ่มหน้า /stats — สถิติ resources, projects, tags ที่สดจาก content collection พร้อม bar chart activity
- เนื้อหา เพิ่ม resources: TypeScript satisfies & const assertions, JavaScript Modern APIs (2023–2025), CSS color-mix() & light-dark()
- เนื้อหา เพิ่ม project: Web Component UI Kit (Button/Badge/Tooltip ด้วย Custom Elements)
v1.7
มิถุนายน 2026 - เนื้อหา เพิ่ม resources: CSS Scroll-Driven Animations, JavaScript Proxy & Reflect, Node.js Streams, package.json exports map & npm publish
- เนื้อหา เพิ่ม projects: Image Optimizer CLI, Astro Component Playground
v1.6
มิถุนายน 2026 - เนื้อหา เพิ่ม resources: Web Components & Custom Elements, TypeScript Module Augmentation, CSS @property, Browser Storage (localStorage/IndexedDB)
- เนื้อหา เพิ่ม projects: Obsidian to Astro Exporter, Zod Schema Studio
v1.5
มิถุนายน 2026 - เนื้อหา เพิ่ม resources: npm Workspaces & Monorepo, GitHub Actions Advanced (Matrix/Cache/Reusable), JavaScript Error Handling
- เนื้อหา เพิ่ม project: type-safe-env — Zod-based environment variable validator
- แก้ไข อัปเดต /now — เปลี่ยน projects ที่กำลังทำ, สิ่งที่กำลังเรียน, และหนังสือที่อ่านอยู่
v1.4
มิถุนายน 2026 - เนื้อหา เพิ่ม resources: ESLint + Prettier Configuration, Fetch API Patterns, Git Advanced (Rebase/Stash/Bisect/Reflog), CSS Subgrid
- เนื้อหา เพิ่ม projects: Shareable ESLint Config, CSV Budget CLI
v1.3
มิถุนายน 2026 - แก้ไข Dark mode /resources/[slug] และ /projects/[slug] — breadcrumb, status/tag chips, share row
- แก้ไข Dark mode /search — Pagefind UI CSS variables (text, background, border)
- แก้ไข Dark mode /tags — tag cloud pills, count badge
- แก้ไข Dark mode Card component — ใช้งานใน related section และ grid ทุกหน้า
- แก้ไข Dark mode TableOfContents component — toc background, link colors
- แก้ไข Dark mode 404 page
- เนื้อหา เพิ่ม resources: Deploying Static Sites, CSS Architecture BEM, Docker Basics, TypeScript tsconfig, Node.js CLI Tools, Playwright E2E, Zsh Scripting
v1.2
มิถุนายน 2026 - แก้ไข Dark mode /tags/[tag] — breadcrumb, tag label, count badge, group title
- เนื้อหา เพิ่ม resources: TypeScript Conditional Types, Intersection Observer API, CSS Logical Properties, Browser Web APIs, Node.js File System
- เนื้อหา เพิ่ม projects: Markdown Notes Exporter, Astro Blog Theme
v1.1
มิถุนายน 2026 - แก้ไข Breadcrumb บน /now และ /uses — เพิ่ม CSS classes และเปลี่ยนเป็นภาษาไทย
- แก้ไข Dark mode homepage hero stats — กล่องสถิติมี dark mode override แล้ว
- แก้ไข Dark mode /about — timeline, avatar border, skill chips, github-chip
- เนื้อหา เพิ่ม resources: CSS Cascade Layers, JavaScript Generators, HTTP Caching, Vite Config Guide
v1.0
มิถุนายน 2026 - ใหม่ Category filter บน /resources (All/Guide/Reference/Tool) แทน 30+ tag buttons
- ใหม่ Status filter บน /projects (ทั้งหมด/กำลังทำ/เสร็จแล้ว/เก็บไว้) พร้อม color coding
- ใหม่ Tag chip แสดงเมื่อมาจาก /tags/[tag] — ล้างได้ด้วยปุ่ม ×
- เนื้อหา เพิ่ม resources: CSS Grid Advanced, JavaScript Closures, Git Branching, PWA Guide
- เนื้อหา เพิ่ม projects: RSS Reader CLI, JSON Diff Visualizer
- ใหม่ เพิ่ม /colophon และ /bookmarks
v0.9
มิถุนายน 2026 - ใหม่ Dark mode code syntax highlighting — Shiki dual-theme (github-light / github-dark-dimmed)
- ใหม่ Admin panel redesign — match frontend design language, custom delete modal, dark mode toggle
- ใหม่ GSAP animations — hero stagger, card grid, scroll-triggered section headers, View Transitions compatible
- ใหม่ แสดง updatedDate บนทุก detail page + ปรับ JSON-LD dateModified
- ใหม่ เพิ่ม /now และ /uses ใน Footer nav
- เนื้อหา เพิ่ม resources: GSAP Guide, Vitest, CSS oklch, Astro Server Islands, Performance Checklist
- เนื้อหา เพิ่ม projects: Type Scale Explorer, Dev Session Starter
- แก้ไข Heading hierarchy H1→H3→H2 บน about page
- แก้ไข focus-visible ครอบคลุมทุก interactive element
v0.8
มิถุนายน 2026 - ใหม่ /uses page — เครื่องมือและ setup ที่ใช้จริง
- ใหม่ /now page — สิ่งที่กำลังทำและสนใจอยู่ตอนนี้
- ใหม่ CSS spacing system — CSS custom properties --sp-1 ถึง --sp-6
- เนื้อหา เพิ่ม resources ด้านภาษา JS/TS: Promises, Modules, Date/Intl, Regex, Generics
- เนื้อหา เพิ่ม projects: Markdown CV, Link-in-Bio, Color Palette Explorer
v0.7
มิถุนายน 2026 - ใหม่ Custom admin panel สำหรับ CMS ผ่าน GitHub API
- ใหม่ Reading progress bar บน prose pages
- ใหม่ Back-to-top button
- ใหม่ Copy code button ทุก code block
- ใหม่ Keyboard shortcut: / → เปิด search
v0.6
พฤษภาคม 2026 - ใหม่ View Transitions (Astro ClientRouter) ทั้งไซต์
- ใหม่ Pagefind client-side search
- ใหม่ RSS feed (/rss.xml)
- ใหม่ Table of Contents บน detail pages
- ใหม่ Prev/next navigation บน detail pages
v0.5
พฤษภาคม 2026 - ใหม่ Dark mode ด้วย [data-theme] + localStorage
- ใหม่ Anti-FOUC dark mode inline script
- ใหม่ /tags page และ /tags/[tag] dynamic routes
- ใหม่ Related content section บน detail pages
- ใหม่ Share buttons (Twitter/X, LinkedIn)
v0.4
พฤษภาคม 2026 - ใหม่ Schema.org JSON-LD: Article, BreadcrumbList, WebSite, Person
- ใหม่ Open Graph meta tags ครบทุกหน้า
- ใหม่ Sitemap.xml via @astrojs/sitemap
- ใหม่ robots.txt + canonical URLs
- ใหม่ PWA manifest.json
v0.3
พฤษภาคม 2026 - ใหม่ หน้า About พร้อม timeline และ skill chips
- ใหม่ 404 page ที่ helpful
- ใหม่ Responsive header + hamburger menu บน mobile
- ใหม่ Footer พร้อม nav columns
v0.2
เมษายน 2026 - ใหม่ Content Collections — Projects และ Resources
- ใหม่ Astro + TypeScript + strict mode
- ใหม่ rehype plugins: slug, autolink headings, external links
- เนื้อหา Content batch แรก — 10 resources, 5 projects
v0.1
เมษายน 2026 - ใหม่ เริ่มต้น Panupong WS บน Astro 5
- ใหม่ Layout component, Header, Footer
- ใหม่ หน้า Home, Projects list, Resources list
- ใหม่ Deploy บน Railway