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]