export default function Toc({hast}) { const setHeadingOffset = () => { if (headings.length > 0) { headings.map((heading) => { const bodyRect = document.body.getBoundingClientRect(); const elemRect = document.getElementById(heading.link).getBoundingClientRect(); let offset = elemRect.top - bodyRect.top; // console.log('Element is ' + offset + ' vertical pixels from '); heading.offset = offset; }); } }; const handleScroll = () => { const currentPosition = document.documentElement.scrollTop; if (headings.length > 0) { headings.map((heading) => { [].forEach.call(document.getElementsByClassName('toc-' + heading.link), function(el) { // el.style.fontSize = '12px'; if (currentPosition < heading.offset && currentPosition + window.innerHeight > heading.offset ) { // console.log(heading.link, currentPosition, heading.offset, window.innerHeight); // el.style.fontSize = '24px'; } }); }); } }; const handleDOMContentLoaded = () => { setHeadingOffset(); }; const handleRouteChange = (url, { shallow }) => { setHeadingOffset(); }; const router = useRouter(); useEffect(() => { document.addEventListener('scroll', handleScroll); document.addEventListener('DOMContentLoaded', handleDOMContentLoaded); router.events.on('routeChangeComplete', handleRouteChange); return () => { document.removeEventListener('scroll', handleScroll); document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded); router.events.off('routeChangeComplete', handleRouteChange); }; }); return ( <> { headings.length > 0 ? (

) : null } { headings.length > 0 ? (

{ heading.text }

) : null } ); }

Table of Contents

Scroll Event Listener

Table of Contents