ภาษา ธีม และการนำทาง · Language, theme & navigation

DevStack เริ่มจากชุมชนนักพัฒนาไทย เราจึงทำให้ NVX Stack Builder รองรับภาษาไทยและอังกฤษเต็มรูปแบบตั้งแต่วันแรก มีธีมดำ (ค่าเริ่มต้น) และธีมสว่าง มี command palette สำหรับคนที่ชอบใช้คีย์บอร์ด และมีหน้าเอกสารที่คุณกำลังอ่านอยู่นี้ หน้านี้เล่าวิธีใช้และเหตุผลของการออกแบบ

ภาษา (TH / EN)#

• ปุ่ม ภาษาไทย / English (ไอคอน Languages) บนแถบด้านบน สลับภาษาของทั้งแอปทันที ค่าถูกจำใน localStorage คีย์ nvx-lang ถ้ายังไม่เคยเลือก แอปจะใช้ภาษาไทยเมื่อภาษาของเบราว์เซอร์ (navigator.language) ขึ้นต้นด้วย th และใช้อังกฤษในกรณีอื่น
• ข้อความ UI ทั้งหมดอยู่ใน src/lib/i18n.ts ส่วนเนื้อหาของเทมเพลตเป็นชนิด L10n ({ en, th }) ที่ต้องมีทั้งสองภาษาเสมอ
• ภาษาที่เลือกมีผลกับ: คำอธิบายขั้นตอน, หัวข้อใน setup.sh/setup.ps1, README.md ที่ดาวน์โหลด และภาษาของคำตอบจาก AI agent (ส่ง lang ไปกับคำขอ)
• คำสั่งและโค้ดเป็นภาษาอังกฤษเสมอ เพราะต้องรันได้จริง
• ฟอนต์ไทยคือ IBM Plex Sans Thai (ตั้งแต่ v0.2.0) หัวข้อภาษาไทยใช้ letter-spacing ปกติและ line-height สูงขึ้น เพื่อไม่ให้สระและวรรณยุกต์ชนกัน

ธีม (Dark / Light)#

• ธีมดำเป็นค่าเริ่มต้นสำหรับทุกคน ไม่ขึ้นกับการตั้งค่า OS (v0.1–v0.3 ใช้ prefers-color-scheme ของ OS; เปลี่ยนใน v0.4, commit 2210920, ตามความต้องการของเจ้าของที่อยากได้ลุคเครื่องมือนักพัฒนา) ปุ่มพระอาทิตย์/พระจันทร์สลับเป็นธีมสว่าง ค่าถูกจำใน localStorage คีย์ nvx-theme
• เซิร์ฟเวอร์เรนเดอร์ <html class="dark"> ไว้ก่อน และสคริปต์ pre-paint เล็ก ๆ ใน layout.tsx ถอดคลาสออกเฉพาะเมื่อผู้ใช้เลือก light จึงไม่มีการกะพริบสี (flash) ตอนโหลด
• ดีไซน์ v0.5 อ้างอิง developer.apple.com: พื้นดำ ตัวหนังสือใหญ่ ปุ่มทรงแคปซูล สีฟ้าใช้อย่างจำกัด และโลโก้เครื่องมือจริงเป็นไทล์ (ดู concepts/design-system.md)
• ผู้ใช้ที่ตั้ง prefers-reduced-motion จะได้แอนิเมชันเกือบเป็นศูนย์ และเคอร์เซอร์ในหน้าต่างโค้ดหยุดกะพริบ

Command palette#

• กด Ctrl + K (Windows/Linux) หรือ ⌘ + K (macOS) หรือคลิกช่อง "Search or jump to…"
• พิมพ์เพื่อค้นหา: หน้าต่าง ๆ (Home, Templates, Builder, Docs, Design system), เทมเพลตทุกตัว (เปิดหน้ารายละเอียดหรือเปิดในตัวสร้าง), ทุกหน้าในเอกสาร (กลุ่ม "Docs / เอกสาร") และ action สลับธีม/ภาษา
• ↑↓ เลื่อน, Enter เปิด, Esc ปิด

การนำทางบนมือถือ#

บนจอเล็ก เมนูจะยุบเป็นปุ่ม hamburger ที่เปิด sheet ด้านข้าง ในนั้นมีลิงก์ เอกสาร (Docs) ด้วย เราทดสอบทุกหน้าที่ความกว้าง 390px ว่าไม่มี horizontal scroll ทั้งภาษาไทยและอังกฤษ

หน้าเอกสาร (/docs)#

• เปิดได้จากเมนูด้านบน (เอกสาร / Docs), เมนู hamburger บนมือถือ หรือ command palette
• เดสก์ท็อปมี navigation drawer ด้านซ้ายแบ่งตามหมวด และ "ในหน้านี้" ด้านขวา บนมือถือกดปุ่มเมนูในแถบเอกสารเพื่อเปิด drawer
• กด / เพื่อไปที่ช่องค้นหาในเอกสาร ค้นได้ทั้งไทยและอังกฤษ
• ทุกหน้ามี คัดลอก Markdown, ดูไฟล์ดิบ (.md) และปุ่มคัดลอกบนทุกบล็อกโค้ด รายละเอียดเบื้องหลังอยู่ที่ docs-site.md

อ้างอิง#

src/components/prefs.tsx, src/app/layout.tsx, src/components/header.tsx, src/components/command-palette.tsx, src/components/docs/docs-shell.tsx