ปรับโฉมใหม่ Blog: Dark Mode, Font Size Controls, และการปรับปรุง UI ทั้งระบบ

สารบัญ

• 🙋 Intro
• 📋 TL;DR
• 📐 Blog New Look — ประวัติการปรับปรุง Design
• 🕰️ Timeline ทั้ง 4 Versions
• 📊 Evolution ของแต่ละ Version
• 🎯 หลักการออกแบบที่เปลี่ยนไป
• 🌙 การเปลี่ยน Default Color Mode เป็น Dark Mode
• 🔤 Font Size Controls (A+/A-)
• ⬆️ Scroll to Top Button
• 📑 Custom TOC พร้อม Active Heading Highlight
• 🎨 Color Scheme ใหม่: Blue (Light) / Dark Gray (Dark)
• ☀️ Light Mode
• 🌙 Dark Mode
• ✍️ เพิ่ม Font JetBrainsMono
• 🏷️ TagsListInline ปรับปรุงใหม่
• ☕ Buy Me a Coffee Section ใหม่
• 🚀 Docusaurus 3.10.1
• 🔍 Algolia Search: ใช้ Service ข้างนอก + Manual Crawl
• 🏗️ แนวทางที่เปลี่ยนไป
• 📝 Manual Crawl คืออะไร?
• 💡 ทำไมถึงเลือก Manual?
• 🔗 Config ที่เปลี่ยน
• 🐳 Infrastructure: Docker Compose Fix
• 📄 ปรับโฉมหน้า About ใหม่
• 🏗️ Layout ใหม่
• 🎨 Design Language
• 🌙 แก้ Dark Mode Font
• 🔤 เพิ่ม Font Size
• 📝 สรุป

😎

Self-writingเนื้อหาเรียบเรียงโดยตัวเอง

🙋 Intro

สวัสดีครับ บทความนี้จะมาสรุปการปรับปรุง Blog ครั้งล่าสุดครับ ซึ่งครอบคลุมหลายส่วนตั้งแต่ UI/UX, การปรับปรุง Typography, Dark Mode ที่ดูดีขึ้น, ฟีเจอร์ใหม่สำหรับผู้อ่าน, หน้า About โฉมใหม่ รวมถึงการอัปเดต Docusaurus ให้เป็นเวอร์ชันล่าสุด

ทั้งหมดนี้เกิดขึ้นจากการที่ผมรู้สึกว่า Blog เดิมเริ่มดูจืดชืดไปหน่อย ทั้งในแง่สีสัน, Font, และ UX โดยรวม เลยถือโอกาสรีเฟรชทั้งทีเดียวเลยครับ

---

📋 TL;DR

• 🌙 เปลี่ยน Default Color Mode เป็น Dark Mode
• 🔤 เพิ่ม Font Size Controls (A+/A-) สำหรับปรับขนาดตัวอักษรในหน้า Blog Post
• ⬆️ เพิ่ม Scroll to Top ปุ่มกลับด้านบน
• 🚀 อัปเกรด Docusaurus เป็นเวอร์ชัน 3.10.1
• 📑 ปรับปรุง Custom TOC ใหม่ พร้อม Active Heading Highlight
• 🎨 เปลี่ยน Color Scheme เป็นโทน Blue (Light) / Dark Gray (Dark)
• ✍️ เพิ่ม Font JetBrainsMono เป็น Font หลัก
• 🏷️ ปรับปรุง TagsListInline ใหม่ ใช้ Flexbox Layout
• ☕ ปรับปรุง Buy Me a Coffee section ใหม่
• 📄 ปรับโฉมหน้า About ใหม่ทั้งหมด — Layout, Dark Mode, Font Size
• 📐 เพิ่ม Blog New Look timeline — ประวัติการปรับปรุง design ทั้ง 4 versions
• 🔍 ปรับปรุง Algolia Search — ใช้ service ข้างนอก + manual crawl เพื่ออยู่ใน Free Tier

📐 Blog New Look — ประวัติการปรับปรุง Design

ส่วนแรกที่อยากพูดถึงคือ Blog New Look — timeline แสดงประวัติการปรับปรุง design ของ Blog ตั้งแต่อดีตจนถึงปัจจุบันครับ ผมเชื่อว่าการบันทึก evolution ของ design ไว้ช่วยให้เข้าใจว่าทำไมถึงเลือกแนวทางนี้ และเห็นพัฒนาการได้ชัดเจนขึ้น

ส่วนนี้ถูกเพิ่มเข้าไปในหน้า /about ด้วยครับ เป็น timeline แนวตั้งที่แสดง version, year, description และ tags ของแต่ละยุค

🕰️ Timeline ทั้ง 4 Versions

Version	ปี	ชื่อ	Tags
v1	2020	First Implementation	Docusaurus Default Out of the Box
v2	December 23, 2022	Content-Focused Refinement	Better Readability Content Layout
v3	2024	Major Overhaul	Custom Layout Full CSS Rewrite
v4	2026	Clean & Minimal Redesign	Monospaced Font Minimal Design Dev Blog Aesthetic

📊 Evolution ของแต่ละ Version

v1 — First Implementation (2021)

จุดเริ่มต้นเลยครับ เริ่มจากเอาระบบ Docusaurus มา implement ยังไม่ได้ปรับแต่งอะไรมากนัก เน้นการทำงานเดิม ๆ ของ Docusaurus ใช้ Theme และ Layout สำเร็จรูปตามที่ Framework มีให้ เน้นให้ระบบทำงานได้ก่อน ยังไม่ได้สนใจเรื่อง design เท่าไหร่

v2 — Content-Focused Refinement (December 23, 2022)

เริ่มมีการปรับแต่งมากขึ้น ส่วนใหญ่เป็นการปรับแต่งที่เน้นไปที่ให้ content อ่านง่ายขึ้น และจัดตำแหน่งเนื้อหาให้เหมาะสม เริ่มเข้าใจโครงสร้างของ Docusaurus มากขึ้น ยังไม่ได้เปลี่ยน theme ทั้งหมด แค่ปรับบางส่วนให้ดีขึ้น

v3 — Major Overhaul (2024)

การเปลี่ยนแปลงครั้งใหญ่เลยครับ — มีการย้าย layout หลายส่วน และปรับ CSS style ใหม่ทั้งหมดเป็น style ของตัวเอง เริ่มมีเอกลักษณ์เฉพาะตัว ไม่เหมือน Docusaurus theme อีกต่อไป

v4 — Clean & Minimal Redesign (2026)

รอบนี้ redesign จนไม่เหลือเค้าเดิมของ Docusaurus เลยครับ เพราะต้องการปรับปรุงให้มีความ clean และ minimal มากกว่าเดิม ใช้หลัก เรียบแต่เยอะ — ดู minimal แต่มี detail ซ่อนอยู่

สิ่งที่เปลี่ยนแปลงหลัก ๆ ใน v4:

• เพิ่ม monospaced font (JetBrainsMono) ทำให้เหมือนเป็น blog สาย dev
• ออกแบบเรียบง่ายมีความเป็นผู้ใหญ่มากขึ้น
• ผสานกับความล้ำของเทคโนโลยีใหม่ ๆ
• ไม่เหลือเค้าเดิมของ Docusaurus อีกต่อไป

src/css/custom.css

:root {
  --ifm-font-family-base: "JetBrainsMono", "LINESeedSansTH", monospace;
  --ifm-heading-font-family: "JetBrainsMono", "LINESeedSansTH", monospace;
}

ดู Timeline จริง

สามารถดู timeline แบบ interactive ได้ที่หน้า /about section 📐 Blog New Look ครับ — มีทั้ง version badge, year, description และ tags แสดงเป็น timeline แนวตั้ง

🏗️ ดู Implementation ในหน้า About

Timeline ถูก implement เป็น component ใน src/pages/about.tsx ใช้ CSS ธรรมดาไม่พึ่ง library เพิ่ม:

src/pages/about.tsx

const designVersions = [
    {
        version: 'v1',
        year: '2021',
        title: 'First Implementation',
        description: 'เริ่มจากเอาระบบ Docusaurus มา implement...',
        tags: ['Docusaurus Default', 'Out of the Box'],
    },
    // ... v2, v3, v4
];

