WIP: removed remaining scripts from footer/javascript.html. Migrated to components and utilities. Conditionally imports Mermaid if page has a diagram.

assets/js/components/diagram.js

@@ -0,0 +1,17 @@
+export default function Diagram({ component }) {
+  // Only load mermaid when diagrams are present
+  const hasDiagrams = document.querySelectorAll('.mermaid').length > 0;
+  
+  if (hasDiagrams) {
+    import("mermaid").then(({ mermaid }) => {
+      mermaid.initialize({
+        startOnLoad: true,
+        themeVariables: {
+          fontFamily: "Proxima Nova",
+          fontSize: '18px',
+        }
+      });
+      mermaid.run();
+    });
+  }
+}

assets/js/datetime.js

@@ -1,30 +1,47 @@
-const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+var date = new Date();
-var date = new Date()
+var currentTimestamp = date.toISOString().replace(/^(.*)(\.\d+)(Z)/, '$1$3'); // 2023-01-01T12:34:56Z
-var currentTimestamp = date.toISOString().replace(/^(.*)(\.\d+)(Z)/, '$1$3') // 2023-01-01T12:34:56Z
+var currentTime = date.toISOString().replace(/(^.*T)(.*)(Z)/, '$2') + '084216'; // 12:34:56.000084216
-var currentTime = date.toISOString().replace(/(^.*T)(.*)(Z)/, '$2') + '084216' // 12:34:56.000084216
 
