https://github.com/gadzan/generatoc
Automatically generate table of content from heading of HTML document
https://github.com/gadzan/generatoc
article-extractor html-document ssr toc typescript
Last synced: 23 days ago
JSON representation
Automatically generate table of content from heading of HTML document
- Host: GitHub
- URL: https://github.com/gadzan/generatoc
- Owner: gadzan
- License: mit
- Created: 2020-05-12T13:19:28.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-13T06:02:25.000Z (over 3 years ago)
- Last Synced: 2025-10-22T16:15:16.911Z (8 months ago)
- Topics: article-extractor, html-document, ssr, toc, typescript
- Language: TypeScript
- Homepage:
- Size: 1.2 MB
- Stars: 8
- Watchers: 1
- Forks: 2
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# GeneraToc
[](https://www.travis-ci.org/gadzan/generatoc)
[](https://www.npmjs.com/package/generatoc)
[](https://www.npmjs.com/package/generatoc)
[](https://coveralls.io/github/gadzan/generatoc?branch=master)
[](https://github.com/gadzan/generatoc/blob/master/LICENSE)
[](https://www.npmjs.com/package/generatoc)
[](github.com/gadzan/generatoc/)
GeneraToc generates a table of contents (TOC) from headings in an HTML document. This is useful for documentation websites or SSR pages because it makes them easier to navigate.
This library was inspired by [Tocify](https://github.com/gfranko/jquery.tocify.js) and [Tocbot](https://github.com/tscanlin/tocbot), but GeneraToc **uses native DOM** methods with **no other dependencies** and unlike Tocbot, GeneraToc does **NOT rely on id attribute** to navigate to the heading.
## DEMO
[https://gadzan.github.io/generatoc/demo/](https://gadzan.github.io/generatoc/demo/)
## Installation
Install it with npm.
```bash
# With npm
npm install --save generatoc
# or yarn
yarn add generatoc
# or pnpm
pnpm add generatoc
```
OR include in browser environment
include the script at the bottom of the page before the closing body tag.
```html
```
Include CSS
in html file
```html
```
OR
If you installed it with npm you might try importing the styles from 'node_modules'
```css
@import 'generatoc/src/style/main.css';
```
## Usage
Define a `div` element with id attribute
```html
```
### Use GeneraToc with typescript
```typescript
import generatoc from 'generatoc'
// Typescript
// (Required) Article content selector, default as '.post-content'
const content: string = '.post-content'
// (Optional) Select h2 ~ h5 heading level, it is also a defualt setting if you leave it undefined
const heading: string[] = ['h2', 'h3', 'h4', 'h5']
// (Optional) TOC element is append to #toc element, it is also a defualt setting if you leave it undefined
const selector: string = '#toc'
generatoc.init({ content, heading, selector })
```
### Use GeneraToc with javascript
```javascript
// JavaScript
import generatoc from 'generatoc'
const content = '.post-content'
const heading = ['h2', 'h3', 'h4', 'h5']
const selector = '#toc'
generatoc.init({ content, heading, selector })
```
### Use in browser environment
```javascript
const content = '.post-content'
const heading = ['h2', 'h3', 'h4', 'h5']
const selector = '#toc'
generatoc.init({ content, heading, selector })
```
### You need to know when importing css file
**If the `selector` is not `#toc` you have to modify css file manully**, just replace all `#toc` string with your selector name in css file which can be found at `./node_modules/generatoc/src/style/main.css`
## Development
```bash
yarn install
npm run dev
```
## Other init options
```javascript
{
// scrollHistory: default to null;
// scrollHistory: {
// readableSpace?: boolean; // Replace url hash string form '%20' to '-';
// replacePattern?: RegExp | string; // You can also define your own pattern to replace the url hash string;
// replacement?: string; // Replacement of the pattern;
// scrollToAfterMounted?: boolean; // Option to scroll to the title after page mounted; * Only valid when above options are unset;
// }
// Adds a hash to the page url, to maintain history, when scrolling to a TOC item
scrollHistory: false,
// scrollOffset: Accepts a number; default to 0
// Scroll to the target with a vertical offset(pixel). If you have a fixed header in your page, this is what you need to set.
scrollOffset: 0,
// duration: Accepts a number; default to 7
// The duration of scroll animation, a larger number means slower scroll. please input with a number larger than 1.
duration: 7,
// fold: Accepts a boolean; default to false
// Default show as folded TOC or not
fold: false,
}
```
## TODO
- [x] Destory method
- [x] Reload method
- [x] Development env
- [x] Test cases
- [x] Show and close animation
- [ ] More configurations
## Using with SSR
If you are using GeneraToc with SSR framwork, like Nuxt.js, please add `transpile` param to `nuxt.config.js`
```javascript
build: {
transpile: ['generatoc']
}
```
## LICENSE
MIT