function toc(selector = "h1,h2,h3", heading = "<b>Table of Contents</b>") {
return Generators.observe((notify) => {
let headings = [];
function observed() {
const h = Array.from(document.querySelectorAll(selector));
if (h.length !== headings.length || h.some((h, i) => headings[i] !== h)) {
notify(
html`${heading}<ul>${Array.from((headings = h), (h) => {
return Object.assign(
html`<li><a href=#${h.id}>${DOM.text(h.textContent)}`,
{ onclick: (e) => (e.preventDefault(), h.scrollIntoView()) }
);
})}`
);
}
}
const observer = new MutationObserver(observed);
observer.observe(document.body, { childList: true, subtree: true });
observed();
return () => observer.disconnect();
});
}