Wiki Gutter — Reading View Metadata Column

Right-hand gutter (200px) added to the wiki reading layout (desktop only, hides at <900px).

What it shows

  • path — the page's wiki path
  • last edited — relative timestamp (e.g. "2h ago", "3d ago")
  • cross-links — outbound [[wikilinks]] extracted from the page content, capped at 8, linked to their target pages

Layout

wiki-reading-layout CSS grid: 200px sidebar | 1fr content | 200px gutter

  • Gutter is position: sticky; top: 48px so it stays visible while scrolling long pages
  • Hidden via CSS at <900px (mobile), also hidden at <1100px when sidebar also hides
  • No backend change needed — cross-links are extracted client-side from page.content with a regex

Implementation notes

  • "Written by": Not yet tracked in the API page response — shows —. Wire up from audit log in a future task.
  • Wikilink extraction: Uses \[\[([^\]|]+?)(?:\|[^\]]+)?\]\]/g — ignores display text aliases, normalises to lowercase-hyphen paths.
  • No extra API call: The content passed from WikiPageView is already fetched by the existing page query.

Files

  • web/src/components/organisms/WikiGutter.tsx — component
  • web/src/app/globals.css — .wiki-gutter, .wiki-gutter__*, .wiki-reading-layout CSS
  • web/src/components/organisms/WikiPageView.tsx — wired in reading mode

See also: wiki-sidebar