See the small table of contents at left? It is Indice working. It’s discreet, but works as a charm. It’s minified version is just 1KB!
Download the files
This script is available as a full package containing all the need files to compile. It’s made in vanilla javascript so you don’t have to include any inconvenient third-party library. There is a simple stylesheet for the elements Indice makes be understandable in the screen.
The sources are in the src folder with the uncompressed javascript file and the sass original files.
Using the script
To use it, copy to your project link it in your page and be happy:
<link rel="stylesheet" href="path/to/css/indice.css">
<script src="path/to/js/indice.min.js">
And add this callback in your page’s code:
<script>
(function(){
var toc = new Indice();
toc.make(".your-container-class h3", ".indice");
})();
</script>
For a basic use, it’s all you need to do!
Using the source code
If you don’t have NodeJS installed, download it from the site. This project uses Yarn. In order do install it in the system, after installing NodeJS, do the following in a terminal:
$ npm install -g yarn
Install
In order to run, type the following in a terminal:
$ yarn install
$ yarn run serve
You’re ready to go!