{"id":15390272,"url":"https://github.com/gajus/contents","last_synced_at":"2025-04-04T07:07:38.681Z","repository":{"id":21755209,"uuid":"25077189","full_name":"gajus/contents","owner":"gajus","description":"Table of contents generator.","archived":false,"fork":false,"pushed_at":"2019-07-20T08:36:29.000Z","size":868,"stargazers_count":410,"open_issues_count":10,"forks_count":49,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-03-28T06:07:07.561Z","etag":null,"topics":["javascript","table-of-contents","toc"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gajus.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}},"created_at":"2014-10-11T12:23:38.000Z","updated_at":"2025-03-24T01:48:47.000Z","dependencies_parsed_at":"2022-08-17T19:50:12.190Z","dependency_job_id":null,"html_url":"https://github.com/gajus/contents","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gajus%2Fcontents","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gajus%2Fcontents/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gajus%2Fcontents/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gajus%2Fcontents/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gajus","download_url":"https://codeload.github.com/gajus/contents/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247135144,"owners_count":20889421,"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":["javascript","table-of-contents","toc"],"created_at":"2024-10-01T15:05:11.111Z","updated_at":"2025-04-04T07:07:38.659Z","avatar_url":"https://github.com/gajus.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ca name=\"table-of-contents-toc-generator\"\u003e\u003c/a\u003e\n# Table of Contents (TOC) Generator\n\n[![Travis build status](http://img.shields.io/travis/gajus/contents/master.svg?style=flat-square)](https://travis-ci.org/gajus/contents)\n[![NPM version](http://img.shields.io/npm/v/contents.svg?style=flat-square)](https://www.npmjs.org/package/contents)\n\n\u003c!--\n[![Tweet Button](./.gitdown/tweet-button.png)](https://twitter.com/intent/tweet?text=%23JavaScript%20library%20to%20generate%20table%20of%20contents%20for%20a%20given%20area%20of%20content.\u0026url=https://github.com/gajus/contents\u0026via=kuizinas)\n--\u003e\n\nTable of contents generator.\n\n* [Table of Contents (TOC) Generator](#table-of-contents-toc-generator)\n    * [Usage](#table-of-contents-toc-generator-usage)\n        * [Quick Start](#table-of-contents-toc-generator-usage-quick-start)\n        * [Examples](#table-of-contents-toc-generator-usage-examples)\n    * [Introduction of ES6 in 4.0.0](#table-of-contents-toc-generator-introduction-of-es6-in-4-0-0)\n    * [Similar Libraries](#table-of-contents-toc-generator-similar-libraries)\n        * [Required 3rd Party Libraries](#table-of-contents-toc-generator-similar-libraries-required-3rd-party-libraries)\n        * [Smooth Scrolling](#table-of-contents-toc-generator-similar-libraries-smooth-scrolling)\n        * [Window Resize and `scroll` Event Handling](#table-of-contents-toc-generator-similar-libraries-window-resize-and-scroll-event-handling)\n* [Table of Contents Array](#table-of-contents-array)\n    * [Download](#table-of-contents-array-download)\n    * [Configuration](#table-of-contents-array-configuration)\n    * [Content Indexing](#table-of-contents-array-content-indexing)\n        * [Hierarchy](#table-of-contents-array-content-indexing-hierarchy)\n    * [Linking](#table-of-contents-array-linking)\n        * [Article ID](#table-of-contents-array-linking-article-id)\n    * [Markup](#table-of-contents-array-markup)\n    * [Events](#table-of-contents-array-events)\n\n\n\u003ca name=\"table-of-contents-toc-generator-usage\"\u003e\u003c/a\u003e\n## Usage\n\n\u003ca name=\"table-of-contents-toc-generator-usage-quick-start\"\u003e\u003c/a\u003e\n### Quick Start\n\n```js\nimport Contents from 'contents';\n\n// This example generates a table of contents for all of the headings in the document.\n// Table of contents is an ordered list element.\nconst contents = Contents();\n\n// Append the generated list element (table of contents) to the container.\ndocument.querySelector('#your-table-of-contents-container').appendChild(contents.list());\n\n// Attach event listeners:\ncontents.eventEmitter().on('change', function () {\n  console.log('User has navigated to a new section of the page.');\n});\n\n// The rest of the code illustrates firing \"resize\" event after you have\n// added new content after generating the table of contents.\nconst newHeading = document.createElement('h2');\n\nnewHeading.innerHTML = 'Dynamically generated title';\n\ndocument.body.appendChild(newHeading);\n\n// Firing the \"resize\" event will regenerate the table of contents.\ncontents.eventEmitter().trigger('resize');\n\n```\n\n\u003ca name=\"table-of-contents-toc-generator-usage-examples\"\u003e\u003c/a\u003e\n### Examples\n\n* [Good looking](http://gajus.com/sandbox/contents/examples/good-looking/) example.\n* [Plain](http://gajus.com/sandbox/contents/examples/plain/) table of contents not using jQuery.\n* [Events](http://gajus.com/sandbox/contents/examples/events/) table of contents with all events logged in the `console.log`.\n* [Obtain Generated List Element](http://gajus.com/sandbox/contents/examples/list-element/).\n* [jQuery](http://gajus.com/sandbox/contents/examples/jquery/) table of contents using jQuery.\n* [Smooth scrolling](http://gajus.com/sandbox/contents/examples/smooth-scrolling/) implemented using [jquery-smooth-scroll](https://github.com/kswedberg/jquery-smooth-scroll).\n\nThe code for all of the examples is in the [examples](./examples/) folder.\n\n[Raise an issue](https://github.com/gajus/contents/issues) if you are missing an example.\n\n\u003ca name=\"table-of-contents-toc-generator-introduction-of-es6-in-4-0-0\"\u003e\u003c/a\u003e\n## Introduction of ES6 in 4.0.0\n\n[Similar Libraries](#rimilar-libraries) stats have been generated in 22-Nov-14 08:44:41 UTC. Since then Contents has evolved a lot. The source code is written in ES6 and depends on `babel-core` to run. In projects that already depend on Babel and use webpack to build packages, this is not going to be a problem. Other projects need to consider the relatively heavy weight of the generated package.\n\n\u003ca name=\"table-of-contents-toc-generator-similar-libraries\"\u003e\u003c/a\u003e\n## Similar Libraries\n\n| Feature | [contents](https://github.com/gajus/contents) | [toc](https://github.com/jgallen23/toc) | [jquery.tocify.js](https://github.com/gfranko/jquery.tocify.js) |\n| --- | --- | --- | --- |\n| Markup using nested `\u003col\u003e` | ✓ | - | - |\n| [Smooth scrolling](#smooth-scrolling) | - | ✓ | ✓ |\n| Forward and back button support | ✓ | - | ✓ |\n| [Events](#events) | ✓ | - | - |\n| [Efficient `scroll` event](#window-resize-and-scroll-event-handling) | ✓ | ✓ | heading- |\n| [Reflect `window` resize](#window-resize-and-scroll-event-handling) | ✓ | - | ✓ |\n| [Extract table of contents as an array](#table-of-contents-array) | ✓ | - | - |\n| Overwrite markup and navigation | ✓ | - | - |\n| Can have multiple on a page | ✓ | ✓ | ✓ |\n| [Required 3rd party libraries](#required-3rd-party-libraries) | - | jQuery | jQuery, jQueryUI |\n| Size | \u003c 6.000 kb | 2.581 kb | 7.246 kb |\n| GitHub Stars | 192 | 307 | 435 |\n\nLast updated: Saturday, 22-Nov-14 08:44:41 UTC.\n\n\u003ca name=\"table-of-contents-toc-generator-similar-libraries-required-3rd-party-libraries\"\u003e\u003c/a\u003e\n### Required 3rd Party Libraries\n\nThere are no 3rd party dependencies. jQuery selectors are used in the examples to make it simple for the reader.\n\n\u003ca name=\"table-of-contents-toc-generator-similar-libraries-smooth-scrolling\"\u003e\u003c/a\u003e\n### Smooth Scrolling\n\nYou can implement smooth scrolling using either of the existing libraries. See [Integration Examples](#integration-examples).\n\n\u003ca name=\"table-of-contents-toc-generator-similar-libraries-window-resize-and-scroll-event-handling\"\u003e\u003c/a\u003e\n### Window Resize and \u003ccode\u003escroll\u003c/code\u003e Event Handling\n\nThe library will index `offsetTop` of all articles. This index is used to reflect the [change event](#events). The index is built upon loading the page, and in response to `window.onresize` and [`ready`](#events) events.\n\nReading `offsetTop` causes a [reflow](http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html). Therefore, this should not be done while scrolling.\n\n\u003ca name=\"table-of-contents-array\"\u003e\u003c/a\u003e\n# Table of Contents Array\n\nYou can extract the table of contents as a collection of nested objects representing the table of contents.\n\n```js\n/**\n * @return {array} Array representation of the table of contents.\n */\ncontents.tree();\n```\n\nTree is a collection of nodes:\n\n```js\n[\n  // Node\n  {\n    // Hierarchy level (e.g. h1 = 1)\n    level: 1,\n    // Id derived using articleId() function.\n    id: '',\n    // Name derived using articleName() function.\n    name: '',\n    // The article element.\n    element: null,\n    // Collection of the descendant nodes.\n    descendants: [ /* node */ ]\n  }\n]\n```\n\n\u003ca name=\"table-of-contents-array-download\"\u003e\u003c/a\u003e\n## Download\n\nUsing [NPM](https://www.npmjs.org/):\n\n```sh\nnpm install contents\n\n```\n\n\u003ca name=\"table-of-contents-array-configuration\"\u003e\u003c/a\u003e\n## Configuration\n\n| Name | Type | Description |\n| --- | --- | --- |\n| `articles` | `NodeList`, `jQuery` | (optional) The default behavior is to index all headings (H1-H6) in the document. See [Content Indexing](#content-indexing). |\n| `link` | `function` | (optional) Used to represent article in the table of contents and to setup navigation. See [Linking](#linking). |\n\u003ca name=\"table-of-contents-array-content-indexing\"\u003e\u003c/a\u003e\n## Content Indexing\n\nThe default behavior is to index all headings (H1-H6) in the document.\n\nUse `articles` setting to index content using your own selector:\n\n```js\nContents({\n  articles: document.querySelectorAll('main h2, main h2')\n  // If you are using jQuery\n  // articles: $('main').find('h2, h3').get()\n});\n\n```\n\n\u003ca name=\"table-of-contents-array-content-indexing-hierarchy\"\u003e\u003c/a\u003e\n### Hierarchy\n\n`articles` will be used to make the table of contents. `articles` have level of importance. The level of importance determines list nesting (see [Markup](#markup)). For HTML headings, the level of importance is derived from the tag name (`\u003ch[1-6]\u003e`). To set your own level of importance, use `Contents.level` [dataset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset) property or jQuery data property with the same name, e.g.\n\n```js\n$('main').find('.summary').data('gajus.contents.level', 4);\n\nContents({\n  articles: $('main').find('h1, h2, h3, .summary').get()\n});\n\n```\n\nWhen level of importance cannot be determined, it defaults to 1.\n\n\u003ca name=\"table-of-contents-array-linking\"\u003e\u003c/a\u003e\n## Linking\n\n`link` method is used to represent article in the table of contents and to setup navigation. This method is called once for each article after the list of the table of contents is generated.\n\nThe default implementation:\n\n1. Derives ID from the article\n2. Generates a hyperlink using article ID as the anchor\n3. Appends the URL to the table of contents\n4. Wraps the article node in a self-referencing hyperlink.\n\n```js\n/**\n * This function is called after the table of contents is generated.\n * It is called for each article in the index.\n * Used to represent article in the table of contents and to setup navigation.\n *\n * @param {HTMLElement} guide An element in the table of contents representing an article.\n * @param {HTMLElement} article The represented content element.\n */\nContents.link = (guide, article) =\u003e {\n  const guideLink = document.createElement('a'),\n  const articleLink = document.createElement('a'),\n  const articleName = article.innerText,\n  const articleId = article.id || Contents.id(articleName);\n\n  article.id = articleId;\n\n  articleLink.href = '#' + articleId;\n\n  while (article.childNodes.length) {\n    articleLink.appendChild(article.childNodes[0], articleLink);\n  }\n\n  article.appendChild(articleLink);\n\n  guideLink.appendChild(document.createTextNode(articleName));\n  guideLink.href = '#' + articleId;\n  guide.insertBefore(guideLink, guide.firstChild);\n};\n\n```\n\nTo overwrite the default behavior, you can provide your own `link` function as part of the configuration:\n\n```js\nContents({\n  // Example of implementation that does not wrap\n  // article node in a hyperlink.\n  link: (guide, article) =\u003e {\n    var guideLink,\n        articleName,\n        articleId;\n\n    guide = $(guide);\n    article = $(article);\n\n    guideLink = $('\u003ca\u003e');\n    articleName = article.text();\n    articleId = article.attr('id') || Contents.id(articleName);\n\n    guideLink\n      .text(articleName)\n      .attr('href', '#' + articleId)\n      .prependTo(guide);\n\n    article.attr('id', articleId);\n  }\n});\n\n```\n\n\u003ca name=\"table-of-contents-array-linking-article-id\"\u003e\u003c/a\u003e\n### Article ID\n\nThe default implementation relies on each article having an \"id\" attribute to enable anchor navigation.\n\nIf you are overwriting the default `link` implementation, you can take advantage of the `Contents.id` function.\n\n`Contents.id` is responsible for deriving a unique ID from the text of the article, e.g.\n\n```html\n\u003ch2\u003eAllow me to reiterate\u003c/h2\u003e\n\u003ch2\u003eAllow me to reiterate\u003c/h2\u003e\n\u003ch2\u003eAllow me to reiterate\u003c/h2\u003e\n\n```\n\nThe default `link` implementation will use `Contents.id` to give each article a unique ID:\n\n```html\n\u003ch2 id=\"allow-me-to-reiterate\"\u003eAllow me to reiterate\u003c/h2\u003e\n\u003ch2 id=\"allow-me-to-reiterate-1\"\u003eAllow me to reiterate\u003c/h2\u003e\n\u003ch2 id=\"allow-me-to-reiterate-2\"\u003eAllow me to reiterate\u003c/h2\u003e\n\n```\n\n\u003ca name=\"table-of-contents-array-markup\"\u003e\u003c/a\u003e\n## Markup\n\nTable of contents is an ordered [list element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol). List nesting reflects the heading hierarchy. The default behavior is to represent each heading using a hyperlink (See [Linking](#linking)), e.g.\n\n```html\n\u003ch1\u003eJavaScript\u003c/h1\u003e\n\u003ch2\u003eHistory\u003c/h2\u003e\n\u003ch2\u003eTrademark\u003c/h2\u003e\n\u003ch2\u003eFeatures\u003c/h2\u003e\n\u003ch3\u003eImperative and structured\u003c/h3\u003e\n\u003ch3\u003eDynamic\u003c/h3\u003e\n\u003ch3\u003eFunctional\u003c/h3\u003e\n\u003ch2\u003eSyntax\u003c/h2\u003e\n```\n\nContents will generate the following markup for the above content:\n\n```html\n\u003col\u003e\n  \u003cli\u003e\n    \u003ca href=\"#javascript\"\u003eJavaScript\u003c/a\u003e\n\n    \u003col\u003e\n      \u003cli\u003e\n        \u003ca href=\"#history\"\u003eHistory\u003c/a\u003e\n      \u003c/li\u003e\n      \u003cli\u003e\n        \u003ca href=\"#trademark\"\u003eTrademark\u003c/a\u003e\n      \u003c/li\u003e\n      \u003cli\u003e\n        \u003ca href=\"#features\"\u003eFeatures\u003c/a\u003e\n\n        \u003col\u003e\n          \u003cli\u003e\n            \u003ca href=\"#imperative-and-structured\"\u003eImperative and structured\u003c/a\u003e\n          \u003c/li\u003e\n          \u003cli\u003e\n            \u003ca href=\"#dynamic\"\u003eDynamic\u003c/a\u003e\n          \u003c/li\u003e\n          \u003cli\u003e\n            \u003ca href=\"#functional\"\u003eFunctional\u003c/a\u003e\n          \u003c/li\u003e\n        \u003c/ol\u003e\n      \u003c/li\u003e\n      \u003cli\u003e\n        \u003ca href=\"#syntax\"\u003eSyntax\u003c/a\u003e\n      \u003c/li\u003e\n    \u003c/ol\u003e\n  \u003c/li\u003e\n\u003c/ol\u003e\n```\n\n\u003ca name=\"table-of-contents-array-events\"\u003e\u003c/a\u003e\n## Events\n\n| Event | Description |\n| --- | --- |\n| `ready` | Fired once after the table of contents has been generated. |\n| `resize` | Fired when the page is loaded and in response to \"resize\" and \"orientationchange\" `window` events. |\n| `change` | Fired when the page is loaded and when user navigates to a new section of the page. |\n\nAttach event listeners using the `eventEmitter.on` of the resulting Contents object:\n\n```js\nconst contents = Contents();\n\ncontents.eventEmitter.on('ready', () =\u003e {});\ncontents.eventEmitter.on('resize', () =\u003e {});\n\n```\n\nThe `change` event listener is passed extra parameters: `.current.article`, `.current.guide`, and when available, `.previous.article`, `.previous.guide`:\n\n```js\ncontents.eventEmitter.on('change', (data) =\u003e {\n  if (data.previous) {\n    $(data.previous.article).removeClass('active-article');\n    $(data.previous.guide).removeClass('active-guide');\n  }\n\n  $(data.current.article).addClass('active-article');\n  $(data.current.guide).addClass('active-guide');\n});\n\n```\n\nYou must trigger \"resize\" event after programmatically changing the content or the presentation of the content.:\n\n```js\ncontents.eventEmitter.trigger('resize');\n\n```\n\nThis is required to recalculate the position of the content.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgajus%2Fcontents","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgajus%2Fcontents","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgajus%2Fcontents/lists"}