visionmedia/mocha — pull request #659 by jrajav (2012-11-16 22:09:02+00:00)
Title: Add table of contents to webpage

This may be a rather opinionated pull request, but it's bothered me more than once that the webpage for mocha doesn't have a table of contents. It makes it hard to go back to it and find one specific section again, or to browse the whole thing with a nice, nonlinear *section click* -- *back* -- *other section click* flow.

As a part of this change, I corrected the duplicated `exclusive-tests` anchor to `inclusive-tests` and the `string diffs` anchor to `string-diffs`.

There are a few considerations to be made:

- In order to have the list ordering make sense for a table of contents (descend vertically rather than horizontally), but retain the two-column styling, I removed `float: left` and `width: 40%` from the `ul li` style and added `column-count: 2` to the `ul` style. This currently affects all other `ul`s as well. In addition, `column-count` is not supported in versions of IE below 10.
- I put the TOC below the feature list to keep the latter above the fold and more front-and-center.
- I was unsure whether or not to capitalize the section headers. The feature list, which is right above it, is uncapitalized and undecorated, so there's a slight discordance. In the end, I decided to keep them exactly the same as the actual section headers they link to.
- Similarly, I was unsure whether or not to make "Getting started" the link to "1. 2. 3. Mocha!", and "Usage" the link to "mocha(1)". They look slightly out of place among the other textual headers, and it may not be very clear what they are out of context, despite being fairly important and looked-for sections. Again, though, I decided to keep them the same pending consideration.