AutoTOC
is an NPM package for automatically generating and managing table of contents with scroll highlighting for web content
To initiate, install AutoTOC
using NPM:
npm i @danielhaim/autotoc
import AutoToc from "@danielhaim/autotoc";
document.addEventListener("DOMContentLoaded", function () {
const tocOptions = {
contentSelector: "article",
navigationContainer: "nav",
tocTitle: "Table of Contents",
tocIcon: '<i class="your-icon-class"></i>',
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);
}
});