3f:null 40:["$","title",null,{"children":"Indented ToC | Libraries and Functions | Observable"}] 46:Td65,function toc(options = {}) { if (typeof options === "string") { options = { headers: options }; } const { headers = "h1,h2,h3", hideStartingFrom = null, title = "Table of Contents", skip = [] } = options; // Allow skip to be specified as a string or an array const skipArr = typeof skip === "string" ? [skip] : skip; return Generators.observe((notify) => { let previousHeadings = []; let renderedEmptyToC = false; function observed() { const currentHeadings = Array.from( document.querySelectorAll(headers) ).filter((d) => skipArr.indexOf(String(d.textContent)) === -1); // CHeck if there's anything to render if (!currentHeadings.length) { if (!renderedEmptyToC) { notify(html`Unable to generate ToC: no headings found`); renderedEmptyToC = true; } return; } // Check if anything changed from the previous render, and if not, bail if ( currentHeadings.length === previousHeadings.length && !currentHeadings.some((h, i) => previousHeadings[i] !== h) ) { return; } renderedEmptyToC = false; // The start indentation specifies the top-most header tag that will // be "unindented" in the ToC, and is effective the "2" in "h2" let startIndentation = headers .split(",") .map((h) => parseInt(h.replace(/h/g, ""))) .sort()[0]; // The current indentation tracks what level of indentation we're at, // so we can add

and tags as needed to get the ToC to // indend/unindent properly let currentIndentation; previousHeadings = currentHeadings; const entries = []; for (const h of Array.from(previousHeadings)) { if (hideStartingFrom && h.textContent === hideStartingFrom) { break; } let nodeIndentiation = parseInt(h.tagName[1], 10); if (typeof currentIndentation === "undefined") { // Add indentations as needed in case the initial header tag // isn't the top-level specified for this ToC currentIndentation = startIndentation; while (nodeIndentiation > currentIndentation) { currentIndentation++; entries.push("

"); currentIndentation++; } while (currentIndentation > nodeIndentiation) { entries.push("

${DOM.text(h.textContent)}

"); currentIndentation--; } let content; if (title) { content = html`${DOM.text(title)}

${entries}`; } notify(content); } const observer = new MutationObserver(observed); observer.observe(document.body, { childList: true, subtree: true }); observed(); return () => observer.disconnect(); }); }47:[] 44:{"id":"0465b6047a40adcb","slug":"indented-toc","title":"Indented ToC","thumbnail":"7a48c1f0e93c350d668f808bcdac93b8458bf625528084c1831a6b50a3e8537a","access_level":"public","create_time":"$D2023-10-27T07:11:43.885Z","update_time":"$D2023-10-27T07:11:43.885Z","view_time":null,"first_public_time":"$D2023-10-27T07:11:43.885Z","has_unpublished_edits":null,"fork":{"id":"9bed702f80a3797e","slug":"indented-toc","title":"Indented ToC","owner":{"id":"9bf3901b03c0276a","login":"nebrius","name":"Bryan Hughes"}},"stars":0,"starred":false,"owner":{"type":"team","id":"cc62ca71f10761fe","login":"pbiqueryous-repo","name":"Libraries and Functions","avatar_url":"https://avatars-next.observableusercontent.com/3af165f0f88c264d557f44ea2c0bd231e7f3838a766690f9c147869f3f6c2c0d","tier":"starter_2024","bio":"","following":false},"version":402,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"095ccf69e3466ab9","login":"pbi-queryous","name":"PBI Queryous","avatar_url":"https://avatars-next.observableusercontent.com/0e362e0326315a8b72bf30cfe2bf107a47fb597d0f8798eeb7f6330b2bbb725a","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"095ccf69e3466ab9","login":"pbi-queryous","name":"PBI Queryous","avatar_url":"https://avatars-next.observableusercontent.com/0e362e0326315a8b72bf30cfe2bf107a47fb597d0f8798eeb7f6330b2bbb725a","tier":null,"role":"editor"},{"type":"team","id":"cc62ca71f10761fe","login":"pbiqueryous-repo","name":"Libraries and Functions","avatar_url":"https://avatars-next.observableusercontent.com/3af165f0f88c264d557f44ea2c0bd231e7f3838a766690f9c147869f3f6c2c0d","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Indented ToC","cells":[{"id":0,"value":"md`# Indented ToC\n\nThis notebook can generate a Table of Contents (ToC), with indentations, automatically for your notebook.\n\nThanks to @mbostock for creating the original version of the library!\n\n_Note:_ Clicking on links in Safari doesn't work because [scrollIntoView in an iFrame doesn't really work correctly](https://www.javaer101.com/en/article/11885549.html)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"toc({\n headers: \"h2,h3,h4\",\n skip: [\"Implementation\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"md`## Usage`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"md`Import this notebook with:\n\\`\\`\\`js\nimport {toc} from \"@nebrius/indented-toc\"\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"md`### Basic Example\n\nYou can create the table of contents for a notebook with the following call:\n\n\\`\\`\\`JavaScript\ntoc()\n\\`\\`\\`\n\nThis call produces the following ToC for this notebook:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"md`### Customizing Included Header Levels\nIf you don't like which header levels are included in the ToC by default, you can customize which header levels to include:\n\n\\`\\`\\`JavaScript\ntoc(\"h2,h3,h4\")\n\\`\\`\\`\n\nor:\n\n\\`\\`\\`JavaScript\ntoc({\n headers: \"h2,h3,h4\"\n})\n\\`\\`\\`\n\nThis call produces the following ToC for this notebook:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"toc({\n headers: \"h2,h3,h4\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"toc({\n hideStartingFrom: \"Implementation\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"md`### Customizing or Hiding the Title\nIf you would like to change the title, you can change it with:\n\n\\`\\`\\`JavaScript\ntoc({\n title: \"My Table of Contents\"\n})\n\\`\\`\\`\n\nThis call produces the following ToC for this notebook:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"toc({\n title: \"My Table of Contents\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"md`\nYou can also hide the title by passing in \\`null\\` for the title value:\n\n\\`\\`\\`JavaScript\ntoc({\n title: null\n})\n\\`\\`\\`\n\nThis call produces the following ToC for this notebook:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"toc({\n title: null\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"### Skipping a section\nIn some cases, you may want to omit a section (for example, if you use `##` to create a subtitle for your notebook). To skip a section, pass a string or array of strings to be omitted:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":400,"value":"toc({ skip: \"API\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"toc({ skip: [\"API\", \"Usage\"] })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"md`### Bringing it All Together\nAll of the options can be combined together to create a more highly customized ToC\n\n\\`\\`\\`JavaScript\ntoc({\n headers: \"h2,h3,h4\",\n title: \"My ToC\",\n hideStartingFrom: \"Implementation\"\n})\n\\`\\`\\`\n\nThis call produces the following ToC for this notebook:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"toc({\n headers: \"h2,h3,h4\",\n title: \"My ToC\",\n hideStartingFrom: \"Implementation\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"md`## API\n\nThe \\`toc\\` method has the following signature:\n\n\\`\\`\\`TypeScript\nfunction toc(\n options?: string | { headers?: string, title?: string | null, hideStartingFrom?: string }\n): MutationObserver\n\\`\\`\\`\n\nNote: This signature is written using TypeScript syntax.\n\nOptions has the following defaults:\n- headers = \"h1,h2,h3\",\n- hideStartingFrom = null,\n- title = \"Table of Contents\"\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"md`## Hiding an Appendix (deprecated)\n_Suggestion:_ use the \\`skip\\` option above.\n\nIf your notebooks are like mine, you might have a section titled \"appendix,\" \"implementation,\" or similar section to house implementation details. You can hide this section with the following call:\n\n\\`\\`\\`JavaScript\ntoc({\n hideStartingFrom: \"Implementation\"\n})\n\\`\\`\\`\n\nThis call produces the following ToC for this notebook:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 45:"$44:body"