This is my week end project: a table of contents generator. Well, technically, it’s more like a two hour project interrupted four times over the course of a Saturday but I guess it still qualifies as a week end project.
I got tired of managing the table of contents of my documentations manually and in particular, of having to modify all the section numbers by hand whenever I moved things around. This short Javascript program now automatically takes care of it for me. Here is the quick documentation:
// A simple HTML "table of contents" generator. // // 1) Include toc.js in your HTML file: // <script type="text/javascript" src="toc.js"></script> // // 2) Call generateToc() in your onLoad() method: // <body onLoad="generateToc();"> // // 3) Declare a div with the id "table-of-contents" where you want // your table of contents: // <div id="table-of-contents"></div> // // 4) Put each of your sections in an <a> tag with class "section", // specifying an "indent" representing the indentation of that section. // Only the length of the indent matters, now its content. If no indent // is found, a string of size 1 is the default. // // Example: // <a class="section" name="Section 1">Section 1</a> // <a class="section" indent=".." name="Section 1a">Section 1a</a> // <a class="section" name="Section 2">Section 2</a>
This script now powers both testng.org and jcommander.org, go take a look there if you want to see what it looks like.
Ideas for potential improvements:
- Make the numbering optional or configurable.
- Have the script add CSS classes to the sections for easier styling (“section1″, “section2″, etc…), since the indenting is pretty crude right now.
