ReferênciaComponentesPereneatualizado 2026.083 min de leitura
Visão geralParte II · Wiki e navegação
Parte II · Wiki e navegação

Wiki e navegação

Tudo neste capítulo roda ao vivo neste site: as estantes da página inicial são feitas de NoteCard, as trilhas de faceta são um FacetNav, a faixa de metadados acima deste texto é uma TaxonomyLine e a pequena constelação na barra lateral é um LocalGraph. Todos são componentes de exibição pura — o site resolve o próprio registro e passa dados prontos para exibir. Os ajudantes de resolução vêm no pacote como createTaxonomy e createBacklinks (mecânica no pacote, significado no site).

§2.1A ligação, em três linhas

src/lib/taxonomy.ts (toda a ligação deste 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' });

O registro (_meta/taxonomy.ts) é puro dado dentro da árvore de conteúdo: tipos, domínios com cores de tom, status com cores de ponto, cada um com seus rótulos por idioma. Acrescente um valor ali, marque uma nota com ele, e todas as páginas de navegação o recolhem — as rotas são parametrizadas por valor.

§2.2A estante e seus tokens

As páginas de navegação vivem sobre um segundo fundo: browse.css lhes dá o papel quente, o cabeçalho serifado, a régua de dois pontos da estante e a grade de cartões, tudo pelos tokens --wb-* — a metade de estante da paleta de dois contextos. Uma página entra no contexto com uma única classe, wb-root, no body; lá dentro os tokens de chrome são remapeados, e a mesma barra de navegação assenta em qualquer um dos dois fundos.

§2.3NoteCard

Um cartão recebe dados prontos para exibir — rótulos resolvidos, tons, uma data formatada, links de espelho. Cartões moram na estante, então a amostra fica numa faixa do contexto de navegação (.wb-root.wb-inset) embutida nesta coluna de leitura:

  • Referência2026.08
    Vitrine completa

    Cada elemento do pipeline de Markdown se apresenta uma vez nesta página.

  • Referência3 chapters2026.08
    O conjunto de componentes

    Um passeio em três capítulos por todos os componentes do pacote — e uma demonstração ao vivo de hub.

    Hero · HubCard · Stats — o mobiliário de hub, no próprio hub

§2.4FacetNav

O índice de navegação multidimensional — tipos, domínios (com seus tons), as tags mais usadas, tudo como links-pílula pré-renderizados:

Os textos de rótulo também são props, com padrões em inglês — o exemplo acima passa labels={{ kind: 'Tipo', domain: 'Domínio', tag: 'Tags', all: 'Todas →' }}, exatamente o que as páginas de faceta em português deste site passam; nada mais muda.

§2.5TaxonomyLine, KindBadge, StatusDot, DomainChip

A faixa de metadados de uma linha na cabeça de cada nota é a montagem dos três átomos de selo; cada um também serve sozinho:

PadrãoDesignCrescendoupdated 2026.08

Os átomos soltos, correndo no texto: um selo de tipo Guia, um chip de domínio Pipeline, um ponto de status Perene.

O painel de "menções vinculadas" sob cada nota deste jardim é calculado pelo createBacklinks do pacote — o próprio resolvedor de wikilinks do motor invertido num índice alvo ← origens, trechos de contexto incluídos. Aqui com dados de exemplo:

Role até o pé desta página para ver o painel de verdade — este capítulo é, ele mesmo, alvo de wikilinks.

§2.7LocalGraph

O mesmo índice responde a uma segunda pergunta — o que está a um salto daqui? — e index.localGraph(id, titleOf) a devolve como uma lista de vizinhos, os de entrada primeiro. O componente os desenha numa elipse ao redor da nota, entrada em traço cheio e saída tracejada; um vizinho pode trazer a própria color (uma segunda coleção, digamos). Aqui na largura da coluna, com dados de exemplo; o de verdade fica na barra lateral de toda nota que tem links:

Títulos, seções e corpo do texto, neste idioma.
    ↑↓ · Enter · Escastro-inkstone