Rip out the old JS TOC generator and use liquid instead

[plaindocs]

Inspired by #1904 and #1883 but this is something I've wanted to do forever!

Uses https://github.com/allejo/jekyll-toc

This way the link checker will use the same TOC links as people viewing the site, and so we'll all have a better experience.

• Going to need a little styling work, and some double checking of pages that don't need a TOC.

Current menu style:

https://docs.travis-ci.com/user/customizing-the-build/

As it looks with this PR:

https://deploy-preview-1909--musing-lamport-7fb66c.netlify.com/user/customizing-the-build/

Or with an extra level of nested UL

            <div id="toc" class="toc">
              <ul class="list-languages">
  <li><a href="#what-this-guide-covers">What This Guide Covers</a></li>
  <li><a href="#using-sauce-labs">Using Sauce Labs</a></li>
  <li><a href="#using-xvfb-to-run-tests-that-require-a-gui">Using xvfb to Run Tests That Require a GUI</a>
    <ul>
      <li><a href="#using-the-xvfb-run-wrapper">Using the xvfb-run wrapper</a></li>
      <li><a href="#using-xvfb-directly">Using xvfb directly</a></li>
      <li><a href="#starting-a-web-server">Starting a Web Server</a></li>
      <li><a href="#using-the-chrome-addon-in-the-headless-mode">Using the Chrome addon in the headless mode</a></li>
      <li><a href="#using-the-firefox-addon-in-headless-mode">Using the Firefox addon in headless mode</a></li>
    </ul>
  </li>
  <li><a href="#using-phantomjs">Using PhantomJS</a></li>
  <li><a href="#examples">Examples</a>
    <ul>
      <li><a href="#real-world-projects">Real World Projects</a></li>
      <li><a href="#ruby">Ruby</a></li>
    </ul>
  </li>
  <li><a href="#troubleshooting">Troubleshooting</a>
    <ul>
      <li><a href="#selenium-and-firefox-popups">Selenium and Firefox popups</a></li>
      <li><a href="#karma-and-firefox-inactivity-timeouts">Karma and Firefox inactivity timeouts</a></li>
    </ul>
  </li>
</ul>

            </div>

[allejo]

Hey there!

Super glad to see you giving my jekyll-toc a try for Travis docs 🙌 I really hope to see this merged!

IF you're interested, I'd like to shamelessly advertise my jekyll-anchor-headings project to you. Take the same concepts of how jekyll-toc works but it'll build the anchor headings that are currently being generated by JS on Travis.

In your _layouts/en.html, you'd change your {{ content }} to the following:

{% include anchor_headings.html html=content anchorClass="toc-anchor" anchorBody="#" %}

...and you'd get the same results as your JS (hopefully). I say hopefully because the anchor project is relatively young and hasn't had as much testing as the jekyll-toc project. So IF you're interested and would like to help me test it and give me feedback, that'd be awesome!

[plaindocs]

Hey @allejo

Cool that you dropped by.

I don't think your anchor plugin gives me anything more than https://kramdown.gettalong.org/options.html#option-auto-ids or am I missing something?

[igorwwwwwwwwwwwwwwwwwwww]

looks good to me!

[allejo]

I don't think your anchor plugin gives me anything more than kramdown.gettalong.org/options.html#option-auto-ids or am I missing something?

So my anchor plugin would generate this hashtag which is currently being generated through JavaScript. i.e. if you load the page without JS, you don't get the clickable links to skip to a section.

Both the toc or the anchor plugins rely on kramdown's auto_ids option, so it's not a replacement to that feature

[allejo]

Also, might I suggest setting sanitize to true in your use of toc.html? It would prevent weirdness of links in the TOC like on this page, https://deploy-preview-1909--musing-lamport-7fb66c.netlify.com/user/gui-and-headless-browsers/

Additionally, setting h_min=2 and h_max=3 will let you restrict the TOC to only include <h2> and <h3> headings.

[plaindocs]

@allejo good call on sanitize and h_min / max.

I'm with you now, you're talking about the anchor links on # -- gotcha!

[allejo]

Not sure if it'll be of use to you, but I just pushed an update that'll let you restrict which headings will get an anchor (allejo/jekyll-anchor-headings@136d41c); similar to the TOC's h_min and h_max.

[plaindocs]

Hey @allejo

Any idea if either of your plugins will chomp leading content that does not have an explicit heading?

https://deploy-preview-1909--musing-lamport-7fb66c.netlify.com/user/triggering-builds/ for example has a ton of content before the two headings shown in the toc / page?