docinfo-footer.html

<div id="footer">
    <div id="footer-text">
    Zuletzt geändert: {docdatetime}
    &nbsp;|&nbsp;
    Icons von <a href="https://www.flaticon.com/free-icons/edit" title="edit icons">Freepik - Flaticon</a>
     | <a href="https://github.com/ideadapt/programmieren-lernen-mit-javascript" title="GitHub Repository">Source Code</a>
     | Lizenziert als <a href="https://www.tldrlegal.com/l/gpl-3.0">GPL-3.0</a>
    </div>
</div>

<script src="//julesfouchy.github.io/p5.js-widget/p5-widget.js" defer></script>

<script defer>
    const isInViewport = (rect) => rect.top >= 0 && rect.bottom <= window.innerHeight

    function debounce(func, timeout = 300){
        let timer;
        return (...args) => {
            clearTimeout(timer)
            timer = setTimeout(() => { func.apply(this, args); }, timeout)
        }
    }

    window.addEventListener('load', () => {
        const hs = [...document.querySelectorAll('#content h1, #content h2, #content h3,  #content h4')]
        const refs = new Map([...document.querySelectorAll('#toc [href]')].map(a => [a.getAttribute('href').substring(1), a]))
        const refAs = [...refs.values()]

        document.addEventListener('scroll', debounce(() => {
            refAs.forEach(a => a.classList.remove('in-view'))
            const h = hs.find(r => isInViewport(r.getBoundingClientRect()))

            if(h){
                refs.get(h.getAttribute('id')).classList.add('in-view')
            }
        }, 200))
    })
</script>