§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

§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: