{"_id":"@247grad/rehype-toc","_rev":"2-f42e9aaaa3b91bf50493a3ee722b3b8f","name":"@247grad/rehype-toc","dist-tags":{"latest":"3.1.2"},"versions":{"3.0.2":{"name":"@247grad/rehype-toc","version":"3.0.2","description":"A rehype plugin that adds a table of contents (TOC) to the page","keywords":["unified","rehype","plugin","rehype-plugin","table-of-contents","toc","html"],"author":{"name":"James Messinger","url":"https://jamesmessinger.com"},"contributors":[{"name":"Lukas Härtel","email":"lukas.haertel@247grad.de","url":"https://247grad.de"}],"license":"MIT","homepage":"https://jstools.dev/rehype-toc","repository":{"type":"git","url":"git+https://github.com/247GRAD/rehype-toc.git"},"main":"lib/index.js","types":"lib/index.d.ts","scripts":{"clean":"shx rm -rf .nyc_output coverage lib","lint":"eslint src test","build":"tsc","watch":"tsc --watch","test":"mocha && npm run lint","coverage":"nyc node_modules/mocha/bin/mocha","upgrade":"npm-check -u && npm audit fix","bump":"bump --tag --push --all","release":"npm run upgrade && npm run clean && npm run build && npm test && npm run bump"},"engines":{"node":">=10"},"devDependencies":{"@jsdevtools/eslint-config":"^1.0.4","@jsdevtools/version-bump-prompt":"^6.0.5","@types/chai":"^4.2.11","@types/mocha":"^8.0.0","@types/node":"^14.0.23","@types/unist":"^2.0.3","chai":"^4.2.0","eslint":"^7.4.0","mocha":"^8.0.1","npm-check":"^5.9.2","nyc":"^15.1.0","rehype-parse":"^7.0.1","rehype-slug":"^3.0.0","rehype-stringify":"^8.0.0","shx":"^0.3.2","typescript":"^3.9.7","unified":"^9.0.0"},"dependencies":{},"gitHead":"d71a6b634a17dae9c92bfd6dbbaa2bd3c6c4c086","bugs":{"url":"https://github.com/247GRAD/rehype-toc/issues"},"_id":"@247grad/rehype-toc@3.0.2","_nodeVersion":"10.24.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-LehMZNi8qFZvnCmZswyl9990RBw8L0A1PtEEd75LHKM+B9oHiBascsZRr9zjZhCODWXNFCa19Gpv0rxDzb3zuQ==","shasum":"9b7daf8328472518c8050345b16dfa0c9c89cfe3","tarball":"https://registry.npmjs.org/@247grad/rehype-toc/-/rehype-toc-3.0.2.tgz","fileCount":37,"unpackedSize":50682,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVm4WnxncBdGZb/df63R/iyRpQBhLPZGgYsiTRaHRKywIgYYNpwDXx9DcM3kvcm3ZfPKz6Rc7hEWCRytOUejkLork="}]},"_npmUser":{"name":"lukashaertel","email":"lukas.haertel@247grad.de"},"directories":{},"maintainers":[{"name":"lukashaertel","email":"lukas.haertel@247grad.de"},{"name":"wp247grad","email":"wp@247grad.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rehype-toc_3.0.2_1686821243406_0.9443152797283401"},"_hasShrinkwrap":false},"3.1.0":{"name":"@247grad/rehype-toc","version":"3.1.0","description":"A rehype plugin that adds a table of contents (TOC) to the page","keywords":["unified","rehype","plugin","rehype-plugin","table-of-contents","toc","html"],"author":{"name":"James Messinger","url":"https://jamesmessinger.com"},"contributors":[{"name":"Lukas Härtel","email":"lukas.haertel@247grad.de","url":"https://247grad.de"}],"license":"MIT","homepage":"https://jstools.dev/rehype-toc","repository":{"type":"git","url":"git+https://github.com/247GRAD/rehype-toc.git"},"main":"lib/index.js","types":"lib/index.d.ts","scripts":{"clean":"shx rm -rf .nyc_output coverage lib","lint":"eslint src test","build":"tsc","watch":"tsc --watch","test":"mocha && npm run lint","coverage":"nyc node_modules/mocha/bin/mocha","upgrade":"npm-check -u && npm audit fix","bump":"bump --tag --push --all","release":"npm run upgrade && npm run clean && npm run build && npm test && npm run bump"},"engines":{"node":">=10"},"devDependencies":{"@jsdevtools/eslint-config":"^1.0.4","@jsdevtools/version-bump-prompt":"^6.0.5","@types/chai":"^4.2.11","@types/mocha":"^8.0.0","@types/node":"^14.0.23","@types/unist":"^2.0.3","chai":"^4.2.0","eslint":"^7.4.0","mocha":"^8.0.1","npm-check":"^5.9.2","nyc":"^15.1.0","rehype-parse":"^7.0.1","rehype-slug":"^3.0.0","rehype-stringify":"^8.0.0","shx":"^0.3.2","typescript":"^3.9.7","unified":"^9.0.0"},"dependencies":{},"gitHead":"83bce728382d203c0751335675911b1073ca338d","bugs":{"url":"https://github.com/247GRAD/rehype-toc/issues"},"_id":"@247grad/rehype-toc@3.1.0","_nodeVersion":"10.24.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-VT7A2ISQYtHTqOfLp7YBh2LATHCcQJgj4NYJ013bqcO82RiwrKAlf+q/QrW72ra6gLMdJ5Z7YL0k1QD11Ehz1g==","shasum":"dfdbef8c10f987420472645d1796e30e32ceda4a","tarball":"https://registry.npmjs.org/@247grad/rehype-toc/-/rehype-toc-3.1.0.tgz","fileCount":37,"unpackedSize":51046,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC4NTYQWs93teM11ax7Tawd3lujtOPvMSjKYAUxv0PsbAiAllxwl/TxC9O+U8oUkXHwtycsnPrXl+Ml6X4rnfx6fRA=="}]},"_npmUser":{"name":"lukashaertel","email":"lukas.haertel@247grad.de"},"directories":{},"maintainers":[{"name":"lukashaertel","email":"lukas.haertel@247grad.de"},{"name":"wp247grad","email":"wp@247grad.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rehype-toc_3.1.0_1686822299346_0.03290172637787192"},"_hasShrinkwrap":false},"3.1.2":{"name":"@247grad/rehype-toc","version":"3.1.2","description":"A rehype plugin that adds a table of contents (TOC) to the page","keywords":["unified","rehype","plugin","rehype-plugin","table-of-contents","toc","html"],"author":{"name":"James Messinger","url":"https://jamesmessinger.com"},"contributors":[{"name":"Lukas Härtel","email":"lukas.haertel@247grad.de","url":"https://247grad.de"}],"license":"MIT","homepage":"https://jstools.dev/rehype-toc","repository":{"type":"git","url":"git+https://github.com/247GRAD/rehype-toc.git"},"main":"lib/index.js","types":"lib/index.d.ts","scripts":{"clean":"shx rm -rf .nyc_output coverage lib","lint":"eslint src test","build":"tsc","watch":"tsc --watch","test":"mocha && npm run lint","coverage":"nyc node_modules/mocha/bin/mocha","upgrade":"npm-check -u && npm audit fix","bump":"bump --tag --push --all","release":"npm run upgrade && npm run clean && npm run build && npm test && npm run bump"},"engines":{"node":">=10"},"devDependencies":{"@jsdevtools/eslint-config":"^1.0.4","@jsdevtools/version-bump-prompt":"^6.0.5","@types/chai":"^4.2.11","@types/mocha":"^8.0.0","@types/node":"^14.0.23","@types/unist":"^2.0.3","chai":"^4.2.0","eslint":"^7.4.0","mocha":"^8.0.1","npm-check":"^5.9.2","nyc":"^15.1.0","rehype-parse":"^7.0.1","rehype-slug":"^3.0.0","rehype-stringify":"^8.0.0","shx":"^0.3.2","typescript":"^3.9.7","unified":"^9.0.0"},"dependencies":{},"gitHead":"f5acabd6a85cbcdf691473e7c1465c586b31a400","bugs":{"url":"https://github.com/247GRAD/rehype-toc/issues"},"_id":"@247grad/rehype-toc@3.1.2","_nodeVersion":"10.24.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-xIJI8eSqury4u6IuikRzKtfg8l15YosjWOCpyjxKH7YjEkbVp47owGD9uImTt/6y3G8Wmlc18Z72MtpCwWFBdQ==","shasum":"4fd85cbcede4c001168dd130cd29477a757268ed","tarball":"https://registry.npmjs.org/@247grad/rehype-toc/-/rehype-toc-3.1.2.tgz","fileCount":37,"unpackedSize":51140,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAuEbLznNKoh+6edIDt1XpIgkcgX/1vYQRWhefwbZb7HAiBXKFrP/kHQI/y2J6K30h26Ci5UIZcboPe/3soai/vM5w=="}]},"_npmUser":{"name":"lukashaertel","email":"lukas.haertel@247grad.de"},"directories":{},"maintainers":[{"name":"lukashaertel","email":"lukas.haertel@247grad.de"},{"name":"wp247grad","email":"wp@247grad.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rehype-toc_3.1.2_1686822979148_0.11529846122849396"},"_hasShrinkwrap":false}},"time":{"created":"2023-06-15T09:27:23.344Z","3.0.2":"2023-06-15T09:27:23.582Z","modified":"2023-06-15T09:56:19.460Z","3.1.0":"2023-06-15T09:44:59.591Z","3.1.2":"2023-06-15T09:56:19.332Z"},"maintainers":[{"name":"lukashaertel","email":"lukas.haertel@247grad.de"},{"name":"wp247grad","email":"wp@247grad.de"}],"description":"A rehype plugin that adds a table of contents (TOC) to the page","homepage":"https://jstools.dev/rehype-toc","keywords":["unified","rehype","plugin","rehype-plugin","table-of-contents","toc","html"],"repository":{"type":"git","url":"git+https://github.com/247GRAD/rehype-toc.git"},"contributors":[{"name":"Lukas Härtel","email":"lukas.haertel@247grad.de","url":"https://247grad.de"}],"author":{"name":"James Messinger","url":"https://jamesmessinger.com"},"bugs":{"url":"https://github.com/247GRAD/rehype-toc/issues"},"license":"MIT","readme":"# Table of Contents plugin for Rehype\nA [rehype](https://github.com/rehypejs/rehype) plugin that adds a table of contents (TOC) to the page\n\n[![Cross-Platform Compatibility](https://jstools.dev/img/badges/os-badges.svg)](https://github.com/JS-DevTools/rehype-toc/actions)\n[![Build Status](https://github.com/JS-DevTools/rehype-toc/workflows/CI-CD/badge.svg)](https://github.com/JS-DevTools/rehype-toc/actions)\n\n[![Coverage Status](https://coveralls.io/repos/github/JS-DevTools/rehype-toc/badge.svg?branch=master)](https://coveralls.io/github/JS-DevTools/rehype-toc)\n[![Dependencies](https://david-dm.org/JS-DevTools/rehype-toc.svg)](https://david-dm.org/JS-DevTools/rehype-toc)\n\n[![npm](https://img.shields.io/npm/v/@jsdevtools/rehype-toc.svg)](https://www.npmjs.com/package/@jsdevtools/rehype-toc)\n[![License](https://img.shields.io/npm/l/@jsdevtools/rehype-toc.svg)](LICENSE)\n[![Buy us a tree](https://img.shields.io/badge/Treeware-%F0%9F%8C%B3-lightgreen)](https://plant.treeware.earth/JS-DevTools/rehype-toc)\n\n\n\nFeatures\n--------------------------\n- Adds a `<nav>` and `<ol>` list outlining all headings on the page\n- Combine with [rehype-slug](https://github.com/rehypejs/rehype-slug) to create links to each heading\n- Ignores headings outside of `<main>` if it exists\n- You can customize which headings are included (defaults to `<h1>` - `<h6>`)\n- You can customize the CSS classes on every TOC element\n- Hooks give you complete customization of the generated HTML\n\n\n\nExample\n--------------------------\n\n**input.html**<br>\nHere's the original HTML file. There are three levels of headings (`<h1>` - `<h3>`), and none of them have IDs.\n\n```html\n<html>\n  <body>\n    <h1>Apple Pie Recipe</h1>\n    <p>This is the world's best apple pie recipe...</p>\n\n    <div>\n      <h2>Filling</h2>\n      <p>The filling is the best part...</p>\n\n      <h3>Preparing the apples</h3>\n      <p>Cut the apples into 1/4 inch slices...</p>\n\n      <h3>Preparing the spice mix</h3>\n      <p>In a mixing bowl, combine sugar, cinnamon...</p>\n    </div>\n\n    <div>\n      <h2>Crust</h2>\n      <p>How to make the perfect flaky crust...</p>\n\n      <h3>Preparing the dough</h3>\n      <p>Combine flour, sugar, salt...</p>\n\n      <h3>The criss-cross top</h3>\n      <p>Cut the top crust into 1/2 inch strips...</p>\n    </div>\n  </body>\n</html>\n```\n\n**example.js**<br>\nThis script reads the `input.html` file above writes the results to `output.html` (shown below). The script uses [unified](https://unifiedjs.com/), [rehype-parse](https://github.com/rehypejs/rehype/tree/master/packages/rehype-parse), [rehype-slug](https://github.com/rehypejs/rehype-slug), and [rehype-stringify](https://github.com/rehypejs/rehype/tree/master/packages/rehype-stringify).\n\n\n```javascript\nconst unified = require(\"unified\");\nconst parse = require(\"rehype-parse\");\nconst slug = require(\"rehype-slug\");\nconst toc = require(\"@jsdevtools/rehype-toc\");\nconst stringify = require(\"rehype-stringify\");\nconst fs = require(\"fs\");\n\nasync function example() {\n  // Create a Rehype processor with the TOC plugin\n  const processor = unified()\n    .use(parse)\n    .use(slug)\n    .use(toc)\n    .use(stringify);\n\n  // Read the original HTML file\n  let inputHTML = await fs.promises.readFile(\"input.html\");\n\n  // Process the HTML, adding heading IDs and Table of Contents\n  let outputHTML = await processor.process(inputHTML);\n\n  // Save the new HTML\n  await fs.promises.writeFile(\"output.html\", outputHTML);\n}\n```\n\n**output.html**<br>\nHere's the HTML that gets created by the above script. Notice that a table of contents has been added at the top of the `<body>`, with links to each of the headings on the page. The headings also now have IDs, thanks to [rehype-slug](https://github.com/rehypejs/rehype-slug).\n\n```html\n<html>\n  <body>\n    <nav class=\"toc\">\n      <ol class=\"toc-level toc-level-1\">\n        <li class=\"toc-item toc-item-h1\">\n          <a class=\"toc-link toc-link-h1\" href=\"#apple-pie-recipe\">\n            Apple Pie Recipe\n          </a>\n\n          <ol class=\"toc-level toc-level-2\">\n            <li class=\"toc-item toc-item-h2\">\n              <a class=\"toc-link toc-link-h2\" href=\"#filling\">\n                Filling\n              </a>\n\n              <ol class=\"toc-level toc-level-3\">\n                <li class=\"toc-item toc-item-h3\">\n                  <a class=\"toc-link toc-link-h3\" href=\"#preparing-the-apples\">\n                    Preparing the apples\n                  </a>\n                </li>\n                <li class=\"toc-item toc-item-h3\">\n                  <a class=\"toc-link toc-link-h3\" href=\"#preparing-the-spice-mix\">\n                    Preparing the spice mix\n                  </a>\n                </li>\n              </ol>\n            </li>\n\n            <li class=\"toc-item toc-item-h2\">\n              <a class=\"toc-link toc-link-h2\" href=\"#crust\">\n                Crust\n              </a>\n\n              <ol class=\"toc-level toc-level-3\">\n                <li class=\"toc-item toc-item-h3\">\n                  <a class=\"toc-link toc-link-h3\" href=\"#preparing-the-dough\">\n                    Preparing the dough\n                  </a>\n                </li>\n                <li class=\"toc-item toc-item-h3\">\n                  <a class=\"toc-link toc-link-h3\" href=\"#the-criss-cross-top\">\n                    The criss-cross top\n                  </a>\n                </li>\n              </ol>\n            </li>\n          </ol>\n        </li>\n      </ol>\n    </nav>\n\n    <h1 id=\"apple-pie-recipe\">Apple Pie Recipe</h1>\n    <p>This is the world's best apple pie recipe...</p>\n\n    <div>\n      <h2 id=\"filling\">Filling</h2>\n      <p>The filling is the best part...</p>\n\n      <h3 id=\"preparing-the-apples\">Preparing the apples</h3>\n      <p>Cut the apples into 1/4 inch slices...</p>\n\n      <h3 id=\"preparing-the-spice-mix\">Preparing the spice mix</h3>\n      <p>In a mixing bowl, combine sugar, cinnamon...</p>\n    </div>\n\n    <div>\n      <h2 id=\"crust\">Crust</h2>\n      <p>How to make the perfect flaky crust...</p>\n\n      <h3 id=\"preparing-the-dough\">Preparing the dough</h3>\n      <p>Combine flour, sugar, salt...</p>\n\n      <h3 id=\"the-criss-cross-top\">The criss-cross top</h3>\n      <p>Cut the top crust into 1/2 inch strips...</p>\n    </div>\n  </body>\n</html>\n```\n\n\n\nInstallation\n--------------------------\nYou can install Rehype TOC via [npm](https://docs.npmjs.com/about-npm/).\n\n```bash\nnpm install @jsdevtools/rehype-toc\n```\n\nYou'll probably want to install [unified](https://unifiedjs.com/), [rehype-parse](https://github.com/rehypejs/rehype/tree/master/packages/rehype-parse), [rehype-stringify](https://github.com/rehypejs/rehype/tree/master/packages/rehype-stringify), and [rehype-slug](https://github.com/rehypejs/rehype-slug) as well.\n\n```bash\nnpm install unified rehype-parse rehype-stringify rehype-slug\n```\n\n\n\nUsage\n--------------------------\nUsing the Rehype TOC plugin requires an understanding of how to use Unified and Rehype. [Here is an excelleng guide](https://unifiedjs.com/learn/guide/introduction-to-unified/) to learn the basics.\n\nThe Rehype TOC plugin works just like any other Rehype plugin. Pass it to [the `.use()` method](https://github.com/unifiedjs/unified#processoruseplugin-options), optionally with an [options object](#options).\n\n```javascript\nconst unified = require(\"unified\");\nconst toc = require(\"@jsdevtools/rehype-toc\");\n\n// Use the Rehype TOC plugin with its default options\nunified().use(toc);\n\n// Use the Rehype TOC plugin with custom options\nunified().use(toc, {\n  headings: [\"h1\", \"h2\"],     // Only include <h1> and <h2> headings in the TOC\n  cssClasses: {\n    toc: \"page-outline\",      // Change the CSS class for the TOC\n    link: \"page-link\",        // Change the CSS class for links in the TOC\n  }\n});\n```\n\n\n\nOptions\n--------------------------\nThe Rehype TOC plugin supports the following options:\n\n|Option                |Type                |Default                |Description\n|:---------------------|:-------------------|:----------------------|:-----------------------------------------\n|`nav`                 |boolean             |true                   |Determines whether the table of contents is wrapped in a `<nav>` element.\n|`position`            |string              |\"afterbegin\"           |The position at which the table of contents should be inserted, relative to the `<main>` or `<body>` element. Can be \"beforebegin\", \"afterbegin\", \"beforeend\", or \"afterend\". See [the `insertAdjacentElement()` docs](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement) for an explanation of each value.\n|`headings`            |array of strings    |h1, h2, h3, h4, h5, h6 |The HTML heading tags to include in the table of contents\n|`cssClasses.toc`      |string              |toc                    |The CSS class name for the top-level `<nav>` or `<ol>` element that contains the whole table of contents.\n|`cssClasses.list`     |string              |toc-level              |The CSS class name for all `<ol>` elements in the table of contents, including the top-level one.\n|`cssClasses.listItem` |string              |toc-item               |The CSS class name for all `<li>` elements in the table of contents.\n|`cssClasses.link`     |string              |toc-link               |The CSS class name for all `<a>` elements in the table of contents.\n|`customizeTOC`        |function(toc)       |                       |Allows you to customize the table of contents before it is added to the page.<br><br>The function receives the TOC node tree and can modify it in any way you want. Or you can return a new node tree to use instead. Or return `false` to prevent the the TOC from being added to the page.\n|`customizeTOCItem`    |function(toc, heading)|                     |Allows you to customize each item in the table of contents before it is added to the page.<br><br>The function receives the TOC item's node tree and the heading node that it refers to. You can modify the nodes in any way you want. Or you can return a new node tree to use instead. Or return `false` to prevent the the TOC from being added to the page.\n\n\n\nContributing\n--------------------------\nContributions, enhancements, and bug-fixes are welcome!  [Open an issue](https://github.com/JS-DevTools/rehype-toc/issues) on GitHub and [submit a pull request](https://github.com/JS-DevTools/rehype-toc/pulls).\n\n#### Building\nTo build the project locally on your computer:\n\n1. __Clone this repo__<br>\n`git clone https://github.com/JS-DevTools/rehype-toc.git`\n\n2. __Install dependencies__<br>\n`npm install`\n\n3. __Build the code__<br>\n`npm run build`\n\n4. __Run the tests__<br>\n`npm test`\n\n\n\nLicense\n--------------------------\nRehype TOC is 100% free and open-source, under the [MIT license](LICENSE). Use it however you want.\n\nThis package is [Treeware](http://treeware.earth). If you use it in production, then we ask that you [**buy the world a tree**](https://plant.treeware.earth/JS-DevTools/rehype-toc) to thank us for our work. By contributing to the Treeware forest you’ll be creating employment for local families and restoring wildlife habitats.\n\n\n\nBig Thanks To\n--------------------------\nThanks to these awesome companies for their support of Open Source developers ❤\n\n[![Travis CI](https://jstools.dev/img/badges/travis-ci.svg)](https://travis-ci.com)\n[![SauceLabs](https://jstools.dev/img/badges/sauce-labs.svg)](https://saucelabs.com)\n[![Coveralls](https://jstools.dev/img/badges/coveralls.svg)](https://coveralls.io)\n","readmeFilename":"README.md"}