§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 tanpa kata — pohon silsilah, taksonomi — sebagai kartu; diagram yang berisi kata adalah FlowDiagram, 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 FlowDiagram, langsung

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

Gambar yang sama sebagai FlowDiagram — kotaknya HTML yang menyesuaikan diri dengan kata-katanya, panahnya diukur setelah tata letak, sehingga dalam font apa pun tak ada yang keluar dari kotak:

tokens.css

base.csskolom baca

browse.cssrak jelajah

componentsmemakai keduanya

§3.4FlowDiagram — kotak seukuran kata-katanya

Diagram yang memuat kata adalah FlowDiagram (atau blok mermaid). <svg> yang diposisikan manual dengan <text> digambar untuk satu font dan rusak di font berikutnya yang lebih lebar — dan setiap situs merender dengan fontnya sendiri; LineageSvg tetap untuk SVG tanpa teks yang bisa didorong font keluar dari bentuknya. Spesifikasinya data: cols, nodes (col / row / span, tone, lines, tag, ghost untuk catatan putus-putus, mono untuk path), edges (label, dashed, off untuk tautan putus), lanes dan heads opsional:

Penulis

Tinjauan

Build

Menulissebuah catatan atau komponen

Buka PRsatu cabang

Tinjausetujui atau tanyakan

Build dan deploysaat merge

Satu entri heads menjadi judul bagi baris-baris di bawahnya, jadi diagram berkelompok adalah satu baris judul diikuti kotak-kotak kelompoknya; garis memutari teks judul seperti memutari kotak. Garis yang tidak menemukan jalan di antara kotak turun lewat tepi diagram — jalur di kedua sisi kotak, di dalam padding bingkai — dan lapisan garis mencakup tepi itu, sehingga garis dan nomornya tetap di dalam gambar:

Rencanaapa yang diubah

Bangun

Ukurterhadap nilai acuan

Yang diterima model

Yang dihitung model darinya

Fotobeberapa sudut pandang

Kamerapose dan lensa

Fitur per sudut pandang

Gabungkan sudut pandang

Permukaan tertutup

Setiap kotak selebar setidaknya sepuluh huruf dan setiap kolom selebar kata terpanjang di kotak-kotaknya, jadi tak ada kata yang terpotong; nama snake_case boleh berganti baris setelah garis bawah. Bila kolom halaman terlalu sempit untuk semuanya, misalnya di ponsel, diagram bergulir ke samping di dalam bingkainya sementara judul dan keterangan tetap diam; diagram mempertahankan struktur yang ditulis.

Bila beberapa garis berlabel keluar dari satu kotak, sebagian label tidak mendapat ruang bebas dari kotak dan menjadi nomor. Nomor ditempatkan seperti label: tidak pernah di atas kotak, judul, label, atau nomor lain. Ia berada di garisnya bila garis itu punya tempat kosong, dan bila tidak, di samping garis, tersambung lewat garis pendek:

Sinar masuk ke pita

Telusuri ruas inianggaran M sel

Ulangi satu tingkat lebih kasarintervalnya tetap memuat titik temu

Telusuri tanpa anggaranhanya di tingkat paling kasar

Keluarkan intervalmemuat titik temu pertama

Ambil perlintasan berikutnyatidak ada lagi: sinar tidak kena

§3.5Perabot tanpa komponen

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