ДовідникКомпонентиВічнозеленаоновлено 2026.082 хв читання
ОглядЧастина II · Вікі та перегляд
Частина II · Вікі та перегляд

Вікі та перегляд

Усе в цьому розділі працює на цьому сайті наживо: полиці головної сторінки складено з NoteCard, її рядки рубрик — це FacetNav, смужка метаданих над цим текстом — TaxonomyLine, а маленьке сузір’я в бічній панелі — LocalGraph. Усі вони — суто презентаційні компоненти: сайт сам розв’язує свій реєстр і передає готові до показу дані. Помічники розв’язання їдуть у пакеті як createTaxonomy і createBacklinks (механіка в пакеті, зміст у сайті).

§2.1Прив’язка у три рядки

src/lib/taxonomy.ts (уся прив’язка цього сайту)
import { createTaxonomy } from 'astro-inkstone/lib/taxonomy';
import { DOMAINS, KINDS, STATUSES } from '../content/notes/_meta/taxonomy';

export const { getWikiUnits, groupByKind, groupByDomain, groupByPrimaryDomain, tagIndex, resolveTaxonomy } =
  createTaxonomy({ kinds: KINDS, domains: DOMAINS, statuses: STATUSES },
    { collection: 'notes', locales: [{ code: 'zh', prefix: 'zh/' }], primary: 'en' });

Реєстр (_meta/taxonomy.ts) — чисті дані в дереві вмісту: типи, напрями з тоновими кольорами, статуси з кольорами цяток, кожне значення з англійським і китайським підписами. Додайте там значення, позначте ним нотатку — і кожна сторінка перегляду підхопить його сама: маршрути параметризовано за значеннями.

§2.2Полиця та її токени

Сторінки перегляду стоять на другому тлі: теплий папір, шапка із засічками, двопунктова лінійка полиці й сітка карток — усе це дає browse.css через токени --wb-*, тобто полична половина двоконтекстної палітри. Сторінка входить у контекст одним класом wb-root на body; всередині нього токени оздоблення перевідображено, тож та сама панель навігації однаково доречна і на папері читання, і на папері полиці.

§2.3NoteCard

Картка приймає готові до показу дані — розв’язані підписи, тони, відформатовану дату, посилання на дзеркала. Картки живуть на полиці, тож зразок сидить у вкрапленні поличного контексту (.wb-root.wb-inset) посеред цієї колонки читання:

§2.4FacetNav

Багатовимірний покажчик перегляду — типи, напрями (з їхніми тонами), найуживаніші теги, усе як попередньо відрендерені посилання-пігулки:

Рядки підписів — теж пропси з англійськими типовими значеннями: у зразку вище передано labels={{ kind: 'Тип', domain: 'Напрям', tag: 'Теги', all: 'Усі →' }} — ті самі слова, що й на українських сторінках рубрик цього саду; більше нічого міняти не треба.

§2.5TaxonomyLine, KindBadge, StatusDot, DomainChip

Однорядкова смужка метаданих на чолі нотатки збирає докупи три атоми-значки; кожен придатний і сам по собі:

ПатернДизайнРостеupdated 2026.08

Атоми поодинці, просто в рядку тексту: значок типу Інструкція, чип напряму Пайплайн і цятка статусу Вічнозелена.

Панель «Зворотні посилання» під кожною нотаткою цього саду обчислює пакетний createBacklinks: власний розв’язувач вікіпосилань рушія, обернений на покажчик «ціль ← джерела», разом із фрагментами контексту. Тут — зі зразковими даними:

Догорніть до низу цієї сторінки — там справжня панель: цей розділ сам є ціллю вікіпосилань.

§2.7LocalGraph

Той самий покажчик відповідає й на друге запитання — що лежить за один крок звідси? — і index.localGraph(id, titleOf) повертає відповідь списком сусідів, вхідні першими. Компонент розкладає їх еліпсом довкола нотатки: вхідні суцільною лінією, вихідні пунктиром; сусід може нести власний color (скажімо, з іншої колекції). Нижче — на ширину колонки, зі зразковими даними; справжній граф сидить у бічній панелі кожної нотатки, що має посилання:

Заголовки, підрозділи й основний текст — цією мовою.
    ↑↓ · Enter · Escastro-inkstone