Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Add table of contents to webpage #659

Closed
wants to merge 3 commits into
from

Conversation

Projects
None yet
3 participants
Contributor

jrajav commented Nov 16, 2012

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 uls 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.
Contributor

tj commented Nov 16, 2012

hmm i dont mind it but i would rather have some sort of fixed menu that follows along with you, more like on http://expressjs.com/api.html

Contributor

jrajav commented Nov 16, 2012

That sounds great! I was going with a more conservative TOC for the "pitch," but I can definitely do something like that. I'll tinker with it tonight, stay tuned.

Contributor

tj commented Nov 16, 2012

sounds good thanks man

Contributor

jrajav commented Nov 17, 2012

How's this? Could be done on the left too, by changing two lines in the CSS.

Contributor

jrajav commented Nov 17, 2012

By the way, I didn't do all that unescaping and small whitespace changes in index.html. It's possible that I have a different version of markdown (it's 1.0.1).

@jrajav jrajav commented on the diff Nov 17, 2012

style.css
@@ -178,4 +206,5 @@ code .comment { color: #ddd }
code .init { color: #2F6FAD }
code .string { color: #5890AD }
code .keyword { color: #8A6343 }
-code .number { color: #2F6FAD }
@jrajav

jrajav Nov 17, 2012

Contributor

Not entirely sure what happened here; it stayed changed even if I removed line 210

Contributor

jrajav commented Nov 30, 2012

Sooo is this any good? :)

Contributor

tj commented Dec 6, 2012

hmm it's saying the patch cannot be applied, need to rebase or something

Contributor

jrajav commented Dec 7, 2012

Okay, do you need me to do anything with my branch?

Contributor

tj commented Dec 7, 2012

oh I see you're working in master, hmm, ill just manually merge this in a minute and look

Contributor

jrajav commented Jan 11, 2013

So, uh, this ever gonna be pulled?

Contributor

travisjeffery commented Dec 7, 2013

@jrajav make your changes up to date and i can merge it in.

Contributor

jrajav commented Dec 22, 2013

Actually, it looks like TJ might have forgotten about my pull request and done redundant work to add a table of contents a few months later: 314da12

Oh well!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment