{"id":16788734,"url":"https://github.com/markmead/js-table-of-content","last_synced_at":"2025-04-10T23:25:09.941Z","repository":{"id":243356990,"uuid":"811851413","full_name":"markmead/js-table-of-content","owner":"markmead","description":"Generate a table of content from headings within an element 📖","archived":false,"fork":false,"pushed_at":"2025-03-07T08:13:17.000Z","size":26,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-24T20:12:29.301Z","etag":null,"topics":["table-of-contents","toc","toc-generator"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/markmead.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-07T12:37:50.000Z","updated_at":"2025-03-07T08:13:19.000Z","dependencies_parsed_at":"2024-06-08T09:54:06.122Z","dependency_job_id":"a25cfc84-c747-4222-aa88-81faeab9f266","html_url":"https://github.com/markmead/js-table-of-content","commit_stats":null,"previous_names":["markmead/js-table-of-content"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Fjs-table-of-content","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Fjs-table-of-content/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Fjs-table-of-content/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Fjs-table-of-content/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markmead","download_url":"https://codeload.github.com/markmead/js-table-of-content/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248313644,"owners_count":21082891,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["table-of-contents","toc","toc-generator"],"created_at":"2024-10-13T08:24:33.161Z","updated_at":"2025-04-10T23:25:09.921Z","avatar_url":"https://github.com/markmead.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Table of Content\n\nGet the headings from an article and generate the HTML for the table of content.\n\nSee it in action on the [HyperUI blog](https://www.hyperui.dev/blog).\n\n## Install\n\n### With a CDN\n\n```html\n\u003cscript\n  defer\n  src=\"https://unpkg.com/data-table-of-content@latest/dist/headings.min.js\"\n\u003e\u003c/script\u003e\n```\n\n### With a Package Manager\n\n```shell\nyarn add -D data-table-of-content\n\nnpm install -D data-table-of-content\n```\n\n```js\nimport { getArticleHeadings, buildArticleHeadings } from 'data-table-of-content'\n\ndocument.addEventListener('DOMContentLoaded', () =\u003e {\n  // What we can get back from the method\n  const { articleEl, articleHeadings } = getArticleHeadings()\n\n  // How we build the HTML\n  buildArticleHeadings(articleHeadings)\n})\n```\n\n### `articleEl`\n\nReturns the element with the `data-article` attribute.\n\n### `articleHeadings`\n\nReturns the headings in a nested array for the `data-article` element.\n\n```json\n[\n  {\n    \"headingId\": \"heading-2\",\n    \"textContent\": \"Heading 2\",\n    \"headingChildren\": [\n      {\n        \"headingId\": \"heading-3\",\n        \"textContent\": \"Heading 3\",\n        \"headingChildren\": [\n          {\n            \"headingId\": \"heading-4\",\n            \"textContent\": \"Heading 4\"\n          }\n        ]\n      },\n      {\n        \"headingId\": \"heading-3.1\",\n        \"textContent\": \"Heading 3.1\"\n      }\n    ]\n  },\n  {\n    \"headingId\": \"heading-2.1\",\n    \"textContent\": \"Heading 2.1\"\n  },\n  {\n    \"headingId\": \"heading-2.2\",\n    \"textContent\": \"Heading 2.2\",\n    \"headingChildren\": [\n      {\n        \"headingId\": \"heading-3.2\",\n        \"textContent\": \"Heading 3.2\"\n      }\n    ]\n  }\n]\n```\n\n### `buildArticleHeadings`\n\nThis will take array from `articleHeadings` and create the HTML for the table of\ncontents and insert it into the `data-article-headings` element.\n\n```html\n\u003cdiv data-article-toc\u003e\n  \u003cul\u003e\n    \u003cli\u003e\n      \u003ca href=\"#heading-2\"\u003eHeading 2\u003c/a\u003e\n\n      \u003cul\u003e\n        \u003cli\u003e\n          \u003ca href=\"#heading-3\"\u003eHeading 3\u003c/a\u003e\n\n          \u003cul\u003e\n            \u003cli\u003e\n              \u003ca href=\"#heading-4\"\u003eHeading 4\u003c/a\u003e\n            \u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n\n        \u003cli\u003e\n          \u003ca href=\"#heading-3.1\"\u003eHeading 3.1\u003c/a\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n\n    \u003cli\u003e\n      \u003ca href=\"#heading-2.1\"\u003eHeading 2.1\u003c/a\u003e\n    \u003c/li\u003e\n\n    \u003cli\u003e\n      \u003ca href=\"#heading-2.2\"\u003eHeading 2.2\u003c/a\u003e\n\n      \u003cul\u003e\n        \u003cli\u003e\n          \u003ca href=\"#heading-3.2\"\u003eHeading 3.2\u003c/a\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\n## Example\n\n```html\n\u003cbody\u003e\n  \u003carticle data-article\u003e\n    \u003cdiv data-article-toc\u003e\u003c/div\u003e\n\n    \u003ch1 id=\"heading-1\"\u003eHeading 1\u003c/h1\u003e\n\n    \u003cp\u003e\n      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit, commodi.\n    \u003c/p\u003e\n\n    \u003ch2 id=\"heading-2\"\u003eHeading 2\u003c/h2\u003e\n\n    \u003cp\u003eLorem ipsum dolor sit amet consectetur adipisicing elit.\u003c/p\u003e\n\n    \u003ch3 id=\"heading-3\"\u003eHeading 3\u003c/h3\u003e\n\n    \u003cp\u003eLorem, ipsum dolor.\u003c/p\u003e\n\n    \u003ch4 id=\"heading-4\"\u003eHeading 4\u003c/h4\u003e\n\n    \u003cp\u003e\n      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo sunt alias,\n      possimus mollitia nisi pariatur vero numquam at iure labore! Labore est\n      laudantium nam voluptates laborum, inventore delectus dolore placeat\n      impedit quae?\n    \u003c/p\u003e\n\n    \u003ch3 id=\"heading-3.1\"\u003eHeading 3.1\u003c/h3\u003e\n\n    \u003cp\u003e\n      Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium velit\n      unde, pariatur dolore, eveniet consectetur eligendi tempora dolor nesciunt\n      cumque quis repellendus, voluptate perspiciatis eaque quibusdam?\n    \u003c/p\u003e\n\n    \u003ch2 id=\"heading-2.1\"\u003eHeading 2.1\u003c/h2\u003e\n\n    \u003cp\u003e\n      Lorem ipsum dolor sit amet consectetur adipisicing elit. A, eaque ratione.\n      Mollitia placeat vitae voluptas!\n    \u003c/p\u003e\n\n    \u003ch2 id=\"heading-2.2\"\u003eHeading 2.2\u003c/h2\u003e\n\n    \u003cp\u003e\n      Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique minima\n      harum ipsam!\n    \u003c/p\u003e\n\n    \u003ch3 id=\"heading-3.2\"\u003eHeading 3.2\u003c/h3\u003e\n\n    \u003cp\u003e\n      Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni a est porro\n      facilis nam commodi ullam fugiat? Quisquam reprehenderit incidunt sint ad\n      facilis ducimus est rerum? Non commodi tempore provident.\n    \u003c/p\u003e\n  \u003c/article\u003e\n\n  \u003cscript\u003e\n    document.addEventListener('DOMContentLoaded', () =\u003e {\n      const { articleHeadings } = getArticleHeadings()\n\n      buildArticleHeadings(articleHeadings)\n    })\n  \u003c/script\u003e\n\u003c/body\u003e\n```\n\n## Stats\n\n![](https://img.shields.io/bundlephobia/min/data-table-of-content)\n![](https://img.shields.io/npm/v/data-table-of-content)\n![](https://img.shields.io/npm/dt/data-table-of-content)\n![](https://img.shields.io/github/license/markmead/js-table-of-content)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkmead%2Fjs-table-of-content","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkmead%2Fjs-table-of-content","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkmead%2Fjs-table-of-content/lists"}