Merge branch 'master' into docs/clustered/explain-postgresql-dsn-password-with-symbols

assets/js/release-toc.js

@@ -0,0 +1,58 @@
+/////////////////////////// Table of Contents Script ///////////////////////////
+
+/*
+  * This script is used to generate a table of contents for the
+  * release notes pages.
+*/
+
+// Use jQuery filter to get an array of all the *release* h2 elements
+const releases = $('h2').filter(
+  (_i, el) => !el.id.match(/checkpoint-releases/)
+);
+
+// Extract data about each release from the array of releases
+releaseData = releases.map((_i, el) => ({
+  name: el.textContent,
+  id: el.id,
+  class: el.getAttribute('class'),
+  date: el.getAttribute('date')
+}));
+
+// Use release data to generate a list item for each release
+getReleaseItem = (releaseData) => {
+  var li = document.createElement("li");
+  if (releaseData.class !== null) {
+    li.className = releaseData.class;
+  }
+  li.innerHTML = `<a href="#${releaseData.id}">${releaseData.name}</a>`;
+  li.setAttribute('date', releaseData.date);
+  return li;
+}
+
+// Use jQuery each to build the release table of contents
+releaseData.each((_i, release) => {
+  $('#release-toc ul')[0].appendChild(getReleaseItem(release));
+});
+
+/*
+  * This script is used to expand the release notes table of contents by the
+  * number specified in the `show` attribute of `ul.release-list`.
+  * Once all the release items are visible, the "Show More" button is hidden.
+*/
+$('#release-toc .show-more').click(function () {
+  const itemHeight = 1.885; // Item height in rem
+  const releaseNum = releaseData.length;
+  const maxHeight = releaseNum * itemHeight;
+  const releaseIncrement = Number($('#release-list')[0].getAttribute('show'));
+  const currentHeight = Number(
+    $('#release-list')[0].style.height.match(/\d+\.?\d+/)[0]
+  );
+  const potentialHeight = currentHeight + releaseIncrement * itemHeight;
+  const newHeight = potentialHeight > maxHeight ? maxHeight : potentialHeight;
+
+  $('#release-list')[0].style.height = `${newHeight}rem`;
+
+  if (newHeight >= maxHeight) {
+    $('#release-toc .show-more').fadeOut(100);
+  }
+});

assets/styles/layouts/_article.scss

@@ -56,6 +56,16 @@
       color: $r-dreamsicle;
     }
 
+    &.checkpoint::before {
+      content: '\e93b';
+      font-family: 'icomoon-v4';
+      font-size: 2.25rem;
+      color: $br-new-magenta;
+      display: inline;
+      margin: 0 .5rem 0 0;
+      vertical-align: top;
+    }
+
     &[metadata]::after {
       content: attr(metadata);
       margin-left: .65rem;
@@ -203,6 +213,7 @@
   "article/pagination-btns",
   "article/product-tags",
   "article/related",
+  "article/release-toc",
   "article/scrollbars",
   "article/svgs",
   "article/tabbed-content",
@@ -307,6 +318,10 @@
     &.magenta {
       color: $p-comet;
     }
+
+    &.pink {
+      color: $br-new-magenta;
+    }
   }
 
   /////////////////////////// Getting Started Buttons //////////////////////////

assets/styles/layouts/article/_release-toc.scss

@@ -0,0 +1,68 @@
+#release-toc {
+  margin: 2rem 0 3rem;
+  
+  ul {
+    list-style: none;
+    overflow: hidden;
+    padding-left: 0;
+    margin-bottom: .75rem;
+    transition: height .2s;
+
+    li {
+      line-height: 1.2em;
+      margin: .5rem 0;
+
+      &::after {
+        content: attr(date);
+        font-size: 1rem;
+        margin-left: .5rem;
+        color: rgba($article-text, .5);
+      }
+    }
+  }
+
+  &.clustered {
+    ul {
+      padding-left: 1.5rem;
+
+      .checkpoint {
+        margin-left: -1.5rem;
+
+        &::before {
+          content: '\e93b' !important;
+          font-family: 'icomoon-v4';
+          color: $br-new-magenta;
+          display: inline-block;
+          margin: 0 .5rem 0 0;
+          vertical-align: top;
+        }
+      }
+    }
+  }
+
+  .show-more {
+    color: $article-link;
+    transition: color .2s;
+    font-weight: $medium;
+    font-size: 1rem;
+
+    &::before {
+      content: '\e935';
+      font-family: 'icomoon-v4';
+      font-size: .9rem;
+      color: $article-bg;
+      background: $article-link;
+      border-radius: 50%;
+      margin-right: .5rem;
+      transition: background .15s;
+    }
+
+    &:hover {
+      cursor: pointer;
+      color: $article-link-hover;
+      &::before {
+        background: $article-link-hover;
+      }
+    }
+  }
+}

layouts/partials/footer/javascript.html

@@ -18,12 +18,14 @@
 {{ $fluxInfluxDBVersions := resources.Get "/js/flux-influxdb-versions.js" }}
 {{ $v3Wayfinding := resources.Get "/js/v3-wayfinding.js"}}
 {{ $codePlaceholders := resources.Get "/js/code-placeholders.js" }}
+{{ $releaseTOC := resources.Get "/js/release-toc.js" }}
 {{ $footerjs := slice $versionSelector $contentInteractions $searchInteractions $listFilters $modals $influxdbURLs $featureCallouts $tabbedContent $apiLibs $notifications $keybindings $codeControls $pageFeedback $homepageInteractions $fluxInfluxDBVersions | resources.Concat "js/footer.bundle.js" | resources.Fingerprint }}
 {{ $fluxGroupKeyjs := $fluxGroupKeys | resources.Fingerprint }}
 {{ $dateTimejs := $dateTime | resources.Fingerprint }}
 {{ $influxdbGSTimestampsjs := $influxdbGSTimestamps | resources.Fingerprint }}
 {{ $v3Wayfindingjs := $v3Wayfinding | resources.Fingerprint }}
 {{ $codePlaceholdersjs := $codePlaceholders | resources.Fingerprint }}
+{{ $releaseTOCjs := $releaseTOC | resources.Fingerprint }}
 
 <!-- Load cloudUrls array -->
 <script type="text/javascript">
@@ -76,5 +78,10 @@
 <script type="text/javascript" src="{{ $codePlaceholdersjs.RelPermalink }}"></script>
 {{ end }}
 
+<!-- Load code release-toc js when release-toc shortcode is present -->
+{{ if .Page.HasShortcode "release-toc" }}
+<script type="text/javascript" src="{{ $releaseTOCjs.RelPermalink }}"></script>
+{{ end }}
+
 <!-- Load footer.js -->
 <script type="text/javascript" src="{{ $footerjs.RelPermalink }}"></script>

layouts/shortcodes/release-toc.html

@@ -0,0 +1,10 @@
+{{- $productPathData := findRE "[^/]+.*?" .Page.RelPermalink -}}
+{{- $currentVersion := index $productPathData 1 -}}
+{{- $show := .Get "show" | default 12 -}}
+
+<div id="release-toc" class="{{ $currentVersion }}">
+  <ul id="release-list" style="height: calc({{ $show }} * 1.885rem);" show="{{ $show }}">
+    <!-- PLACEHOLDER FOR JS-GENERATED LIST ITEMS -->
+  </ul>
+  <span class="show-more">Show more</span>
+</div>