§3.1DemoMount の実演

分担はこのパッケージのいつもの分け方です:マウント用マークアップ(ステージ、コントロールのスロット、キャプションのスロット)はパッケージが同梱し、デモモジュールとそのローダーはサイトのものです。このサイトはローダーを src/lib/demo-loader.ts に置き、レイアウトから一度だけ mountAllDemos() を呼びます。この呼び出しは全ページで走りますが、デモモジュールのチャンクが取得されるのは、ページが [data-demo] マウントを実際に載せているときだけです。

canvas 上でポインタ入力を受け取るデモは interactive を渡します——するとステージはタッチジェスチャを引き受け、十字カーソルを表示します。下のデモは受け身(描画のみ)なのでこのフラグを付けておらず、canvas の上をスワイプしてもページは普通にスクロールします。二つの波源の干渉を、ページ自身の墨トークンで描くので、テーマにも追随します:

デモ · 二点波源の干渉

デモ · 二点波源の干渉

二つの点源が円形の波を放ちます。山と山が出会えば墨が溜まり、山と谷が出会えば紙の色が透けます。テーマを切り替えてみてください——デモは生きたトークンから墨を汲み直します。

モジュール契約は一つだけ:デフォルトエクスポートの mount(ctx) がクリーンアップ関数を返すこと。waves/interference のようなモジュール id の解決方法はサイトの自由です(ここでは import.meta.glob)。

§3.2ページの調度品

残りのコンポーネントは、ノートを満たすのではなく、ノートに額縁を与えます:

• Hero はノートの開幕:キッカー、飾りのタイトル、Markdown パイプラインを一巡してくる導入文、メタ情報の行、そして任意の tocLabel——サイドバーに番号なしの「導入」行を一つ足します。frontmatter の title は <title> とカードのための短い正式名のまま。hero のタイトルは長くて構いません。
• PartHero はハブの一章の開幕——このページ自身の頭がそれです。キッカーは決して手で打ちません:ルートがこの章の「第III部 · …」ラベルを props.partLabel として渡してきます。
• Part は長い単一ページのノートをいくつかの部に切り分けます。番号付けプリセットがそれを、サイドバーの「第II部 · …」というグループ行に変えます。全部入りデモはそうやって切られています。
• HubCard と .hub-grid はハブのランディングカード、.path はその順路ボックス——どちらもこのギャラリーの概要にあります。
• LocalToc はページ内ジャンプリストを描画します。二つの番号付けプリセットが作る二種類の ToC 形をどちらも受け付け、項目数が設定可能な下限を割ると自分から隠れます。下で、この章自身の ToC を使って実演します。
• SidebarMemory は、スクロールするサイドバーの位置をページをまたいで覚えておき、現在の項目(既定では [aria-current="page"])が視界から外れそうなときに中央へ寄せます。サイドバーのスクロールボックスの中、ナビゲーションのマークアップの後に置いてください。最初の描画より前に走るので、サイドバーが一瞬だけ先頭にフラッシュすることはありません。このデモのサイドバーにも入っています。
• LineageSvg は手描きの SVG(手法の系譜図、分類の樹形図)をカードとして額装します——下に一枚。
• PageFooter はノートの足元の小さな文字——ここの各ノートの下にあるあの一行です。
• ブラウズ系の部品はwiki の章に。このギャラリーの Markdown 側は全部入りデモです。

§3.3LocalToc と LineageSvg の実演

LocalToc に、このページ自身のビルド時 ToC を与えたものです——サイドバーが消費するのと同じデータで、props.toc としてノートに渡ってきます:

そして LineageSvg が手描きの図を額装します。線も文字もすべて意味トークンで引いてあるので、どちらのテーマにも馴染みます:

§3.4コンポーネントを持たない調度

いくつかの部品は base.css の素のクラスです。自前のレイアウトから描画するサイトや、本文に HTML で直接書くサイトのために: