Skip to content

Fix: highlight a TOC link entry when on the page or section it points to (RND-11155) - #4476

Open
zenoachtig wants to merge 2 commits into
mainfrom
zeno/rnd-11155-toc-link-active-highlight
Open

Fix: highlight a TOC link entry when on the page or section it points to (RND-11155)#4476
zenoachtig wants to merge 2 commits into
mainfrom
zeno/rnd-11155-toc-link-active-highlight

Conversation

@zenoachtig

@zenoachtig zenoachtig commented Aug 7, 2026

Copy link
Copy Markdown
Contributor

Overview

In a published site's table of contents, an entry of type link was never highlighted as active, even when the reader was on the exact page it points to. Page entries (document) compute their active state client-side from pathnames vs. useCurrentPagePath(); link entries were rendered as a plain Link with no active logic and no pathnames in their encoded payload.

  • Adds optional pathnames and anchor to ClientTOCPageLink, populated in encodeClientTableOfContents when a link resolves to a page in the current space. Uses the same getSiteSpacePagePaths helper page entries use, so the two stay consistent.
  • Makes PageLinkItem compute isActive and apply the same data-active / aria-current="page" / ToCLinkItemActiveStyles treatment as page entries.
  • Covers links to a section of a page (kind: 'anchor'), not just whole-page links — these highlight only while the reader is at that section, matched on the current hash. A page commonly has several sibling links into different sections of it; without the hash condition all of them would light up at once.
  • Cross-space links and external URLs never highlight (resolved.space?.id === context.space.id).

Repro: https://gitbook.com/docs/~/changes/1288/create-content/formatting/inline#buttons — the "Buttons" entry under "Blocks" points at a section of Inline content, and now highlights alongside the Inline content page entry.

Testing

Verified against the repro URL on a local dev server. The encoded payload for the "Buttons" entry now carries its target:

"title":"Buttons","target":{"kind":"anchor","anchor":"buttons","page":"DfnNkU49..."},
"pathnames":["create-content/formatting/inline"],"anchor":"buttons","type":"link"

At #buttons, computed styles on the sidebar entries:

Entry data-active color weight ::before bar
Inline content (page) true rgb(254,85,27) 600 primary
Buttons (section link) true rgb(254,85,27) 600 primary
Icons (section link, same page) false tint 400 none
Custom blocks (cross-space link) false tint 400 none

Clicking "Icons" moves the highlight to Icons and leaves Inline content active.

Known limitation, inherited from the existing useHash: it updates on link clicks and on mount, not on browser back/forward, so a back-button hash change doesn't move the highlight until the next navigation. This is shared with the hook's other consumers rather than introduced here.

No automated test added: this is client-side rendering/navigation behavior driven by Next.js routing params, better covered by a Playwright test than a mocked unit test. Flagging it as a deliberate gap.

Commands run: bun run lint, bunx oxfmt --check, bun run typecheck (2 pre-existing errors on main, none added). The same computed-style checks were re-run against the deployed preview build and match.

Demo

Preview build, with "Blocks" expanded in the sidebar: https://5d59f165-gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/~/changes/1288/create-content/formatting/inline#buttons

Sidebar at .../create-content/formatting/inline#buttons — "Buttons" highlighted alongside "Inline content":

Same sidebar after clicking "Icons" — highlight moves, "Inline content" stays active:

Changelog

  • [Fix] Highlight a table-of-contents link entry as active when it points to the page — or the section of a page — you are currently viewing.

— Authored by Claude

@changeset-bot

changeset-bot Bot commented Aug 7, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 5b4f17b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
gitbook Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@linear-code

linear-code Bot commented Aug 7, 2026

Copy link
Copy Markdown

RND-11155

@argos-ci

argos-ci Bot commented Aug 7, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build Status Details Updated (UTC)
customers-v2-cloudflare (Inspect) ✅ No changes detected - Aug 18, 2026, 12:37 PM
customers-v2-vercel (Inspect) ✅ No changes detected 3 ignored Aug 18, 2026, 12:36 PM
v2-cloudflare (Inspect) 👍 Approved by Zeno Kapitein 4 changed Aug 18, 2026, 12:39 PM
v2-vercel (Inspect) 👍 Approved by Zeno Kapitein 1 changed, 2 ignored Aug 18, 2026, 12:38 PM

zenoachtig and others added 2 commits August 18, 2026 14:05
A table-of-contents entry of type "link" that resolves to a page in the
current space now computes its active state the same way page entries do,
comparing the target page's paths against the current page path.

Links pointing to a section of a page also highlight, but only while the
reader is at that section, so sibling links to other sections of the same
page don't all light up together. Cross-space and external targets are
still excluded.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@zenoachtig
zenoachtig force-pushed the zeno/rnd-11155-toc-link-active-highlight branch from a9bdbd8 to 5b4f17b Compare August 18, 2026 12:28
@zenoachtig zenoachtig changed the title Fix: highlight TOC link entry when on the page it points to (RND-11155) Fix: highlight a TOC link entry when on the page or section it points to (RND-11155) Aug 18, 2026
@github-actions

Copy link
Copy Markdown
Contributor

Style invalidation on a large API reference

Elements restyled by opening one popup on the Snyk API reference. A share near or above 100% means the insertion restyles the whole document.

interaction restyled page share budget
openapi-select 577 10,854 5.3% 25%
search 1,081 10,854 10.0% 125%

@zenoachtig
zenoachtig marked this pull request as ready for review August 18, 2026 13:36

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 5b4f17bff4

ℹ️ 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".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread .changeset/toc-link-active-highlight.md
@zenoachtig
zenoachtig requested a review from gregberge August 18, 2026 13:55
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