§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 рендерить список переходів у межах сторінки; він приймає обидві форми ToC, які видають два пресети нумерації, і ховає себе, коли рядків менше за налаштовуваний мінімум. Нижче — наживо, на ToC цього ж розділу.
• SidebarMemory зберігає прокручування бічної панелі між переходами сторінок і центрує поточний пункт (за замовчуванням [aria-current="page"]), щойно той опинився б поза видимістю. Покладіть його всередину прокручуваного контейнера панелі, після розмітки навігації; він відпрацьовує до першого малювання, тож панель ніколи не блимає вгорі. Бічна панель цього демо його й несе.
• LineageSvg обрамлює намальований вручну SVG (родовід методу, дерево таксономії) як картку — одна така нижче.
• PageFooter — дрібний друк унизу нотатки: рядок під кожною нотаткою тут.
• Деталі перегляду живуть у розділі про вікі; Markdown-бік галереї — демонстраційний стенд.

§3.3LocalToc і LineageSvg наживо

LocalToc, якому згодовано зібраний під час збірки ToC цієї ж сторінки — ті самі дані, що споживає бічна панель, передані нотатці як props.toc:

А ось LineageSvg довкола авторської діаграми, натушованої самими лише семантичними токенами, — тому вона доречна в обох темах:

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

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