docs: Dynamic ToC on website

The ToC will now show deeper heading levels as needed, and gives
some visual indication of where you are on the page. This helps a
ton with browsing around and referencing different parts of the docs.

Signed-off-by: Patrick East <east.patrick@gmail.com>

docs/website/assets/js/app.js

@@ -18,4 +18,32 @@ $(function() {
 
 document.addEventListener("DOMContentLoaded", function(event) {
   anchors.add();
+
+  // TODO: We should probably look into updating the tocbot library
+  // but for now we can pad the bottom of the content to make
+  // sure you can scroll into each section of the ToC.
+  var content = $('.content')
+  var lastHeading = content.children().filter(':header').sort(function (a, b) {
+    var aTop = a.offsetTop;
+    var bTop = b.offsetTop;
+    return (aTop < bTop) ? -1 : (aTop > bTop) ? 1 : 0;
+  }).last().get(0)
+  var fullHeight = content.outerHeight(true) + content.offset().top
+  var delta = fullHeight - lastHeading.offsetTop
+  var padding = window.innerHeight - delta
+  content.css('paddingBottom', padding + 'px');
+
+  tocbot.init({
+    tocSelector: '.toc',
+    contentSelector: '.content',
+    headingSelector: 'h1, h2, h3, h4, h5',
+    scrollSmooth: false,
+    scrollContainer: ".dashboard-main",
+    scrollEndCallback: function(e) {
+      // Make sure the current ToC item we are on is visible in the nav bar
+      $('.docs-nav-item.is-active')[0].scrollIntoView();
+    }
+  });
+
 });
+

docs/website/assets/sass/toc.sass

@@ -1,26 +1,27 @@
+.toc-link::before
+  background-color: #EEE
+  content: '  '
+  display: inline-block
+  height: inherit
+  left: 0
+  margin-top: .1rem
+  position: absolute
+  width: 2px
+
+.is-active-link::before
+  background-color: $primary
+
 .toc
   a
-    color: $primary
+    color: #737373
 
     &:hover
       color: $dark
 
-  li
-    line-height: 110%
-
   +desktop
     margin: .5rem 0 1rem 1rem
     font-size: .9rem
 
-    li + li
-      margin-top: .6rem
-
   +touch
     margin: .4rem 0 .75rem .8rem
     font-size: .75rem
-
-    li + li
-      margin-top: .4rem
-
-  ul li ul li ul li
-    display: none

docs/website/layouts/partials/css.html

@@ -7,6 +7,9 @@
 {{ $cssProdOpts  := (dict "targetPath" $cssOutput "includePaths" $includePaths "outputStyle" "compressed") }}
 {{ $cssOpts      := cond $inServerMode $cssDevOpts $cssProdOpts }}
 {{ $css          := resources.Get $sass | toCSS $cssOpts }}
+
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.7.0/tocbot.css">
+
 {{ if $isHome }}
 <link media="screen" charset="utf-8" rel="stylesheet" href="/css/home.css">
 {{ else }}

docs/website/layouts/partials/docs/sidenav-link.html

@@ -18,7 +18,7 @@
 </a>
 {{- if $isThisPage -}}
 <div class="toc">
-  {{ .ctx.TableOfContents }}
+  <!-- generated at runtime  -->
 </div>
 {{- end -}}
 {{- end -}}

docs/website/layouts/partials/javascript.html

@@ -1,4 +1,5 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.7.0/tocbot.min.js"></script>
 {{ $app := resources.Get "js/app.js" | fingerprint }}
 <script src="{{ $app.RelPermalink }}" integrity="{{ $app.Data.Integrity }}"></script>
 <script src="/js/anchor.min.js"></script>