§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одна ветка

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

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

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

Планчто изменить

Сборка

Замерпротив эталона

Что получает модель

Что модель из этого вычисляет

Фотонесколько ракурсов

Камерыпозы и объективы

Признаки каждого ракурса

Свести ракурсы

Замкнутая поверхность

Каждый блок шириной не меньше десяти букв, а каждый столбец не уже самого длинного слова в его блоках, поэтому слова не разрываются; имя в snake_case может переноситься после подчёркивания. Когда колонка страницы слишком узка для всех, например на телефоне, диаграмма прокручивается вбок внутри своей рамки, заголовок и подпись при этом остаются на месте; диаграмма сохраняет ту структуру, с которой её написали.

Когда из одного блока выходит несколько подписанных линий, некоторым подписям не находится места в стороне от блоков, и они становятся номерами. Номер ставится так же, как подпись: никогда на блок, заголовок, подпись или другой номер. Он стоит на своей линии, где у линии есть свободное место, а иначе рядом с ней и соединён с ней короткой чертой:

Луч входит в полосу

Пройти этот отрезокбюджет M клеток

Повторить уровнем грубееотрезок по-прежнему содержит попадание

Пройти без бюджетатолько на самом грубом уровне

Выдать отрезокон содержит первое попадание

Перейти к следующему пересечениюбольше нет: луч промахнулся

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

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