-function currentDate(offset=0, trimTime=false) {
+function currentDate(offset = 0, trimTime = false) {
-  outputDate = new Date(date)
+  outputDate = new Date(date);
-  outputDate.setDate(outputDate.getDate() + offset)
+  outputDate.setDate(outputDate.getDate() + offset);
 
   if (trimTime) {
-    return outputDate.toISOString().replace(/T.*$/, '') // 2023-01-01
+    return outputDate.toISOString().replace(/T.*$/, ''); // 2023-01-01
   } else {
-    return outputDate.toISOString().replace(/T.*$/, 'T00:00:00Z') // 2023-01-01T00:00:00Z
+    return outputDate.toISOString().replace(/T.*$/, 'T00:00:00Z'); // 2023-01-01T00:00:00Z
   }
 }
 
 function enterpriseEOLDate() {
-  var inTwoYears = date.setFullYear(date.getFullYear() + 2)
+  const monthNames = [
-  earliestEOL = new Date(inTwoYears)
+    'January',
-  return `${monthNames[earliestEOL.getMonth()]} ${earliestEOL.getDate()}, ${earliestEOL.getFullYear()}`
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ];
+  var inTwoYears = date.setFullYear(date.getFullYear() + 2);
+  earliestEOL = new Date(inTwoYears);
+  return `${monthNames[earliestEOL.getMonth()]} ${earliestEOL.getDate()}, ${earliestEOL.getFullYear()}`;
 }
 
-$('span.current-timestamp').text(currentTimestamp)
+function initialize() {
-$('span.current-time').text(currentTime)
+  $('span.current-timestamp').text(currentTimestamp);
-$('span.enterprise-eol-date').text(enterpriseEOLDate)
+  $('span.current-time').text(currentTime);
-$('span.current-date').each(function() {
+  $('span.enterprise-eol-date').text(enterpriseEOLDate);
-  var dayOffset = parseInt($(this).attr("offset"))
+  $('span.current-date').each(function () {
-  var trimTime = $(this).attr("trim-time") === "true"
+    var dayOffset = parseInt($(this).attr('offset'));
-  $(this).text(currentDate(dayOffset, trimTime))
+    var trimTime = $(this).attr('trim-time') === 'true';
-})
+    $(this).text(currentDate(dayOffset, trimTime));
+  });
+}
+
+export { initialize };

assets/js/flux-group-keys.js

@@ -1,4 +1,4 @@
-var tablesElement = $("#flux-group-keys-demo #grouped-tables")
+import $ from 'jquery';
 
 // Sample data
 let data = [
@@ -27,6 +27,18 @@ let data = [
 // Default group key
 let groupKey = ["_measurement", "loc", "sensorID", "_field"]
 
+export default function FluxGroupKeysDemo({ component }) {
+  $(".column-list label").click(function () {
+    toggleCheckbox($(this))
+    groupKey = getChecked();
+    groupData();
+    buildGroupExample();
+  });
+
+  // Group and render tables on load
+  groupData();
+}
+
 // Build a table group (group key and table) using an array of objects
 function buildTable(inputData) {
 
@@ -91,6 +103,7 @@ function buildTable(inputData) {
 
 // Clear and rebuild all HTML tables
 function buildTables(data) {
+  let tablesElement = $("#flux-group-keys-demo #grouped-tables");
   existingTables = tablesElement[0]
   while (existingTables.firstChild) {
     existingTables.removeChild(existingTables.firstChild);
@@ -124,10 +137,9 @@ function groupData() {
   buildTables(groupedData);
 }
 
-// Get selected column names
-var checkboxes = $("input[type=checkbox]");
-
 function getChecked() {
+  // Get selected column names
+  var checkboxes = $("input[type=checkbox]");
   var checked = [];
   for (var i = 0; i < checkboxes.length; i++) {
     var checkbox = checkboxes[i];
@@ -145,13 +157,3 @@ function buildGroupExample() {
   var columnCollection = getChecked().map(i => '<span class=\"s2\">"' + i + '"</span>').join(", ")
   $("pre#group-by-example")[0].innerHTML = "data\n  <span class='nx'>|></span> group(columns<span class='nx'>:</span> [" + columnCollection + "])";
 }
-
-$(".column-list label").click(function () {
-  toggleCheckbox($(this))
-  groupKey = getChecked();
-  groupData();
-  buildGroupExample();
-});
-
-// Group and render tables on load
-groupData()

assets/js/main.js

@@ -12,6 +12,7 @@ import $ from 'jquery';
 import * as apiLibs from './api-libs.js';
 import * as codeControls from './code-controls.js';
 import * as contentInteractions from './content-interactions.js';
+import * as datetime from './datetime.js';
 import { delay } from './helpers.js';
 import { InfluxDBUrl } from './influxdb-url.js';
 import * as localStorage from './local-storage.js';
@@ -32,11 +33,14 @@ import * as v3Wayfinding from './v3-wayfinding.js';
 import AskAITrigger from './ask-ai-trigger.js';
 import CodePlaceholder from './code-placeholders.js';
 import { CustomTimeTrigger } from './custom-timestamps.js';
+import Diagram from './components/diagram.js';
 import FeatureCallout from './feature-callouts.js';
+import FluxGroupKeysDemo from './flux-group-keys.js';
 import FluxInfluxDBVersionsTrigger from './flux-influxdb-versions.js';
 import KeyBinding from './keybindings.js';
 import ListFilters from './list-filters.js';
 import ProductSelector from './version-selector.js';
+import ReleaseToc from './release-toc.js';
 import { SearchButton } from './search-button.js';
 import SidebarSearch from './components/sidebar-search.js';
 import { SidebarToggle } from './sidebar-toggle.js';
@@ -57,11 +61,14 @@ const componentRegistry = {
   'ask-ai-trigger': AskAITrigger,
   'code-placeholder': CodePlaceholder,
   'custom-time-trigger': CustomTimeTrigger,
+  'diagram': Diagram,
   'feature-callout': FeatureCallout,
+  'flux-group-keys-demo': FluxGroupKeysDemo,
   'flux-influxdb-versions-trigger': FluxInfluxDBVersionsTrigger,
   'keybinding': KeyBinding,
   'list-filters': ListFilters,
   'product-selector': ProductSelector,
+  'release-toc': ReleaseToc,
   'search-button': SearchButton,
   'sidebar-search': SidebarSearch,
   'sidebar-toggle': SidebarToggle,
@@ -140,6 +147,7 @@ function initModules() {
   apiLibs.initialize();
   codeControls.initialize();
   contentInteractions.initialize();
+  datetime.initialize();
   InfluxDBUrl();
   notifications.initialize();
   pageFeedback.initialize();

assets/js/release-toc.js

@@ -1,58 +1,59 @@
 /////////////////////////// Table of Contents Script ///////////////////////////
 
 /*
-  * This script is used to generate a table of contents for the
+ * This script is used to generate a table of contents for the
-  * release notes pages.
+ * release notes pages.
-*/
+ */
-
+export default function ReleaseToc({ component }) {
-// Use jQuery filter to get an array of all the *release* h2 elements
+  // Use jQuery filter to get an array of all the *release* h2 elements
-const releases = $('h2').filter(
+  const releases = $('h2').filter(
-  (_i, el) => !el.id.match(/checkpoint-releases/)
+    (_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`;
+  // Extract data about each release from the array of releases
+  const releaseData = releases.map((_i, el) => ({
+    name: el.textContent,
+    id: el.id,
+    class: el.getAttribute('class'),
+    date: el.getAttribute('date'),
+  }));
 
-  if (newHeight >= maxHeight) {
+  // Use release data to generate a list item for each release
-    $('#release-toc .show-more').fadeOut(100);
+  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);
+    }
+  });
+}

layouts/partials/footer/javascript.html

@@ -1,10 +1,3 @@
-{{ $fluxGroupKeys := resources.Get "js/flux-group-keys.js" }}
-{{ $dateTime := resources.Get "js/datetime.js" }}
-{{ $releaseTOC := resources.Get "/js/release-toc.js" }}
-{{ $fluxGroupKeyjs := $fluxGroupKeys | resources.Fingerprint }}
-{{ $dateTimejs := $dateTime | resources.Fingerprint }}
-{{ $releaseTOCjs := $releaseTOC | resources.Fingerprint }}
-
 <!-- Load cloudUrls array -->
 <script type="text/javascript">
   cloudUrls = [
@@ -13,35 +6,3 @@
     {{ end -}}
   ]
 </script>
-
-
-{{ if .Page.HasShortcode "diagram" }}
-<!-- Load mermaid.js for diagrams -->
-<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
-<script>
-  mermaid.initialize({
-    startOnLoad: true,
-
-    themeVariables: {
-      fontFamily: "Proxima Nova",
-      fontSize: '18px',
-    }
-  })
-</script>
-{{ end }}
-
-<!-- Load group key demo JS if when the group key demo shortcode is present -->
-{{ if .Page.HasShortcode "flux/group-key-demo" }}
-<script type="text/javascript" src="{{ $fluxGroupKeyjs.RelPermalink }}"></script>
-{{ end }}
-
-<!-- Load datetime js if when datetime shortcodes are present -->
-{{ if or (.Page.HasShortcode "datetime/current-time") (.Page.HasShortcode "datetime/current-timestamp")
-(.Page.HasShortcode "datetime/current-date") (.Page.HasShortcode "datetime/enterprise-eol-date") }}
-<script type="text/javascript" src="{{ $dateTimejs.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 }}

layouts/shortcodes/diagram.html

@@ -1,3 +1,3 @@
-<div class="mermaid">
+<div class="mermaid" data-component="diagram">
   {{.Inner}}
 </div>

layouts/shortcodes/flux/group-key-demo.html

@@ -1,4 +1,4 @@
-<div id="flux-group-keys-demo">
+<div id="flux-group-keys-demo" data-component="flux-group-keys-demo">
   <div id="group-by-columns">
     <ul class="column-list">
       <li>

layouts/shortcodes/release-toc.html

@@ -2,7 +2,7 @@
 {{- $currentVersion := index $productPathData 1 -}}
 {{- $show := .Get "show" | default 12 -}}
 
-<div id="release-toc" class="{{ $currentVersion }}">
+<div id="release-toc" class="{{ $currentVersion }}" data-component="release-toc">
   <ul id="release-list" style="height: calc({{ $show }} * 1.885rem);" show="{{ $show }}">
     <!-- PLACEHOLDER FOR JS-GENERATED LIST ITEMS -->
   </ul>