https://www.mikechambers.com/blog/js/toc.js

1const details = document.querySelector("#toc-details");
2
3function clickToc() {
4    switch (details.style.display) {
5        case 'none':
6            details.style.display = 'block';
7            setTimeout(() =>
8                document.body.addEventListener('click', closeToc), 1);
9            break;
10        case 'block':
11            details.style.display = 'none';
12            break;
13    }
14}
15
16function openToc() {
17    details.style.display = 'block';
18}
19
20function closeToc() {
21    details.style.display = 'none';
22    document.body.removeEventListener('click', closeToc);
23}
24
25function getToc() {
26    const hs = document.querySelector('.markdown-body').querySelectorAll('h1, h2, h3, h4, h5, h6');
27    const toc_list = document.querySelector("#toc-list");
28    for (const h of hs) {
29        const size = Number(h.tagName.toLowerCase().replace('h', ''));
30        const a = document.createElement('a');
31        a.classList.add("filter-item", "SelectMenu-item", "ws-normal", "wb-break-word", "line-clamp-2", "py-1", "toc-item");
32        a.href = `#${h.id}`;
33        a.innerText = h.innerText;
34        a.style.paddingLeft = `${size * 12}px`;
35        toc_list.appendChild(a);
36    }
37}
38
39
40// TODO: highlight on scroll
41(() => {
42    getToc();
43})();