function DesignHistorySection() {
    return (
        <section className={styles.sectionAlt}>
            <div className="container">
                <div className={styles.timeline}>
                    {designVersions.map((item, idx) => (
                        <div key={idx} className={styles.timelineItem}>
                            <div className={styles.timelineDot}>
                                <span className={styles.timelineVersion}>{item.version}</span>
                            </div>
                            <div className={styles.timelineCard}>
                                <div className={styles.timelineYear}>{item.year}</div>
                                <h4>{item.title}</h4>
                                <p>{item.description}</p>
                                <div className={styles.timelineTags}>
                                    {item.tags.map((tag, tIdx) => (
                                        <span key={tIdx} className={styles.timelineTag}>{tag}</span>
                                    ))}
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
}

CSS ใช้ ::before pseudo-element สร้างเส้น timeline แนวตั้ง:

src/pages/styles.module.css

.timeline {
  position: relative;
  padding-left: 2rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0.75rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: var(--ifm-divider-color);
}

🎯 หลักการออกแบบที่เปลี่ยนไป

สังเกตว่าแต่ละ version มีแนวคิดที่ต่างกัน:

Version	แนวคิดหลัก
v1	ทำให้ได้ — ใช้ของสำเร็จรูปก่อน
v2	ทำให้ดี — ปรับ content ให้อ่านง่าย
v3	ทำให้เป็นของเรา — custom style ทั้งหมด
v4	ทำให้ minimal — เรียบ สะอาด เป็นผู้ใหญ่

Start with what works, refine what matters, then make it yours.

Design Evolution

---

🌙 การเปลี่ยน Default Color Mode เป็น Dark Mode

ก่อนหน้านี้ Blog ใช้ Light Mode เป็นค่าเริ่มต้น แต่ส่วนตัวรู้สึกว่า Dark Mode อ่านง่ายกว่า โดยเฉพาะสำหรับคนที่อ่าน Blog ตอนกลางคืน (ซึ่งน่าจะเป็นส่วนใหญ่) เลยตัดสินใจเปลี่ยน default เป็น Dark Mode ครับ

docusaurus.config.ts

colorMode: {
  defaultMode: 'dark',
  respectPrefersColorScheme: true,
}

โดยยัง respect prefers-color-scheme ของ browser อยู่ ถ้าใครตั้ง OS เป็น Light Mode ก็ยังเห็น Light Mode ตามปกติครับ

info

ถ้าอยากสลับโหมด สามารถกดที่ไอคอน 🌙/☀️ ที่ navbar ได้เลยครับ

💡 ทำไมถึงเลือก Dark Mode เป็น default?

เหตุผลหลัก ๆ มี 3 ข้อครับ:

1. อ่านง่ายกว่าตอนกลางคืน — ไม่ต้องเพิ่มความสว่างจอ
2. ประหยัดแบต — สำหรับหน้าจอ OLED
3. ดู Modern — Developer ส่วนใหญ่ชอบ Dark Mode

แต่ก็ยัง respect prefers-color-scheme อยู่ ดังนั้นถ้าใครชอบ Light Mode ก็ยังเห็นตามปกติครับ

🔤 Font Size Controls (A+/A-)

ฟีเจอร์นี้ผมชอบมากที่สุดเลยครับ เพราะบางทีเขียน Blog เรื่อง Technical เนื้อหาเยอะ ตัวอักษรเล็กไปอ่านไม่ค่อยสบายตา โดยเฉพาะบนจอมือถือ

เลยเพิ่ม Font Size Controls เข้ามาในทุกหน้า Blog Post สามารถกด A+ เพื่อขยาย หรือ A- เพื่อย่อ ขนาดตัวอักษรได้ทันที โดยขนาดจะอยู่ในช่วง 13px - 20px (default 16px)

src/theme/BlogPostPage/index.tsx

const FONT_STEP = 1;
const FONT_MIN = 13;
const FONT_MAX = 20;
const FONT_DEFAULT = 16;

Implementation ใช้ CSS Variable --blog-font-size ควบคุมขนาดตัวอักษรทั้งหมดในหน้า Blog Post ครับ

tip

ขนาด Font จะถูกเก็บใน localStorage ด้วย ดังนั้นถ้าตั้งค่าไว้แล้วปิด browser กลับมาเปิดใหม่ ก็จะได้ขนาดเดิมครับ

🔧 ดู Implementation เต็ม ๆ

src/theme/BlogPostPage/FontSizeControl.tsx

const [fontSize, setFontSize] = useState(() => {
  const saved = localStorage.getItem('blog-font-size');
  return saved ? parseInt(saved) : FONT_DEFAULT;
});

const increase = () => {
  const next = Math.min(fontSize + FONT_STEP, FONT_MAX);
  setFontSize(next);
  document.documentElement.style.setProperty('--blog-font-size', `${next}px`);
  localStorage.setItem('blog-font-size', String(next));
};

const decrease = () => {
  const next = Math.max(fontSize - FONT_STEP, FONT_MIN);
  setFontSize(next);
  document.documentElement.style.setProperty('--blog-font-size', `${next}px`);
  localStorage.setItem('blog-font-size', String(next));
};

ใช้ document.documentElement.style.setProperty เพื่อ update CSS Variable แบบ real-time โดยไม่ต้อง re-render component ครับ

⬆️ Scroll to Top Button

อีกฟีเจอร์เล็ก ๆ แต่ช่วย UX ได้เยอะเลย คือปุ่ม Scroll to Top ที่จะแสดงขึ้นมาเมื่อ scroll ลงมาเกิน 400px โดยกดแล้วจะ smooth scroll กลับด้านบนทันที

ใช้ IntersectionObserver style approach คือ listen scroll event แล้ว toggle ปุ่มตาม window.scrollY

📑 Custom TOC พร้อม Active Heading Highlight

Table of Contents เดิมใช้ Default TOC ของ Docusaurus ซึ่งก็ใช้ได้ แต่ไม่มี highlight ว่าตอนนี้เราอยู่ heading ไหน ผมเลยเขียน Custom TOC ขึ้นมาใหม่ใช้ IntersectionObserver ในการ detect ว่า heading ไหนอยู่ใน viewport แล้ว highlight ไว้

สังเกตว่า sidebar ฝั่งขวาจะมี heading ที่กำลังอ่านอยู่ถูก highlight ไว้ด้วยสี primary ครับ

info

ลอง scroll หน้านี้ดูสิครับ — sidebar ฝั่งขวาจะ highlight heading ที่กำลังอ่านอยู่แบบ real-time เลย

🧠 IntersectionObserver คืออะไร?

IntersectionObserver เป็น Web API ที่ใช้ detect ว่า element อยู่ใน viewport หรือไม่ โดยไม่ต้อง listen scroll event ซึ่ง performance ดีกว่า มากครับ

CustomTOC.tsx

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        setActiveId(entry.target.id);
      }
    });
  },
  { rootMargin: '-80px 0px -80% 0px' }
);

