WIP: Refactored all scripts from footer.js into components. Removed footer.js. Exports jQuery ($) to a window global for use by other scripts. Scripts bundled into footer.js didn't reliably load after jQuery.

assets/js/components/sidebar-search.js

@@ -0,0 +1,6 @@
+import SearchInteractions from '../utils/search-interactions';
+
+export default function SidebarSearch({ component }) {
+  const searchInput = component.querySelector('.sidebar--search-field');
+  SearchInteractions({ searchInput });
+}

assets/js/feature-callouts.js

@@ -6,33 +6,29 @@
   assets/js/cookies.js.
 */
 
+import $ from 'jquery';
+import * as LocalStorageAPI from './local-storage.js';
+
 // Get notification ID
-function getCalloutID (el) {
+function getCalloutID(el) {
   return $(el).attr('id');
 }
 
 // Hide a callout and update the cookie with the viewed callout
-function hideCallout (calloutID) {
-  if (!window.LocalStorageAPI.notificationIsRead(calloutID)) {
-    window.LocalStorageAPI.setNotificationAsRead(calloutID, 'callout');
+function hideCallout(calloutID) {
+  if (!LocalStorageAPI.notificationIsRead(calloutID)) {
+    LocalStorageAPI.setNotificationAsRead(calloutID, 'callout');
     $(`#${calloutID}`).fadeOut(200);
   }
 }
 
 // Show the url feature callouts on page load
-$(document).ready(function () {
-  $('.feature-callout').each(function () {
-    const calloutID = getCalloutID($(this));
+export default function FeatureCallout({ component }) {
+  const calloutID = getCalloutID($(component));
 
-    if (!window.LocalStorageAPI.notificationIsRead(calloutID, 'callout')) {
-      $(`#${calloutID}.feature-callout`)
-        .fadeIn(300)
-        .removeClass('start-position');
-    }
-  });
-});
-
-// Hide the InfluxDB URL selector callout
-// $('button.url-trigger, #influxdb-url-selector .close').click(function () {
-//   hideCallout('influxdb-url-selector');
-// });
+  if (LocalStorageAPI.notificationIsRead(calloutID, 'callout')) {
+    $(`#${calloutID}.feature-callout`)
+      .fadeIn(300)
+      .removeClass('start-position');
+  }
+}

assets/js/keybindings.js

@@ -11,17 +11,14 @@ function getPlatform() {
   }
 }
 
-const platform = getPlatform()
-
-function addOSClass(osClass) {
-  $('.keybinding').addClass(osClass)
+function addOSClass(osClass, { $component }) {
+  $component.addClass(osClass)
 }
 
-function updateKeyBindings() {
-  $('.keybinding').each(function() {
-    var osx = $(this).data("osx")
-    var linux = $(this).data("linux")
-    var win = $(this).data("win")
+function updateKeyBindings({ $component }) {
+    var osx = $component.data("osx")
+    var linux = $component.data("linux")
+    var win = $component.data("win")
 
     if (platform === "other") {
       if (win != linux) {
@@ -30,12 +27,16 @@ function updateKeyBindings() {
         var keybind = '<code>' + linux + '</code> for Linux and Windows and <code class="osx">' + osx + '</code> for macOS';
       }
     } else {
-      var keybind = '<code>' + $(this).data(platform) + '</code>'
+      var keybind = '<code>' + $component.data(platform) + '</code>'
     }
 
-    $(this).html(keybind)
-  })
+    $component.html(keybind)
 }
 
-addOSClass(platform)
-updateKeyBindings()
+export default function KeyBinding({ component }) {
+  // Initialize keybindings
+  const platform = getPlatform();
+  const $component = $(component);
+  addOSClass(platform, { $component });
+  updateKeyBindings({ $component });
+}

assets/js/list-filters.js

@@ -3,8 +3,8 @@ function countTag(tag) {
   return $(".visible[data-tags*='" + tag + "']").length
 }
 
-function getFilterCounts() {
-  $('#list-filters label').each(function() {
+function getFilterCounts($labels) {
+  $labels.each(function() {
     var tagName = $('input', this).attr('name').replace(/[\W/]+/, "-");
     var tagCount = countTag(tagName);
     $(this).attr('data-count', '(' + tagCount + ')');
@@ -16,35 +16,39 @@ function getFilterCounts() {
   })
 }
 
-// Get initial filter count on page load
-getFilterCounts()
+export default function ListFilters({ component }) {
+  const $labels = $(component).find('label');
+  const $inputs = $(component).find('input');
 
-$("#list-filters input").click(function() {
+  getFilterCounts($labels);
 
-  // List of tags to hide
-  var tagArray = $("#list-filters input:checkbox:checked").map(function(){
-      return $(this).attr('name').replace(/[\W]+/, "-");
-    }).get();
+  $inputs.click(function() {
 
-  // List of tags to restore
-  var restoreArray = $("#list-filters input:checkbox:not(:checked)").map(function(){
-      return $(this).attr('name').replace(/[\W]+/, "-");
-    }).get();
+    // List of tags to hide
+    var tagArray = $(component).find("input:checkbox:checked").map(function(){
+        return $(this).attr('name').replace(/[\W]+/, "-");
+      }).get();
 
-  // Actions for filter select
-  if ( $(this).is(':checked') ) {
-    $.each( tagArray, function( index, value ) {
-      $(".filter-item.visible:not([data-tags~='" + value + "'])").removeClass('visible').fadeOut()
-    })
-  } else {
-    $.each( restoreArray, function( index, value ) {
-      $(".filter-item:not(.visible)[data-tags~='" + value + "']").addClass('visible').fadeIn()
-    })
-    $.each( tagArray, function( index, value ) {
-      $(".filter-item.visible:not([data-tags~='" + value + "'])").removeClass('visible').hide()
-    })
-  }
+    // List of tags to restore
+    var restoreArray = $(component).find("input:checkbox:not(:checked)").map(function(){
+        return $(this).attr('name').replace(/[\W]+/, "-");
+      }).get();
 
-  // Refresh filter count
-  getFilterCounts()
-});
+    // Actions for filter select
+    if ( $(this).is(':checked') ) {
+      $.each( tagArray, function( index, value ) {
+        $(".filter-item.visible:not([data-tags~='" + value + "'])").removeClass('visible').fadeOut()
+      })
+    } else {
+      $.each( restoreArray, function( index, value ) {
+        $(".filter-item:not(.visible)[data-tags~='" + value + "']").addClass('visible').fadeIn()
+      })
+      $.each( tagArray, function( index, value ) {
+        $(".filter-item.visible:not([data-tags~='" + value + "'])").removeClass('visible').hide()
+      })
+    }
+
+    // Refresh filter count
+    getFilterCounts($labels);
+  });
+}

assets/js/main.js

@@ -3,6 +3,9 @@
 // If you need to pass parameters from the calling Hugo page, you can import them here like so:
 // import * as pageParams from '@params';
 
+// Import dependencies that we still need to load in the global scope
+import $ from 'jquery';
+
 /** Import modules that are not components.
  * TODO: Refactor these into single-purpose component modules.
  */
@@ -29,8 +32,13 @@ 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 FeatureCallout from './feature-callouts.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 { SearchButton } from './search-button.js';
+import SidebarSearch from './components/sidebar-search.js';
 import { SidebarToggle } from './sidebar-toggle.js';
 import Theme from './theme.js';
 import ThemeSwitch from './theme-switch.js';
@@ -49,8 +57,13 @@ const componentRegistry = {
   'ask-ai-trigger': AskAITrigger,
   'code-placeholder': CodePlaceholder,
   'custom-time-trigger': CustomTimeTrigger,
+  'feature-callout': FeatureCallout,
   'flux-influxdb-versions-trigger': FluxInfluxDBVersionsTrigger,
+  'keybinding': KeyBinding,
+  'list-filters': ListFilters,
+  'product-selector': ProductSelector,
   'search-button': SearchButton,
+  'sidebar-search': SidebarSearch,
   'sidebar-toggle': SidebarToggle,
   'theme': Theme,
   'theme-switch': ThemeSwitch
@@ -72,6 +85,11 @@ function initGlobals() {
   window.influxdatadocs.toggleModal = modals.toggleModal;
   window.influxdatadocs.componentRegistry = componentRegistry;
   
+  // Re-export jQuery to global namespace for legacy scripts
+  if (typeof window.jQuery === 'undefined') {
+    window.jQuery = window.$ = $;
+  }
+  
   return window.influxdatadocs;
 }
 

assets/js/search-interactions.js

@@ -1,10 +0,0 @@
-// Fade content wrapper when focusing on search input
-$('#algolia-search-input').focus(function() {
-  $('.content-wrapper').fadeTo(300, .35);
-})
-
-// Hide search dropdown when leaving search input
-$('#algolia-search-input').blur(function() {
-  $('.content-wrapper').fadeTo(200, 1);
-  $('.ds-dropdown-menu').hide();
-})

assets/js/utils/search-interactions.js

@@ -0,0 +1,22 @@
+export default function SearchInteractions({ searchInput }) {
+  const contentWrapper = document.querySelector('.content-wrapper');
+  const dropdownMenu = document.querySelector('.ds-dropdown-menu');
+
+  // Fade content wrapper when focusing on search input
+  searchInput.addEventListener('focus', () => {
+    // Using CSS transitions instead of jQuery's fadeTo for better performance
+    contentWrapper.style.opacity = '0.35';
+    contentWrapper.style.transition = 'opacity 300ms';
+  });
+
+  // Hide search dropdown when leaving search input
+  searchInput.addEventListener('blur', () => {
+    contentWrapper.style.opacity = '1';
+    contentWrapper.style.transition = 'opacity 200ms';
+    
+    // Hide dropdown menu
+    if (dropdownMenu) {
+      dropdownMenu.style.display = 'none';
+    }
+  });
+}

assets/js/version-selector.js

@@ -1,19 +1,21 @@
-// Select the product dropdown and dropdown items
-const productDropdown = document.querySelector("#product-dropdown");
-const dropdownItems = document.querySelector("#dropdown-items");
+export default function ProductSelector({ component }) {
+  // Select the product dropdown and dropdown items
+  const productDropdown = component.querySelector("#product-dropdown");
+  const dropdownItems = component.querySelector("#dropdown-items");
 
-// Expand the menu on click
-if (productDropdown) {
-  productDropdown.addEventListener("click", function() {
-    productDropdown.classList.toggle("open");
-    dropdownItems.classList.toggle("open");
+  // Expand the menu on click
+  if (productDropdown) {
+    productDropdown.addEventListener("click", function() {
+      productDropdown.classList.toggle("open");
+      dropdownItems.classList.toggle("open");
+    });
+  }
+
+  // Close the dropdown by clicking anywhere else
+  document.addEventListener("click", function(e) {
+    // Check if the click was outside of the '.product-list' container
+    if (!e.target.closest('.product-list')) {
+      dropdownItems.classList.remove("open");
+    }
   });
 }
-
-// Close the dropdown by clicking anywhere else
-document.addEventListener("click", function(e) {
-  // Check if the click was outside of the '.product-list' container
-  if (!e.target.closest('.product-list')) {
-    dropdownItems.classList.remove("open");
-  }
-});

layouts/index.html

@@ -19,7 +19,7 @@
 <div class="home-content">
 
   <div class="section search">
-    <div class="sidebar--search">
+    <div class="sidebar--search" data-component="sidebar-search">
       <input  class="sidebar--search-field"
               id="algolia-search-input"
               type="text"

layouts/partials/footer/feature-callout.html

@@ -13,7 +13,7 @@
 {{ $urlCalloutText := $scratch.Get "urlCalloutText" }}
 
 <!-- {{ if or $isOSS $isCloud $isHome }}
-<div class="feature-callout start-position" id="callout-url-selector">
+<div class="feature-callout start-position" id="callout-url-selector" data-component="feature-callout">
   <p>{{ $urlCalloutText }} <a href="#" class="close"><span class="icon-remove"></span></a></p>
 </div>
 {{ end }} -->

layouts/partials/footer/javascript.html

@@ -1,14 +1,6 @@
-{{ $jquery := resources.Get "js/jquery-3.5.0.min.js" }}
-{{ $versionSelector := resources.Get "js/version-selector.js" }}
-{{ $searchInteractions := resources.Get "js/search-interactions.js" }}
-{{ $listFilters := resources.Get "js/list-filters.js" }}
-{{ $featureCallouts := resources.Get "js/feature-callouts.js" }}
-{{ $keybindings := resources.Get "js/keybindings.js" }}
 {{ $fluxGroupKeys := resources.Get "js/flux-group-keys.js" }}
 {{ $dateTime := resources.Get "js/datetime.js" }}
-{{ $homepageInteractions := resources.Get "js/home-interactions.js" }}
 {{ $releaseTOC := resources.Get "/js/release-toc.js" }}
-{{ $footerjs := slice $jquery $versionSelector $searchInteractions $listFilters $featureCallouts $keybindings $homepageInteractions | resources.Concat "js/footer.bundle.js" | resources.Fingerprint }}
 {{ $fluxGroupKeyjs := $fluxGroupKeys | resources.Fingerprint }}
 {{ $dateTimejs := $dateTime | resources.Fingerprint }}
 {{ $releaseTOCjs := $releaseTOC | resources.Fingerprint }}
@@ -22,6 +14,7 @@
   ]
 </script>
 
+
 {{ if .Page.HasShortcode "diagram" }}
 <!-- Load mermaid.js for diagrams -->
 <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
@@ -52,6 +45,3 @@
 {{ 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/partials/header/javascript.html

@@ -12,7 +12,7 @@
 {{ end -}}
 {{ $products := .Site.Data.products }}
 {{ $influxdb_urls := .Site.Data.influxdb_urls }}
-<!-- Build main.js -->
+<!-- Build index.js -->
 {{ with resources.Get "js/index.js" }}
   {{ $opts := dict
     "minify" hugo.IsProduction
@@ -23,10 +23,10 @@
   {{ with . | js.Build $opts }}
     {{ if hugo.IsProduction }}
       {{ with . | fingerprint }}
-        <script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
+        <script defer src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
       {{ end }}
     {{ else }}
-      <script src="{{ .RelPermalink }}"></script>
+      <script defer src="{{ .RelPermalink }}"></script>
     {{ end }}
   {{ end }}
 {{ end }}

layouts/partials/sidebar.html

@@ -49,7 +49,7 @@
 <aside class="sidebar">
   {{ partial "sidebar/sidebar-toggle.html" (dict "state" "Close") }}
   <div class="search-and-nav-toggle">
-    <div class="sidebar--search">
+    <div class="sidebar--search" data-component="sidebar-search">
       <input  class="sidebar--search-field"
               id="algolia-search-input"
               type="text"

layouts/partials/topnav/product-selector.html

@@ -43,7 +43,7 @@ Identify products by their product path. Dictionary schema:
 
 {{ $templateDefaults := dict "context" . "productInfo" $productInfo "altLinks" $altLinks "pageRoot" $pageRoot "useRootProductLink" $useRootProductLink }}
 
-<div class="product-list">
+<div class="product-list" data-component="product-selector">
   <div id="product-dropdown">
     <p class="selected">{{ index (index $productInfo $pageRoot) 0 | default "Select product" }}</p>
   </div>

layouts/shortcodes/keybind.html

@@ -5,4 +5,4 @@
 {{- $mac := .Get "mac" | default $default -}}
 {{- $win := .Get "win" | default $default -}}
 {{- $linux := .Get "linux" | default $default -}}
-<span class="keybinding" data-osx="{{ $mac }}" data-win="{{ $win }}" data-linux="{{ $linux }}"><code>{{ $default }}</code></span>
+<span class="keybinding" data-osx="{{ $mac }}" data-win="{{ $win }}" data-linux="{{ $linux }}" data-component="keybinding"><code>{{ $default }}</code></span>

layouts/shortcodes/list-filters.html

@@ -1,6 +1,6 @@
 {{ $source := .Get 0 | default "telegraf"}}
 
-<div id="list-filters">
+<div id="list-filters" data-component="list-filters">
 
   {{ range ( index .Site.Data.list_filters $source) }}
   {{ $numValues := len .values }}