Add Toc, Search box, Dark mode scrollbar

[woeoio]

Commit Number	Component / Feature	Description
1, 2	In-page Navigation Bar	Implementation and styling of the in-page navigation bar component.
3, 4, 5	Search Box	Development, refinement, and integration of the search box feature.
6	Dark Mode Scrollbar Optimization	Improved global scrollbar styling for dark mode across the site.

Add Floating Table of Contents (TOC) for Documentation Pages 📑

Summary ✨

This PR adds a VitePress-style floating table of contents to automatically generate navigation links from page headings (H2-H4). The TOC appears on the right side of content pages and supports scroll highlighting. 🎯

Features 🚀

• Auto-generated TOC ⚡: Automatically scans page content and creates navigation links from H2, H3, and H4 headings
• Fixed positioning 📍: TOC stays fixed on the right side while scrolling
• Scroll highlighting 👁️: Current heading is highlighted in the TOC as user scrolls through the page
• Responsive design 📱: Automatically hides on screens smaller than 1280px
• Dark mode support 🌙: TOC colors adapt to light/dark theme automatically
• Smooth scrolling 🎢: Anchor links scroll smoothly to target headings

Changes 📝

1. _config.yml ⚙️

   • Enabled heading anchors (heading_anchors: true) for native anchor link support

2. assets/js/toc.js 🆕

   • JavaScript module to generate TOC from page headings
   • Implements scroll spy using IntersectionObserver API
   • Automatically assigns IDs to headings without IDs

3. _sass/custom/custom.scss 🎨

   • Added TOC styles with fixed positioning
   • Light and dark theme color schemes
   • Responsive breakpoint for mobile devices

4. _includes/head_custom.html 🔗

   • Added script tag to load toc.js

Technical Details 🔧

• Uses IntersectionObserver for performant scroll tracking
• TOC is only generated for pages with 2+ headings
• Supports nested heading hierarchy (H2 → H3 → H4)
• No page configuration required - works automatically ✨

Testing ✅

• Verify TOC appears on pages with multiple headings
• Test scroll highlighting behavior
• Verify dark mode theme switching 🌙
• Test responsive behavior on different screen sizes 📱

[woeoio]

[woeoio]

Multi-level directory effect

[woeoio]

🎉 PR: Add VitePress-style Search Modal & Fix Dark Mode Bug

✨ Features

• 🔍 Compact Search Button - Replaces the large search input with a sleek button icon
• 🪟 Modal Overlay - Opens search in a centered modal with semi-transparent backdrop
• ⌨️ Keyboard Shortcuts
  • Press Cmd/Ctrl + K to open search instantly
  • Press Esc to close
• 🌙 Dark Mode Support - Full compatibility with dark theme
• 📱 Responsive Design - Works seamlessly on mobile and desktop

🐛 Bug Fixes

• 🔧 Fixed Dark Mode Search Results - Resolved the issue where search results list was not visible in dark mode due to background color conflicts with the original Just the Docs theme

🔧 Technical Changes

• New File: docs/assets/js/search-modal.js - Modal logic and keyboard handling
• Modified: docs/_sass/custom/custom.scss - Styling for modal, button, and dark mode overrides
• Modified: docs/_includes/head_custom.html - Include search modal script

🎨 Design Highlights

• Native Just the Docs search component moved into modal
• Clean VitePress-inspired UI
• Smooth animations and transitions
• Fixed search icon (no animation)
• Proper dark mode contrast for all search elements

🌐 Browser Compatibility

• Works in Chrome, Firefox, Safari, and Edge
• Handles browser shortcut conflicts gracefully

---

Ready to merge! 🚀

[woeoio]

bandicam.2026-02-16.16-56-48-428.mp4

[woeoio]

🎨 Add dark mode scrollbar styling

• 🌙 Implemented dark-themed scrollbars for WebKit browsers (Chrome/Safari/Edge)
• 🦊 Added Firefox scrollbar support with @supports feature query
• ✅ Resolved CSS compatibility lint warnings

Preview: Scrollbars now match the dark mode theme with subtle gray tones (#404040 thumb, #1a1a1a track)

[woeoio]

[KubaO]

Commit #6 has been merged and deployed. Thank you for your work.

Could you please split the rest of the work into two PRs:

1. TOC sidebar
2. Search box

Then, for the TOC sidebar, please use jekyll-toc to generate the TOC during rendering and not using JavaScript. For both accessibility and performance reasons, I'd like to keep runtime JS to a minimum when there's no other way of doing it.

I have not looked at the search box code yet. It looks reasonable, but I'll have to spend an hour or two to understand exactly how it works.

[woeoio]

Commit #6 has been merged and deployed. Thank you for your work.

Could you please split the rest of the work into two PRs:

1. TOC sidebar
2. Search box

Then, for the TOC sidebar, please use jekyll-toc to generate the TOC during rendering and not using JavaScript. For both accessibility and performance reasons, I'd like to keep runtime JS to a minimum when there's no other way of doing it.

I have not looked at the search box code yet. It looks reasonable, but I'll have to spend an hour or two to understand exactly how it works.

Ok. I'll reply after handling it later to minimize the review time as much as possible and explain in detail how the book works