§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, elle çizilmiş bir SVG’yi (bir yöntem soyağacı, bir taksonomi ağacı) kart olarak çerçeveler — bir örneği aşağıda.
• 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 LineageSvg, 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:

Ve LineageSvg, elle yazılmış bir diyagramın çevresinde — baştan sona anlamsal token’larla mürekkeplendiği için iki temada da oturur:

§3.4Bileş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: