diff --git a/website/source/assets/javascripts/application.js b/website/source/assets/javascripts/application.js index 6552cb315..9270b4ab6 100644 --- a/website/source/assets/javascripts/application.js +++ b/website/source/assets/javascripts/application.js @@ -13,3 +13,4 @@ //= require analytics //= require gsap-custom //= require animations +//= require section-quicknav diff --git a/website/source/assets/javascripts/section-quicknav.js b/website/source/assets/javascripts/section-quicknav.js new file mode 100644 index 000000000..295eb68cc --- /dev/null +++ b/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( + '
' + + '' + + 'Jump to Section' + + '' + + '' + + '' + + '
' + ); + 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('
  • ' + header_text + '
  • '); + }); + // 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'); + }); + } +}); diff --git a/website/source/assets/stylesheets/_inner.scss b/website/source/assets/stylesheets/_inner.scss index a1aac5da0..edfc8a965 100644 --- a/website/source/assets/stylesheets/_inner.scss +++ b/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; } diff --git a/website/source/docs/commands/index.html.md b/website/source/docs/commands/index.html.md index 59e878ba9..b0a65b74e 100644 --- a/website/source/docs/commands/index.html.md +++ b/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: diff --git a/website/source/docs/glossary.html.md b/website/source/docs/glossary.html.md index 70999834a..47eff1f6d 100644 --- a/website/source/docs/glossary.html.md +++ b/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. @@ -82,4 +72,4 @@ over the internet or wide area network. ## RPC Remote Procedure Call. This is a request / response mechanism allowing a -client to make a request of a server. \ No newline at end of file +client to make a request of a server.