Skip to content

Add table of contents sidebar with tree and scroll following - #48

Merged
patakuti merged 2 commits into
mainfrom
feature/toc-sidebar
Apr 18, 2026
Merged

Add table of contents sidebar with tree and scroll following#48
patakuti merged 2 commits into
mainfrom
feature/toc-sidebar

Conversation

@patakuti

@patakuti patakuti commented Apr 18, 2026 •
edited
Loading

Copy link
Copy Markdown
Owner

Closes #47.

Summary

  • New right-side TOC panel for Markdown pages, toggled by a TOC button in the toolbar; visibility persists via localStorage (default off).
  • Headings are extracted client-side and rendered as a collapsible tree; initial expansion stops at the top-most level to keep long docs manageable.
  • Scroll position is followed with a reference line just below the sticky toolbar so the active heading resolves correctly in both scroll directions; the active entry's ancestors are auto-expanded.
  • TOC entry clicks compute the toolbar offset at click time so the target heading never lands behind the sticky bar.
  • Panel is hidden in print output and falls back to an overlay on narrow screens (<=900px). Directory listings, error pages, and the top page are unaffected.

Test plan

  • Toggle the TOC button on a Markdown page; panel slides in/out and the state persists across reloads.
  • Clicking a TOC entry scrolls the heading into view below the toolbar.
  • Scrolling up and down through a long document keeps the active TOC entry in sync; nested ancestors auto-expand.
  • Carets expand/collapse subtrees without triggering navigation.
  • .txt files, directory listings, and error pages do not show TOC content (the toolbar button is disabled for .txt).
  • Print preview hides the panel and removes the content margin.
  • Viewport <=900px overlays the panel instead of shifting content.

🤖 Generated with Claude Code

patakuti and others added 2 commits April 18, 2026 09:57
@patakuti @claude
Add table of contents sidebar (MVP)
0b8fd2f 
Introduce a right-side TOC panel for Markdown pages. A TOC toolbar button
toggles panel visibility, which is persisted in localStorage (default off).
Headings are extracted client-side from the rendered HTML; the button is
auto-disabled when the page has no headings (e.g. text files). The panel
is hidden in print output and falls back to an overlay on narrow screens.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
@patakuti @claude
Extend TOC sidebar with tree and scroll following
e0b5e81 
Upgrade the flat list to a nested tree using heading levels, with
expand/collapse carets that toggle independently from anchor navigation.
The initial state expands only the top-most level so deeper headings
stay folded until the user opens them.

Track the current reading position on scroll and highlight the matching
TOC entry, auto-expanding its ancestors. The active heading is resolved
as the last heading whose top is at or above a reference line just below
the sticky toolbar, which behaves symmetrically in both scroll
directions (a prior IntersectionObserver band approach failed to update
on upward scrolls between headings).

TOC anchor clicks compute an offset from the live toolbar height before
scrolling so the target heading is never hidden behind the sticky bar.
Caret glyphs align vertically with the anchor text via a fixed
line-height that matches the anchor's effective height.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
@patakuti
patakuti merged commit 2dbad35 into main Apr 18, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Add toggleable table of contents sidebar with heading navigation

1 participant

@patakuti