From e358db5610396666edae564179bd10d9f7ed91b2 Mon Sep 17 00:00:00 2001 From: Luke Kysow <1034429+lkysow@users.noreply.github.com> Date: Thu, 31 Oct 2019 12:14:08 -0700 Subject: [PATCH] Add "jump to section" dropdown --- .../source/assets/javascripts/application.js | 1 + .../assets/javascripts/section-quicknav.js | 42 ++++++++++++ website/source/assets/stylesheets/_inner.scss | 65 +++++++++++++++++++ website/source/docs/commands/index.html.md | 2 +- website/source/docs/glossary.html.md | 12 +--- 5 files changed, 110 insertions(+), 12 deletions(-) create mode 100644 website/source/assets/javascripts/section-quicknav.js diff --git a/website/source/assets/javascripts/application.js b/website/source/assets/javascripts/application.js index 6552cb3156..9270b4ab61 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 0000000000..295eb68cca --- /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 a1aac5da0c..edfc8a9650 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 59e878ba96..b0a65b74e9 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 70999834ae..47eff1f6d8 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.