TableOfContents
Reading-position table of contents for any page rendering markdown throughAstroMarkdown. One render, three viewport states: a persistent rail at ≥1280px, a hamburger between 768–1279px, and a top bar below 768px that names the heading currently being read. Selecting a heading collapses the panel; Esc and click-outside dismiss it.
- Props
headings,minDepth,maxDepth,minEntries,excludeContainers,title- Source
tree.data.headingsonly- Defaults
- h2–h3, hidden below 3 entries
- Used on
- /essays/*
Where the outline comes from, and why it matters:LFM's remarkHeadingIds walks the MDAST. A # line inside a fenced code block is a code node, not a heading node, so it cannot reach the outline. A regex over raw markdown would see it; aquerySelectorAll over rendered HTML would run after paint and still be blind to synthetic and duplicateOf. Never derive an outline from text or from the DOM.
Anchors are the package's, not ours.AstroMarkdown reads node.data.id; the local slugify it used to carry is gone. Across the 50 essays that swap moved 5 of 394 anchors, and all five were collisions the old algorithm silently produced (four#traction-data on one page).
Positioning departs from the shared reference on purpose.fullstack-vc pins its header, so its ToC is position: fixed under a known obstruction. This site's header scrolls away, so a fixed bar would sit on the logo at rest — here the ToC is position: sticky in normal flow. The measured --lfm-toc-header-bottom is still honoured, so pinning the header later needs no change to the component.
Rail state — resize the window past 1280px and 768px to see the other two
Seven sample headings, one of them inside a callout. The callout heading is excluded by default: it deserves an anchor, but it is an aside, not a waypoint. Five entries survive — above the three-entry floor, so the component renders.
Blueprint: astro-knots/context-v/blueprints/Standard-Table-of-Contents-for-Every-Markdown-Collection.md