feat(toc): add animated On this page table of contents#3
Open
edwintantawi wants to merge 9 commits into
Open
Conversation
Render the derived heading data as a fixed 'On this page' rail beside post and series-post articles, with an SVG thread whose accented thumb follows the headings currently in view. The connector curves at indent changes via cubic Beziers (control points offset toward the opposite item so steps read as rounded corners, not diagonals) and spans the full height of the first and last entries. Scroll-spy tracks the visible heading range on rAF-coalesced scroll/resize; geometry is measured after mount and re-measured on reflow, so server and first client render stay identical. Filters to h2/h3, normalizes indent to the shallowest heading, smooth-scrolls with a replaceState hash on click, and respects prefers-reduced-motion. Below xl the fixed gutter collapses to a floating trigger opening the same list in a popover.
Center each bend on the shared edge between items and trim the thumb clip by the bend inset at both ends, so a lone active heading reads as a straight line of uniform height and the bend into the next indent only shows once the headings on both of its sides are active.
…files Extract PageTableOfContents into its own component file, move rail geometry measurement into a useRailGeometry hook, relocate thumbRange next to the other rail math in toc.utils, and consolidate shared interfaces in toc.types. No behavior change.
Track atStart/atEnd scroll boundaries alongside the visible heading ids, and render a dot at each end of the rail. The thumb's clip-path now stretches over a boundary's dot while that state holds, so the highlight morphs continuously between dot and line as the reader crosses the article's edges.
Add useScrollActiveIntoView, which scrolls the nearest scrollable ancestor so the topmost active heading stays centered when a long list outgrows the fixed desktop aside or the mobile popover. Scrolls only that ancestor, never the window, and no-ops while the list fits or nothing is active. Raise the aside to top-8 so the taller list has room to scroll within the viewport.
Fade the top/bottom edges of the TOC scroll area with scroll-driven animations, revealing each fade only when there is more to scroll that way. Give anchor jumps smooth scrolling that honours reduced-motion.
The floating "On this page" menu now adapts to three tiers: the fixed gutter on desktop, a right-side sheet on tablet (md-xl), and a full-width bottom bar opening a bottom drawer on mobile (below md), replacing the single popover used below xl.
Splits the growing hooks/utils/types files into focused modules (toc.rail.ts, toc.scroll.ts, toc.entries.ts) and renames the page component to ArticleToc for clarity, updating call sites accordingly.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Renders the derived heading data (already built at content time) as an animated "On this page" table of contents on post and series-post pages — the fuma-nama.dev SVG-rail treatment, recolored to this project's monochrome theme.
replaceStatehash on click, respectsprefers-reduced-motion.≥ xl; below that the gutter collapses to a floating "On this page" trigger opening the same list in a popover.Module
New
src/modules/toc/:toc.utils.tsnormalizeEntries(h2/h3 filter + level normalization), rail geometry,buildThreadPathtoc.hooks.tsuseActiveHeadings— scroll-spy returning the visible heading rangecomponents/toc-thumb.tsxcomponents/table-of-contents.tsxTableOfContentscore +PageTableOfContentsresponsive shellWired into
posts/$slug.tsxandseries/$slug/$postSlug.tsx; added a.toc-scrollthin-scrollbar utility toapp.css.Verification
vp checkclean (format, lint, types).vp buildprerenders the series-post page; SSR renders the accessible<nav>+ all heading links with correct normalized indentation, and the SVG rail is correctly absent server-side.