sitic/templates/core/tableOfContentsHeader.html

Generate static sites using Markdown and YAML. Straightforward, zero-complexity. Complete toolkit for landing pages, blogs, documentation, admin dashboards, and more.git remote add origin git@github.com:yuusoft-org/sitic.git

<script defer>
  document.addEventListener('DOMContentLoaded', function() {
    // Find the content container (middle column with flex="1")
    const contentContainer = document.querySelector('rtgl-view[flex="1"][sv]');
    
    // Get all headings with IDs and TOC links
    const headings = document.querySelectorAll('rtgl-text[id]');
    const tocLinks = document.querySelectorAll('rtgl-view[g="m"] a');
    
    const headingElements = Array.from(headings);
    let lastHeadingId = null;
    
    function updateTableOfContents(currentId) {
      // Update styling for all TOC items
      tocLinks.forEach(link => {
        const href = link.getAttribute('href');
        const linkedId = href ? href.replace('#', '') : null;
        const textElement = link.closest('rtgl-text');
        
        if (textElement) {
          if (linkedId === currentId) {
            textElement.setAttribute('s', 'bs');
            textElement.style.textDecoration = 'underline';
          } else {
            textElement.setAttribute('s', 'bs');
            textElement.style.textDecoration = 'none';
          }
        }
      });
    }
    
    function checkCurrentHeading() {
      // Find the heading that's currently in view or most recently passed
      let currentHeadingId = null;
      let closestTopPosition = -Infinity;
      
      headingElements.forEach(heading => {
        const rect = heading.getBoundingClientRect();
        
        // Track the heading closest to the top but still above it
        if (rect.top <= 100) {
          if (rect.top > closestTopPosition) {
            closestTopPosition = rect.top;
            currentHeadingId = heading.id;
          }
        }
      });
      
      // Only update when the heading changes
      if (currentHeadingId && currentHeadingId !== lastHeadingId) {
        lastHeadingId = currentHeadingId;
        updateTableOfContents(currentHeadingId);
      }
    }
    
    // Add scroll listener to the content container
    if (contentContainer) {
      contentContainer.addEventListener('scroll', checkCurrentHeading, { passive: true });
    }
    
    // Fallback to window scroll listener
    window.addEventListener('scroll', checkCurrentHeading, { passive: true });
    
    // Initial check
    setTimeout(checkCurrentHeading, 500);
  });
</script>