https://github.com/markmead/js-table-of-content
Generate a table of content from headings within an element 📖
https://github.com/markmead/js-table-of-content
table-of-contents toc toc-generator
Last synced: about 1 year ago
JSON representation
Generate a table of content from headings within an element 📖
- Host: GitHub
- URL: https://github.com/markmead/js-table-of-content
- Owner: markmead
- License: mit
- Created: 2024-06-07T12:37:50.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-07T08:13:17.000Z (over 1 year ago)
- Last Synced: 2025-03-24T20:12:29.301Z (about 1 year ago)
- Topics: table-of-contents, toc, toc-generator
- Language: JavaScript
- Homepage:
- Size: 25.4 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Table of Content
Get the headings from an article and generate the HTML for the table of content.
See it in action on the [HyperUI blog](https://www.hyperui.dev/blog).
## Install
### With a CDN
```html
```
### With a Package Manager
```shell
yarn add -D data-table-of-content
npm install -D data-table-of-content
```
```js
import { getArticleHeadings, buildArticleHeadings } from 'data-table-of-content'
document.addEventListener('DOMContentLoaded', () => {
// What we can get back from the method
const { articleEl, articleHeadings } = getArticleHeadings()
// How we build the HTML
buildArticleHeadings(articleHeadings)
})
```
### `articleEl`
Returns the element with the `data-article` attribute.
###Â `articleHeadings`
Returns the headings in a nested array for the `data-article` element.
```json
[
{
"headingId": "heading-2",
"textContent": "Heading 2",
"headingChildren": [
{
"headingId": "heading-3",
"textContent": "Heading 3",
"headingChildren": [
{
"headingId": "heading-4",
"textContent": "Heading 4"
}
]
},
{
"headingId": "heading-3.1",
"textContent": "Heading 3.1"
}
]
},
{
"headingId": "heading-2.1",
"textContent": "Heading 2.1"
},
{
"headingId": "heading-2.2",
"textContent": "Heading 2.2",
"headingChildren": [
{
"headingId": "heading-3.2",
"textContent": "Heading 3.2"
}
]
}
]
```
### `buildArticleHeadings`
This will take array from `articleHeadings` and create the HTML for the table of
contents and insert it into the `data-article-headings` element.
```html
```
## Example
```html
Heading 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit, commodi.
Heading 2
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Heading 3
Lorem, ipsum dolor.
Heading 4
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo sunt alias,
possimus mollitia nisi pariatur vero numquam at iure labore! Labore est
laudantium nam voluptates laborum, inventore delectus dolore placeat
impedit quae?
Heading 3.1
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium velit
unde, pariatur dolore, eveniet consectetur eligendi tempora dolor nesciunt
cumque quis repellendus, voluptate perspiciatis eaque quibusdam?
Heading 2.1
Lorem ipsum dolor sit amet consectetur adipisicing elit. A, eaque ratione.
Mollitia placeat vitae voluptas!
Heading 2.2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique minima
harum ipsam!
Heading 3.2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni a est porro
facilis nam commodi ullam fugiat? Quisquam reprehenderit incidunt sint ad
facilis ducimus est rerum? Non commodi tempore provident.
document.addEventListener('DOMContentLoaded', () => {
const { articleHeadings } = getArticleHeadings()
buildArticleHeadings(articleHeadings)
})
```
## Stats
