refactor(content): reorganize blog mdx to page bundles and structure …

src/content/blog/automate-release-with-semantic-release.mdx → src/content/blog/automate-release-with-semantic-release/index.mdx

@@ -2,7 +2,7 @@
 title: 'เลิกทำ Manual Release เปลี่ยนมาใช้ Semantic Release กันเถอะ'
 description: 'คู่มือการตั้งค่าระบบ Automated Release บน GitHub Actions เปลี่ยนการจัดการเวอร์ชัน เขียน Changelog และติด Tag ที่ยุ่งยากให้เป็นเรื่องอัตโนมัติด้วย Semantic Release'
 pubDate: '2025-12-24'
-heroImage: '/blog/semantic-release-hero.png'
+heroImage: '/images/blog/automate-release-with-semantic-release/semantic-release-hero.png'
 category: 'DevOps'
 tags: ['CI/CD', 'GitHub Actions', 'Automation', 'Semantic Release', 'Workflow']
 featured: true

src/content/blog/awesome-warfarin-open-source.mdx → src/content/blog/awesome-warfarin-open-source/index.mdx

@@ -2,7 +2,7 @@
 title: 'เมื่อเภสัชกรเขียนโค้ด: สำรวจโปรเจกต์โอเพนซอร์สจัดการยา Warfarin'
 description: 'เจาะลึกโลก Health Tech ผ่าน Awesome Warfarin List ที่รวบรวมโปรเจกต์โอเพนซอร์ส ตั้งแต่เว็บแอปคำนวณขนาดยา ไปจนถึงโมเดล Machine Learning เพื่อการจ่ายยาที่แม่นยำ'
 pubDate: '2025-11-12'
-heroImage: '/blog/digital-warfarin-management.png'
+heroImage: '/images/blog/awesome-warfarin-open-source/digital-warfarin-management.png'
 category: 'Web Development'
 tags: ['Warfarin', 'Health Tech', 'Open Source', 'Pharmacist', 'Programming']
 featured: true

src/content/blog/benefits-of-touch-typing.mdx → src/content/blog/benefits-of-touch-typing/index.mdx

@@ -2,7 +2,7 @@
 title: '7 ประโยชน์ของการพิมพ์สัมผัส (Touch Typing)'
 description: 'การพิมพ์สัมผัสเป็นมากกว่าแค่ความเร็ว มันช่วยเพิ่มสมาธิ (Flow State) เพิ่มประสิทธิภาพการทำงานกับ AI และสร้างความมั่นใจได้อีกด้วย'
 pubDate: '2025-11-04'
-heroImage: '/blog/typing-on-keyboard-hero.png'
+heroImage: '/images/blog/benefits-of-touch-typing/typing-on-keyboard-hero.png'
 category: 'Career & Soft Skills'
 tags: ['Productivity', 'Skill Development', 'Touch Typing', 'Career']
 featured: true
@@ -47,7 +47,7 @@ featured: true
 </FeatureGrid>
 
 <Image
-  src="/blog/confident-typing-at-work.png"
+  src="/images/blog/benefits-of-touch-typing/confident-typing-at-work.png"
   alt="ภาพผู้หญิงกำลังยิ้มและพิมพ์คีย์บอร์ดอย่างมั่นใจระหว่างการประชุมออนไลน์ โดยมีเพื่อนร่วมงานปรากฏบนหน้าจอ"
   caption="การพิมพ์สัมผัสช่วยสร้างความมั่นใจในการทำงานร่วมกับผู้อื่นได้อย่างมืออาชีพ"
 />
@@ -88,7 +88,7 @@ featured: true
 การที่สามารถพิมพ์ได้อย่างราบรื่นต่อหน้าคนอื่นนั้นเป็นพลังอย่างหนึ่ง คุณสามารถจดโน้ต ร่างข้อความ หรือเขียนโค้ดสดๆ ได้โดยไม่สะดุด ความมั่นใจนั้นยังส่งผลต่อไปยังการนำเสนอ การทำ Pair Programming และทุกสถานการณ์ที่คนอื่นสามารถมองเห็นหน้าจอของคุณได้
 
 <Image
