tinytoc

A very simple Table of Contents Generator written in TypeScript. tinytoc generates a table of contents based on h tags (h1, ... ,h6) on the website. Table of contents is ceated by appending a list of items to a specified div on the page. A list can be both ordered and unordered. tinytoc by default creats links to the headings as well. Table of contents is unstyled and its up to the user to make style decisions.

Instalation

npm install tinytoc

Usage

First create import tinytoc into the project

import TinyToc from 'tinytoc'

then create a new instance of TinyToc

const contentSelector = "#content"
const targetSelector = "#toc"
const toc = new TinyToc(contentSelector, targetSelector, {})

and finally call generate function which would append Table of Contents to specified div

toc.generate()

Configuration and options

tinytoc requires only 2 things to be specified - tocSource (a string with a selector for element which holds content with headings) and tocTarget (a string with a selector for element which should contain the table of contents) tinytoc also accepts a third argument - an optional object holding additional options.

Arguments

Argument | Type | Required | Default Value | Postion | Explanation ---------|------|----------|---------------|---------|------------ tocSource | string | true | null | 0 | A selector for element which contains headings. Can be any valid JavaScript querySelector. For example for <div id="blog-post"></div> proper selector would be "#blog-post" tocTarget | string | true | null | 1 | A selector for element should contain table of contents. Can be any valid JavaScript querySelector. For example for <div id="blog-toc"></div> proper selector would be "#blog-toc" options | object | true | null | 2 | An object containing addition optionions specified in the table bellow. None of the options are required, however passing an empty object is required.

Additional options

Argument | Type | Required | Default Value | Explanation ---------|------|----------|---------------|------------ tags | Array of strings | false | ['h2', 'h3', 'h4', 'h5', 'h6'] | An array of tag names which specifies which tags should be selected for table of contents. By default selects all headings except h1 listType | string | false | "ul" | Specifies which type of list to create, can be either "ul" or "ol" linkItems | boolean | false | true | Specifies whether to create links to related headings in table of contents

Example with additional settings

import TinyToc from 'tinytoc'
const toc = new TinyToc("#blog-post", "#blog-toc", {
    tags: ["h3", "h4"],
    listType: "ol",
    linkItems: false
})
toc.generate()