28:null 29:["$","title",null,{"children":"Numbered Notes | John Cayley | Observable"}] 2e:Tdb1,function nbs( selector = "[data-nb]", heading = "

Notes

", root = document.body ) { function toHTML(str) { const strings = [str]; strings.raw = strings; return html(strings); } function byId(id) { // root.querySelector requires escaping ids that aren't valid CSS // identifiers on their own (e.g. purely numeric ids like "1"). return root.querySelector(`#${CSS.escape(id)}`); } return Generators.observe((notify) => { // `headings` starts as `undefined` (rather than `[]`) so that the // very first call to observed() is guaranteed to call notify(), even // when zero matching headings are found. Without this, if `selector` // never matches anything, `h.length !== headings.length` would be // `0 !== 0` (false) and `h.some(...)` over an empty array is also // false, so notify() would never be called and the returned generator // would never produce a value — hanging any code awaiting its first // result (e.g. `view(nbs())` or `Generators.observe` consumers). let headings; function observed() { let nbNum = 0; const h = Array.from(root.querySelectorAll(selector)); if ( headings === undefined || h.length !== headings.length || h.some((h, i) => headings[i] !== h) ) { notify( html`${toHTML(heading)}

${Array.from((headings = h), (h) => { h.innerHTML = `[${++nbNum}]`; h.onclick = (e) => { e.preventDefault(); hashLinkCheck(e.target.href); }; let atag = Object.assign(html`${nbNum}.`, { onclick: (e) => (e.preventDefault(), h.scrollIntoView()) }); const content = byId(h.dataset.nb); // content.innerHTML is a *string* of already-serialized HTML // (e.g. produced by rendering Markdown). Interpolating a plain // string into an `html` template literal escapes it as text, // so without toHTML() the note's markup would show up as // literal "

...

" text instead of being rendered. Wrap it // with toHTML() so it's treated as trusted HTML and parsed // into real elements, matching the old Observable behavior. return html`

${atag} ${ content ? toHTML(content.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 = byId(hashLink.substring(hashLink.indexOf("#") + 1)); if (div) { div.scrollIntoView(); clearInterval(hashLinkChecker); } if (++hashLinkChecks >= checksLimit && !div) clearInterval(hashLinkChecker); // console.log(hashLinkChecks); // DEBUG }, 100); } // <<< const observer = new MutationObserver(observed); observer.observe(root, { childList: true, subtree: true }); observed(); return () => observer.disconnect(); }); }2f:[] 2c:{"id":"d2cec17d085151ca","slug":"numbered-notes","title":"Numbered Notes","thumbnail":"62eda9009f51559db080abecc2d4426de404cbdd426316096215eb0413163372","access_level":"public","create_time":"$D2026-09-15T20:19:25.926Z","update_time":"$D2026-09-15T20:48:22.949Z","view_time":null,"first_public_time":"$D2026-09-15T20:53:21.947Z","has_unpublished_edits":null,"fork":{"id":"08b64bc61cbf8977","slug":"inapm0_shared","title":"Shared Components","owner":{"id":"8cad4906c41da0ef","login":"shadoof","name":"John Cayley"}},"stars":0,"starred":false,"owner":{"type":"team","id":"8cad4906c41da0ef","login":"shadoof","name":"John Cayley","avatar_url":"https://avatars-next.observableusercontent.com/d4a045c1060f722297a6047ffa90d6cd33806f54fcaa444ac3f1882c0fd4ee4f","tier":"pro_2024"},"version":267,"publish_version":267,"role":null,"authored":false,"authors":[{"type":"individual","id":"5c3cbd6193f712f7","login":"shadoof","name":"John Cayley","avatar_url":"https://avatars-next.observableusercontent.com/d4a045c1060f722297a6047ffa90d6cd33806f54fcaa444ac3f1882c0fd4ee4f","tier":null}],"members":[{"type":"team","id":"8cad4906c41da0ef","login":"shadoof","name":"John Cayley","avatar_url":"https://avatars-next.observableusercontent.com/d4a045c1060f722297a6047ffa90d6cd33806f54fcaa444ac3f1882c0fd4ee4f","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Numbered Notes","cells":[{"id":0,"value":"# Numbered Notes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"---\nBased on Mike Bostock’s ***toc*** this `nbs()` function allows you to draft notes in a Markdown cell and, using relatively simple conventions, generate numbered notes with two-way links from your main text Markdown.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"---\nThis is another separate Markdown cell with more text in it and a third note for a bit more demonstration of what is possible.\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"const { value: nbsNotes } = await nbs().next();\ndisplay(nbsNotes);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"#### *Note Drafts:*\n

\n\nMike Bostock’s [toc notebook](https://observablehq.com/@mbostock/toc).\n\nThis is just the text of a second note.\n\nYes, this the text of the third note.\n\n

","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"$2e","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"function toHTML(str) {\n const strings = [str];\n strings.raw = strings;\n return html(strings);\n}","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"2","titling":"auto"}} 2d:"$2c:body"