ReferenzKomponentenImmergrünaktualisiert 2026.082 Min. Lesezeit
HubTeil II · Wiki & Stöbern
Teil II · Wiki & Stöbern

Wiki & Stöbern

Alles in diesem Kapitel läuft auf dieser Site live: Die Regale der Startseite bestehen aus NoteCard, ihre Facettenzeilen sind eine FacetNav, die Meta-Leiste über diesem Text ist eine TaxonomyLine, und das kleine Sternbild in der Seitenleiste ist ein LocalGraph. Alle sind reine Darstellungskomponenten – die Site löst ihre Registry auf und übergibt anzeigefertige Daten. Die Auflösungshelfer liegen dem Paket bei, als createTaxonomy und createBacklinks (Mechanik im Paket, Bedeutung in der Site).

§2.1Die Bindung, drei Zeilen

src/lib/taxonomy.ts (die gesamte Bindung dieser Site)
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' });

Die Registry (_meta/taxonomy.ts) ist pure Daten im Inhaltsbaum: Arten, Bereiche mit Farbtönen, Status mit Punktfarben, jeder Wert mit englischer und chinesischer Beschriftung. Trag dort einen Wert ein, versieh eine Notiz damit, und jede Stöberseite nimmt ihn auf – die Routen sind ohnehin nach Werten parametrisiert.

§2.2Das Regal und seine Tokens

Stöberseiten stehen auf einem zweiten Grund: browse.css gibt ihnen das warme Papier, den Serifen-Seitenkopf, die Zwei-Punkt-Regalkante und das Kartenraster, alles über die --wb-*-Tokens – die Regalhälfte der Zwei-Kontexte-Palette. Eine Seite betritt den Kontext mit einer einzigen Klasse, wb-root, am Body; darin sind die Chrome-Tokens umgelegt, dieselbe Navigationsleiste sitzt also auf beiden Gründen.

§2.3NoteCard

Eine Karte nimmt anzeigefertige Daten – aufgelöste Beschriftungen, Farbtöne, ein formatiertes Datum, Spiegel-Links. Karten wohnen im Regal, das Beispiel sitzt darum in einem Stück Stöberkontext (.wb-root.wb-inset) mitten in dieser Lesespalte:

  • Referenz2026.08
    Das volle Programm

    Jedes Element der Markdown-Pipeline tritt auf dieser Seite genau einmal auf.

    PipelineImmergrünEN
  • Referenz3 chapters2026.08
    Der Komponentensatz

    Ein Rundgang in drei Kapiteln durch jede mitgelieferte Komponente – und zugleich eine Hub-Vorführung, live.

    KomponentenImmergrün

    Hero · HubCard · Stats – das Hub-Mobiliar, am Hub selbst

§2.4FacetNav

Der mehrdimensionale Stöberindex – Arten, Bereiche (mit ihren Farbtönen), die meistgenutzten Schlagwörter, alles als vorgerenderte Pillen-Links:

Auch die Beschriftungen sind Props mit englischen Defaults – das Beispiel oben übergibt labels={{ kind: 'Art', domain: 'Bereich', tag: 'Schlagwörter', all: 'Alle →' }}, genau das, was die deutschen Facettenseiten dieser Site übergeben; sonst ändert sich nichts.

§2.5TaxonomyLine, KindBadge, StatusDot, DomainChip

Die einzeilige Meta-Leiste am Kopf einer Notiz setzt sich aus den drei Abzeichen-Atomen zusammen; jedes ist auch allein verwendbar:

MusterDesignWachsendupdated 2026.08

Die Atome einzeln, mitten im Satz: ein Leitfaden Art-Abzeichen, ein Pipeline Bereichs-Chip, ein Immergrün Statuspunkt.

Das Panel „Verknüpfte Erwähnungen“ unter jeder Notiz dieses Gartens berechnet das Paket mit createBacklinks – der eigene Wikilink-Resolver der Engine, invertiert zu einem Index Ziel ← Quellen, Kontextschnipsel inklusive. Hier mit Beispieldaten:

Scroll ans Ende dieser Seite für das echte Panel – dieses Kapitel ist selbst ein Wikilink-Ziel.

§2.7LocalGraph

Derselbe Index beantwortet noch eine zweite Frage – was liegt einen Sprung von hier entfernt? – und index.localGraph(id, titleOf) liefert die Antwort als Nachbarliste, eingehende zuerst. Die Komponente zeichnet sie auf eine Ellipse um die Notiz, eingehend durchgezogen, ausgehend gestrichelt; ein Nachbar darf eine eigene color mitbringen (etwa aus einer zweiten Sammlung). Hier in Spaltenbreite, mit Beispieldaten; der echte sitzt in der Seitenleiste jeder Notiz, die Links hat:

Titel, Abschnitte und Fließtext, in dieser Sprache.
    ↑↓ · Enter · Escastro-inkstone