Journal
A persistent left-rail navigation for journal-style sites:
sections at the top, chapters within the active section, a
status ribbon at the bottom. Used by
andrew.dunn.dev to thread
its long-form writing. Importable from
@dunn.dev/reference/journal/JournalRail.astro.
Install
Add @dunn.dev/reference as a dependency, then add
an .npmrc pointing at GitLab's project npm
registry (the numeric project ID; the path-encoded form 404s
here):
@dunn.dev:registry=https://gitlab.com/api/v4/projects/82110648/packages/npm/
Usage
Import JournalRail from
@dunn.dev/reference/journal/JournalRail.astro, and
import
@dunn.dev/reference/journal/journal-base.css in the
same layout: the component never pulls that stylesheet in, and
its scoped rules read tokens (--rail-w,
--surface, --accent) that only the
stylesheet defines. Props are the Props
interface at the top of
journal/JournalRail.astro; the shape of the
sections data it takes is
journal/types.ts.
Worked example in production
andrew.dunn.dev uses the same component for its writing rail. The rail shows sections (Writing, Projects, Notes) in the top group; clicking one expands its chapter list below. The status ribbon at the bottom shows reading progress within the current chapter.
The component is intentionally headless on styling beyond
what journal-base.css provides. Sites can layer
site-local CSS on top of the rail's classes without forking
the component itself.