ชุดการตรวจสอบ

§1ห้าด่าน ห้าชั้น

§2check-content: ชั้นซอร์ส

คอมไพล์ไฟล์ md/mdx ทุกไฟล์ที่จะกลายเป็นหน้าเว็บ ด้วยไวยากรณ์เฉพาะชุดเดียวกันเป๊ะกับที่ไซต์ใช้ — ข้อผิดพลาดทางไวยากรณ์และการบิดรูปเงียบ ๆ (เครื่องหมายเน้นที่จับคู่ไม่ได้ วงเล็บปีกกาที่ถูก MDX กลืน เครื่องหมายรายการที่เกิดจากการตัดบรรทัด $$ บรรทัดเดียว สูตรที่ KaTeX เรนเดอร์ไม่ได้ — ชุดเดียวกับที่หน้ารวมทุกองค์ประกอบปิดท้ายไว้) ทั้งหมดจะทำให้ CI แดง

ทำไมสคริปต์นี้ต้องมาจากเอนจิน: ตัวตรวจที่ชุดปลั๊กอินไม่ตรงกับของไซต์ แย่ยิ่งกว่าไม่มีตัวตรวจ — ตัวที่ขาดปลั๊กอินคณิตศาสตร์อ่านวงเล็บปีกกาในสูตรผิดเป็นนิพจน์ JSX ตัวที่ไม่มี GFM ปล่อยตารางผ่านหน้าตาเฉย ไวยากรณ์เขียนครั้งเดียวในเอนจิน แล้วการเรนเดอร์ของไซต์ การตรวจตอนเซฟของ CMS และสคริปต์นี้ ใช้ชุดเดียวกันนั้นตลอดไป

node <engine>/scripts/check-content.mjs . --glob '**/index.{md,mdx}' --math

นอกจากการคอมไพล์ มันยังดักการสูญหายเงียบ ๆ ใน frontmatter อีกสองชนิด: # ที่ไม่ได้ครอบเครื่องหมายคำพูดในค่า (YAML อ่านเป็นคอมเมนต์แล้วตัดส่วนที่เหลือทิ้งเงียบ ๆ) กับ YAML ที่แยกวิเคราะห์ไม่ได้เลย โดยรายงานพร้อมเลขบรรทัด

§3check-wikilinks: กราฟลิงก์

[[วิกิลิงก์]] เสียจงใจไม่ทำให้บิลด์ล้ม — สวนต้องได้รับอนุญาตให้ลิงก์ไปหาบันทึกที่ยังไม่ได้ปลูก แต่ลิงก์ผุ ๆ ก็ยังควรถูกจับใน CI เอนจินจึงส่ง lint ที่แก้ปลายทางวิกิลิงก์ทุกตัวด้วย parser และกติกาการแก้ปลายทางของไลบรารีเอง (นามแฝง brand ชื่อเรื่อง มิเรอร์ข้ามภาษา) แล้วรายงานลิงก์ที่หาย ลิงก์ที่กำกวม และ anchor ที่น่าสงสัย --strict เปลี่ยนลิงก์เสียให้เป็น exit ล้มเหลว — CI ของ repo นี้รันแบบนั้น:

node scripts/check-links.mjs

§4check-dist: ชั้นเอาต์พุต

ใน dist/ ที่บิลด์เสร็จแล้ว ทุกลิงก์ภายในที่ผู้อ่านคลิกได้ต้องมีปลายทางอยู่จริง ด่านนี้ดักช่องโหว่เงียบ ๆ ใต้บิลด์สีเขียว:

• ลิงก์/แอสเซตภายในที่ชี้ไปหาไฟล์ที่ไม่มีอยู่ (ชนิดที่โผล่มาเป็นโหลหลังการจัดเส้นทางใหม่)
• anchor ในหน้าที่ชี้ไปหา id ที่ไม่มีอยู่
• เซกเมนต์ภาษาซ้ำซ้อนในพาธ (/en/en/ — ผลคลาสสิกของ i18n fallback ที่ซ้อนพรีฟิกซ์ทับเส้นทางที่มีพรีฟิกซ์อยู่แล้ว)
• <a> ซ้อนใน <a> (parser ของ HTML จะปิดตัวนอกก่อนเวลา แล้วปุ่มก็หล่นออกนอกการ์ด)
• คราบข้อผิดพลาดของ KaTeX (สูตรกลายเป็นข้อความแดงบนหน้า ขณะที่บิลด์ยังเขียวอยู่)

เดโมนี้ต่อมันเข้ากับ postbuild: npm run build ที่เขียว หมายความว่าการตรวจเอาต์พุตผ่านแล้วด้วย

