Add scroll spy functionality to Table of Contents for better navigation

[Nakshatra480]

Summary

Add scroll spy functionality to the Table of Contents (TOC) to highlight the currently visible section dynamically as the user scrolls through the document.

Changes

• Added IntersectionObserver to track visible headings (h1–h4) and update the active section dynamically.
• Updated TableOfContentMarkdown.tsx with minimal modifications and preserved pre existing code structure.
• Compatibility ensured for light and dark themes.
• Minimal impact on existing CSS styles or components.

Linked Issues

Closes #2169.

Testing Plan

1. Run npm run dev and open a page with a TOC.
2. Ensure that as you scroll through the document, the corresponding TOC item gets highlighted.
3. Test both light and dark themes for consistency.
4. Verify proper behavior when clicking on TOC links (navigation and URL hash update).
5. Perform browser compatibility testing (latest versions of Chrome, Firefox, Safari, and Edge).

Checklist

• Linked issue included
• No lint or formatting errors
• Built without issues
• No errors in CI checks

[github-actions]

Hi @Nakshatra480! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[github-actions]

Hi @Nakshatra480! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[github-actions]

Hi @Nakshatra480! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[github-actions]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
website	✅ Ready (View Log)	Visit Preview	01cacde

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (974ad0e) to head (01cacde).

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #2190   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           30        30           
  Lines          640       640           
  Branches       198       198           
=========================================
  Hits           640       640           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

Hi @Nakshatra480! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[github-actions]

Hi @Nakshatra480! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[github-actions]

Hi @Nakshatra480! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[github-actions]

Hi @Nakshatra480! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[Nakshatra480]

Hi @AgniveshChaubey @Utkarsh-123github PR is ready, pls review it and give feedback thanks

[AgniveshChaubey]

I still can’t see the highlight effect on the heading in the TOC on the right side.

[github-actions]

Hi @Nakshatra480! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[github-actions]

Hi @Nakshatra480! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[github-actions]

Hi @Nakshatra480! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[github-actions]

Hi @Nakshatra480! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[github-actions]

Hi @Nakshatra480! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[github-actions]

Hi @Nakshatra480! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[github-actions]

Hi @Nakshatra480! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[github-actions]

Hi @Nakshatra480! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[github-actions]

Hi @Nakshatra480! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[github-actions]

Hi @Nakshatra480! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[github-actions]

Hi @Nakshatra480! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[Nakshatra480]

@AgniveshChaubey i have updated the code structure of the TableOfContentMarkdown.tsx file, now you can review the PR thanks for your feedback

[Nakshatra480]

ping @AgniveshChaubey

[AgniveshChaubey]

I still can't see any highlights in the TOC on the right-hand side. Hane you tested the functionality locally? Can you please share a demo video?