Consectetur elit culpa consequat qui tempor in cillum. <span data-nb="itworks"></span> Occaecat minim consequat consectetur ea aliqua mollit sunt. Consequat esse cupidatat incididunt est aliqua ipsum consectetur in ad fugiat anim eu duis. Elit cupidatat aliquip laboris voluptate quis exercitation aliquip elit dolor. <span data-nb="addedthisnotelast"></span>

Pariatur nisi veniam sint Lorem duis in cillum sunt consectetur consequat dolore esse. Officia id nulla culpa aliquip nisi esse consectetur dolore ullamco. Fugiat minim ea dolore elit sint adipisicing ut laboris anim ut aliquip deserunt. Cillum aliquip voluptate enim labore sit nostrud duis. <span data-nb="wrotethisnote2nd"></span>

<div id="nbs" style="display:none">

<!-- Hide Markdown output of this cell which would otherwise be distracting. -->

<div id="firstnote">I wrote this note, early on, for the end of the first paragraph.</div>

<div id="addedthisnotelast">Finally (actually it was thirdly), I wrote this note for the second paragraph. </div>

<div id="wrotethisnote2nd">I wrote this note for the third paragraph shortly after writing the first note.</div>

<div id="itworks"><b>It works!</b></div>

return Generators.observe((notify) => {

let headings = [];

function observed() {

let nbNum = 0;

const h = Array.from(document.querySelectorAll(selector));

if (h.length !== headings.length || h.some((h, i) => headings[i] !== h)) {

notify(

html`${heading}<div>${Array.from((headings = h), (h) => {

h.innerHTML = `<a href="#_${h.dataset.nb}">[${++nbNum}]</a>`;

h.onclick = (e) => {

e.preventDefault();

hashLinkCheck(e.target.href);

};

let atag = Object.assign(html`<a href=#${h.id}>${nbNum}.</a>`, {

onclick: (e) => (e.preventDefault(), h.scrollIntoView())

});

return html`<div id="_${h.dataset.nb}">${atag} ${

? document.getElementById(h.dataset.nb).innerHTML

: ""

})}`

);

}

}

// >>> This little hack ensures the new target divs actually exist when the

// generated html for a note reference is clicked, sending you to its note text.

// This is (currently) required on the Observable platform itself to ensure

// the back and forth links work for the note references and notes.

function hashLinkCheck(hashLink) {

let hashLinkChecks = 0;

const hashLinkChecker = setInterval((checksLimit = 2) => {

let div = document.getElementById(

hashLink.substring(hashLink.indexOf("#") + 1)

);

if (div) {

div.scrollIntoView();

clearInterval(hashLinkChecker);

}

if (++hashLinkChecks >= checksLimit && !div) {

console.log("check #", hashLinkChecks);

clearInterval(hashLinkChecker);

}

}, 100);

}

// <<<

const observer = new MutationObserver(observed);

observer.observe(document.body, { childList: true, subtree: true });

observed();

return () => observer.disconnect();

});