node vendor/astro-inkbrush/scripts/check-dist.mjs dist --base ${DEMO_BASE:-/}

§5ตัววัดชั้นเรนเดอร์

ซอร์สกับเอาต์พุตถูกทั้งคู่ได้ทั้งที่หน้ายังพังอยู่ — เคสคลาสสิกคือการ์ดหน้าแรกที่ไม่มีกฎสไตล์ชีตข้อไหนจับคู่ เรนเดอร์ออกมาเป็นข้อความเปล่ายัดกันบรรทัดเดียว: การตรวจลิงก์กับ anchor ยังเขียวอยู่เพราะพวกมันไม่เคยมองหน้าที่เรนเดอร์แล้วเลย ui_probe ขับเบราว์เซอร์จริงไล่ทุกหน้าใน dist ที่สี่ความกว้างจอ (1440/1024/768/430) และวัด: การล้นแนวนอนของหน้า อีเลเมนต์ที่กว้างกว่ากล่องบรรจุโดยไม่มีกล่องเลื่อนให้อาศัย คลาสที่ไม่มีกฎสไตล์ชีตข้อไหนจัดสไตล์ ระดับหัวข้อที่กระโดดข้าม id ซ้ำ รูปที่ไม่มีแอตทริบิวต์ alt anchor ในหน้าและ aria-controls ที่ชี้ไปหาความว่างเปล่า มันรายงานเฉพาะสิ่งที่เครื่องพิสูจน์ได้ — ไม่มีการตัดสินความสวยงาม

npm run build
node ../scripts/ui_probe.mjs dist   # เสิร์ฟ dist ให้เอง ส่ง baseUrl หากจะวัดเซิร์ฟเวอร์ที่รันอยู่

มันตรวจทั้งเอกสาร — รวม chrome แถบข้าง และไดอะล็อกด้วย เขียวหมายถึงบรรทัดสุดท้ายของรายงานอ่านว่า SAMPLES WITH FINDINGS: 0 (หนึ่ง sample คือหนึ่งเส้นทางที่หนึ่งความกว้าง)

§6ตัววัดคอนทราสต์

โทเคนอ้างว่าผ่าน AA ดังนั้นคำอ้างนี้จึงถูกวัดจริง ไม่ใช่แค่ประกาศ contrast_probe โหลดทุกหน้าของ dist ในเบราว์เซอร์จริง — ธีมสว่างและมืด ความกว้างเดสก์ท็อปและโทรศัพท์ — แล้ววัดข้อความทุกช่วงที่เรนเดอร์ในสถานะเริ่มต้น: ข้อความ HTML ข้อความ SVG และข้อความที่ถูกสร้างโดย ::before / ::after โดยโอเวอร์เลย์ <dialog data-probe-open> ทุกตัวถูกเปิดวัดด้วย (และช่องค้นหาที่พบในนั้นถูกพิมพ์คำค้นใส่จริง) บนหน้าตัวแทนหนึ่งหน้า — เครื่องหมายนี้คือคำประกาศของไซต์ว่าไดอะล็อกเขียนเสร็จสมบูรณ์แล้ว พื้นหลังไม่ได้อ่านจากสไตล์ชีต: หน้าถูกเรนเดอร์โดยทำให้อักษรทุกตัวโปร่งใส ถ่ายภาพหน้าจอ แล้วพิกเซลใต้แต่ละช่วงข้อความคือพื้นของมัน เกรเดียนต์ สีผสมด้วย color-mix() เลเยอร์กึ่งโปร่ง และจานสีกลางคืน จึงถูกวัดตามที่เรนเดอร์จริงทั้งหมด สีตัวอักษรของแต่ละช่วงพกค่า opacity สะสมของอีเลเมนต์และบรรพบุรุษของมัน ข้อความที่ถูกหรี่จึงถูกวัดที่ความเข้มที่ผู้อ่านเห็นจริง สถานะ hover และ focus ใช้การรีวิวด้วยตา ไม่ใช่การวัด ตัวอักษรเล็กถูกตรึงที่ 4.5:1 ตัวอักษรใหญ่ (24px หรือ 18.66px ตัวหนา) ที่ 3:1 ช่วงข้อความที่แยกวิเคราะห์สีไม่ได้หรือเก็บตัวอย่างพื้นไม่ได้ นับเป็นข้อค้นพบด้วย รายงานระบุหน้า ธีม ความกว้าง ตัวเลือก สีทั้งสอง และอัตราส่วนของทุกช่วงที่ต่ำกว่าเกณฑ์:

node ../scripts/contrast_probe.mjs dist   # PROBE_THEMES / PROBE_WIDTHS ใช้จำกัดชุดการวัด