Add "jump to section" dropdown

website/source/assets/javascripts/application.js

@@ -13,3 +13,4 @@
 //= require analytics
 //= require gsap-custom
 //= require animations
+//= require section-quicknav

website/source/assets/javascripts/section-quicknav.js

@@ -0,0 +1,42 @@
+// On docs/content pages, add a hierarchical quick nav menu if there are
+// more than two H2/H3/H4 headers.
+document.addEventListener("turbolinks:load", function() {
+    var headers = $('#inner').find('h2, h3, h4');
+    if (window.location.pathname !== "/docs/index.html" && $("div#inner-quicknav").length === 0 && headers.length > 0) {
+        // Build the quick-nav HTML:
+        $("#inner h1").first().after(
+            '<div id="inner-quicknav">' +
+            '<span id="inner-quicknav-trigger">' +
+            'Jump to Section' +
+            '<svg width="9" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M8.811 1.067a.612.612 0 0 0 0-.884.655.655 0 0 0-.908 0L4.5 3.491 1.097.183a.655.655 0 0 0-.909 0 .615.615 0 0 0 0 .884l3.857 3.75a.655.655 0 0 0 .91 0l3.856-3.75z" fill-rule="evenodd"/></svg>' +
+            '</span>' +
+            '<ul class="dropdown"></ul>' +
+            '</div>'
+        );
+        var quickNav = $('#inner-quicknav > ul.dropdown');
+        headers.each(function(index, element) {
+            var level = element.nodeName.toLowerCase();
+            var header_text = $(element).text();
+            var header_id = $(element).attr('id');
+            quickNav.append('<li class="level-' + level + '"><a href="#' + header_id + '">' + header_text + '</a></li>');
+        });
+        // Attach event listeners:
+        // Trigger opens and closes.
+        $('#inner-quicknav #inner-quicknav-trigger').on('click', function(e) {
+            $(this).siblings('ul').toggleClass('active');
+            e.stopPropagation();
+        });
+        // Clicking inside the quick-nav doesn't close it.
+        quickNav.on('click', function(e) {
+            e.stopPropagation();
+        });
+        // Jumping to a section means you're done with the quick-nav.
+        quickNav.find('li a').on('click', function() {
+            quickNav.removeClass('active');
+        });
+        // Clicking outside the quick-nav closes it.
+        $('body').on('click', function() {
+            quickNav.removeClass('active');
+        });
+    }
+});

website/source/assets/stylesheets/_inner.scss

@@ -1,4 +1,69 @@
 #inner {
+  #inner-quicknav {
+    margin-top: -15px;
+    margin-bottom: 25px;
+    margin-left: 10px;
+
+    span {
+      line-height: 20px;
+      cursor: pointer;
+      font-variant-caps: all-small-caps;
+      color: #666;
+
+      svg {
+        fill: $body-font-color;
+        position: relative;
+        top: -2px;
+        width: 9px;
+        height: 5px;
+        margin-left: 7px;
+      }
+    }
+
+    ul {
+      visibility: hidden;
+      opacity: 0;
+      transition: all 0.5s ease;
+      width: 80%;
+      box-shadow: 0px 4px 12px -2px rgba(63, 68, 85, 0.5);
+      border-radius: 3px;
+      padding: 2rem;
+      position: absolute;
+      z-index: 1;
+      background-color: #ffffff;
+      margin-left: -15px;
+
+      &.active {
+        visibility: visible;
+        opacity: 1;
+        display: block;
+        transition-duration: 0s;
+      }
+
+      li {
+        clear: both;
+        width: 100%;
+        display: block;
+        position: relative;
+        margin-bottom: 0;
+        margin-left: 0;
+        padding-top: 0;
+        padding-bottom: 0;
+
+        $toc-indent: 30px;
+        &.level-h2 { padding-left: $toc-indent * 0 }
+        &.level-h3 { padding-left: $toc-indent * 1 }
+        &.level-h4 { padding-left: $toc-indent * 2 }
+        &.level-h5 { padding-left: $toc-indent * 3 }
+        &.level-h6 { padding-left: $toc-indent * 4 }
+
+        a {
+          text-decoration: none;
+        }
+      }
+    }
+  }
+
   h1 {
     @extend .g-type-display-2;
   }

website/source/docs/commands/index.html.md

@@ -117,7 +117,7 @@ particularly with configuration management and init systems.
 
 These environment variables and their purpose are described below:
 
-## `CONSUL_HTTP_ADDR`
+### `CONSUL_HTTP_ADDR`
 
 This is the HTTP API address to the *local* Consul agent
 (not the remote server) specified as a URI with optional scheme:

website/source/docs/glossary.html.md

@@ -10,16 +10,6 @@ description: |-
 
 This page collects brief definitions of some of the technical terms used in the documentation for Consul and Consul Enterprise, as well as some terms that come up frequently in conversations throughout the Consul community.
 
-* [Agent](#agent) 
-* [Client](#client) 
-* [Server](#server)
-* [Datacenter](#datacenter)
-* [Consensus](#consensus) 
-* [Gossip](#gossip)
-* [LAN Gossip](#lan-gossip)
-* [WAN Gossip](#wan-gossip)
-* [RPC](#rpc) 
-
 ## Agent 
 
 An agent is the long running daemon on every member of the Consul cluster.