-  src="/blog/confident-typing-at-work-2.png"
+  src="/images/blog/benefits-of-touch-typing/confident-typing-at-work-2.png"
   alt="ภาพที่แสดงถึงความมั่นใจ อาจจะเป็นคนกำลังยิ้มขณะนำเสนองานผ่านจอคอมพิวเตอร์ หรือกำลังทำ Pair Programming อย่างมั่นใจ"
   caption="การพิมพ์สัมผัสช่วยเขียนโค้ดสดๆ ได้โดยไม่สะดุด"
 />

src/content/blog/essential-git-commands-guide.mdx → src/content/blog/essential-git-commands-guide/index.mdx

@@ -2,7 +2,7 @@
 title: '12 คำสั่ง Git ที่นักพัฒนาทุกคนต้องรู้'
 description: 'เจาะลึก 12 คำสั่ง Git ที่สำคัญ ตั้งแต่ git init, commit, push ไปจนถึง pull, merge, reset พร้อมตัวอย่างที่นำไปใช้ได้จริง'
 pubDate: '2025-11-06'
-heroImage: '/blog/12-git-commands-cheatsheet.png'
+heroImage: '/images/blog/essential-git-commands-guide/12-git-commands-cheatsheet.png'
 category: 'Version Control'
 tags: ['Git', 'Best Practice', 'DevOps', 'Beginner', 'Guide']
 featured: true