headings.forEach((heading) => observer.observe(heading));

rootMargin: '-80px 0px -80% 0px' คือการ offset จาก navbar 80px ด้านบน และ trigger เมื่อ heading เข้ามาใน 20% บนของ viewport ครับ

🎨 Color Scheme ใหม่: Blue (Light) / Dark Gray (Dark)

สีเดิมของ Blog เป็นโทนเขียว (green) ซึ่งก็ดูดี แต่ผมอยากได้โทนที่ดู Modern กว่า เลยเปลี่ยนเป็น Blue (#3b82f6) สำหรับ Light Mode และ Dark Gray (#6b7280) สำหรับ Dark Mode

☀️ Light Mode

src/css/custom.css

:root {
  --ifm-color-primary: #3b82f6;
  --ifm-color-primary-dark: #2563eb;
  --ifm-color-primary-darker: #1d4ed8;
}

🌙 Dark Mode

src/css/custom.css

[data-theme='dark'] {
  --ifm-color-primary: #6b7280;
  --ifm-color-primary-dark: #5a6169;
  --ifm-color-primary-darker: #4e5459;
}

Dark Mode เลือกใช้สีเทาแทนสีสดเพราะไม่อยากให้แสบตาเวลาอ่านนาน ๆ พื้นหลังใช้ #0a0a0a (เกือบดำ) ส่วน content area ใช้ #171717 เพื่อแยก layer เล็กน้อย

✍️ เพิ่ม Font JetBrainsMono

Font เดิมใช้ LINESeedSansTH อย่างเดียว ซึ่งดูดีสำหรับภาษาไทย แต่สำหรับ code block ผมอยากได้ monospace font ที่อ่านง่ายกว่า เลยเพิ่ม JetBrainsMono เข้ามาเป็น Font หลัก

src/css/custom.css

:root {
  --ifm-font-family-base: "JetBrainsMono", "LINESeedSansTH", monospace;
  --ifm-heading-font-family: "JetBrainsMono", "LINESeedSansTH", monospace;
}

note

JetBrainsMono โหลดมาจาก local woff2 files ไม่ได้ใช้ Google Fonts — ทำให้ ไม่มี external request เลยเร็วกว่าครับ

JetBrainsMono เป็น font ที่ออกแบบมาสำหรับเขียนโค้ดโดยเฉพาะ มี ligatures ที่อ่านง่าย และรองรับภาษาไทยผ่าน LINESeedSansTH เป็น fallback

รู้หรือไม่?

ทั้ง Blog ใช้ monospace font เดียวกันหมด — ทั้ง body, headings, code blocks — เพื่อให้ได้ feel แบบ developer aesthetic ครับ

🏷️ TagsListInline ปรับปรุงใหม่

Tags list เดิมใช้ display: inline กับ zoom: 80% ซึ่งดูไม่ค่อยเรียบร้อย ผม refactor ใหม่ให้ใช้ Flexbox แทน

❌ โค้ดเดิม (ก่อน refactor)

เดิม: inline + zoom

.container {
  display: inline;
  zoom: 80%;
}

.tagsList {
  display: inline;
}

ใช้ zoom ซึ่งไม่ standard และ spacing ไม่สม่ำเสมอ

src/theme/BlogPostComponents/TagsListInline/styles.module.css

.container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tagsList {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

ผลลัพธ์คือ Tags จัดเรียงเป็นระเบียบกว่าเดิม มี spacing ที่สม่ำเสมอ และ responsive ดีขึ้น

☕ Buy Me a Coffee Section ใหม่

ส่วน Buy Me a Coffee เดิมใช้ <img> tag กับ inline styles ซึ่งดูไม่ค่อย Modern ผม refactor ใหม่ให้ใช้ CSS Modules พร้อม emoji icon แทน

src/theme/BlogPostPage/BuyMeACoffee.tsx

<div className={styles.buymeacoffee}>
  <span className={styles.buymeacoffeeIcon}>☕</span>
  <div className={styles.buymeacoffeeBody}>
    <p>เนื้อหานี้มีประโยชน์ไหม? ช่วยสนับสนุนค่ากาแฟให้ผู้เขียนสักแก้ว</p>
    <a href="https://www.buymeacoffee.com/kongvut">Buy Me a Coffee</a>
  </div>
</div>

ดู Clean ขึ้นเยอะเลยครับ

🚀 Docusaurus 3.10.1

อัปเกรด Docusaurus จาก 3.9.2 เป็น 3.10.1 พร้อมปรับ config ให้ dynamic ขึ้น เช่น เวอร์ชันจะดึงจาก environment variable แทน hardcode

docusaurus.config.ts

const docusaurusVersion = process.env.DOCUSAURUS_VERSION || '3.10.1';

Footer copyright ก็จะแสดงเวอร์ชัน Docusaurus ที่ถูกต้องตาม environment ที่ build อยู่เสมอ

🔍 Algolia Search: ใช้ Service ข้างนอก + Manual Crawl

ก่อนหน้านี้ Blog ใช้ Algolia แบบ default ของ Docusaurus ซึ่งก็ใช้ได้ แต่มีข้อจำกัดหลายอย่าง — โดยเฉพาะเรื่อง Free Tier ที่มี quota จำกัด และถ้าไม่ manage ให้ดี จะโดนเก็บเงินได้ ผมเลยปรับปรุง Algolia search ให้ใช้แบบ external service แทนการ rely บน DocSearch program ของ Algolia อย่างเดียว

🏗️ แนวทางที่เปลี่ยนไป

เดิมใช้ Algolia DocSearch แบบที่ Docusaurus recommend มาให้ — ซึ่งดีสำหรับ Open Source project ที่ได้รับ approve แต่สำหรับ Blog ส่วนตัว ผมอยาก ควบคุมค่าใช้จ่าย ให้อยู่ใน Free Tier เสมอ

สิ่งที่เปลี่ยน:

รายการ	เดิม	ใหม่
Crawl Method	Algolia Crawler (automatic)	Manual Crawl ด้วย script
Index Update	Auto re-crawl	Manual trigger เมื่อ deploy
Cost Control	ไม่แน่ใจ quota	Free Tier 100% — ควบคุมได้
Service	DocSearch Program	Algolia Search Only (external)

📝 Manual Crawl คืออะไร?

Algolia Free Tier ให้ 10,000 records และ 10,000 search requests/เดือน ซึ่งสำหรับ Blog ส่วนตัวน่าจะเพียงพอ แต่ปัญหาคือถ้า Algolia Crawler re-crawl อัตโนมัติบ่อย ๆ จะทำให้ records เพิ่มโดยไม่จำเป็น

ผมเลยเขียน manual crawl script ที่จะ:

1. สร้าง search index เองจาก content ของ Blog
2. Push ไป Algolia เฉพาะตอน deploy
3. ไม่มี auto re-crawl — ประหยัด quota

scripts/crawl-algolia.ts

// Manual crawl — push index ไป Algolia เฉพาะตอน deploy
// ประหยัด Free Tier quota เพราะไม่มี auto re-crawl

import algoliasearch from 'algoliasearch';

const client = algoliasearch('APP_ID', 'API_KEY');
const index = client.initIndex('blog-index');

// สร้าง records จาก blog posts
const records = blogPosts.map(post => ({
  objectID: post.slug,
  title: post.title,
  content: post.content,
  url: post.url,
}));

// Push ไป Algolia
index.saveObjects(records);

💡 ทำไมถึงเลือก Manual?

❓ ทำไมไม่ใช้ Algolia Crawler อัตโนมัติ?

เหตุผลหลัก ๆ มี 3 ข้อ:

1. ควบคุมค่าใช้จ่าย — Manual crawl ทำให้รู้แน่ชัดว่าใช้ quota ไปเท่าไหร่ ไม่มี surprise billing
2. Content Quality — เลือก push เฉพาะ content ที่ต้องการ index ไม่เอา draft หรือ draft post ขึ้นไป
3. Free Tier อยู่ได้ — Blog ส่วนตัวมีบทความไม่เยอะ Manual crawl ทำให้อยู่ใน Free Tier ได้สบาย

warning

ถ้าใช้ Algolia Crawler อัตโนมัติ ควรเช็ค quota สม่ำเสมอ — ถ้าเกิน Free Tier จะโดนเก็บเงินทันที

🔗 Config ที่เปลี่ยน

docusaurus.config.ts

algolia: {
  appId: 'YOUR_APP_ID',
  apiKey: 'YOUR_SEARCH_API_KEY',
  indexName: 'blog-index',
  contextualSearch: true,
}

info

Config ยังเหมือนเดิม — สิ่งที่เปลี่ยนคือ วิธี populate index จาก automatic เป็น manual ครับ

🐳 Infrastructure: Docker Compose Fix

แก้ไข compose.dev.yml เปลี่ยน install command จาก --frozen-lockfile เป็น --no-frozen-lockfile เพื่อให้ dependency install ได้ยืดหยุ่นขึ้นใน development environment

❓ ทำไมถึงต้องเปลี่ยน?

--frozen-lockfile จะ ไม่ยอม install ถ้า pnpm-lock.yaml ไม่ตรงกับ package.json — ซึ่งดีสำหรับ production แต่ใน development บางทีเราต้องการ install dependency ใหม่ ๆ ที่ยังไม่ได้ commit lockfile

compose.dev.yml

# ❌ เดิม
command: pnpm install --frozen-lockfile

# ✅ ใหม่
command: pnpm install --no-frozen-lockfile

warning

ใน production ควรใช้ --frozen-lockfile เสมอ เพื่อให้ได้ dependency version เดียวกันทุกครั้งที่ build ครับ

📄 ปรับโฉมหน้า About ใหม่

หน้า About เดิมมีปัญหาหลายอย่างเลยครับ — Layout ใช้ Bootstrap grid แบบ 3 คอลัมน์ผสมกันมั่ว ๆ, สี font ใน Dark Mode อ่านยาก (#737373 บนพื้น #0a0a0a), และ Font size เล็กไปหน่อย ผมเลย redesign ใหม่ทั้งหมดครับ

ลองดูหน้า About โฉมใหม่

สามารถเข้าไปดูผลลัพธ์จริงได้ที่ /about — จะเห็นทุก section ที่พูดถึงในบทความนี้เลยครับ

🏗️ Layout ใหม่

เปลี่ยนจาก Bootstrap grid เป็น CSS Grid ทั้งหมด แบ่งเป็น 8 sections ชัดเจน:

#	Section	รายละเอียด
1	🙋 Hero	Title + Tagline เรียบง่าย ไม่มีภาพใหญ่
2	💬 Intro	Card พร้อม left accent border + 3 highlight badges
3	💡 Philosophy	3 cards พร้อม SVG icons (undraw illustrations)
4	🔍 Insight	Numbered cards (01, 02, 03) พร้อม left accent border
5	🎨 Features	2-column — คุณสมบัติเด่น + บทความที่เกี่ยวข้อง
6	📐 Blog New Look	Timeline แสดง design evolution 4 versions
7	🛠️ Tech Stacks	3-column grid cards
8	☕ Support & Contact	3-column (BMC, Contact, QR)

🎨 Design Language

ทุก component ใช้ design language เดียวกับ blog — สังเกตว่า border-radius, letter-spacing, link style ทุกอย่าง consistent กับหน้า Blog Post เลยครับ

src/pages/styles.module.css

border-radius: 15px;           /* cards */
border: 1px solid var(--ifm-divider-color);
letter-spacing: -0.015em;      /* headings */
text-decoration-color: rgba(128, 128, 128, 0.25);  /* links */
transition: border-color 0.15s ease;

ทำไมถึงต้อง consistent?

เพราะถ้าหน้า Blog Post กับหน้า About ใช้ design language คนละชุด จะทำให้ user รู้สึกว่าไม่ใช่ website เดียวกัน — consistency = professionalism ครับ

🌙 แก้ Dark Mode Font

ปัญหาใหญ่คือสี secondary text ใน Dark Mode อ่านยาก จากเดิม #737373 เปลี่ยนเป็น #b8b8b8 — อ่านง่ายขึ้นเยอะเลยครับ แถมส่งผลทั้ง blog ไม่ใช่แค่หน้า About

🔤 เพิ่ม Font Size

ทุกจุดบนหน้า About เพิ่ม size ขึ้น ~0.05-0.15rem:

• Section headings: 1.35rem → 1.5rem
• Card descriptions: 0.78rem → 0.83-0.9rem
• Intro paragraph: 0.95rem → 1rem

Consistency is the hallmark of quality.

Design Principle

📝 สรุป

การปรับปรุงรอบนี้ค่อนข้างใหญ่เลยทีเดียวครับ ครอบคลุมทั้งเรื่อง:

• ⚡ UX: Font Size Controls, Scroll to Top, Custom TOC with active highlight
• 🎨 Visual: Color Scheme ใหม่, JetBrainsMono Font, Dark Mode เป็น default
• 📄 About Page: หน้า About โฉมใหม่ — Layout, Dark Mode fix, Font Size
• 📐 Blog New Look: Timeline แสดงประวัติ design evolution ทั้ง 4 versions (v1–v4)
• 🧹 Code Quality: Refactor TagsListInline และ Buy Me a Coffee ให้ใช้ CSS Modules
• 🔍 Search: Algolia Search ใช้ external service + manual crawl อยู่ใน Free Tier 100%
• 🐳 Infrastructure: Docusaurus 3.10.1, Docker Compose fix

หวังว่าผู้อ่านจะชอบ Blog โฉมใหม่นี้นะครับ ถ้ามี feedback หรือ suggestions อะไร คอมเมนต์ไว้ได้เลยครับ 👋

---

อย่าลืม!

ไปดูหน้า /about โฉมใหม่กันด้วยนะครับ — มีทั้ง Philosophy cards, Tech stacks, 📐 Blog New Look timeline, และ Support section ที่ redesign ใหม่ทั้งหมดเลย 🚀

docusaurusblog

แชร์บทความ

FacebookX

☕

เนื้อหานี้มีประโยชน์ไหม? ช่วยสนับสนุนค่ากาแฟให้ผู้เขียนสักแก้ว

Buy Me a Coffee