Lab Vibe 2 — navbar, card และปุ่มสลับธีมสว่าง/มืด

แผนที่ของ Lab: ทำเองก่อน แล้วค่อยเขียนใบสั่งให้ AI

สไลด์หน้า 34 ให้ "ใบสั่งงาน AI" มาหนึ่งใบ (เป้าหมาย · ข้อกำหนด · ห้าม · เกณฑ์ตรวจรับ — สี่ส่วนเดียวกับบท 121) · บทนี้จะทำทุกข้อในใบนั้นด้วยมือก่อน เพื่อให้รู้ว่างานที่ถูกหน้าตาเป็นยังไง · พอถึงตอนท้าย คุณจะอ่านงานของ AI ออกว่าขาดอะไร

ไฟล์ที่แตะทั้งหมด 19 ไฟล์ ฟังดูเยอะ แต่เกือบทั้งหมดคือเปลี่ยนชื่อคลาส — logic ของ Ruby แทบไม่ขยับเลย · ของใหม่จริง ๆ มีแค่ขั้น 1–3 · ขั้น 4–5 คือฝึกมือ

ขั้น 0 — เตรียมร้านก่อนเริ่ม

เปิด terminal สองหน้าต่าง (หรือสองแท็บ) ที่โฟลเดอร์ของแอป · หน้าต่างแรกปล่อยร้านเปิดค้างไว้ หน้าต่างที่สองไว้พิมพ์คำสั่งอื่น:

# หน้าต่างที่ 1 — เปิดร้านพร้อมคนคอยสร้าง CSS (ต้องเป็น bin/dev ไม่ใช่ bin/rails server)
$ bin/dev

# หน้าต่างที่ 2 — ต้องไม่ขึ้นอะไรเลย = ไม่มีของทดลองค้างจากบท 127–128
$ git status --short

ขั้น 1 — เปิดธีมใน CSS: บอก daisyUI ว่าร้านเรามีธีมอะไรบ้าง

ธีม (theme) คือชุดสีทั้งชุดของเว็บ: สีพื้น สีตัวอักษร สีปุ่มหลัก สีเตือน · daisyUI มีธีมสำเร็จรูปให้หลายสิบชุด แต่จะใส่ลงไฟล์ CSS เฉพาะธีมที่เรา "เปิด" · เปิดแล้วจะเลือกใช้ธีมไหน ก็แค่ติดป้าย data-theme="ชื่อธีม" ที่แท็ก <html>

เปิดไฟล์ app/assets/tailwind/application.css · ตอนนี้บรรทัดที่ 3 เป็นแบบนี้:

@plugin "./daisyui.mjs";

เปลี่ยนบรรทัดนั้นเป็นบล็อก 3 บรรทัด · ไฟล์ application.css ทั้งไฟล์หลังแก้:

@import "tailwindcss";
@source not "./daisyui{,*}.mjs";
@plugin "./daisyui.mjs" {
  themes: light --default, dark --prefersdark;
}

@theme {
  --font-sans: "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif;
}

• @plugin "./daisyui.mjs" { … } = เปิดใช้ daisyUI จากไฟล์ที่อยู่ข้าง ๆ กัน และส่งการตั้งค่าไปในวงเล็บปีกกา (บรรทัดอื่นมีอยู่แล้ว ไม่ต้องแตะ — บท 128)
• themes: = รายชื่อธีมที่เปิด คั่นด้วยจุลภาค
• light --default = ธีมสว่าง และเป็นธีมตั้งต้น เมื่อ <html> ยังไม่มีป้าย data-theme
• dark --prefersdark = ธีมมืด และใช้อัตโนมัติถ้าเครื่องของผู้ใช้ตั้งโหมดมืดไว้ (และยังไม่มีป้าย)

Error:
┌
│ Error: Can't resolve 'daisyui' in '…/app/assets/tailwind'
└
bin/rails aborted!
…

ธีมทำงานยังไง? daisyUI ไม่ได้เขียนสีลงในคลาสตรง ๆ แต่เขียนเป็นตัวแปรของ CSS (ชื่อขึ้นต้นด้วย --) แล้วให้แต่ละธีมตั้งค่าตัวแปรชุดเดียวกันต่างกัน · ตัวอย่างจากไฟล์ CSS ที่ build ได้จริง (ตัดมาบางส่วน):

