Influxdata
/
docs-v2
mirror of https://github.com/influxdata/docs-v2.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(api): add scroll highlighting to server-rendered TOC 

The server-rendered TOC path returned early without setting up the
IntersectionObserver, so the is-active class was never applied to
TOC links during scroll. Extract entry IDs from pre-rendered links
and pass them to setupScrollHighlighting.
docs-v2-pr6622
Jason Stirnaman 2026-03-06 16:18:11 -06:00
parent fc1f93680b
commit 00f0578677
1 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
assets/js/components/api-toc.ts
View File

@ -377,9 +377,27 @@ export default function ApiToc({ component }: ComponentOptions): void {
const hasServerRenderedToc = nav.querySelectorAll('.api-toc-link').length > 0;
if (hasServerRenderedToc) {
// Server-side TOC exists - just show it and set up navigation
// Server-side TOC exists - show it, set up navigation and scroll highlighting
component.classList.remove('is-hidden');
setupSmoothScroll(component);
// Extract entries from pre-rendered links for scroll highlighting
const preRenderedLinks =
nav.querySelectorAll<HTMLAnchorElement>('.api-toc-link');
const preRenderedEntries: TocEntry[] = [];
preRenderedLinks.forEach((link) => {
const href = link.getAttribute('href');
if (href?.startsWith('#')) {
preRenderedEntries.push({
id: href.slice(1),
text: link.textContent?.trim() || '',
level: 2,
});
}
});
if (preRenderedEntries.length > 0) {
setupScrollHighlighting(component, preRenderedEntries);
}
return;
}