Skip to main content

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

· 5 min read
Kongvut Sangkla
Kongvut Sangkla
Author
17

Intro​

สวัสดีครับ บทความนี้จะมาสรุปการปรับปรุง Blog ครั้งล่าสุดครับ ซึ่งครอบคลุมหลายส่วนตั้งแต่ UI/UX, การปรับปรุง Typography, Dark Mode ที่ดูดีขึ้น, ฟีเจอร์ใหม่สำหรับผู้อ่าน รวมถึงการอัปเดต 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 ใหม่

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

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

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

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

Font Size Controls (A+/A-)​

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

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

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

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

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 ครับ

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

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

Light Mode​

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

Dark Mode​

[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 หลัก

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

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

TagsListInline ปรับปรุงใหม่​

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

.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 แทน

<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

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

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

Infrastructure: Docker Compose Fix​

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

สรุป​

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

  • UX: Font Size Controls, Scroll to Top, Custom TOC with active highlight
  • Visual: Color Scheme ใหม่, JetBrainsMono Font, Dark Mode เป็น default
  • Code Quality: Refactor TagsListInline และ Buy Me a Coffee ให้ใช้ CSS Modules
  • Infrastructure: Docusaurus 3.10.1, Docker Compose fix

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

☕

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

Buy Me a Coffee
Loading...