위키와 둘러보기

§2.1바인딩, 세 줄

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서가와 그 토큰

둘러보기 페이지는 두 번째 바탕 위에 삽니다: 따뜻한 종이, 세리프 마스트헤드, 2포인트 서가 괘선, 카드 그리드 — 전부 browse.css 파일이 --wb-* 토큰을 통해 줍니다. 두 문맥 팔레트의 둘러보기 쪽 절반입니다. 페이지는 body의 wb-root 클래스 하나로 이 문맥에 들어가고, 그 안에서 크롬 토큰이 다시 매핑되므로 같은 내비게이션 바가 어느 바탕에나 앉습니다.

§2.3NoteCard

카드는 표시할 준비가 끝난 데이터를 받습니다 — 해석된 라벨, 톤, 조판된 날짜, 미러 링크. 카드는 원래 서가에 사는 물건이라, 샘플은 이 읽기 열 안에 끼워 넣은 둘러보기 문맥 한 조각(.wb-root.wb-inset)에 앉혔습니다:

§2.4FacetNav

다차원 둘러보기 색인입니다 — 종류, 분야(각자의 톤과 함께), 상위 태그 — 전부 미리 렌더링된 알약 링크로:

행 라벨 문자열도 prop이고 기본값은 영어입니다 — 위 샘플이 넘긴 labels={{ kind: '종류', domain: '분야', tag: '태그', all: '전체 →' }} 값은 이 사이트의 한국어 분류 페이지가 넘기는 것과 똑같습니다. 그 밖에는 아무것도 바꿀 것이 없습니다.

§2.5TaxonomyLine, KindBadge, StatusDot, DomainChip

노트 머리의 한 줄짜리 메타 스트립은 배지 원자 셋을 조립한 것입니다. 각 원자는 단독으로도 쓸 수 있습니다:

원자를 따로 꺼내 본문에 흘리면: 가이드 종류 배지 하나, 파이프라인 분야 칩 하나, 상록 상태 점 하나가 됩니다.

§2.6Backlinks

이 정원 모든 노트 밑의 "연결된 언급" 패널은 패키지의 createBacklinks 함수가 계산합니다 — 엔진 자신의 위키링크 해석기를 대상 ← 출처의 색인으로 뒤집고, 문맥 조각까지 함께 싣습니다. 아래는 인라인 샘플 데이터입니다:

진짜 패널은 이 페이지의 발치로 스크롤하면 보입니다 — 이 장 자신이 위키링크의 대상이니까요.

§2.7LocalGraph

같은 색인이 두 번째 질문에도 답합니다 — 여기서 한 홉 거리에는 무엇이 있는가? — index.localGraph(id, titleOf) 호출이 그 답을 이웃 목록으로 돌려주며, 들어오는 링크가 앞에 옵니다. 컴포넌트는 이들을 노트 둘레의 타원 궤도에 그립니다. 들어오는 쪽은 실선, 나가는 쪽은 점선입니다. 이웃은 자기만의 color 값을 지닐 수 있습니다(이를테면 다른 컬렉션에서 온 이웃). 아래는 열 너비에 맞춘 샘플 데이터 버전입니다. 진짜는 링크를 가진 모든 노트의 사이드바에 있습니다: