2e:null 2f:["$","title",null,{"children":"Templates: Table of Instructions | Observable | Observable"}] 34:[] 32:{"id":"9e136645a778d57e","slug":"templates-table-of-instructions","title":"Templates: Table of Instructions","thumbnail":"833479718d0a2de55caf1e1f31bb11bd610266252de1c78680668a1395e5acdb","access_level":"public","create_time":"$D2021-05-21T03:51:22.563Z","update_time":"$D2023-06-12T10:20:20.418Z","view_time":null,"first_public_time":"$D2021-05-25T14:44:05.791Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":56,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null}],"members":[{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"editor"},{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"35f0e07bd0edcdd8","slug":"templates-components","title":"Template Components","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Templates: Table of Instructions","cells":[{"id":0,"value":"# Templates: Table of Instructions\n\n${toc(instructions)}\n\nThis sidebar goes at the top of a template to link to more detailed instructions below. It’s passed a DOM node that contains an `

` tag representing the start of the instructional section. It lists the `

`’s title in bold, followed by each `

` until the next `

` (often an Appendix). Finally, it has a “details…” link that assumes the instructional cell is named `instructions`.\n\nYou can see an example below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"instructions = md`---\n## How to add instructions\n### 1. Import the function\n### 2. Write your instructions\n### 3. Call the function`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"The table is hidden if the window is too narrow to contain both a standard 640px paragraph and the 200px sidebar.\n\nThis is not a general-purpose table of contents; it is an overfit solution for autogenerating a very specific design used on certain notebooks in Observable’s collection of first-party [Templates](https://observablehq.com/templates). For a more general solution, see Mike Bostock’s [TOC](https://observablehq.com/@mbostock/toc) or one of its forks.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"toc = instructions => {\n const tocWidth = 200;\n const paragraphWidth = 640;\n if (width < paragraphWidth + tocWidth) return \"\";\n const instructionsTitle = instructions.querySelector(\"h2\").innerText;\n const headers = Array.from(document.querySelectorAll(\"h2, h3\")).map(d => [d.tagName, d.innerText])\n const start = headers.indexOf(headers.find(d => d[1] === instructionsTitle))\n const end = headers.indexOf(headers.find((d, i) => d[0] === \"H2\" && i > start))\n const subheds = headers.slice(start + 1, end !== -1 ? end : undefined)\n return htl.html`
\n ${instructionsTitle}\n ${subheds.map(d => htl.html`
${d[1]}
`)}\n
details…
\n
`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"