@@ -13,7 +13,7 @@ Git คือหัวใจของการพัฒนาซอฟต์แ
 บทความนี้คือคู่มือที่จะพาคุณเจาะลึก 12 คำสั่ง Git ที่สำคัญที่สุด ซึ่งเป็นเครื่องมือที่คุณจะได้ใช้ทุกวัน โดยอ้างอิงและขยายความจาก Cheat Sheet ที่ยอดเยี่ยมของ [Sysxplore](https://sysxplore.com/)
 
 <Image
-  src="/blog/12-git-commands-cheatsheet.jpeg"
+  src="/images/blog/essential-git-commands-guide/12-git-commands-cheatsheet.jpeg"
   alt="Cheat Sheet สรุป 12 คำสั่ง Git ที่สำคัญ"
   caption="ภาพรวม 12 คำสั่ง Git พื้นฐานที่เราจะมาเจาะลึกกันในบทความนี้"
 />

src/content/blog/frontend-developer-roadmap-part-1.mdx → src/content/blog/frontend-developer-roadmap-part-1/index.mdx

@@ -2,7 +2,7 @@
 title: 'Frontend Developer Roadmap (Part 1): React.js'
 description: 'เจาะลึก React.js อย่างละเอียด: ตั้งแต่พื้นฐาน จนถึง Hooks, Ecosystem, และการใช้งานจริง'
 pubDate: '2025-08-23'
-heroImage: '/blog-placeholder-1.png'
+heroImage: '/images/common/blog-placeholder-1.png'
 category: 'Frontend Frameworks' 
 tags: ['React.js', 'JavaScript', 'Web Development'] 
 featured: false

src/content/blog/frontend-developer-roadmap-part-2.mdx → src/content/blog/frontend-developer-roadmap-part-2/index.mdx

@@ -2,7 +2,7 @@
 title: 'Frontend Developer Roadmap (Part 2): Vue.js'
 description: 'เจาะลึก Vue.js อย่างละเอียด: ตั้งแต่พื้นฐาน จนถึง Composition API, Reactivity, และการใช้งานจริง'
 pubDate: '2025-08-25'
-heroImage: '/blog-placeholder-2.png'
+heroImage: '/images/common/blog-placeholder-2.png'
 category: 'Frontend Frameworks' 
 tags: ['Vue.js', 'JavaScript', 'Web Development'] 
 featured: false

src/content/blog/git-commit-messages.mdx → src/content/blog/git-commit-messages/index.mdx

@@ -2,7 +2,7 @@
 title: คู่มือการเขียน Git Commit Message อย่างมืออาชีพ
 description: เรียนรู้วิธีการเขียนข้อความ Commit ที่ดีตั้งแต่พื้นฐานจนถึงระดับมืออาชีพ เพื่อการสื่อสารที่มีประสิทธิภาพในทีมพัฒนา
 pubDate: 2025-09-16
-heroImage: '/blog-placeholder-4.png'
+heroImage: '/images/common/blog-placeholder-4.png'
 category: 'Version Control' 
 tags: ['Git', 'Best Practice', 'DevOps'] 
 featured: true 

src/content/blog/google-app-script-drug-search-app.mdx → src/content/blog/google-app-script-drug-search-app/index.mdx

@@ -2,7 +2,7 @@
 title: "สร้างระบบสืบค้นบัญชียาของโรงพยาบาล ด้วย Google Sheets และ Google Apps Script"
 description: "คู่มือในการสร้างเว็บแอปค้นหาข้อมูลบัญชียาของโรงพยาบาลแบบเรียลไทม์"
 pubDate: "2025-10-28"
-heroImage: "/blog-placeholder-8.png"
+heroImage: "/images/common/blog-placeholder-8.png"
 category: "Google Apps Script"
 tags:
   [

src/content/blog/google-app-script.mdx → src/content/blog/google-app-script/index.mdx

@@ -2,7 +2,7 @@
 title: 'สร้างเว็บแอปกรอกข้อมูลด้วย Google Sheets + Apps Script (ฉบับมือใหม่)'
 description: 'เรียนรู้วิธีสร้างเว็บฟอร์มสำหรับกรอกข้อมูลที่บันทึกลง Google Sheets แบบเรียลไทม์ โดยใช้ Google Apps Script เหมาะสำหรับผู้เริ่มต้นที่ไม่มีพื้นฐานโปรแกรมมิ่ง'
 pubDate: '2025-08-27'
-heroImage: '/blog-placeholder-3.png'
+heroImage: '/images/common/blog-placeholder-3.png'
 category: 'Google Apps Script' 
 tags: ['Google App Script', 'Google Sheets', 'Web Development',] 
 featured: false

src/content/blog/haskell-ep1.mdx → src/content/blog/haskell-ep1/index.mdx

@@ -2,7 +2,7 @@
 title: 'เริ่มต้นกับ Haskell: EP.1 บทนำ'
 description: "แปลและเรียบเรียงจากบทนำของ 'Learn You a Haskell for Great Good!' เพื่อให้โปรแกรมเมอร์ที่มีประสบการณ์กับภาษาอย่าง C, Java, Python ได้เข้าใจแก่นของ Functional Programming ผ่าน Haskell"
 pubDate: '2025-10-13'
-heroImage: '/blog-placeholder-6.png'
+heroImage: '/images/common/blog-placeholder-6.png'
 category: 'Programming Languages'
 tags: ['Haskell', 'Functional Programming', 'Beginner'] 
 featured: true

src/content/blog/haskell-ep2.mdx → src/content/blog/haskell-ep2/index.mdx

@@ -2,7 +2,7 @@
 title: 'เริ่มต้นกับ Haskell: EP.2 ลงมือปฏิบัติ'
 description: 'เริ่มต้นลงมือปฏิบัติ มาลองใช้งาน GHCi ซึ่งเป็นโหมดโต้ตอบของ Haskell เพื่อทำความเข้าใจกับการคำนวณพื้นฐาน, Boolean, และวิธีเรียกใช้ฟังก์ชันแบบ prefix และ infix'
 pubDate: '2025-10-17'
-heroImage: '/blog-placeholder-7.png'
+heroImage: '/images/common/blog-placeholder-7.png'
 category: 'Programming Languages'
 tags: ['Haskell', 'Functional Programming', 'GHCi', 'Beginner']
 featured: false

src/content/blog/learn-python-with-ritesh-chauhan.mdx → src/content/blog/learn-python-with-ritesh-chauhan/index.mdx

@@ -2,7 +2,7 @@
 title: 'เส้นทางสู่ Python Master: คู่มือการเรียนรู้จาก Repository Python by Ritesh Chauhan'
 description: 'เจาะลึกการเรียน Python ตั้งแต่พื้นฐานสู่ OOP ผ่าน 35 ไฟล์โค้ดพร้อมแบบฝึกหัดกว่า 200 ข้อใน Repository เดียว'
 pubDate: '2025-11-03'
-heroImage: '/blog-placeholder-python-course.png'
+heroImage: '/images/common/blog-placeholder-python-course.png'
 category: 'Programming Languages'
 tags: ['Python', 'Beginner', 'Programming', 'OOP', 'Guide']
 featured: true

src/content/blog/rust-variables-and-mutability.mdx → src/content/blog/rust-variables-and-mutability/index.mdx

@@ -2,7 +2,7 @@
 title: 'Rust พื้นฐาน: ทำความเข้าใจตัวแปรและการเปลี่ยนแปลงค่าอย่างละเอียด'
 description: 'มาเรียนรู้เรื่องตัวแปรในภาษา Rust อย่างละเอียดครบถ้วน ตั้งแต่ทำไมตัวแปรถึงเป็นแบบไม่เปลี่ยนแปลงโดยค่าเริ่มต้น วิธีการทำให้เปลี่ยนแปลงได้ ค่าคงที่ ไปจนถึงเทคนิคการซ้อนทับตัวแปร'
 pubDate: '2025-11-13'
-heroImage: '/blog/rust-variables-hero.png'
+heroImage: '/images/blog/rust-variables-and-mutability/rust-variables-hero.png'
 category: 'Programming Languages'
 tags: ['Rust', 'Programming', 'Variables', 'Mutability', 'Backend']
 featured: true

src/content/blog/vue-standard-protocol-antfu.mdx → src/content/blog/vue-standard-protocol-antfu/index.mdx

@@ -2,7 +2,7 @@
 title: 'Lint Like a Senior Developer: การตั้งค่า eslint + husky + lint staged + github actions'
 description: 'การ Setup โปรเจกต์ Vue ระดับ Production-Ready ครบจบทั้ง Linting, Formatting, Git Hooks และ CI/CD'
 pubDate: '2025-12-08'
-heroImage: '/blog/eslint-antfu-setup.png'
+heroImage: '/images/blog/vue-standard-protocol-antfu/eslint-antfu-setup.png'
 category: 'Development Tools'
 tags: ['Vue.js', 'ESLint', 'Antfu', 'Productivity', 'DX']
 featured: true

src/content/blog/web-accessibility-101.mdx → src/content/blog/web-accessibility-101/index.mdx

@@ -2,7 +2,7 @@
 title: 'Web Accessibility 101: คู่มือสร้างเว็บเพื่อทุกคนที่นักพัฒนา (ทุกคน) ควรรู้'
 description: 'เรียนรู้พื้นฐาน Web Accessibility (a11y) ที่ไม่ใช่แค่เรื่องทางเทคนิค แต่คือหัวใจของการสร้างประสบการณ์ที่ดีสำหรับผู้ใช้ทุกคน พร้อมเครื่องมือและเทคนิคที่นำไปใช้ได้ทันที'
 pubDate: '2025-10-05'
-heroImage: '/blog-placeholder-5.png'
+heroImage: '/images/common/blog-placeholder-5.png'
 category: 'Web Development'
 tags: ['Accessibility', 'a11y', 'Best Practice', 'Web Development', 'UX']
 featured: true