Skip to content

Collapse TOC into sticky popover button#307

Merged
simonhamp merged 2 commits intomainfrom
toc-popover-button
Mar 29, 2026
Merged

Collapse TOC into sticky popover button#307
simonhamp merged 2 commits intomainfrom
toc-popover-button

Conversation

@simonhamp
Copy link
Copy Markdown
Member

@simonhamp simonhamp commented Mar 29, 2026

Summary

  • Replaces inline table of contents on plugin and docs pages with a compact Flux dropdown/popover button ("On this page")
  • Button sticks to the top-right of the content area as users scroll, with an opaque background for contrast
  • Plugin page TOC uses Alpine.js dynamic heading extraction; docs page TOC uses server-side $tableOfContents data
  • Adds scrollbar width compensation CSS for modal/popover overlay states (WIP — not fully resolved)

Test plan

  • Visit a plugin detail page with a README — verify "On this page" button appears sticky at top-right
  • Click the button — verify popover opens with correct heading hierarchy (h2/h3 indentation)
  • Click a heading link — verify smooth scroll to the correct section
  • Visit a docs page — verify the same TOC popover button appears at top-right of content
  • Verify the TOC is no longer shown inline in the sidebar on docs pages
  • Test on mobile viewport — verify button is visible and functional
  • Test dark mode — verify button and popover have correct styling

🤖 Generated with Claude Code

simonhamp and others added 2 commits March 29, 2026 14:20
Replaces inline table of contents with a Flux dropdown/popover button
that sticks to the top-right of the content area. Applied to both
plugin detail pages (Alpine-driven dynamic headings) and docs pages
(server-side TOC data). Adds scrollbar width compensation CSS for
modal and popover overlay states.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…ar fix

- Docs TOC now extracts heading IDs from rendered HTML instead of
  re-deriving slugs from raw markdown, ensuring anchors always match
- Decode HTML entities in TOC titles (e.g. &amp; → &)
- Add smooth scrollIntoView for TOC links on both plugin and docs pages
- Add scroll-mt-20 to plugin article headings for fragment spacing
- Use data-flux-scroll-unlock attribute to compensate for custom
  scrollbar width when Flux locks scroll

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@simonhamp simonhamp marked this pull request as ready for review March 29, 2026 13:41
@simonhamp simonhamp merged commit 38c3eba into main Mar 29, 2026
2 checks passed
@simonhamp simonhamp deleted the toc-popover-button branch March 29, 2026 13:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant