§3.1DemoMount — langsung

Pembagian kerjanya khas paket ini: markup tambatannya (panggung, slot kontrol, slot keterangan) dikirim di paket; modul demo dan pemuatnya milik situs. Situs ini menyimpan pemuatnya di src/lib/demo-loader.ts dan memanggil mountAllDemos() sekali dari layout; panggilan itu jalan di setiap halaman, tetapi chunk modul demo hanya diambil untuk halaman yang membawa tambatan [data-demo].

Demo yang menerima masukan penunjuk di kanvasnya mengoper interactive — panggungnya lantas mengklaim gestur sentuh dan menampilkan bidikan silang. Yang satu ini pasif (hanya merender), jadi ia membiarkan bendera itu mati dan usapan di atas kanvas tetap menggulir halaman. Ia menggambar interferensi gelombang dua sumber dengan token tinta milik halaman ini sendiri, sehingga ikut tema:

Demo · Interferensi gelombang dua sumber

Demo · Interferensi gelombang dua sumber

Dua sumber titik memancarkan gelombang melingkar; di tempat puncak bertemu puncak, tintanya menggenang, di tempat puncak bertemu lembah, kertasnya tembus pandang. Ganti temanya — demo ini menintai ulang dirinya dari token yang hidup.

Kontrak modulnya satu ekspor default, mount(ctx), yang mengembalikan fungsi pembersih; cara meresolusi id modul seperti waves/interference terserah situs sepenuhnya (import.meta.glob di sini).

§3.2Perabot halaman

Komponen-komponen selebihnya membingkai catatan, bukan mengisinya:

• Hero membuka sebuah catatan: kicker, judul display, lede yang melewati pipeline Markdown penuh, satu baris meta, dan tocLabel opsional yang menambahkan baris "pembuka" tak bernomor ke bilah sisi. title di frontmatter catatan tetap nama kanonis pendek untuk <title> dan kartu; judul hero boleh panjang.
• PartHero membuka satu bab dari sebuah hub — kepala halaman ini sendiri. Kicker-nya tak pernah diketik: rute mengoper label "Bagian III · …" milik bab itu sebagai props.partLabel.
• Part membelah catatan satu-halaman yang panjang menjadi beberapa bagian; preset penomoran mengubahnya menjadi baris grup "PART II · …" di bilah sisi. Halaman serba ada dipotong dengan cara itu.
• HubCard dan .hub-grid adalah kartu beranda milik hub; .path kotak jalur bacanya — keduanya ada di ikhtisar galeri ini.
• LocalToc merender daftar loncat dalam-halaman; ia menerima kedua bentuk ToC yang dihasilkan dua preset penomoran, dan menyembunyikan diri di bawah ambang minimum yang dapat diatur. Di bawah, langsung, dengan ToC bab ini sendiri.
• SidebarMemory menjaga bilah sisi yang bisa digulir tetap di posisi terakhir pembaca lintas pemuatan halaman, dan menengahkan butir aktif (bawaannya [aria-current="page"]) setiap kali ia bakal keluar pandangan. Letakkan di dalam kotak gulir bilah sisi, setelah markup navigasi; ia berjalan sebelum lukisan pertama, jadi bilah sisi tak pernah berkedip di puncak. Bilah sisi demo ini sendiri membawanya.
• LineageSvg membingkai SVG gambar tangan (silsilah metode, pohon taksonomi) sebagai kartu — satu di bawah.
• PageFooter adalah cetakan kecil di kaki catatan — baris di bawah setiap catatan di sini.
• Kepingan jelajah ada di bab wiki; sisi Markdown dari galeri ini adalah halaman serba ada.

§3.3LocalToc dan LineageSvg, langsung

LocalToc disuapi ToC saat-build milik halaman ini sendiri — data yang sama yang dikonsumsi bilah sisi, dioper ke catatan sebagai props.toc:

Dan LineageSvg mengelilingi diagram yang ditulis tangan, ditintai seluruhnya dengan token semantik sehingga duduk nyaman di kedua tema:

§3.4Perabot tanpa komponen

Beberapa kepingan hanyalah kelas biasa di base.css, untuk situs yang merendernya dari layout sendiri atau menuliskannya sebagai HTML di tubuh tulisan: