Fix: highlight the elements in table of contents on the right side of the documentation page with scroll

[codeEvolveZenith345]

• What is the improvement or update?

The documentation table of contents (ToC) now highlights the current section as users scroll through the page, providing better navigation feedback on long documentation pages.

• Please check if the PR fulfills these requirements

• The commit message follows our guidelines

• What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)

/kind bug
/kind feature

• What this PR does / why we need it:

This PR implements scroll-spy functionality for the documentation ToC using the Intersection Observer API. Currently, the ToC remains static while scrolling, making it difficult for users to track their position in long documents. This enhancement automatically highlights the visible section in the ToC as users scroll.

Implementation:

• Added JavaScript for scroll tracking with IntersectionObserver
• Added CSS styling for active ToC links with theme colors
• Added ID attributes to enable JS targeting
• Includes smooth scrolling, dark mode support, and aria-current for accessibility

Files changed: 4 files, 1 new file 3 modified

• Which issue(s) this PR fixes:

Fixes #473

Before(Bugged)

scrollhighbefore.mp4

After (Fixed)

scrollHighlightAfter.mp4

[gemini-code-assist]

Summary of Changes

Hello @codeEvolveZenith345, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the user experience for documentation pages by introducing dynamic highlighting in the Table of Contents. As users scroll through a document, the corresponding section in the ToC will now automatically become active, making it much easier to track their position and navigate long articles. This change addresses a previous limitation where the ToC remained static, improving overall usability and accessibility.

Highlights

• Scroll-Spy Functionality: Implemented scroll-spy for the documentation Table of Contents (ToC) using the Intersection Observer API, which dynamically highlights the current section as the user scrolls through the page.
• Styling for Active ToC Links: Added new CSS rules to assets/css/custom.css to provide visual feedback for active ToC links, including distinct styling for both light and dark modes.
• New JavaScript Module: Introduced a new JavaScript file, assets/js/toc-scrollspy.js, which contains the core logic for tracking heading visibility and updating the active ToC link.
• Enhanced ToC Navigation: Improved ToC link clicks to include smooth scrolling behavior that correctly accounts for the fixed navigation bar, ensuring a better user experience.
• Accessibility and Integration: Added aria-current attribute for accessibility and integrated the new JavaScript file by updating config/_default/params.toml and adding id attributes to relevant HTML elements in docs_layout.html.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• assets/css/custom.css
  • Added new CSS rules for .toc-link-active to style the currently active Table of Contents link, including color, font-weight, border-left, and background-color.
  • Included specific styles for dark mode (.dark #TableOfContents a.toc-link-active) to ensure proper visibility.
• assets/js/toc-scrollspy.js
  • Added a new JavaScript file containing the scroll-spy logic.
  • Utilizes IntersectionObserver to detect visible headings and update the active state of ToC links.
  • Includes logic for smooth scrolling when ToC links are clicked, adjusting for fixed navigation bars.
  • Implements progressive enhancement, only running if IntersectionObserver is supported.
• config/_default/params.toml
  • Updated the plugins_js array to include the newly added toc-scrollspy JavaScript file, ensuring it is loaded on relevant pages.
• themes/academic/layouts/partials/docs_layout.html
  • Added id="docs-toc" to the main Table of Contents container (<div class="d-none d-xl-block col-xl-2 docs-toc">) to allow JavaScript targeting.
  • Added id="docs-content" to the main documentation content area (<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 docs-content" role="main">) for JavaScript targeting.

Activity

• The pull request was opened by codeEvolveZenith345.
• It introduces a new feature and fixes an existing bug related to documentation navigation.
• The author provided 'Before' and 'After' videos demonstrating the change.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a scroll-spy feature for the documentation's table of contents, which is a great enhancement for user navigation on long pages. The implementation using IntersectionObserver is modern and efficient. The code is well-structured, but I've identified several opportunities to modernize the JavaScript syntax to ES6+ standards. My suggestions focus on using const/let instead of var, adopting arrow functions, and using modern array methods. I've also pointed out some "magic numbers" that could be extracted into constants for better readability and maintainability. These changes will improve the overall quality and future-proofing of the new script.

[codeEvolveZenith345]

/cc @Arhell Please review it.

[JesseStutler]

/approve
/lgtm

[volcano-sh-bot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: JesseStutler

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• OWNERS [JesseStutler]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment