31:[] 2f:{"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"},{"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"},{"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"},{"id":36,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"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"}],"files":"$W31","stdlib":"1","titling":"auto"}