Skip to content

fix: open hidden docs sections for anchor links - #303

Merged
raviships merged 1 commit into
mainfrom
t3code/fix-docs-anchor-navigation
Oct 14, 2026
Merged

raviships merged 1 commit into
mainfrom
t3code/fix-docs-anchor-navigation

Conversation

@raviships

@raviships raviships commented Oct 14, 2026 •

Copy link
Copy Markdown
Collaborator

Summary

Links to headings inside a collapsed section or an inactive tab did nothing.

  • Component pages (OpenTabs). Radix only renders the active tab panel, so headings in the "Manual" tab (#copy-this-component, #install-required-components, …) weren't in the DOM until someone clicked the tab. Their TOC entries on all 10 component pages were dead links.
  • Quick Start (SetupGuide). This already handled hash links with ~60 lines of logic that nothing else could reuse.

This PR moves that logic into a shared useRevealAnchor(containerRef, reveal) hook. A container that hides content calls it with its own "open" function:

useRevealAnchor
  on load / hashchange / same-page link click
    target = element for hash
    if target is inside container and hidden
      reveal()            // open <details> / select tab
      scroll to target
  • SetupGuide now just calls the hook with details.open = true.
  • OpenTabs tracks the selected tab in state. Inactive panels stay mounted but hidden with data-[state=inactive]:hidden (the same approach fumadocs uses for its Tabs), and each panel selects itself when an anchor inside it is targeted.

Any page that uses these components gets this automatically.

I also tried hiding those headings from the TOC with fumadocs' [!toc] marker. fumadocs only strips the marker when building the TOC, so it leaked into search results ("Copy this component [!toc]") and changed heading ids to #…-toc.

Evidence

Headless Chromium against the docs dev server and again against this PR's Vercel preview (production build), with identical results. In every case the heading was visible and scrolled just below the sticky header (top: 112):

Case Result
Direct load /docs/components/dropzone#copy-this-component Manual tab selected
hashchange into the inactive tab Manual tab selected
TOC click on the current hash after switching back to CLI Manual tab selected
Direct load /docs/quick-start#delete-file Setup guide opened
Same-hash click after closing the guide Setup guide reopened
Client navigation from /blog/v1-release to /docs/quick-start#temporary-files Setup guide opened

pnpm --filter docs lint, Prettier and tsc pass for the changed files. No changeset: this only touches the docs site.

Risk and rollback

Door: Two-way. Reverting the commit restores the previous behavior.
Blast radius: Docs site only. Covers the Installation tabs on the 10 component pages and the Quick Start setup guide. Inactive tab panels are now server-rendered (hidden), which adds their HTML to the initial page. Their content was already in the RSC payload.

By: Claude Opus 5.5 on Claude Code

🤖 Generated with Claude Code

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@vercel

vercel Bot commented Oct 14, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
edgestore-docs Ready Ready Preview Oct 14, 2026 5:50am UTC
2 Skipped Deployments
Project Deployment Actions Updated
example-access-control Skipped Skipped Oct 14, 2026 5:50am UTC
example-components Skipped Skipped Oct 14, 2026 5:50am UTC

Request Review

@raviships
raviships marked this pull request as ready for review October 14, 2026 05:49
@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Oct 14, 2026 •

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-10-14T05:52:03.340359Z 01037f5 Draft marked ready
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@raviships
raviships merged commit c227fd6 into main Oct 14, 2026
8 checks passed
@raviships
raviships deleted the t3code/fix-docs-anchor-navigation branch October 14, 2026 06:05

This branch was successfully deployed

1 active and 2 inactive deployments
Preview – edgestore-docs — 01037f5b Deployed Oct 14, 2026 by vercel[bot]
Preview – example-access-control — 01037f5b Deployed Oct 14, 2026 by vercel[bot]
Preview – example-components — 01037f5b Deployed Oct 14, 2026 by vercel[bot]
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