https://github.com/danielhaim1/autotoc

NPM package for generating and managing table of contents with scroll highlighting for web content
https://github.com/danielhaim1/autotoc

Last synced: 4 months ago
JSON representation

NPM package for generating and managing table of contents with scroll highlighting for web content

• Host: GitHub
• URL: https://github.com/danielhaim1/autotoc
• Owner: danielhaim1
• License: mit
• Created: 2024-01-23T00:17:12.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2025-09-16T11:22:55.000Z (9 months ago)
• Last Synced: 2025-09-16T13:35:07.772Z (9 months ago)
• Language: JavaScript
• Size: 1.89 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# AutoTOC API

[![npm version](https://img.shields.io/npm/v/@danielhaim/autotoc)](https://www.npmjs.com/package/@danielhaim/autotoc)

[![Downloads](https://img.shields.io/npm/dt/@danielhaim/autotoc.svg)](https://www.npmjs.com/package/@danielhaim/autotoc)

![GitHub](https://img.shields.io/github/license/danielhaim1/autotoc)

Overview

--------

`AutoTOC` is an NPM package for automatically generating and managing table of contents with scroll highlighting for web content

[CodePen Demo](https://codepen.io/danielhaim/pen/jOJLbrV)

API Documentation

--------------------

### Getting Started ###

To initiate, install `AutoTOC` using NPM:

```shell 

npm i @danielhaim/autotoc

```

### Module Example ###

```js

import AutoToc from "@danielhaim/autotoc";

document.addEventListener("DOMContentLoaded", function () {

    const tocOptions = {

        contentSelector: "article",

        navigationContainer: "nav",

        tocTitle: "Table of Contents",

        tocIcon: '',

        highlightOffset: 100,

        headingDepthLimit: 4

    };

    // Appends to Top

    const externalLinksTop = [

        { id: "external-link1", text: "Custom Top Link 1" },

        { id: "external-link2", text: "Custom Top Link 2" }

    ];

    // Appends to Bottom

    const externalLinksBottom = [

        { id: "external-link3", text: "Custom Bottom Link 3" },

        { id: "external-link4", text: "Custom Bottom Link 4" }

    ];

    try {

        const tocGenerator = new AutoToc.Generate(

            ...Object.values(tocOptions)

        );

        tocGenerator.addExternalLinksToToc(externalLinksTop, "top", "level-0");

        tocGenerator.addExternalLinksToToc(externalLinksBottom, "bottom", "level-0");

        tocGenerator.initialize();

    } catch (error) {

        console.error("An error occurred:", error.message);

    }

});

```