§3.1DemoMount — canlı

İş bölümü, paketin her zamanki ayrımıdır: bağlama işaretlemesi (sahne, kontrol yuvası, altyazı yuvası) paketle gelir; demo modülü ve yükleyicisi sitenindir. Bu site yükleyicisini src/lib/demo-loader.ts içinde tutar ve layout’tan bir kez mountAllDemos() çağırır; çağrı her sayfada çalışır, ama bir demo modülü parçası yalnızca [data-demo] bağlama noktası taşıyan bir sayfa için indirilir.

Canvas’ı üzerinde işaretçi girdisi alan bir demo interactive geçer — sahne o zaman dokunma hareketlerini sahiplenir ve bir nişangâh gösterir. Aşağıdaki demo edilgendir (yalnızca çizer); bayrağı kapalı bırakır, canvas üzerinde kaydırma sayfayı kaydırmaya devam eder. İki kaynaklı dalga girişimini sayfanın kendi mürekkep token’ıyla çizer, dolayısıyla temayı izler:

Demo · İki kaynaklı dalga girişimi

Demo · İki kaynaklı dalga girişimi

İki nokta kaynak dairesel dalgalar yayar; tepeler tepelerle buluştuğu yerde mürekkep birikir, tepeler çukurlarla buluştuğu yerde kâğıt görünür. Temayı değiştirin — demo kendini canlı token’lardan yeniden mürekkepler.

Modül sözleşmesi tek bir varsayılan export’tur: temizleme fonksiyonu döndüren mount(ctx); yükleyici, waves/interference gibi modül kimliklerini sitenin gönlünce çözer (burada import.meta.glob).

§3.2Sayfa donatıları

Kalan bileşenler bir notu doldurmaz, çerçeveler:

• Hero bir notu açar: kicker, vitrin başlığı, tam Markdown işlem hattından geçen bir giriş paragrafı, bir üstveri satırı ve kenar çubuğuna numarasız bir "giriş" satırı ekleyen isteğe bağlı tocLabel. Notun frontmatter’daki title değeri, <title> ve kartlar için kısa ve kurallı olan kalır; hero’nunki uzun olabilir.
• PartHero bir hub’ın bölümünü açar — bu sayfanın kendi başı. Kicker’ı asla elle yazılmaz: rota, bölümün "III. Kısım · …" etiketini props.partLabel olarak içeri geçirir.
• Part, uzun tek sayfalık bir notu kısımlara böler; numaralandırma ön ayarı bunu kenar çubuğundaki "II. Kısım · Temeller" tarzı grup satırlarına çevirir. Hepsi bir arada böyle bölünmüştür.
• HubCard ile .hub-grid bir hub’ın açılış kartlarıdır; .path onun okuma rotası kutusudur — ikisi de bu galerinin genel bakışında.
• LocalToc sayfa içi bir atlama listesi çizer; iki numaralandırma ön ayarının ürettiği her iki ToC biçimini de kabul eder ve ayarlanabilir bir alt sınırın altında kendini gizler. Aşağıda, bu bölümün kendi ToC’siyle, canlı.
• SidebarMemory, kayan bir kenar çubuğunu sayfa geçişleri arasında okurun bıraktığı yerde tutar ve geçerli öge görünümden çıkacaksa onu ortalar (varsayılan olarak [aria-current="page"]). Kenar çubuğunun kaydırma kutusunun içine, gezinme işaretlemesinin ardına koyun; ilk boyamadan önce çalışır, kenar çubuğu asla tepede parlamaz. Demonun kendi kenar çubuğu onu taşır.
• LineageSvg, sözcük içermeyen bir SVG'yi — bir soy ağacı, bir sınıflandırma — kart olarak çerçeveler; sözcük içeren bir şema aşağıdaki FlowDiagramdır.
• PageFooter, notun dibindeki küçük punto satırıdır — buradaki her notun altındaki satır.
• Göz atma parçaları wiki bölümünde yaşar; galerinin Markdown tarafı ise hepsi bir arada.

§3.3LocalToc ve FlowDiagram, canlı

LocalToc, bu sayfanın derleme zamanı ToC’siyle beslenmiş hâlde — kenar çubuğunun tükettiği verinin aynısı, nota props.toc olarak verilir:

Aynı şekil FlowDiagram olarak — kutular sözcüklerine göre boyutlanan HTML'dir, oklar yerleşimden sonra ölçülür, dolayısıyla hiçbir yazı tipinde hiçbir şey kutusundan taşmaz:

tokens.css

base.cssokuma sütunu

browse.cssgezinme rafı

componentsikisini de kullanır

§3.4FlowDiagram — sözcüklerine göre boyutlanan kutular

Sözcük taşıyan bir şema FlowDiagramdır (ya da bir mermaid bloğu). Elle konumlandırılmış <text> içeren bir <svg> tek bir yazı tipine göre çizilir ve daha geniş olanda bozulur — her site kendi yazı tipiyle çizer; LineageSvg, bir yazı tipinin biçimini bozamayacağı, metinsiz SVG içindir. Tanım veridir: cols, nodes (col / row / span, tone, lines, tag, kesik çizgili not için ghost, yollar için mono), edges (label, dashed, kopuk bağlantı için off), isteğe bağlı lanes ve heads:

Yazar

İnceleme

Derleme

Yazbir not ya da bir bileşen

PR açbir dal

İnceleonayla ya da sor

Derle ve dağıtbirleştirmede

heads içindeki bir giriş, altındaki satırların başlığıdır; yani gruplara ayrılmış bir diyagram, bir başlık satırı ve altında grubun kutularıdır. Teller bir başlığın yazısının etrafından, bir kutunun etrafından dolaştıkları gibi dolaşır. Kutular arasında yol bulamayan bir tel, diyagramın kenar payından geçer — kutuların iki yanında, çerçevenin iç boşluğundaki şerit — ve tel katmanı bu payı da kapsar; böylece tel ve numarası şeklin içinde kalır:

Planlaneyin değişeceği

Kur

Ölçreferansa karşı

Modelin aldığı

Modelin bundan hesapladığı

Fotoğraflarbirkaç görünüm

Kameralarpozlar ve mercekler

Görünüm başına öznitelikler

Görünümleri birleştir

Kapalı yüzey

Her kutu en az on harf genişliğindedir ve her sütun kutularındaki en uzun kelime kadar geniştir, bu yüzden hiçbir kelime bölünmez; snake_case bir ad alt çizgiden sonra satır atlayabilir. Sayfanın sütunu hepsine fazla dar geldiğinde, örneğin bir telefonda, diyagram kendi çerçevesinin içinde yana kayar; başlık ve açıklama yerinde kalır. Diyagram yazıldığı yapıyı korur.

Bir kutudan etiketli birkaç tel çıktığında bazı etiketler kutulardan uzakta yer bulamaz ve numaraya dönüşür. Numara bir etiket gibi yerleştirilir: asla bir kutunun, başlığın, etiketin ya da başka bir numaranın üstüne gelmez. Telde boş yer varsa telin üstünde durur, yoksa telin yanında durur ve tele kısa bir çizgiyle bağlanır:

Işın şeride girer

Bu kesimi yürüM hücrelik bütçe

Bir düzey kaba yenidenaralık isabeti hâlâ içerir

Bütçesiz yürüyalnızca en kaba düzeyde

Aralığı verilk isabeti içerir

Sonraki geçişe geçkalmadı: ışın ıskalar

§3.5Bileşensiz donatılar

Birkaç parça, base.css içinde düz sınıf olarak yaşar — kendi layout’undan çizen ya da düz yazının içine HTML olarak yazan siteler için: