§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 без слов — дерево происхождения, таксономию — как карточку; схема со словами — это FlowDiagram, ниже.
• PageFooter — мелкий набор в подвале заметки; строка под каждой здешней заметкой.
• Навигационные детали живут в главе о вики; Markdown-сторона галереи — «Всё и сразу».

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

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

Та же схема как FlowDiagram — блоки это HTML, подстраивающийся под свои слова, стрелки измеряются после раскладки, так что ни в одном шрифте ничего не выходит за рамку:

tokens.css

base.cssколонка чтения

browse.cssполка просмотра

componentsиспользуют оба

§3.4FlowDiagram — блоки по размеру своих слов

Схема со словами — это FlowDiagram (или блок mermaid). Вручную расставленный <svg> с <text> нарисован под один шрифт и ломается на следующем, более широком — а каждый сайт рендерит своим; LineageSvg остаётся для SVG без текста, который шрифт мог бы выдавить из формы. Спецификация — данные: cols, nodes (col / row / span, tone, lines, tag, ghost для пунктирной заметки, mono для путей), edges (label, dashed, off для оборванной связи), необязательные lanes и heads:

Автор

Ревью

Сборка

Написатьзаметку или компонент

Открыть PRодна ветка

Проверитьодобрить или спросить

Собрать и выкатитьпри слиянии

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

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