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.

Download “Indice”     Github repo

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!