Denetimler

§1Beş kapı, beş katman

§2check-content: kaynak katmanı

Sayfaya dönüşecek her md/mdx dosyasını sitenin kullandığı lehçenin birebir aynısıyla derler — sözdizimi hataları da sessiz bozulmalar da (eşleşemeyen vurgu imleri, MDX değerlendirmesinin yuttuğu süslü ayraçlar, satır kaydırmadan doğan liste imleri, tek satırlık $$, KaTeX’in çizemediği formüller — hepsi bir arada sayfasının sonundaki listenin aynısı) CI’ı kırmızıya çevirir.

Bu betiğin neden motordan gelmek zorunda olduğu: eklenti takımı sitenizkinden farklı bir denetçi, denetçisizlikten beterdir — matematik eklentisi eksik olan, formül ayraçlarını JSX ifadesi sanır; GFM’siz olan, tabloları elini kolunu sallayarak geçirir. Lehçe motorda bir kez yazılır; site çizimi, CMS kayıt doğrulaması ve bu betik hep aynı lehçeyi tüketir.

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

Derlemenin ötesinde, frontmatter’daki iki sessiz kayıp sınıfını da yakalar: bir değerin içindeki tırnaksız # (YAML onu yorum sayar ve gerisini sessizce keser) ve hiç ayrıştırılamayan YAML — ikisini de satır numarasıyla raporlar.

§3check-wikilinks: bağlantı grafı

Ölü [[wikilink]]’ler derlemeyi bilerek düşürmez — bir bahçe, henüz büyütmediği notlara bağlantı verebilmelidir. Ama bağlantı çürümesinin yeri yine de CI’dır; motor bu yüzden her wikilink’i kitaplığın kendi ayrıştırıcısı ve çözüm kurallarıyla (takma ad, marka, başlık, yerel ayar aynaları) çözen ve eksikleri, belirsizleri, şüpheli çapaları raporlayan bir lint gönderir. --strict, ölü bağlantıları başarısız bir çıkışa çevirir — bu deponun CI’ı onu tam böyle çalıştırır:

node scripts/check-links.mjs

§4check-dist: çıktı katmanı

Derlenmiş dist/ içinde, okurun tıklayabileceği her iç referans gerçekten var olmalıdır. Yeşil derlemenin altındaki sessiz boşlukları yakalar:

• var olmayan dosyaları gösteren iç bağlantılar/varlıklar (bir rota düzenlemesinden sonra düzinelerle beliren tür);
• var olmayan id’leri gösteren sayfa içi çapalar;
• yollarda yinelenen yerel ayar dilimleri (/en/en/ — i18n yedeklerinin, zaten önekli rotaların üstüne bir önek daha bindirmesinin klasik sonucu);
• <a> içine yuvalanmış <a> (HTML ayrıştırıcısı dıştakini erken kapatır ve düğmeler kartlarının dışına dökülür);
• KaTeX hata kalıntısı (derleme yeşil kalırken formül sayfada kırmızı metindir).

Bu demo onu postbuild’e bağlar: yeşil bir npm run build, çıktı denetiminin de geçtiği anlamına gelir.

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

§5Görüntüleme katmanı sondası

Kaynak da çıktı da doğruyken sayfa yine bozuk olabilir — klasik örnek, hiçbir stil kuralının eşleşmediği açılış kartlarının tek satır çıplak metne yığılmasıdır: bağlantı ve çapa denetimleri yeşil kalır, çünkü çizilmiş bir sayfaya hiç bakmazlar. ui_probe, dist içindeki her sayfayı dört görüntü genişliğinde (1440/1024/768/430) gerçek bir tarayıcıyla dolaşır ve ölçer: sayfanın yatay taşması, kaydırma kutusu olmadan kabından geniş duran ögeler, bir SVG’nin kendi kutusunun dışına çizdiği yazılar, bir FlowDiagram’da ne telde ne lejantta yer alan tel etiketleri, bir kutunun, başlığın ya da birbirinin üstüne düşen etiketler ve numaralar, bağlamadıkları bir kutunun ya da bir başlığın içinden geçen teller, hiçbir stil kuralının giydirmediği sınıflar, atlanmış başlık düzeyleri, yinelenen id’ler, alt özniteliksiz görseller, boşluğu gösteren sayfa içi çapalar ve aria-controls değerleri. Yalnızca bir makinenin kanıtlayabildiğini raporlar — estetik yargı yürütmez.

npm run build
node ../scripts/ui_probe.mjs dist   # dist’i kendisi servis eder; canlı bir sunucuyu yoklamak için baseUrl geçin

Belgenin tamamını inceler — chrome, kenar çubuğu ve diyaloglar dahil. Yeşil demek, raporun son satırının SAMPLES WITH FINDINGS: 0 demesidir (bir örneklem, bir rotanın bir genişlikteki hâlidir).

§6Kontrast sondası

Token’lar AA iddiasındadır; iddia da lafla değil ölçümle sınanır. contrast_probe, dist içindeki her sayfayı gerçek bir tarayıcıda yükler — açık ve koyu tema, masaüstü ve telefon genişliği — ve varsayılan durumda çizilen her metin parçasını ölçer: HTML metni, SVG metni ve ::before / ::after üretilmiş metinleri; her <dialog data-probe-open> katmanı temsilî bir sayfada açılarak yoklanır (orada bulunan bir arama kutusuna sorgu da yazılır) — bu im, sitenin "diyalog yazıldığı hâliyle tamamdır" beyanıdır. Zemin bir stil sayfasından okunmaz: sayfa, bütün glifler saydamlaştırılarak çizilir, ekran görüntüsü alınır ve her parçanın altındaki piksel onun zeminidir — gradyanlar, color-mix() tonları, yarı saydam katmanlar ve gece paleti, çizildikleri hâlleriyle ölçülür. Bir parçanın ön rengi, ögesinin ve atalarının birikmiş opacity değerini taşır; soluklaştırılmış metin, okurun gerçekten gördüğü güçte ölçülür. Üzerine gelme ve odak durumları yoklanmaz, gözle gözden geçirilir. Küçük metin 4.5:1’e, büyük metin (24px, ya da 18.66px kalın) 3:1’e tutulur; rengi ayrıştırılamayan ya da zemini örneklenemeyen bir parça bulgu sayılır. Rapor, çıtanın altında kalan her parça için sayfayı, temayı, genişliği, seçiciyi, iki rengi ve oranı adıyla verir:

node ../scripts/contrast_probe.mjs dist   # PROBE_THEMES / PROBE_WIDTHS matrisi daraltır