/* app/assets/builds/tailwind.css — ไฟล์ที่ Tailwind สร้าง (บรรทัดเดียวยาว ๆ ตัดมาให้ดู) */
[data-theme=dark]{color-scheme:dark;--color-base-100:oklch(25.33% .016 252.42);--color-base-200:oklch(23.26% .014 253.1);…
.bg-base-100{background-color:var(--color-base-100)}

• [data-theme=dark]{ … } = "ถ้าเจอป้าย data-theme="dark" ให้ตั้งตัวแปรพวกนี้" · --color-base-100 คือตัวแปรชื่อ "สีพื้นระดับ 100" · color-scheme:dark = บอกเบราว์เซอร์ให้วาดของที่มันวาดเอง (แถบเลื่อน · ช่องกรอก) เป็นโทนมืดด้วย
• .bg-base-100{background-color:var(--color-base-100)} = คลาส bg-base-100 ไม่ได้รู้ว่าเป็นสีอะไร มันแค่บอกว่า "ใช้ค่าในตัวแปรนั้น" · var(…) = อ่านค่าตัวแปร
• เปลี่ยนป้ายเป็น dark → ตัวแปรเปลี่ยนค่า → ทุกที่ที่ใช้ bg-base-100 เปลี่ยนสีพร้อมกันทันที โดยไม่มีใครต้องแก้ HTML สักบรรทัด

ถ้าเคยทำ บท 81 (design token ของ shadcn) นี่คือกลไกเดียวกันเป๊ะ — ที่นั่นใช้คลาส .dark ประกาศ --primary ซ้ำ · ที่นี่ใช้ป้าย data-theme แทน

บันทึกไฟล์ · bin/dev จะสร้าง CSS ใหม่ให้เอง (ดูในหน้าต่างที่ 1) · ถ้าอยากสั่งเองก็ได้:

$ bin/rails tailwindcss:build
≈ tailwindcss v4.3.3

/*! 🌼 daisyUI 5.7.50 */
Done in 92ms

$ cmp app/assets/builds/tailwind.css before.css
$ grep -o '\[data-theme=[a-z]*\]' app/assets/builds/tailwind.css | sort | uniq -c
   1 [data-theme=dark]
   2 [data-theme=light]

ขั้น 2 — navbar: แถบเมนูบนสุดที่อยู่ทุกหน้า

แถบเมนูต้องโผล่ทุกหน้า → ที่ของมันคือ layout (จานรองที่ห่อทุกหน้า) · แต่เราจะไม่เขียนลงใน layout ตรง ๆ ให้แยกเป็น partial ชื่อ shared/_navbar.html.erb ตามข้อกำหนดของสไลด์ — layout จะได้สั้นอ่านง่าย และหาเจอว่าเมนูอยู่ไฟล์ไหน

สร้างไฟล์ใหม่ app/views/shared/_navbar.html.erb (โฟลเดอร์ shared/ มีแล้วจากบท 126):

<%# locals: () -%>
<header class="navbar bg-base-100 shadow-sm">
  <div class="flex-1">
    <%= link_to "Wongnok Blog", posts_path, class: "btn btn-ghost text-lg sm:text-xl" %>
  </div>

  <nav class="flex-none flex items-center gap-1">
    <%= link_to "บทความ", posts_path, class: "btn btn-ghost btn-sm" %>
    <%= link_to "หมวด", categories_path, class: "btn btn-ghost btn-sm" %>
    <button type="button" class="btn btn-ghost btn-sm" aria-label="สลับธีมสว่าง/มืด"
            data-controller="theme" data-action="theme#toggle">🌓</button>
  </nav>
</header>

• <%# locals: () -%> = ป้ายของแม่พิมพ์ว่า "ไม่รับของอะไรเลย" (วงเล็บว่าง) · ถ้าใครเผลอยื่นของมา Rails จะฟ้องทันที (บท 123)
• navbar = ชิ้นแถบเมนูของ daisyUI: เรียงของในแถวเดียว จัดกลางแนวตั้ง มีระยะขอบให้ · bg-base-100 = พื้นสีระดับ 100 ของธีม · shadow-sm = เงาบาง ๆ ใต้แถบ
• flex-1 = กล่องนี้ยืดกินที่ว่างทั้งหมด → ดันเมนูไปชิดขวา · flex-none = กล่องเมนูไม่ยืด ไม่หด (บท 61 flexbox) · flex items-center gap-1 = เรียงปุ่มในแถวเดียว จัดให้อยู่กลางแนวตั้งเท่ากัน เว้นช่องไฟระหว่างปุ่ม 1 หน่วย
• btn = ชิ้นปุ่ม · btn-ghost = ปุ่มแบบโปร่ง ไม่มีพื้นจนกว่าเอาเมาส์ชี้ · btn-sm = ปุ่มขนาดเล็ก · ลิงก์ก็ใส่ btn ได้ หน้าตาจะเป็นปุ่ม แต่ยังเป็นลิงก์
• text-lg sm:text-xl = ตัวอักษรใหญ่ระดับ lg · จอกว้างตั้งแต่ขนาด sm ขึ้นไป ค่อยใหญ่เป็น xl (sm: คือเงื่อนไขขนาดจอ — บท 72)
• aria-label = ข้อความบอกโปรแกรมอ่านหน้าจอ (สำหรับคนตาบอด) ว่าปุ่ม 🌓 ทำอะไร
• data-controller กับ data-action = ป้ายที่ผูกปุ่มนี้กับ JavaScript · ตอนนี้ยังไม่มี JavaScript ตัวนั้น กดไปก็ไม่เกิดอะไร — ขั้น 3 จะทำ

แล้วเปิด layout app/views/layouts/application.html.erb เลื่อนลงล่างสุด แก้ 3 จุด · ก่อนแก้:

  <body>
    <main class="container mx-auto mt-28 px-5 flex">
      <%= yield %>
    </main>
  </body>

หลังแก้:

  <body class="min-h-screen bg-base-200">
    <%= render "shared/navbar" %>

    <main class="container mx-auto px-4 py-8 flex">
      <%= yield %>
    </main>
  </body>

• min-h-screen = สูงอย่างน้อยเต็มจอ → สีพื้นเต็มจอแม้หน้าที่เนื้อหาสั้น · bg-base-200 = พื้นเข้มกว่า base-100 หนึ่งระดับ → การ์ดสี base-100 ที่วางบนพื้นจะลอยเด่นขึ้นมา
• <%= render "shared/navbar" %> = เอาแม่พิมพ์ navbar มาวางตรงนี้ · ไม่ต้องใส่ _ และ .html.erb Rails เติมเอง
• mt-28 (ระยะว่างด้านบนที่ scaffold เว้นไว้) ลบทิ้ง เพราะตอนนี้มี navbar แล้ว · px-4 py-8 = ระยะขอบซ้ายขวา 4 หน่วย บนล่าง 8 หน่วย (1 หน่วยของ Tailwind = 0.25rem = 4px → 4 หน่วย = 16px · บท 72)

เปิด http://localhost:3000/posts จะเห็นแถบเมนูบนสุด · ดู HTML ที่เบราว์เซอร์ได้รับจริง (ผลจริง ตัดมาเฉพาะช่วงต้น <body>):

$ curl -s localhost:3000/posts
<!-- BEGIN app/views/layouts/application.html.erb
--><!DOCTYPE html>
<html>
…
  <body class="min-h-screen bg-base-200">
    <!-- BEGIN app/views/shared/_navbar.html.erb
--><header class="navbar bg-base-100 shadow-sm">
  <div class="flex-1">
    <a class="btn btn-ghost text-lg sm:text-xl" href="/posts">Wongnok Blog</a>
  </div>

  <nav class="flex-none flex items-center gap-1">
    <a class="btn btn-ghost btn-sm" href="/posts">บทความ</a>
    <a class="btn btn-ghost btn-sm" href="/categories">หมวด</a>
    <button type="button" class="btn btn-ghost btn-sm" aria-label="สลับธีมสว่าง/มืด"
            data-controller="theme" data-action="theme#toggle">🌓</button>
  </nav>
</header>
<!-- END app/views/shared/_navbar.html.erb -->

    <main class="container mx-auto px-4 py-8 flex">

• <!-- BEGIN … --> / <!-- END … --> = ป้ายที่ Rails แปะให้เฉพาะตอน development บอกว่า HTML ช่วงนี้มาจากไฟล์ไหน — สะดวกมากเวลาหาว่าอะไรมาจากแม่พิมพ์ไหน
• link_to "บทความ", posts_path, class: "…" กลายเป็น <a class="…" href="/posts">บทความ</a> · ส่วน <button> เราเขียนเป็น HTML ตรง ๆ จึงออกมาเหมือนเดิมทุกตัวอักษร
• สังเกต <html> บรรทัดบน: ไม่มี data-theme · server ไม่รู้เลยว่าลูกค้าเลือกธีมอะไร — ป้ายนี้จะถูกติดทีหลังโดย JavaScript ในเบราว์เซอร์ (ขั้น 3)

ขั้น 3 — ปุ่มสลับธีม: JavaScript ตัวแรกของเราแบบ Rails (Stimulus)

ปุ่มต้องทำสองอย่าง: ① กดแล้วเปลี่ยนป้าย data-theme บน <html> ② จำไว้ว่าเลือกอะไร เปิดหน้าใหม่แล้วติดป้ายเดิมให้ · ทั้งสองอย่างเกิดในเบราว์เซอร์ ไม่เกี่ยวกับ server → ต้องใช้ JavaScript

ถ้าเป็น React (บท 73) เราจะเขียน onClick ในตัว component · ฝั่ง Rails ห้ามเขียน <script> ปนใน view (กฎในสไลด์ และ prompts/00-context.md) · Rails 8 ใช้ Stimulus แทน: เขียน JavaScript แยกไว้ในไฟล์ของมัน แล้วให้ HTML ติดป้ายบอกว่าจุดไหนต้องการ JavaScript ตัวไหน · ป้ายนั้นคือ data-controller="theme" ที่เราเขียนไว้ใน navbar แล้ว

สร้างไฟล์ใหม่ app/javascript/controllers/theme_controller.js · ชื่อไฟล์สำคัญ: theme_controller.js ↔ data-controller="theme" ต้องตรงกัน (เหมือนชื่อไฟล์ partial กับ render):

import { Controller } from "@hotwired/stimulus"

// ปุ่มสลับธีมสว่าง/มืด (อยู่ใน shared/_navbar.html.erb)
export default class extends Controller {
  // โหลดหน้า: ถ้าเคยเลือกธีมไว้ ใส่กลับให้
  connect() {
    const saved = localStorage.getItem("theme")
    if (saved) document.documentElement.dataset.theme = saved
  }

  // กดปุ่ม: สลับ light ↔ dark แล้วจำไว้
  toggle() {
    const html = document.documentElement
    const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches
    const current = html.dataset.theme || (systemDark ? "dark" : "light")
    const next = current === "dark" ? "light" : "dark"

    html.dataset.theme = next
    localStorage.setItem("theme", next)
  }
}

อ่านทีละบรรทัด:

• import { Controller } from "@hotwired/stimulus" = ดึงแม่แบบ Controller มาจาก library Stimulus · library นี้อยู่ในแอปแล้วผ่าน importmap (สมุดรายชื่อ "ชื่อเล่น → ไฟล์อยู่ไหน" — บท 127) ไม่ต้อง npm install
• export default class extends Controller { = สร้าง class ใหม่ที่สืบทอดจาก Controller (เหมือน class PostsController < ApplicationController ใน Ruby) · export default = ไฟล์นี้ส่ง class นี้ออกไปเป็นของหลัก (เหมือน export default function Page() ใน Next.js) · ไม่ต้องตั้งชื่อ class เพราะ Stimulus ใช้ชื่อไฟล์แทน
• connect() { … } = method ที่ Stimulus เรียกเอง เมื่อเจอ element ที่มี data-controller="theme" บนหน้า · คล้าย useEffect(() => { … }, []) ที่รันหลังขึ้นจอ
• const saved = localStorage.getItem("theme") = อ่านค่าที่เคยจดไว้ชื่อ "theme" · ถ้าไม่เคยจด ได้ null · const = ตัวแปรที่ตั้งครั้งเดียวไม่เปลี่ยน
• if (saved) document.documentElement.dataset.theme = saved = ถ้ามีค่า ติดป้ายให้ · document = หน้าเว็บที่เปิดอยู่ทั้งหน้า (ของที่ JavaScript ใช้หยิบแท็กต่าง ๆ) · document.documentElement = แท็ก <html> ตัวนอกสุด · .dataset.theme = attribute data-theme (เบราว์เซอร์แปลง data-xxx เป็น .dataset.xxx ให้)
• toggle() { … } = method ที่ป้าย data-action="theme#toggle" เรียก · ชื่อ toggle เราตั้งเอง จะเรียกอะไรก็ได้ขอให้ตรงกันสองฝั่ง
• window.matchMedia("(prefers-color-scheme: dark)").matches = ถามเบราว์เซอร์ว่า "เครื่องนี้ตั้งโหมดมืดอยู่ไหม" ได้ true / false · window = ตัวหน้าต่างเบราว์เซอร์ (ของที่รู้เรื่องเครื่องและจอ)
• html.dataset.theme || (systemDark ? "dark" : "light") = ถ้ามีป้ายอยู่แล้วใช้ป้าย ถ้ายังไม่มี (|| = "ถ้าซ้ายว่าง ใช้ขวา") ให้เดาจากเครื่อง · เงื่อนไข ? ก : ข = ถ้าจริงได้ ก ไม่จริงได้ ข (ตัวเดียวกับที่ใช้ใน JSX)
• current === "dark" ? "light" : "dark" = ตอนนี้มืดอยู่ → ไปสว่าง · นอกนั้น → ไปมืด · === = เท่ากันเป๊ะ
• html.dataset.theme = next = เปลี่ยนป้าย → สีทั้งเว็บเปลี่ยนทันที (ขั้น 1) · localStorage.setItem("theme", next) = จดลงสมุดว่าเลือกอะไร

ทำไมต้องถามเครื่องก่อน? ตอนยังไม่เคยกด <html> ไม่มีป้าย · ถ้าเครื่องตั้งโหมดมืด daisyUI จะโชว์มืด (เพราะ --prefersdark) · ถ้าโค้ดคิดเอาเองว่า "ไม่มีป้าย = สว่าง" กดครั้งแรกจะได้ "มืด" ซ้ำ = กดแล้วไม่เปลี่ยน · ผมทดสอบใน Chrome ที่ตั้งเครื่องเป็นโหมดมืด: ก่อนกดไม่มีป้ายแต่พื้นมืด → กดครั้งแรกได้ data-theme="light" ถูกต้อง

ไม่ต้องลงทะเบียนอะไรที่ไหน · config/importmap.rb มีบรรทัด pin_all_from "app/javascript/controllers", under: "controllers" อยู่แล้ว = "ไฟล์ทุกไฟล์ในโฟลเดอร์ controllers ใส่ในสมุดรายชื่อให้หมด" · ตรวจได้ (ผลจริง ตัดมาบรรทัดที่เกี่ยว):

$ bin/importmap json
…
    "controllers/hello_controller": "/assets/controllers/hello_controller-708796bd.js",
…
    "controllers/theme_controller": "/assets/controllers/theme_controller-5a29af2b.js"
…

-5a29af2b คือเลขรุ่นท้ายชื่อไฟล์จากบท 127 (ถ้าไฟล์ของคุณตรงกับข้างบนทุกตัวอักษร เลขจะตรงกัน) · hello_controller คือตัวอย่างที่ Rails ให้มาตั้งแต่สร้างแอป

ทำไมไม่มี disconnect() (method เก็บกวาดตอนอุปกรณ์ถูกถอด — คล้าย cleanup ของ useEffect)? เพราะเราไม่ได้ตั้งนาฬิกาหรือดักฟังอะไรเอง · การกดปุ่มผูกผ่าน data-action ซึ่ง Stimulus ถอดให้เอง · connect · disconnect · ป้ายแบบอื่น ๆ ของ Stimulus ละเอียดในบท 134 — วันนี้รู้แค่นี้พอใช้

บันทึก แล้วกลับไปหน้า /posts กด refresh หนึ่งครั้ง (ให้ไฟล์ JS ใหม่โหลด) แล้วกด 🌓

before theme: (none)
after theme: dark ls: dark
checked 78 unchanged 35
 - bg a.shrink-0.rounded-md.px-3.5.py-2.5.bg-blue-600…  [เขียนบทความใหม่] oklch(0.546 0.245 262.881)
 - color span.font-medium.text-blue-700 [เครื่องดื่ม] oklch(0.488 0.243 264.376)
 - color p.mt-2.text-gray-700 [นมสีชมพูจากน้ำแดง หว] oklch(0.373 0.034 259.733)
 - bg a.rounded-md.px-3.py-2.bg-gray-100…  [ถัดไป →] oklch(0.967 0.003 264.542)
 …
body oklch(0.98 0 0) -> oklch(0.2326 0.014 253.1)

ขั้น 4 — หน้า posts: เปลี่ยนสีตายตัวเป็นชิ้นของ daisyUI

หลักเดียวของขั้นนี้: ทุกที่ที่เขียนชื่อสีตรง ๆ (blue · gray · red · green) ให้เปลี่ยนเป็นชิ้นของ daisyUI หรือสีตามหน้าที่ · ตอนนี้ใน app/views มีบรรทัดแบบนั้นอยู่ 43 บรรทัด (นับจริงด้วย grep ที่จะใช้ตอนตรวจรับ) · จบขั้น 5 ต้องเหลือ 0

ไฟล์ app/views/posts/_post.html.erb — แทนทั้งไฟล์

<%# locals: (post:, full: false) -%>
<article id="<%= dom_id post %>" class="card bg-base-100 shadow-sm">
  <div class="card-body">
    <p class="flex flex-wrap items-center gap-2 text-sm text-base-content/70">
      <span class="badge badge-primary"><%= post.category.name %></span>
      <%= time_ago_in_words(post.created_at) %> ago
    </p>

    <% if full %>
      <h1 class="card-title text-3xl"><%= post.title %></h1>
      <p class="leading-relaxed whitespace-pre-line"><%= post.description %></p>
    <% else %>
      <h2 class="card-title">
        <%= link_to post.title, post, class: "link link-hover" %>
      </h2>
      <p class="text-base-content/80"><%= truncate(post.description, length: 80, separator: " ") %></p>
    <% end %>
  </div>
</article>

Ruby/ERB ทุกบรรทัดเหมือนบท 126 (ป้าย locals · dom_id · if full) · เปลี่ยนแค่โครงกับคลาส: ห่อเนื้อหาด้วย <div class="card-body"> เพิ่มหนึ่งชั้น · ตัด · หน้าเวลาออก (badge แยกตัวเองชัดแล้ว) · ตัด mt-… ออก (card-body เว้นระยะให้เอง)

ไฟล์ app/views/posts/index.html.erb — แทนทั้งไฟล์

<% content_for :title, "บทความทั้งหมด" %>

<div class="w-full max-w-3xl mx-auto">
  <% if notice.present? %>
    <p class="alert alert-success mb-5" id="notice"><%= notice %></p>
  <% end %>

  <div class="flex justify-between items-center gap-4 mb-6">
    <h1 class="font-bold text-3xl sm:text-4xl">บทความทั้งหมด</h1>
    <%= link_to "เขียนบทความใหม่", new_post_path, class: "btn btn-primary shrink-0" %>
  </div>

  <div id="posts" class="space-y-4">
    <%= render(@posts) || tag.p("ไม่พบบทความ", class: "text-center text-base-content/60 my-10") %>
  </div>

  <%= render "shared/pagination", pagy: @pagy %>
</div>

เปลี่ยน 4 จุดจากบท 126:

• alert alert-success = กล่องแจ้งเตือนสีเขียว "สำเร็จ" ของธีม (แทน bg-green-50 text-green-500 …)
• btn btn-primary = ปุ่มสีหลักของธีม (แทน bg-blue-600 hover:bg-blue-500 text-white … — daisyUI ทำสีตอนชี้เมาส์ให้เอง) · shrink-0 เดิม = ห้ามปุ่มหดเมื่อจอแคบ
• mb-6 = เว้นใต้หัวข้อ · space-y-4 = เว้นระยะ 4 ระหว่างการ์ดแต่ละใบ (ไม่งั้นการ์ดติดกัน)
• text-base-content/60 = สีตัวหนังสือของธีมจาง 60% (แทน text-gray-500)

ไฟล์ app/views/posts/show.html.erb — แทนทั้งไฟล์

<% content_for :title, @post.title %>

<div class="w-full max-w-3xl mx-auto">
  <% if notice.present? %>
    <p class="alert alert-success mb-5" id="notice"><%= notice %></p>
  <% end %>

  <nav class="breadcrumbs text-sm mb-2" aria-label="breadcrumb">
    <ul>
      <li><%= link_to "บทความทั้งหมด", posts_path %></li>
      <li><%= link_to @post.category.name, @post.category %></li>
      <li><%= @post.title %></li>
    </ul>
  </nav>

  <%= render @post, full: true %>

  <div class="mt-6 flex flex-col sm:flex-row gap-2">
    <%= link_to "แก้ไข", edit_post_path(@post), class: "btn" %>
    <%= link_to "กลับไปหน้ารวม", posts_path, class: "btn btn-ghost" %>
    <%= button_to "ลบบทความ", @post, method: :delete, class: "btn btn-error w-full", data: { turbo_confirm: "ลบบทความนี้จริงไหม?" } %>
  </div>
</div>

• breadcrumbs = เส้นทาง "อยู่ตรงไหนของเว็บ" ของ daisyUI · ต้องเขียนเป็น <ul><li> แล้ว daisyUI ใส่ลูกศร › คั่นให้เอง → เราลบ › ที่พิมพ์เองในบท 126 ทิ้ง · หัวข้อยาวเกินจอจะเลื่อนแนวนอนได้ในตัว
• btn เฉย ๆ = ปุ่มสีกลาง ๆ ของธีม · btn-ghost = ปุ่มโปร่ง · btn-error = ปุ่มสี "อันตราย" ของธีม (แทน bg-red-600)
• flex flex-col sm:flex-row gap-2 = จอแคบเรียงปุ่มลงแนวตั้ง · จอตั้งแต่ sm ขึ้นไปเรียงแนวนอน · เว้นช่องไฟ 2 · w-full ที่ปุ่มลบ (มีตั้งแต่บท 126) = button_to สร้าง <form> ห่อปุ่มไว้ (บท 124) ปุ่มจึงต้องสั่งให้ยืดเต็มกล่องเอง · turbo_confirm = กล่องถามยืนยันก่อนลบ (ของเดิมบท 126)

HTML ที่ได้จริงของ breadcrumb ในหน้า /posts/1 (ผลจาก curl -s localhost:3000/posts/1 ตัดมาช่วงนี้):

  <nav class="breadcrumbs text-sm mb-2" aria-label="breadcrumb">
    <ul>
      <li><a href="/posts">บทความทั้งหมด</a></li>
      <li><a href="/categories/1">อาหารไทย</a></li>
      <li>ต้มยำกุ้งน้ำข้น</li>
    </ul>
  </nav>

ไม่มี › ใน HTML เลย — ลูกศรที่เห็นบนจอมาจาก CSS ของ daisyUI ล้วน ๆ

ไฟล์ app/views/shared/_pagination.html.erb — แทนทั้งไฟล์

<%# locals: (pagy:) -%>
<nav class="mt-8 flex justify-center" aria-label="เปลี่ยนหน้า">
  <div class="join">
    <% if pagy.previous %>
      <%= link_to "← ก่อนหน้า", pagy.page_url(:previous), class: "join-item btn btn-sm" %>
    <% else %>
      <span class="join-item btn btn-sm btn-disabled">← ก่อนหน้า</span>
    <% end %>

    <span class="join-item btn btn-sm pointer-events-none">หน้า <%= pagy.page %> / <%= pagy.last %></span>

    <% if pagy.next %>
      <%= link_to "ถัดไป →", pagy.page_url(:next), class: "join-item btn btn-sm" %>
    <% else %>
      <span class="join-item btn btn-sm btn-disabled">ถัดไป →</span>
    <% end %>
  </div>
</nav>

• logic (if pagy.previous · pagy.page_url) เหมือนบท 126 ทุกบรรทัด · เปลี่ยนแค่คลาส + ห่อด้วย <div class="join">
• join + join-item = ต่อปุ่มหลายอันให้ติดกันเป็นแถบเดียว (มุมโค้งเฉพาะหัวกับท้าย) · flex justify-center = วางแถบไว้กลาง
• btn-disabled = ปุ่มสีจาง กดไม่ได้ (หน้าแรกไม่มี "ก่อนหน้า") · pointer-events-none = ช่อง "หน้า 1 / 3" หน้าตาเหมือนปุ่มแต่ไม่ตอบสนองเมาส์

ไฟล์ฟอร์ม app/views/posts/_form.html.erb — แทนทั้งไฟล์

<%= form_with(model: post, class: "contents") do |form| %>
  <% if post.errors.any? %>
    <div id="error_explanation" role="alert" class="alert alert-error mt-3">
      <div>
        <h2 class="font-bold">บันทึกไม่ได้ มี <%= post.errors.count %> จุดที่ต้องแก้:</h2>

        <ul class="list-disc ml-6">
          <% post.errors.each do |error| %>
            <li><%= error.full_message %></li>
          <% end %>
        </ul>
      </div>
    </div>
  <% end %>

  <div class="my-5">
    <%= form.label :title, "หัวข้อ", class: "block font-medium" %>
    <%= form.text_field :title, class: ["input w-full mt-2", {"input-error": post.errors[:title].any?}] %>
  </div>

  <div class="my-5">
    <%= form.label :description, "เนื้อหา", class: "block font-medium" %>
    <%= form.textarea :description, rows: 4, class: ["textarea w-full mt-2", {"textarea-error": post.errors[:description].any?}] %>
  </div>

  <div class="my-5">
    <%= form.label :category_id, "หมวด", class: "block font-medium" %>
    <%= form.collection_select :category_id, Category.all, :id, :name, { prompt: "เลือกหมวด" }, class: ["select w-full mt-2", {"select-error": post.errors[:category].any?}] %>
  </div>

  <div class="inline">
    <%= form.submit "บันทึก", class: "btn btn-primary w-full sm:w-auto" %>
  </div>
<% end %>

• alert alert-error = กล่องแจ้งเตือนสี "ผิดพลาด" ของธีม · ต้องห่อ h2 กับ ul ด้วย <div> อีกชั้น เพราะ alert ของ daisyUI 5 วางลูก ๆ เรียงข้างกัน ในแนวนอน — ไม่ห่อแล้วหัวข้อกับรายการจะอยู่คนละฝั่ง
• input · textarea · select = ช่องกรอกของ daisyUI (ขอบ มุม สีพื้นตามธีม) · input-error ฯลฯ = ขอบสีแดงของธีม
• class: [ "…", { "input-error": เงื่อนไข } ] = ท่าเดิมของ scaffold: Rails รวมรายการเป็นคลาสเดียว และใส่ input-error เฉพาะเมื่อเงื่อนไขเป็นจริง · ชื่อคลาส "input-error" เขียนเต็มเป็นข้อความในไฟล์ → Tailwind อ่านเจอ ไม่ติดกับดักต่อ string ของบท 128 · เราลบท่อน .none? (ขอบเทา) ทิ้ง เพราะ input มีขอบปกติของธีมอยู่แล้ว
• label …, class: "block font-medium" = ป้ายชื่อช่องขึ้นบรรทัดของตัวเอง ตัวหนาปานกลาง
• ที่เพิ่มใหม่อีกสองจุด: role="alert" บนกล่อง error (บอกโปรแกรมอ่านหน้าจอว่าเป็นข้อความเตือน) · font-bold ที่หัวข้อ h2 (ตัวหนา)
• ที่ไม่ได้แตะ (ของ scaffold เดิม): class: "contents" ของฟอร์ม · <div class="inline"> รอบปุ่มบันทึก · list-disc ml-6 (รายการมีจุดนำหน้า เยื้องเข้า)

ไฟล์ new.html.erb กับ edit.html.erb ของ posts — แทนทั้งไฟล์

<%# app/views/posts/new.html.erb %>
<% content_for :title, "เขียนบทความใหม่" %>

<div class="md:w-2/3 w-full mx-auto">
  <h1 class="font-bold text-4xl">เขียนบทความใหม่</h1>

  <%= render "form", post: @post %>

  <%= link_to "กลับไปหน้ารวม", posts_path, class: "btn btn-ghost w-full sm:w-auto mt-2 sm:mt-0 sm:ml-2" %>
</div>

<%# app/views/posts/edit.html.erb %>
<% content_for :title, "แก้ไขบทความ" %>

<div class="md:w-2/3 w-full mx-auto">
  <h1 class="font-bold text-4xl">แก้ไขบทความ</h1>

  <%= render "form", post: @post %>

  <%= link_to "ดูบทความนี้", @post, class: "btn btn-ghost w-full sm:w-auto mt-2 sm:mt-0 sm:ml-2" %>
  <%= link_to "กลับไปหน้ารวม", posts_path, class: "btn btn-ghost w-full sm:w-auto mt-2 sm:mt-0 sm:ml-2" %>
</div>

เปลี่ยนจากบท 126 แค่สองอย่าง: เพิ่ม mx-auto (จัดกล่องไว้กลางจอเหมือน index/show) · ลิงก์เป็น btn btn-ghost (แทนกล่องเทา bg-gray-100) · ส่วน md:w-2/3 w-full เป็นของเดิม = จอเล็กกว้างเต็ม · จอตั้งแต่ขนาด md ขึ้นไปกว้างสองในสามของจอ · mt-2 sm:mt-0 sm:ml-2 = จอแคบเว้นด้านบน (ปุ่มเรียงลง) · จอกว้างเว้นด้านซ้ายแทน (ปุ่มเรียงข้างกัน)

ขั้น 5 — หน้า categories: ทำแบบเดียวกัน + แปลไทย

หน้า /categories ยังเป็น scaffold ภาษาอังกฤษล้วน · ถ้าไม่แก้ เกณฑ์ "สลับธีมแล้วเปลี่ยนทั้งเว็บ" จะไม่ผ่าน (กดเมนู "หมวด" แล้วเจอปุ่มน้ำเงินตายตัว) · คลาสเกือบทั้งหมดเจอในขั้น 4 แล้ว (ตัวใหม่มีแค่ divide-y อธิบายใต้โค้ดแรก) · พิมพ์ตามได้เลย

app/views/categories/index.html.erb — แทนทั้งไฟล์

<% content_for :title, "หมวดทั้งหมด" %>

<div class="w-full max-w-3xl mx-auto">
  <% if notice.present? %>
    <p class="alert alert-success mb-5" id="notice"><%= notice %></p>
  <% end %>

  <div class="flex justify-between items-center gap-4">
    <h1 class="font-bold text-3xl sm:text-4xl">หมวดทั้งหมด</h1>
    <%= link_to "เพิ่มหมวด", new_category_path, class: "btn btn-primary shrink-0" %>
  </div>

  <div id="categories" class="min-w-full divide-y divide-base-300">
    <% if @categories.any? %>
      <% @categories.each do |category| %>
        <div class="flex flex-col sm:flex-row justify-between items-center pb-5 sm:pb-0">
          <%= render category %>
          <div class="w-full sm:w-auto flex flex-col sm:flex-row gap-2">
            <%= link_to "ดู", category, class: "btn btn-sm" %>
            <%= link_to "แก้ไข", edit_category_path(category), class: "btn btn-sm" %>
            <%= button_to "ลบ", category, method: :delete, class: "btn btn-sm btn-error w-full", data: { turbo_confirm: "ลบหมวดนี้จริงไหม?" } %>
          </div>
        </div>
      <% end %>
    <% else %>
      <p class="text-center text-base-content/60 my-10">ยังไม่มีหมวด</p>
    <% end %>
  </div>
</div>

divide-y divide-base-300 = เส้นคั่นระหว่างแถว ใช้สีเส้นระดับ 300 ของธีม (แทน divide-gray-200) · gap-2 แทน space-x-2 space-y-2 ของ scaffold ที่ทำให้ปุ่มเหลื่อมกันบนมือถือ

app/views/categories/show.html.erb — แทนทั้งไฟล์

<% content_for :title, @category.name %>

<div class="md:w-2/3 w-full mx-auto">
  <% if notice.present? %>
    <p class="alert alert-success mb-5" id="notice"><%= notice %></p>
  <% end %>

  <h1 class="font-bold text-4xl">หมวด: <%= @category.name %></h1>

  <%= render @category %>

  <div class="flex flex-col sm:flex-row gap-2">
    <%= link_to "แก้ไขหมวดนี้", edit_category_path(@category), class: "btn" %>
    <%= link_to "กลับไปหน้าหมวด", categories_path, class: "btn btn-ghost" %>
    <%= button_to "ลบหมวดนี้", @category, method: :delete, class: "btn btn-error w-full", data: { turbo_confirm: "ลบหมวดนี้จริงไหม?" } %>
  </div>
</div>

new.html.erb · edit.html.erb · _form.html.erb · _category.html.erb ของ categories

<%# app/views/categories/new.html.erb %>
<% content_for :title, "เพิ่มหมวด" %>

<div class="md:w-2/3 w-full mx-auto">
  <h1 class="font-bold text-4xl">เพิ่มหมวด</h1>

  <%= render "form", category: @category %>

  <%= link_to "กลับไปหน้าหมวด", categories_path, class: "btn btn-ghost w-full sm:w-auto mt-2 sm:mt-0 sm:ml-2" %>
</div>

<%# app/views/categories/edit.html.erb %>
<% content_for :title, "แก้ไขหมวด" %>

<div class="md:w-2/3 w-full mx-auto">
  <h1 class="font-bold text-4xl">แก้ไขหมวด</h1>

  <%= render "form", category: @category %>

  <%= link_to "ดูหมวดนี้", @category, class: "btn btn-ghost w-full sm:w-auto mt-2 sm:mt-0 sm:ml-2" %>
  <%= link_to "กลับไปหน้าหมวด", categories_path, class: "btn btn-ghost w-full sm:w-auto mt-2 sm:mt-0 sm:ml-2" %>
</div>

<%# app/views/categories/_form.html.erb %>
<%= form_with(model: category, class: "contents") do |form| %>
  <% if category.errors.any? %>
    <div id="error_explanation" role="alert" class="alert alert-error mt-3">
      <div>
        <h2 class="font-bold">บันทึกไม่ได้ มี <%= category.errors.count %> จุดที่ต้องแก้:</h2>

        <ul class="list-disc ml-6">
          <% category.errors.each do |error| %>
            <li><%= error.full_message %></li>
          <% end %>
        </ul>
      </div>
    </div>
  <% end %>

  <div class="my-5">
    <%= form.label :name, "ชื่อหมวด", class: "block font-medium" %>
    <%= form.text_field :name, class: ["input w-full mt-2", {"input-error": category.errors[:name].any?}] %>
  </div>

  <div class="my-5">
    <%= form.label :slug, "slug (ภาษาอังกฤษตัวเล็ก a-z 0-9 และขีด)", class: "block font-medium" %>
    <%= form.text_field :slug, class: ["input w-full mt-2", {"input-error": category.errors[:slug].any?}] %>
  </div>

  <div class="inline">
    <%= form.submit "บันทึก", class: "btn btn-primary w-full sm:w-auto" %>
  </div>
<% end %>

บรรทัดแรกที่บอกชื่อไฟล์ ไม่ต้องพิมพ์ เหมือนเดิม · _category.html.erb แก้แค่ป้ายสองบรรทัด (Name: → ชื่อหมวด: · Slug: → slug:) ส่วนอื่นไม่แตะ:

    <strong class="block font-medium mb-1">ชื่อหมวด:</strong>
…
    <strong class="block font-medium mb-1">slug:</strong>

สุดท้าย ข้อความแจ้งหลังบันทึกใน app/controllers/categories_controller.rb แปลเป็นไทยให้ตรงกับ posts (แก้แค่ข้อความในเครื่องหมายคำพูด 3 จุด):

        format.html { redirect_to @category, notice: "สร้างหมวดแล้ว" }
…
        format.html { redirect_to @category, notice: "บันทึกการแก้ไขแล้ว", status: :see_other }
…
      format.html { redirect_to categories_path, notice: "ลบหมวดแล้ว", status: :see_other }

(เดิมคือ "Category was successfully created." · "…updated." · "…destroyed." · ข้อนี้ไม่แก้ก็ไม่พังอะไร แต่แก้เพื่อให้โค้ดตรงกับบทถัดไป)

ตรวจรับตาม checklist ของสไลด์หน้า 34 — ทีละข้อ

อย่าตรวจด้วย "ดูแล้วน่าจะได้" · ทุกข้อมีวิธีที่วัดได้ · ผมตรวจทุกข้อด้วย Chrome จริงผ่านสคริปต์ (วัดสีทุก element แทนตา) · คุณตรวจเองได้ด้วย DevTools ของ Chrome (กด F12 หรือ Cmd+Option+I บน Mac · แท็บ Console = ช่องพิมพ์ JavaScript สั่งหน้านั้นได้ตรง ๆ)

ข้อ 1 · สลับธีมแล้วเปลี่ยนทั้งเว็บ ไม่ใช่แค่บางส่วน

ตรวจด้วยตาทีละหน้า (posts · show · new · categories) แล้วยืนยันด้วยคำสั่งค้นหาสีตายตัวที่เหลือ:

$ grep -rnE "(bg|text|border|divide)-(gray|blue|red|green)-" app/views
$

ไม่มีผลลัพธ์ = ไม่เหลือสีตายตัวสักบรรทัด (ก่อนเริ่ม Lab คำสั่งเดียวกันได้ 43 บรรทัด) · -E = ใช้รูปแบบค้นหาแบบมี ( | ) ได้ · -rn = ค้นทุกไฟล์ในโฟลเดอร์ บอกเลขบรรทัด

ผลวัดจริงใน Chrome (เครื่องตั้งโหมดสว่าง · กด 🌓 ครั้งเดียว · นับ element ที่สีพื้นหรือสีตัวอักษรไม่เปลี่ยน):

ตรวจเองใน Console: พิมพ์ getComputedStyle(document.body).backgroundColor (= "พื้นของ <body> ตอนนี้สีอะไรจริง ๆ") แล้วกด Enter · ก่อนกด 🌓 ได้ oklch(0.98 0 0) · หลังกดได้ oklch(0.2326 0.014 253.1) (ค่าของผม — ถ้าไฟล์ตรงกันของคุณก็ควรได้เท่านี้)

ข้อ 2 · refresh แล้วธีมที่เลือกยังอยู่

กดให้เป็นมืด แล้วกด refresh · ผลวัดจริงใน Chrome (reload แบบไม่ใช้ของในแคช):

before: dark dark
after reload: dark oklch(0.2326 0.014 253.1) <html data-theme="dark">…

• บรรทัดแรก = ป้าย data-theme กับค่าใน localStorage ก่อน refresh · บรรทัดสอง = หลัง refresh ป้ายยังเป็น dark พื้นยังมืด
• ลำดับที่เกิด: HTML ใหม่มา (ไม่มีป้าย) → Stimulus เจอปุ่มใน navbar → connect() อ่านสมุด → ติดป้ายกลับ
• ตรวจเอง: DevTools แท็บ Application → Local Storage → http://localhost:3000 จะเห็นแถว theme | dark · หรือพิมพ์ใน Console localStorage.getItem("theme")
• กดลิงก์ "หมวด" ใน navbar ก็ยังมืด — ผมวัดแล้วว่าหน้าไม่ได้โหลดใหม่ทั้งหน้า และ <html> ตัวเดิมยังอยู่ (กลไกนี้ชื่อ Turbo Drive — เปลี่ยนเฉพาะ <body> · บท 130)

ข้อ 3 · รัน assets:precompile แล้วสียังอยู่ครบ

สไลด์บอกว่า "ข้อนี้คือข้อที่คนลืมตรวจ" · assets:precompile คือการซ้อมเตรียมไฟล์แบบขึ้นเครื่องจริงบนเครื่องเรา (บท 127) · ถ้าคลาสไหนหลุดจาก CSS ตอนซ้อม ก็จะหลุดบนเครื่องจริงด้วย · ผลจริง:

$ bin/rails assets:precompile
≈ tailwindcss v4.3.3

/*! 🌼 daisyUI 5.7.50 */
Done in 92ms
Warning: You are precompiling assets in development. Rails will not serve any changed assets until you delete public/assets/.manifest.json

บรรทัด Warning: แปลว่า "คุณกำลัง precompile บนเครื่อง development · จากนี้ Rails จะไม่เสิร์ฟไฟล์ที่คุณแก้ใหม่ จนกว่าจะลบ public/assets/.manifest.json" — จำไว้ เดี๋ยวต้องเก็บกวาด ·
ได้ไฟล์ CSS ติดเลขรุ่นใน public/assets/ · ตรวจว่าคลาสหลักที่เราใช้อยู่ในนั้นครบ (ผลจริง):

$ ls public/assets/ | grep tailwind
tailwind-1c1af83f.css
$ grep -o 'navbar\|card-body\|badge-primary\|btn-primary\|breadcrumbs\|join-item' public/assets/tailwind-*.css | sort | uniq -c
   1 badge-primary
  28 breadcrumbs
   1 btn-primary
   8 card-body
   4 join-item
   2 navbar
$ grep -o '\[data-theme=[a-z]*\]' public/assets/tailwind-*.css | sort | uniq -c
   1 [data-theme=dark]
   2 [data-theme=light]

• อ่านคำสั่ง: ls public/assets/ | grep tailwind = ดูรายชื่อไฟล์ในโฟลเดอร์ แล้วกรองเฉพาะชื่อที่มีคำว่า tailwind · \| ในคำสั่ง grep ตัวที่สอง = "หรือ" (หาคำไหนก็ได้ในรายการ)
• ทุกชื่อเจออย่างน้อย 1 ครั้ง = มีกฎ CSS ของคลาสนั้นจริง (ตัวเลขไม่ต้องสนใจ — บางคลาสถูกพูดถึงหลายจุดในไฟล์) · ธีม light และ dark อยู่ครบ
• tailwind-1c1af83f.css = เลขรุ่นจากเนื้อไฟล์ · ไฟล์คุณตรงกับของผมทุกตัวอักษร → เลขควรตรงกัน
• บนเครื่องผมทั้งคำสั่งใช้ราว 1 วินาที (สไลด์บอก 20 วินาที — แอปที่ใหญ่กว่านี้ หรือเครื่องที่รันตรวจอัตโนมัติก่อน deploy ที่เรียกว่า CI จะนานขึ้น)

เสร็จแล้วต้องลบของที่ซ้อมทิ้งทันที:

$ bin/rails assets:clobber
$

ข้อ 4 · ไม่มีไฟล์ใหม่ในโปรเจกต์นอกจาก .erb

ดูไฟล์ใหม่ทั้งหมดก่อน commit (ผลจริง · ?? = ไฟล์ใหม่ที่ git ยังไม่รู้จัก · M = ไฟล์เดิมที่ถูกแก้):

$ git status --short
 M app/assets/tailwind/application.css
 M app/controllers/categories_controller.rb
 M app/views/categories/_category.html.erb
 M app/views/categories/_form.html.erb
 M app/views/categories/edit.html.erb
 M app/views/categories/index.html.erb
 M app/views/categories/new.html.erb
 M app/views/categories/show.html.erb
 M app/views/layouts/application.html.erb
 M app/views/posts/_form.html.erb
 M app/views/posts/_post.html.erb
 M app/views/posts/edit.html.erb
 M app/views/posts/index.html.erb
 M app/views/posts/new.html.erb
 M app/views/posts/show.html.erb
 M app/views/shared/_pagination.html.erb
?? app/javascript/controllers/theme_controller.js
?? app/views/shared/_navbar.html.erb
?? prompts/02-styling.md

ไฟล์ใหม่ 3 ไฟล์ · มี .js กับ .md ด้วย → ตามตัวอักษร ข้อนี้ไม่ผ่าน · แต่ลองอ่านเจตนา: ข้อนี้อยู่คู่กับข้อ "ห้าม" ที่บอกว่าห้ามสร้าง tailwind.config.js · ห้าม npm install / package.json · ห้ามไฟล์ .css ใหม่ — มันตั้งใจจับ AI ที่ไปสร้างไฟล์ตั้งค่าแบบ Tailwind v3 หรือ Node ตรวจตรงนั้นได้ (ผลจริง):

$ ls tailwind.config.js package.json node_modules
ls: node_modules: No such file or directory
ls: package.json: No such file or directory
ls: tailwind.config.js: No such file or directory

ไม่มีสักไฟล์ = ผ่านตามเจตนา · ส่วน theme_controller.js จำเป็น เพราะข้อกำหนดของใบสั่งเดียวกันให้ "เปลี่ยน data-theme + จำใน localStorage" ซึ่งต้องใช้ JavaScript และห้ามเขียน <script> ใน view → ที่เดียวที่ถูกคือ Stimulus controller (branch ของอาจารย์ก็มีไฟล์นี้) · .md คือไฟล์ prompt ที่สไลด์ให้เก็บเอง · บทเรียนจากข้อนี้: checklist เขียนโดยคน ผิดได้ — ถ้าข้อหนึ่งขัดกับอีกข้อ ให้ถามว่า "ข้อนี้ตั้งใจกันอะไร" แล้วตรวจตรงนั้น

ข้อ 5 · ย่อหน้าต่างเหลือความกว้างมือถือแล้วยังอ่านได้

DevTools → กดไอคอนรูปมือถือ (Cmd+Shift+M) → ตั้งความกว้าง 375 · แล้วพิมพ์ใน Console document.documentElement.scrollWidth = ความกว้างจริงของเนื้อหาทั้งหน้า · ถ้าได้มากกว่า 375 แปลว่ามีของล้นจอ ต้องเลื่อนซ้ายขวา

ผลวัดจริง 8 หน้า × 2 ธีม (ตัดมาบางหน้า · ทุกหน้าได้เท่ากัน):

dark /posts 375/375
dark /posts?page=3 375/375
dark /posts/1 375/375
dark /categories 375/375
light /posts/new 375/375
light /categories/new 375/375

ตัวเลขซ้าย = scrollWidth · ขวา = ความกว้างจอ · เท่ากันทุกหน้า = ไม่มีอะไรล้น · ที่ 375px แถบ navbar ยังอยู่บรรทัดเดียว (เพราะใช้ btn-sm และชื่อเว็บ text-lg) · ปุ่มในหน้า show เรียงลงเต็มกว้าง (flex-col · ขึ้น sm:flex-row เมื่อจอกว้าง)

ใบสั่งงาน AI ของ Lab นี้: prompts/02-styling.md

ตอนนี้คุณทำเองครบแล้ว · เก็บใบสั่งของสไลด์หน้า 34 ไว้ในโฟลเดอร์ prompts/ (ข้าง ๆ 01-views.md ของบท 126) · ครั้งหน้าที่ต้องทำงานแบบนี้กับโปรเจกต์อื่น ใช้ไฟล์นี้สั่ง AI แล้วตรวจด้วยวิธีเดียวกับหัวข้อข้างบน · สร้างไฟล์ใหม่ prompts/02-styling.md:

## เป้าหมาย

ทำให้หน้า index กับ show ดูเป็นเว็บจริง
มี navbar และสลับธีมสว่าง/มืดได้

## ข้อกำหนด

- ใช้ component ของ daisyUI (card, navbar, badge)
  ไม่เขียน CSS เอง ไม่สร้างไฟล์ .css ใหม่
- ใช้ semantic color (primary, base-100)
  ไม่ใช่ bg-blue-600
- navbar เป็น partial shared/_navbar.html.erb
- ปุ่มสลับธีม เปลี่ยน data-theme บน `<html>`
- จำธีมที่เลือกไว้ใน localStorage
- responsive ใช้ได้บนมือถือ

## ห้าม

- สร้าง tailwind.config.js (เราใช้ v4)
- ต่อ string เป็นชื่อคลาส Tailwind
- แนะนำให้ npm install หรือเพิ่ม package.json
- เขียน `<style>` ใน view

## เกณฑ์ตรวจรับ

- [ ] สลับธีมแล้วเปลี่ยนทั้งเว็บ ไม่ใช่แค่บางส่วน
- [ ] refresh แล้วธีมที่เลือกยังอยู่
- [ ] รัน assets:precompile แล้วสียังอยู่ครบ
- [ ] ไม่มีไฟล์ใหม่ในโปรเจคนอกจาก .erb
- [ ] ย่อหน้าต่างเหลือความกว้างมือถือแล้วยังอ่านได้

เนื้อหาตรงกับสไลด์ทุกบรรทัด และเป็นไฟล์เดียวกับใน branch day3-b-done ของอาจารย์ทุกตัวอักษร · ต่างจากภาพสไลด์แค่ backtick ที่ครอบ `<html>` กับ `<style>` (บนสไลด์ไม่เห็น แต่ในไฟล์ของอาจารย์มี) = วิธีเขียนโค้ดในไฟล์ Markdown

วิธีใช้ครั้งหน้า (แบบเดียวกับบท 121): ใน Claude Code พิมพ์ @prompts/02-styling.md ทำตามไฟล์นี้ · พอ AI บอกว่าเสร็จ อย่าเชื่อทันที — ไล่ตรวจ 5 ข้อด้วยวิธีในหัวข้อตรวจรับข้างบน แล้วเทียบกับตาราง "AI พลาดประจำ" ข้างล่าง

ที่ AI พลาดประจำ (สไลด์หน้า 34) — อาการ และตรวจยังไง

เก็บเข้าโปรเจกต์

$ git add .
$ git commit -m "styling: daisyUI + navbar + ปุ่มสลับธีม"
[my-day3 7ba4b9f] styling: daisyUI + navbar + ปุ่มสลับธีม
 19 files changed, 186 insertions(+), 108 deletions(-)
 create mode 100644 app/javascript/controllers/theme_controller.js
 create mode 100644 app/views/shared/_navbar.html.erb
 create mode 100644 prompts/02-styling.md

เลข commit (7ba4b9f) ของคุณจะต่าง · 19 files changed, 186 insertions(+), 108 deletions(-) ควรตรงกัน ถ้าพิมพ์ครบทุกบรรทัด · ผมเทียบไฟล์ทั้งโปรเจกต์หลัง commit นี้กับโค้ดที่บท 130 ใช้แล้ว ตรงกันทุกไฟล์ · create mode 100644 = ไฟล์ใหม่ 3 ไฟล์ที่ตรงกับข้อ 4 ข้างบน

$ git diff
…
 @plugin "./daisyui.mjs" {
-  themes: light --default, dark --prefersdark;
+  themes: light --default, dark --prefersdark, cupcake;
 }
…
$ bin/rails tailwindcss:build
≈ tailwindcss v4.3.3

/*! 🌼 daisyUI 5.7.50 */
Done in 93ms
$ grep -o '\[data-theme=[a-z]*\]' app/assets/builds/tailwind.css | sort | uniq -c
   1 [data-theme=cupcake]
   1 [data-theme=dark]
   2 [data-theme=light]

reload   {"theme":"cupcake","saved":"cupcake","body":"oklch(0.93982 0.007 61.449)","primary":"oklch(0.85 0.138 181.071)"}
click1   {"theme":"dark","saved":"dark","body":"oklch(0.2326 0.014 253.1)","primary":"oklch(0.58 0.233 277.117)"}
click2   {"theme":"light","saved":"light","body":"oklch(0.98 0 0)","primary":"oklch(0.45 0.24 277.023)"}
synthwave(not enabled) {"theme":"synthwave","saved":"synthwave","body":"oklch(0.98 0 0)","primary":"oklch(0.45 0.24 277.023)"}

Quiz

ถามกลับได้เลย

ถ้าสลับธีมแล้วมีบางส่วนค้าง หรือ AI แต่งหน้าให้แล้วคุณไม่แน่ใจว่าผ่านเกณฑ์ไหม — เอาไปถาม senior หรือ AI ได้เลย · ส่งไปสามอย่าง: ไฟล์ view ที่สงสัย · ผลของ grep -rnE "(bg|text|border|divide)-(gray|blue|red|green)-" app/views · และ git status --short · ถ้าปุ่ม 🌓 ไม่ทำงาน แนบข้อความสีแดงใน DevTools Console มาด้วย

ถ้าเปิดสไลด์ดูประกอบ

อ้างอิง

• daisyUI — Themes — อ่านหัวข้อ Enable a built-in theme ไวยากรณ์ themes: … --default, … --prefersdark ใน @plugin ตรงกับขั้น 1 · แล้วเลื่อนไป List of themes ดูชื่อธีมที่ใช้ในภารกิจได้
• daisyUI — Colors — อ่านตารางรายชื่อสี (primary · base-100 · base-content · error ฯลฯ) และย่อหน้าที่อธิบายว่าทำไมควรใช้ชื่อสีตามหน้าที่แทนชื่อสีของ Tailwind
• daisyUI — Card · Navbar · Breadcrumbs · Join — ดูตาราง class name ด้านบนของแต่ละหน้า (card-body · card-title · join-item) ตรงกับคลาสที่ใช้ในขั้น 2–4
• Stimulus Handbook — Hello, Stimulus — อ่านทั้งหน้า (สั้น) ตัวอย่างแรกที่ผูก data-controller กับ data-action แบบเดียวกับปุ่ม 🌓 · แล้วดู Actions — Event Shorthand ตารางที่บอกว่า <button> ใช้ click เป็นค่าตั้งต้น
• Stimulus Reference — Lifecycle Callbacks — อ่านตารางแรก ว่า connect() ถูกเรียกเมื่อไหร่ (และทำไมรันได้หลายครั้ง)
• MDN — Window: localStorage · HTMLElement: dataset · prefers-color-scheme — อ่านส่วน Description กับ Examples ของแต่ละหน้า ครบทุกคำสั่ง JavaScript ที่ใช้ใน theme_controller.js
• Rails Guides — The Asset Pipeline — อ่านหัวข้อ 3.3.2 Precompiling Assets เรื่อง precompile และการลบของเก่าด้วย assets:clobber (ตรวจรับข้อ 3)