§3.1DemoMount — вживую

Разделение труда — привычное для пакета: разметка крепления (сцена, слот управления, слот подписи) едет в пакете, а модуль демо и его загрузчик принадлежат сайту. Этот сайт держит загрузчик в src/lib/demo-loader.ts и один раз вызывает mountAllDemos() из лейаута; вызов происходит на каждой странице, но чанк модуля демо скачивается только там, где есть крепление [data-demo].

Демо, принимающее ввод указателя на своём холсте, передаёт interactive — тогда сцена забирает касания себе и показывает перекрестье. Это демо пассивное (только отрисовка): флаг оно не ставит, и свайп по холсту по-прежнему листает страницу. Рисует оно интерференцию волн от двух источников тушью самой страницы, поэтому следует за темой:

Демо · Интерференция волн от двух источников

Демо · Интерференция волн от двух источников

Два точечных источника испускают круговые волны; где гребень встречает гребень — тушь скапливается, где гребень встречает впадину — проступает бумага. Переключите тему: демо заново обмакнёт перо в живые токены.

Контракт модуля — один экспорт по умолчанию, mount(ctx), возвращающий функцию очистки; идентификаторы модулей вроде waves/interference загрузчик разрешает как сайту угодно (здесь — import.meta.glob).

§3.2Обрамление страницы

Остальные компоненты не наполняют заметку, а оправляют её:

• Hero открывает заметку: надзаголовок, крупный титул, лид, проходящий полный конвейер Markdown, строка мета — и необязательный tocLabel, добавляющий в сайдбар ненумерованную строку «вступление». Frontmatter-title заметки остаётся коротким каноническим — для <title> и карточек; заголовок в hero может быть длинным.
• PartHero открывает главу хаба — это шапка этой самой страницы. Его надзаголовок не набирают руками: маршрут передаёт подпись главы «Часть III · …» через props.partLabel.
• Part режет длинную одностраничную заметку на части; пресет нумерации превращает его в групповые строки сайдбара вида «Часть II · Основы». Так нарезана страница «Всё и сразу».
• HubCard и .hub-grid — карточки главной хаба; .path — его рамка читательского маршрута; обе — на обзоре этой галереи.
• LocalToc отрисовывает список переходов внутри страницы; он принимает обе формы оглавления, которые дают два пресета нумерации, и прячется, пока записей меньше настраиваемого минимума. Ниже — вживую, на оглавлении этой главы.
• SidebarMemory сохраняет прокрутку сайдбара между переходами и центрирует текущий пункт (по умолчанию [aria-current="page"]), когда тот оказался бы вне поля зрения. Кладите его внутрь скролл-бокса сайдбара, после разметки навигации; он отрабатывает до первой отрисовки, и сайдбар никогда не мигает, отмотанный к верху. Сайдбар этого демо носит его.
• LineageSvg оправляет нарисованный вручную SVG (родословную метода, дерево таксономии) в карточку — одна такая ниже.
• PageFooter — мелкий набор в подвале заметки; строка под каждой здешней заметкой.
• Навигационные детали живут в главе о вики; Markdown-сторона галереи — «Всё и сразу».

§3.3LocalToc и LineageSvg — вживую

LocalToc, которому скормлено собственное, собранное на этапе сборки оглавление этой страницы, — те же данные, что потребляет сайдбар, выданные заметке как props.toc:

И LineageSvg вокруг нарисованной от руки диаграммы, прокрашенной целиком семантическими токенами, — потому она сидит на обеих темах:

§3.4Обрамление без компонента

Несколько деталей — просто классы в base.css, для сайтов, которые отрисовывают их из собственного лейаута или пишут как HTML прямо в прозе: