chore(js): Extract Hugo params imports to single-purpose modules, fix environment-specific Hugo configs, use Hugo environments instead of specifying the config file, configure source maps and ESM for development and testing

.circleci/config.yml

@@ -41,7 +41,7 @@ jobs:
             - /home/circleci/bin
       - run:
           name: Hugo Build
-          command: npx hugo --config config/production/config.yml --logLevel info --minify --gc --destination workspace/public
+          command: yarn hugo --environment production --logLevel info --gc --destination workspace/public
       - persist_to_workspace:
           root: workspace
           paths:

.github/instructions/contributing.instructions.md

@@ -1730,11 +1730,30 @@ If you're adding UI functionality that requires JavaScript, follow these steps:
 
 ### Debugging JavaScript
 
-To debug JavaScript code used in the InfluxData documentation UI:
+To debug JavaScript code used in the InfluxData documentation UI, choose one of the following methods:
+
+- Use source maps and the Chrome DevTools debugger.
+- Use debug helpers that provide breakpoints and console logging as a workaround or alternative for using source maps and the Chrome DevTools debugger.
+
+#### Using source maps and Chrome DevTools debugger
+
+1. In VS Code, select Run > Start Debugging.
+2. Select the "Debug Docs (source maps)" configuration.
+3. Click the play button to start the debugger.
+5. Set breakpoints in the JavaScript source files--files in the
+   `assets/js/ns-hugo-imp:` namespace-- in the
+   VS Code editor or in the Chrome Developer Tools Sources panel:
+
+   - In the VS Code Debugger panel > "Loaded Scripts" section, find the
+     `assets/js/ns-hugo-imp:` namespace.
+   - In the Chrome Developer Tools Sources panel, expand
+     `js/ns-hugo-imp:/<YOUR_WORKSPACE_ROOT>/assets/js/`.
+
+#### Using debug helpers
 
 1. In your JavaScript module, import debug helpers from `assets/js/utils/debug-helpers.js`.
-   These helpers provide breakpoints and console logging as a workaround for
+   These helpers provide breakpoints and console logging as a workaround or alternative for
-   Hugo's lack of source map support in the asset pipeline.
+   using source maps and the Chrome DevTools debugger.
 2. Insert debug statements by calling the helper functions in your code--for example:
    
    ```js
@@ -1757,7 +1776,7 @@ To debug JavaScript code used in the InfluxData documentation UI:
    yarn hugo server
    ```
 
-4. In VS Code, go to Run > Start Debugging, and select the "Debug Docs (console-based)" configuration.
+4. In VS Code, go to Run > Start Debugging, and select the "Debug JS (debug-helpers)" configuration.
 
 Your system uses the configuration in `launch.json` to launch the site in Chrome
 and attach the debugger to the Developer Tools console.

.vscode/launch.json

@@ -2,7 +2,7 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "name": "Debug Docs (console-based)",
+      "name": "Debug JS (debug-helpers)",
       "type": "chrome",
       "request": "launch",
       "url": "http://localhost:1313",
@@ -13,6 +13,35 @@
       "sourceMaps": false,
       "trace": true,
       "smartStep": false
-    }
+    },
+    {
+      "name": "Debug JS (source maps)",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:1313",
+      "webRoot": "${workspaceFolder}",
+      "sourceMaps": true,
+      "sourceMapPathOverrides": {
+        "*": "${webRoot}/assets/js/*",
+        "main.js": "${webRoot}/assets/js/main.js",
+        "page-context.js": "${webRoot}/assets/js/page-context.js",
+        "ask-ai-trigger.js": "${webRoot}/assets/js/ask-ai-trigger.js",
+        "ask-ai.js": "${webRoot}/assets/js/ask-ai.js",
+        "utils/*": "${webRoot}/assets/js/utils/*",
+        "services/*": "${webRoot}/assets/js/services/*"
+      },
+      "skipFiles": [
+        "<node_internals>/**",
+        "node_modules/**",
+        "chrome-extension://**"
+      ],
+      "trace": true,
+      "smartStep": true,
+      "disableNetworkCache": true,
+      "userDataDir": "${workspaceFolder}/.vscode/chrome-user-data",
+      "runtimeArgs": [
+        "--disable-features=VizDisplayCompositor"
+      ]
+    },
   ]
 }

CONTRIBUTING.md

@@ -1718,11 +1718,30 @@ If you're adding UI functionality that requires JavaScript, follow these steps:
 
 ### Debugging JavaScript
 
-To debug JavaScript code used in the InfluxData documentation UI:
+To debug JavaScript code used in the InfluxData documentation UI, choose one of the following methods:
+
+- Use source maps and the Chrome DevTools debugger.
+- Use debug helpers that provide breakpoints and console logging as a workaround or alternative for using source maps and the Chrome DevTools debugger.
+
+#### Using source maps and Chrome DevTools debugger
+
+1. In VS Code, select Run > Start Debugging.
+2. Select the "Debug Docs (source maps)" configuration.
+3. Click the play button to start the debugger.
+5. Set breakpoints in the JavaScript source files--files in the
+   `assets/js/ns-hugo-imp:` namespace-- in the
+   VS Code editor or in the Chrome Developer Tools Sources panel:
+
+   - In the VS Code Debugger panel > "Loaded Scripts" section, find the
+     `assets/js/ns-hugo-imp:` namespace.
+   - In the Chrome Developer Tools Sources panel, expand
+     `js/ns-hugo-imp:/<YOUR_WORKSPACE_ROOT>/assets/js/`.
+
+#### Using debug helpers
 
 1. In your JavaScript module, import debug helpers from `assets/js/utils/debug-helpers.js`.
-   These helpers provide breakpoints and console logging as a workaround for
+   These helpers provide breakpoints and console logging as a workaround or alternative for
-   Hugo's lack of source map support in the asset pipeline.
+   using source maps and the Chrome DevTools debugger.
 2. Insert debug statements by calling the helper functions in your code--for example:
    
    ```js
@@ -1745,7 +1764,7 @@ To debug JavaScript code used in the InfluxData documentation UI:
    yarn hugo server
    ```
 
-4. In VS Code, go to Run > Start Debugging, and select the "Debug Docs (console-based)" configuration.
+4. In VS Code, go to Run > Start Debugging, and select the "Debug JS (debug-helpers)" configuration.
 
 Your system uses the configuration in `launch.json` to launch the site in Chrome
 and attach the debugger to the Developer Tools console.

assets/js/api-libs.js

@@ -2,7 +2,7 @@
 ///////////////// Preferred Client Library programming language  ///////////////
 ////////////////////////////////////////////////////////////////////////////////
 import { activateTabs, updateBtnURLs } from './tabbed-content.js';
-import { getPreference, setPreference } from './local-storage.js';
+import { getPreference, setPreference } from './services/local-storage.js';
 
 function getVisitedApiLib() {
   const path = window.location.pathname.match(

assets/js/ask-ai.js

@@ -9,8 +9,8 @@ function setUser(userid, email) {
     user: {
       uniqueClientId: userid,
       email: email,
-    }
+    },
-  }
+  };
 }
 
 // Initialize the chat widget
@@ -19,18 +19,20 @@ function initializeChat({onChatLoad, chatAttributes}) {
    * available configuration options.
    * All values are strings.
    */
-  // If you make changes to data attributes here, you also need to port the changes to the api-docs/template.hbs API reference template.
+  // If you make changes to data attributes here, you also need to
+  // port the changes to the api-docs/template.hbs API reference template.
   const requiredAttributes = {
     websiteId: 'a02bca75-1dd3-411e-95c0-79ee1139be4d',
     projectName: 'InfluxDB',
     projectColor: '#020a47',
     projectLogo: '/img/influx-logo-cubo-white.png',
-  }
+  };
 
   const optionalAttributes = {
-
+    modalDisclaimer:
-    modalDisclaimer: 'This AI can access [documentation for InfluxDB, clients, and related tools](https://docs.influxdata.com). Information you submit is used in accordance with our [Privacy Policy](https://www.influxdata.com/legal/privacy-policy/).',
+      'This AI can access [documentation for InfluxDB, clients, and related tools](https://docs.influxdata.com). Information you submit is used in accordance with our [Privacy Policy](https://www.influxdata.com/legal/privacy-policy/).',
-    modalExampleQuestions: 'Use Python to write data to InfluxDB 3,How do I query using SQL?,How do I use MQTT with Telegraf?',
+    modalExampleQuestions:
+      'Use Python to write data to InfluxDB 3,How do I query using SQL?,How do I use MQTT with Telegraf?',
     buttonHide: 'true',
     exampleQuestionButtonWidth: 'auto',
     modalOpenOnCommandK: 'true',
@@ -52,7 +54,7 @@ function initializeChat({onChatLoad, chatAttributes}) {
     modalHeaderBorderBottom: 'none',
     modalTitleColor: '#fff',
     modalTitleFontSize: '1.25rem',
-  }
+  };
 
   const scriptUrl = 'https://widget.kapa.ai/kapa-widget.bundle.js';
   const script = document.createElement('script');
@@ -66,8 +68,12 @@ function initializeChat({onChatLoad, chatAttributes}) {
     console.error('Error loading AI chat widget script');
   };
 
-  const dataset = {...requiredAttributes, ...optionalAttributes, ...chatAttributes};
+  const dataset = {
-  Object.keys(dataset).forEach(key => {
+    ...requiredAttributes,
+    ...optionalAttributes,
+    ...chatAttributes,
+  };
+  Object.keys(dataset).forEach((key) => {
     // Assign dataset attributes from the object
     script.dataset[key] = dataset[key];
   });
@@ -91,12 +97,11 @@ function getProductExampleQuestions() {
  * userid: optional, a unique user ID for the user (not currently used for public docs)
  */
 export default function AskAI({ userid, email, onChatLoad, ...chatParams }) {
-  
   const modalExampleQuestions = getProductExampleQuestions();
   const chatAttributes = {
     ...(modalExampleQuestions && { modalExampleQuestions }),
     ...chatParams,
-  }
+  };
   initializeChat({ onChatLoad, chatAttributes });
 
   if (userid) {

assets/js/code-controls.js

@@ -1,8 +1,9 @@
 import $ from 'jquery';
+import { debugBreak } from './utils/debug-helpers.js';
 
 function initialize() {
   var codeBlockSelector = '.article--content pre';
-  var codeBlocks = $(codeBlockSelector);
+  var $codeBlocks = $(codeBlockSelector);
 
   var appendHTML = `
 <div class="code-controls">
@@ -15,7 +16,7 @@ function initialize() {
 `;
 
   // Wrap all codeblocks with a new 'codeblock' div
-  $(codeBlocks).each(function () {
+  $codeBlocks.each(function () {
     $(this).wrap("<div class='codeblock'></div>");
   });
 
@@ -68,7 +69,9 @@ function initialize() {
   // Trigger copy failure state lifecycle
 
   $('.copy-code').click(function () {
-    let text = $(this).closest('.code-controls').prevAll('pre:has(code)')[0].innerText;
+    let text = $(this)
+      .closest('.code-controls')
+      .prevAll('pre:has(code)')[0].innerText;
 
     const copyContent = async () => {
       try {
@@ -90,7 +93,10 @@ Disable scrolling on the body.
 Disable user selection on everything but the fullscreen codeblock.
 */
   $('.fullscreen-toggle').click(function () {
-    var code = $(this).closest('.code-controls').prevAll('pre:has(code)').clone();
+    var code = $(this)
+      .closest('.code-controls')
+      .prevAll('pre:has(code)')
+      .clone();
 
     $('#fullscreen-code-placeholder').replaceWith(code[0]);
     $('body').css('overflow', 'hidden');

assets/js/custom-timestamps.js

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import { Datepicker } from 'vanillajs-datepicker';
 import { toggleModal } from './modals.js';
-import * as localStorage from './local-storage.js';
+import * as localStorage from './services/local-storage.js';
 
 // Placeholder start date used in InfluxDB custom timestamps
 const defaultStartDate = '2022-01-01';
@@ -111,7 +111,7 @@ function timeToUnixSeconds(time) {
 
 function updateTimestamps(newStartDate, seedTimes = defaultTimes) {
   // Update the times array with replacement times
-  const times = seedTimes.map(x => {
+  const times = seedTimes.map((x) => {
     var newStartTimestamp = x.rfc3339.replace(/^.*T/, newStartDate + 'T');
 
     return {

assets/js/feature-callouts.js

@@ -6,7 +6,7 @@
 */
 
 import $ from 'jquery';
-import * as LocalStorageAPI from './local-storage.js';
+import * as LocalStorageAPI from './services/local-storage.js';
 
 // Get notification ID
 function getCalloutID(el) {

assets/js/influxdb-url.js

@@ -3,7 +3,6 @@
 ///////////////////////// INFLUXDB URL PREFERENCE /////////////////////////////
 ////////////////////////////////////////////////////////////////////////////////
 */
-import * as pageParams from '@params';
 import {
   DEFAULT_STORAGE_URLS,
   getPreference,
@@ -12,15 +11,18 @@ import {
   removeInfluxDBUrl,
   getInfluxDBUrl,
   getInfluxDBUrls,
-} from './local-storage.js';
+} from './services/local-storage.js';
 import $ from 'jquery';
 import { context as PRODUCT_CONTEXT, referrerHost } from './page-context.js';
+import { influxdbUrls } from './services/influxdb-urls.js';
 import { delay } from './helpers.js';
 import { toggleModal } from './modals.js';
 
 let CLOUD_URLS = [];
-if (pageParams && pageParams.influxdb_urls) {
+if (influxdbUrls?.cloud) {
-  CLOUD_URLS = Object.values(pageParams.influxdb_urls.cloud.providers).flatMap((provider) => provider.regions?.map((region) => region.url));
+  CLOUD_URLS = Object.values(influxdbUrls.cloud.providers).flatMap((provider) =>
+    provider.regions?.map((region) => region.url)
+  );
 }
 export { CLOUD_URLS };
 
@@ -120,7 +122,8 @@ export function InfluxDBUrl() {
 
   // Retrieve the currently selected URLs from the urls local storage object.
   function getUrls() {
-  const { cloud, oss, core, enterprise, serverless, dedicated, clustered } = getInfluxDBUrls();
+    const { cloud, oss, core, enterprise, serverless, dedicated, clustered } =
+      getInfluxDBUrls();
     return { oss, cloud, core, enterprise, serverless, dedicated, clustered };
   }
 
@@ -289,7 +292,8 @@ export function InfluxDBUrl() {
   }
 
   // Append the URL selector button to each codeblock containing a placeholder URL
-  function appendUrlSelector(urls={
+  function appendUrlSelector(
+    urls = {
       cloud: '',
       oss: '',
       core: '',
@@ -297,7 +301,8 @@ export function InfluxDBUrl() {
       serverless: '',
       dedicated: '',
       clustered: '',
-  }) {
+    }
+  ) {
     const appendToUrls = Object.values(urls);
 
     const getBtnText = (context) => {
@@ -336,14 +341,26 @@ export function InfluxDBUrl() {
 
   // Add the preserve tag to code blocks that shouldn't be updated
   addPreserve();
-  const { cloud, oss, core, enterprise, serverless, dedicated, clustered } = DEFAULT_STORAGE_URLS;
+  const { cloud, oss, core, enterprise, serverless, dedicated, clustered } =
+    DEFAULT_STORAGE_URLS;
 
   // Append URL selector buttons to code blocks
-  appendUrlSelector({ cloud, oss, core, enterprise, serverless, dedicated, clustered });
+  appendUrlSelector({
+    cloud,
+    oss,
+    core,
+    enterprise,
+    serverless,
+    dedicated,
+    clustered,
+  });
 
   // Update URLs on load
 
-  updateUrls({ cloud, oss, core, enterprise, serverless, dedicated, clustered }, getUrls());
+  updateUrls(
+    { cloud, oss, core, enterprise, serverless, dedicated, clustered },
+    getUrls()
+  );
 
   // Set active radio button on page load
   setRadioButtons(getUrls());

assets/js/main.js

@@ -1,8 +1,5 @@
 // assets/js/main.js
 
-// 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';
 
@@ -15,7 +12,7 @@ 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';
+import * as localStorage from './services/local-storage.js';
 import * as modals from './modals.js';
 import * as notifications from './notifications.js';
 import * as pageContext from './page-context.js';

assets/js/page-context.js

@@ -1,34 +1,80 @@
 /** This module retrieves browser context information and site data for the
  * current page, version, and product.
  */
-import { products, influxdb_urls } from '@params';
+import { products } from './services/influxdata-products.js';
-
+import { influxdbUrls } from './services/influxdb-urls.js';
-const safeProducts = products || {};
-const safeUrls = influxdb_urls || {};
 
 function getCurrentProductData() {
   const path = window.location.pathname;
   const mappings = [
-    { pattern: /\/influxdb\/cloud\//, product: safeProducts.cloud, urls: safeUrls.influxdb_cloud },
+    {
-    { pattern: /\/influxdb3\/core/, product: safeProducts.influxdb3_core, urls: safeUrls.core },
+      pattern: /\/influxdb\/cloud\//,
-    { pattern: /\/influxdb3\/enterprise/, product: safeProducts.influxdb3_enterprise, urls: safeUrls.enterprise },
+      product: products.cloud,
-    { pattern: /\/influxdb3\/cloud-serverless/, product: safeProducts.influxdb3_cloud_serverless, urls: safeUrls.cloud },
+      urls: influxdbUrls.influxdb_cloud,
-    { pattern: /\/influxdb3\/cloud-dedicated/, product: safeProducts.influxdb3_cloud_dedicated, urls: safeUrls.dedicated },
+    },
-    { pattern: /\/influxdb3\/clustered/, product: safeProducts.influxdb3_clustered, urls: safeUrls.clustered },
+    {
-    { pattern: /\/enterprise_v1\//, product: safeProducts.enterprise_influxdb, urls: safeUrls.oss },
+      pattern: /\/influxdb3\/core/,
-    { pattern: /\/influxdb.*v1\//, product: safeProducts.influxdb, urls: safeUrls.oss },
+      product: products.influxdb3_core,
-    { pattern: /\/influxdb.*v2\//, product: safeProducts.influxdb, urls: safeUrls.oss },
+      urls: influxdbUrls.core,
-    { pattern: /\/kapacitor\//, product: safeProducts.kapacitor, urls: safeUrls.oss },
+    },
-    { pattern: /\/telegraf\//, product: safeProducts.telegraf, urls: safeUrls.oss },
+    {
-    { pattern: /\/chronograf\//, product: safeProducts.chronograf, urls: safeUrls.oss },
+      pattern: /\/influxdb3\/enterprise/,
-    { pattern: /\/flux\//, product: safeProducts.flux, urls: safeUrls.oss },
+      product: products.influxdb3_enterprise,
+      urls: influxdbUrls.enterprise,
+    },
+    {
+      pattern: /\/influxdb3\/cloud-serverless/,
+      product: products.influxdb3_cloud_serverless,
+      urls: influxdbUrls.cloud,
+    },
+    {
+      pattern: /\/influxdb3\/cloud-dedicated/,
+      product: products.influxdb3_cloud_dedicated,
+      urls: influxdbUrls.dedicated,
+    },
+    {
+      pattern: /\/influxdb3\/clustered/,
+      product: products.influxdb3_clustered,
+      urls: influxdbUrls.clustered,
+    },
+    {
+      pattern: /\/enterprise_v1\//,
+      product: products.enterprise_influxdb,
+      urls: influxdbUrls.oss,
+    },
+    {
+      pattern: /\/influxdb.*v1\//,
+      product: products.influxdb,
+      urls: influxdbUrls.oss,
+    },
+    {
+      pattern: /\/influxdb.*v2\//,
+      product: products.influxdb,
+      urls: influxdbUrls.oss,
+    },
+    {
+      pattern: /\/kapacitor\//,
+      product: products.kapacitor,
+      urls: influxdbUrls.oss,
+    },
+    {
+      pattern: /\/telegraf\//,
+      product: products.telegraf,
+      urls: influxdbUrls.oss,
+    },
+    {
+      pattern: /\/chronograf\//,
+      product: products.chronograf,
+      urls: influxdbUrls.oss,
+    },
+    { pattern: /\/flux\//, product: products.flux, urls: influxdbUrls.oss },
   ];
 
   for (const { pattern, product, urls } of mappings) {
     if (pattern.test(path)) {
       return {
         product: product || 'unknown',
-        urls: urls || {} 
+        urls: urls || {},
       };
     }
   }
@@ -36,7 +82,8 @@ function getCurrentProductData() {
   return { product: 'other', urls: {} };
 }
 
-// Return the page context (cloud, serverless, oss/enterprise, dedicated, clustered, other)
+// Return the page context
+// (cloud, serverless, oss/enterprise, dedicated, clustered, other)
 function getContext() {
   if (/\/influxdb\/cloud\//.test(window.location.pathname)) {
     return 'cloud';
@@ -78,8 +125,12 @@ const context = getContext(),
   protocol = location.protocol,
   referrer = document.referrer === '' ? 'direct' : document.referrer,
   referrerHost = getReferrerHost(),
-  // TODO: Verify this still does what we want since the addition of InfluxDB 3 naming and the Core and Enterprise versions.
+  // TODO: Verify this works since the addition of InfluxDB 3 naming
-  version = (/^v\d/.test(pathArr[1]) || pathArr[1]?.includes('cloud') ? pathArr[1].replace(/^v/, '') : "n/a")
+  // and the Core and Enterprise versions.
+  version =
+    /^v\d/.test(pathArr[1]) || pathArr[1]?.includes('cloud')
+      ? pathArr[1].replace(/^v/, '')
+      : 'n/a';
 
 export {
   context,

assets/js/release-toc.js

@@ -5,33 +5,23 @@
  * release notes pages.
  */
 export default function ReleaseToc({ component }) {
-  // Use jQuery filter to get an array of all the *release* h2 elements
+  // Get all h2 elements that are not checkpoint-releases
-  const releases = $('h2').filter(
+  const releases = Array.from(document.querySelectorAll('h2')).filter(
-    (_i, el) => !el.id.match(/checkpoint-releases/)
+    (el) => !el.id.match(/checkpoint-releases/)
   );
 
   // Extract data about each release from the array of releases
-  const releaseData = releases.map((_i, el) => ({
+  const releaseData = releases.map((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
+  // Build the release table of contents
-  getReleaseItem = (releaseData) => {
+  const releaseTocUl = component.querySelector('#release-toc ul');
-    var li = document.createElement('li');
+  releaseData.forEach((release) => {
-    if (releaseData.class !== null) {
+    releaseTocUl.appendChild(getReleaseItem(release));
-      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));
   });
 
   /*
@@ -39,21 +29,43 @@ export default function ReleaseToc({ component }) {
    * 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 showMoreBtn = component.querySelector('.show-more');
+  if (showMoreBtn) {
+    showMoreBtn.addEventListener('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 releaseList = document.getElementById('release-list');
-    const currentHeight = Number(
+      const releaseIncrement = Number(releaseList.getAttribute('show'));
-      $('#release-list')[0].style.height.match(/\d+\.?\d+/)[0]
+      const currentHeightMatch = releaseList.style.height.match(/\d+\.?\d+/);
-    );
+      const currentHeight = currentHeightMatch
+        ? Number(currentHeightMatch[0])
+        : 0;
       const potentialHeight = currentHeight + releaseIncrement * itemHeight;
-    const newHeight = potentialHeight > maxHeight ? maxHeight : potentialHeight;
+      const newHeight =
+        potentialHeight > maxHeight ? maxHeight : potentialHeight;
 
-    $('#release-list')[0].style.height = `${newHeight}rem`;
+      releaseList.style.height = `${newHeight}rem`;
 
       if (newHeight >= maxHeight) {
-      $('#release-toc .show-more').fadeOut(100);
+        // Simple fade out
+        showMoreBtn.style.transition = 'opacity 0.1s';
+        showMoreBtn.style.opacity = 0;
+        setTimeout(() => {
+          showMoreBtn.style.display = 'none';
+        }, 100);
       }
     });
   }
+}
+
+// Use release data to generate a list item for each release
+function getReleaseItem(releaseData) {
+  const 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;
+}

assets/js/services/influxdata-products.js

@@ -0,0 +1,3 @@
+import { products as productsParam } from '@params';
+
+export const products = productsParam || {};

assets/js/services/influxdb-urls.js

@@ -0,0 +1,3 @@
+import { influxdb_urls as influxdbUrlsParam } from '@params';
+
+export const influxdbUrls = influxdbUrlsParam || {};

assets/js/services/local-storage.js

@@ -10,7 +10,8 @@
     - messages: Messages (data/notifications.yaml) that have been seen (array)
     - callouts: Feature callouts that have been seen (array)
 */
-import * as pageParams from '@params';
+
+import { influxdbUrls } from './influxdb-urls.js';
 
 // Prefix for all InfluxData docs local storage
 const storagePrefix = 'influxdata_docs_';
@@ -83,16 +84,11 @@ function getPreferences() {
 ////////////////////////////////////////////////////////////////////////////////
 
 const defaultUrls = {};
-// Guard against pageParams being null/undefined and safely access nested properties
+Object.entries(influxdbUrls).forEach(([product, { providers }]) => {
-if (pageParams && pageParams.influxdb_urls) {
-  Object.entries(pageParams.influxdb_urls).forEach(
-    ([product, { providers }]) => {
   defaultUrls[product] =
-        providers.filter((provider) => provider.name === 'Default')[0]
+    providers.filter((provider) => provider.name === 'Default')[0]?.regions[0]
-          ?.regions[0]?.url || 'https://cloud2.influxdata.com';
+      ?.url || 'https://cloud2.influxdata.com';
-    }
+});
-  );
-}
 
 export const DEFAULT_STORAGE_URLS = {
   oss: defaultUrls.oss,

assets/js/sidebar-toggle.js

@@ -3,7 +3,7 @@
 	http://www.thesitewizard.com/javascripts/change-style-sheets.shtml
 */
 
-import * as localStorage from './local-storage.js';
+import * as localStorage from './services/local-storage.js';
 
 // *** TO BE CUSTOMISED ***
 var sidebar_state_preference_name = 'sidebar_state';

assets/js/theme.js

@@ -1,4 +1,4 @@
-import { getPreference, setPreference } from './local-storage.js';
+import { getPreference, setPreference } from './services/local-storage.js';
 
 const PROPS = {
   style_preference_name: 'theme',
@@ -12,13 +12,16 @@ function getPreferredTheme () {
 
 function switchStyle({ styles_element, css_title }) {
   // Disable all other theme stylesheets
-  styles_element.querySelectorAll('link[rel*="stylesheet"][title*="theme"]')
+  styles_element
+    .querySelectorAll('link[rel*="stylesheet"][title*="theme"]')
     .forEach(function (link) {
       link.disabled = true;
     });
 
   // Enable the stylesheet with the specified title
-  const link = styles_element.querySelector(`link[rel*="stylesheet"][title="${css_title}"]`);
+  const link = styles_element.querySelector(
+    `link[rel*="stylesheet"][title="${css_title}"]`
+  );
   link && (link.disabled = false);
 
   setPreference(PROPS.style_preference_name, css_title.replace(/-theme/, ''));
@@ -38,5 +41,4 @@ export default function Theme({ component, style }) {
   if (component.dataset?.themeCallback === 'setVisibility') {
     setVisibility(component);
   }
-
 }

assets/js/v3-wayfinding.js

@@ -1,6 +1,14 @@
 import { CLOUD_URLS } from './influxdb-url.js';
-import * as localStorage from './local-storage.js';
+import * as localStorage from './services/local-storage.js';
-import { context, host, hostname, path, protocol, referrer, referrerHost } from './page-context.js';
+import {
+  context,
+  host,
+  hostname,
+  path,
+  protocol,
+  referrer,
+  referrerHost,
+} from './page-context.js';
 
 /**
  * Builds a referrer whitelist array that includes the current page host and all
@@ -69,8 +77,6 @@ function setWayfindingInputState() {
 }
 
 function submitWayfindingData(engine, action) {
-
-
   // Build lp using page data and engine data
   const lp = `ioxwayfinding,host=${hostname},path=${path},referrer=${referrer},engine=${engine} action="${action}"`;
 
@@ -81,10 +87,7 @@ function submitWayfindingData(engine, action) {
     'https://j32dswat7l.execute-api.us-east-1.amazonaws.com/prod/wayfinding'
   );
   xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
-  xhr.setRequestHeader(
+  xhr.setRequestHeader('Access-Control-Allow-Origin', `${protocol}//${host}`);
-    'Access-Control-Allow-Origin',
-    `${protocol}//${host}`
-  );
   xhr.setRequestHeader('Content-Type', 'text/plain; charset=utf-8');
   xhr.setRequestHeader('Accept', 'application/json');
   xhr.send(lp);

config/_default/config.yml

@@ -1,2 +0,0 @@
-import:
-  - hugo.yml

config/_default/hugo.yml

@@ -1,4 +1,4 @@
-baseURL: 'https://docs.influxdata.com/'
+baseURL: https://docs.influxdata.com/
 languageCode: en-us
 title: InfluxDB Documentation
 
@@ -58,6 +58,10 @@ outputFormats:
 
 # Asset processing configuration for development
 build:
+  # Ensure Hugo correctly processes JavaScript modules
+  jsConfig:
+    nodeEnv: "development"
+# Development asset processing
   writeStats: false
   useResourceCacheWhen: "fallback"
   noJSConfigInAssets: false
@@ -72,7 +76,7 @@ module:
     - source: node_modules
       target: assets/node_modules
 
-# Development settings
+# Environment parameters
 params:
   env: development
   environment: development

config/production/hugo.yml

@@ -0,0 +1,17 @@
+build:
+  writeStats: false
+  useResourceCacheWhen: "fallback"
+  buildOptions:
+    sourcemap: false 
+    target: "es2015"
+minify:
+  disableJS: false
+  disableCSS: false
+  disableHTML: false
+  minifyOutput: true
+params:
+  env: production
+  environment: production
+server: {
+  disableLiveReload: true
+}

config/staging/hugo.yml

@@ -0,0 +1,18 @@
+baseURL: https://test2.docs.influxdata.com/
+build:
+  writeStats: false
+  useResourceCacheWhen: "fallback"
+  buildOptions:
+    sourcemap: false
+    target: "es2015"
+minify:
+  disableJS: false
+  disableCSS: false
+  disableHTML: false
+  minifyOutput: true
+params:
+  env: staging
+  environment: staging
+server:
+  disableLiveReload: true
+  

config/testing/config.yml

@@ -1,106 +0,0 @@
-baseURL: 'http://localhost:1315/'
-languageCode: en-us
-title: InfluxDB Documentation
-
-# Git history information for lastMod-type functionality
-enableGitInfo: true
-
-# Syntax Highlighting
-pygmentsCodefences: true
-pygmentsUseClasses: true
-
-# Preserve case in article tags
-preserveTaxonomyNames: true
-
-# Generate a robots.txt
-enableRobotsTXT: true
-
-
-# Markdown rendering options
-blackfriday:
-  hrefTargetBlank: true
-  smartDashes: false
-
-# Copy taxonomies from main config
-taxonomies:
-  influxdb/v2/tag: influxdb/v2/tags
-  influxdb/cloud/tag: influxdb/cloud/tags
-  influxdb3/cloud-serverless/tag: influxdb/cloud-serverless/tags
-  influxdb3/cloud-dedicated/tag: influxdb/cloud-dedicated/tags
-  influxdb3/clustered/tag: influxdb3/clustered/tags
-  influxdb3/core/tag: influxdb3/core/tags
-  influxdb3/enterprise/tag: influxdb3/enterprise/tags
-  flux/v0/tag: flux/v0/tags
-
-markup:
-  goldmark:
-    renderer:
-      unsafe: true
-    extensions:
-      linkify: false
-    parser:
-      attribute:
-        block: true
-
-privacy:
-  googleAnalytics:
-    anonymizeIP: false
-    disable: false
-    respectDoNotTrack: true
-    useSessionStorage: false
-  youtube:
-    disable: false
-    privacyEnhanced: true
-
-outputFormats:
-  json:
-    mediaType: application/json
-    baseName: pages
-    isPlainText: true
-
-# Asset processing for testing (disable minification)
-build:
-  writeStats: false
-  useResourceCacheWhen: "fallback"
-  noJSConfigInAssets: false
-
-# Asset processing configuration
-assetDir: "assets"
-
-module:
-  mounts:
-    - source: assets
-      target: assets
-    - source: node_modules
-      target: assets/node_modules
-
-# Override settings for testing
-buildFuture: true
-
-# Configure what content is built in testing env
-params:
-  env: testing
-  environment: testing
-  buildTestContent: true
-
-# Configure the server for testing
-server:
-  port: 1315
-  baseURL: 'http://localhost:1315/'
-  watchChanges: true
-  disableLiveReload: false
-
-# Keep your shared content exclusions
-ignoreFiles:
-  - "content/shared/.*"
-
-# Ignore specific warning logs
-ignoreLogs:
-  - warning-goldmark-raw-html
-
-# Disable minification for testing
-minify:
-  disableJS: true
-  disableCSS: true
-  disableHTML: true
-  minifyOutput: false

cypress/support/hugo-server.js

@@ -2,8 +2,10 @@ import { spawn } from 'child_process';
 import fs from 'fs';
 import http from 'http';
 import net from 'net';
+import process from 'process';
 
 // Hugo server constants
+export const HUGO_ENVIRONMENT = 'testing';
 export const HUGO_PORT = 1315;
 export const HUGO_LOG_FILE = '/tmp/hugo_server.log';
 
@@ -28,7 +30,8 @@ export async function isPortInUse(port) {
 /**
  * Start the Hugo server with the specified options
  * @param {Object} options - Configuration options for Hugo
- * @param {string} options.configFile - Path to Hugo config file (e.g., 'config/testing/config.yml')
+ * @param {string} options.configFile - Path to Hugo config file
+ * @param {string} options.environment - Environment to run Hugo in
  * @param {number} options.port - Port number for Hugo server
  * @param {boolean} options.buildDrafts - Whether to build draft content
  * @param {boolean} options.noHTTPCache - Whether to disable HTTP caching
@@ -36,9 +39,10 @@ export async function isPortInUse(port) {
  * @returns {Promise<Object>} Child process object
  */
 export async function startHugoServer({
-  configFile = 'config/testing/config.yml',
+  configFile = 'config/_default/hugo.yml',
   port = HUGO_PORT,
-  buildDrafts = true,
+  environment = 'testing',
+  buildDrafts = false,
   noHTTPCache = true,
   logFile = HUGO_LOG_FILE,
 } = {}) {
@@ -48,6 +52,8 @@ export async function startHugoServer({
   const hugoArgs = [
     'hugo',
     'server',
+    '--environment',
+    environment,
     '--config',
     configFile,
     '--port',
@@ -64,16 +70,16 @@ export async function startHugoServer({
 
   return new Promise((resolve, reject) => {
     try {
-      // Use npx to find and execute Hugo, which will work regardless of installation method
+      // Use yarn to find and execute Hugo, which will work regardless of installation method
-      console.log(`Running Hugo with npx: npx ${hugoArgs.join(' ')}`);
+      console.log(`Running Hugo with yarn: yarn ${hugoArgs.join(' ')}`);
-      const hugoProc = spawn('npx', hugoArgs, {
+      const hugoProc = spawn('yarn', hugoArgs, {
         stdio: ['ignore', 'pipe', 'pipe'],
         shell: true,
       });
 
       // Check if the process started successfully
       if (!hugoProc || !hugoProc.pid) {
-        return reject(new Error('Failed to start Hugo server via npx'));
+        return reject(new Error('Failed to start Hugo server via yarn'));
       }
 
       // Set up logging

cypress/support/run-e2e-specs.js

@@ -38,9 +38,10 @@ import fs from 'fs';
 import path from 'path';
 import cypress from 'cypress';
 import net from 'net';
-import matter from 'gray-matter';
+import { Buffer } from 'buffer';
 import { displayBrokenLinksReport, initializeReport } from './link-reporter.js';
 import {
+  HUGO_ENVIRONMENT,
   HUGO_PORT,
   HUGO_LOG_FILE,
   startHugoServer,
@@ -90,28 +91,6 @@ async function isPortInUse(port) {
   });
 }
 
-/**
- * Extract source information from frontmatter
- * @param {string} filePath - Path to the markdown file
- * @returns {string|null} Source information if present
- */
-function getSourceFromFrontmatter(filePath) {
-  if (!fs.existsSync(filePath)) {
-    return null;
-  }
-
-  try {
-    const fileContent = fs.readFileSync(filePath, 'utf8');
-    const { data } = matter(fileContent);
-    return data.source || null;
-  } catch (err) {
-    console.warn(
-      `Warning: Could not extract frontmatter from ${filePath}: ${err.message}`
-    );
-    return null;
-  }
-}
-
 /**
  * Ensures a directory exists, creating it if necessary
  * Also creates an empty file to ensure the directory is not empty
@@ -296,7 +275,7 @@ async function main() {
         });
 
         console.log('Hugo is available on the system');
-      } catch (checkErr) {
+      } catch {
         console.log(
           'Hugo not found on PATH, will use project-local Hugo via yarn'
         );
@@ -304,9 +283,8 @@ async function main() {
 
       // Use the startHugoServer function from hugo-server.js
       hugoProc = await startHugoServer({
-        configFile: 'config/testing/config.yml',
+        environment: HUGO_ENVIRONMENT,
         port: HUGO_PORT,
-        buildDrafts: true,
         noHTTPCache: true,
         logFile: HUGO_LOG_FILE,
       });
@@ -412,7 +390,7 @@ async function main() {
         `ℹ️ Note: ${testFailureCount} test(s) failed but no broken links were detected in the report.`
       );
       console.warn(
-        `   This usually indicates test errors unrelated to link validation.`
+        '   This usually indicates test errors unrelated to link validation.'
       );
 
       // We should not consider special case domains (those with expected errors) as failures

hugo.staging.yml

@@ -1,79 +0,0 @@
-baseURL: https://test2.docs.influxdata.com/
-languageCode: en-us
-title: InfluxDB Documentation
-
-# Git history information for lastMod-type functionality
-enableGitInfo: true
-
-# Syntax Highlighting
-pygmentsCodefences: true
-pygmentsUseClasses: true
-
-# Preserve case in article tags
-preserveTaxonomyNames: true
-
-# Generate a robots.txt
-enableRobotsTXT: true
-
-# Custom staging params
-params:
-  env: staging
-  environment: staging
-server:
-  disableLiveReload: true
-
-# Staging uses the same asset processing as production
-# Enable minification for staging
-minify:
-  disableJS: false
-  disableCSS: false
-  disableHTML: false
-  minifyOutput: true
-
-# Staging asset processing
-build:
-  writeStats: false
-  useResourceCacheWhen: "always"
-  buildOptions:
-    sourcemap: false
-    target: "es2015"
-
-# Markdown rendering options
-blackfriday:
-  hrefTargetBlank: true
-  smartDashes: false
-
-taxonomies:
-  influxdb/v2/tag: influxdb/v2/tags
-  influxdb/cloud/tag: influxdb/cloud/tags
-  influxdb3/cloud-serverless/tag: influxdb/cloud-serverless/tags
-  influxdb/cloud-dedicated/tag: influxdb/cloud-dedicated/tags
-  influxdb/clustered/tag: influxdb/clustered/tags
-  influxdb3/core/tag: influxdb3/core/tags
-  influxdb3/enterprise/tag: influxdb3/enterprise/tags
-  flux/v0/tag: flux/v0/tags
-
-markup:
-  goldmark:
-    renderer:
-      unsafe: true
-    extensions:
-      linkify: false
-    parser:
-      attribute:
-        block: true
-
-privacy:
-  googleAnalytics:
-    anonymizeIP: false
-    disable: false
-    respectDoNotTrack: true
-    useSessionStorage: false
-  youtube:
-    disable: false
-    privacyEnhanced: true
-outputFormats:
-  json:
-    mediaType: application/json
-    baseName: pages
-    isPlainText: true

layouts/partials/header/javascript.html

@@ -13,96 +13,49 @@
 {{ $products := .Site.Data.products }}
 {{ $influxdb_urls := .Site.Data.influxdb_urls }}
 
-{{ $isDevelopmentOrTesting := or (eq .Site.Params.environment "development") (eq .Site.Params.environment "testing") (eq (getenv "HUGO_ENV") "development") (eq (getenv "HUGO_ENV") "testing") (not hugo.IsProduction) }}
+<!-- Build main.js -->
+{{ $isDevelopment := false }}
+{{ $isTesting := false }}
 
-{{ if $isDevelopmentOrTesting }}
+{{ with hugo }}
-  {{/* Load individual JS files for debugging with ESM format */}}
+  {{ if .IsDevelopment }}
-  {{ $sharedParams := dict "product" $product "currentVersion" $currentVersion "isServer" hugo.IsServer "products" $products "influxdb_urls" $influxdb_urls "cloudUrls" $cloudUrls }}
+    {{ $isDevelopment = .IsDevelopment }}
-  
-  {{/* Load main.js first to ensure proper initialization */}}
-  {{ $mainJS := resources.Get "js/main.js" }}
-  {{ if $mainJS }}
-    {{ $opts := dict
-      "sourceMap" "external"
-      "sourcesContent" true
-      "targetPath" "js/main.js"
-      "format" "esm"
-      "bundle" false
-      "minify" false
-      "target" "es2017"
-      "write" true
-      "params" $sharedParams
-    }}
-    {{ $processed := $mainJS | js.Build $opts }}
-    {{ if $processed }}
-      <script type="module" src="{{ $processed.RelPermalink }}"></script>
   {{ end }}
 {{ end }}
 
-  {{/* Load other individual JS files for debugging with error handling */}}
+{{ if eq .Site.Params.env "testing" }}
-  {{ $jsDir := "assets/js" }}
+  {{ $isTesting = true }}
-  {{ if fileExists $jsDir }}
+{{ end }}
-    {{ range $file := (readDir $jsDir) }}
+{{ if eq .Site.Params.environment "testing" }}
-      {{ if and (strings.HasSuffix $file.Name ".js") (ne $file.Name "main.js") }}
+  {{ $isTesting = true }}
-        {{ $jsPath := printf "js/%s" $file.Name }}
+{{ end }}
-        {{ $jsRes := resources.Get $jsPath }}
-        {{ with $jsRes }}
-          {{ $opts := dict
-            "sourceMap" ""
-            "targetPath" $jsPath
-            "format" "esm"
-            "bundle" false
-            "minify" false
-            "target" "es2015"
-            "write" true
-            "params" $sharedParams
-          }}
-          {{ $out := . | js.Build $opts }}
 
-          {{/* Add descriptive debug comments at the beginning of each file */}}
+{{ $isDevelopmentOrTesting := or $isDevelopment $isTesting }}
-          {{ $debugHeader := printf "// DEBUG MODE: %s\n// Original file: assets/js/%s\n\n" $file.Name $file.Name }}
-          {{ $modifiedContent := printf "%s%s" $debugHeader $out.Content }}
-          {{ $out = resources.FromString $jsPath $modifiedContent }}
-
-          <script type="module" src="{{ $out.RelPermalink }}"></script>
-        {{ end }}
-      {{ end }}
-    {{ end }}
-  {{ end }}
-{{ else }}
-  {{/* Production environment: Use IIFE for better compatibility */}}
-  {{ $mainJS := resources.Get "js/main.js" }}
-  {{ if $mainJS }}
-    {{ $sharedParams := dict "product" $product "currentVersion" $currentVersion "isServer" hugo.IsServer "products" $products "influxdb_urls" $influxdb_urls "cloudUrls" $cloudUrls }}
 
+{{ with resources.Get "js/main.js" }}
   {{ $opts := dict
     "minify" hugo.IsProduction
-      "sourceMap" ""
+    "sourceMap" (cond $isDevelopmentOrTesting "inline" "")
+    "format" (cond $isDevelopmentOrTesting "esm" "iife")
+    "bundle" true 
     "targetPath" "js/main.js"
-      "params" $sharedParams
+    "params" (dict 
-      "format" "iife"
+      "product" $product 
-      "target" "es2019"
+      "currentVersion" $currentVersion 
-      "splitting" false
+      "isServer" hugo.IsServer 
-      "external" (slice "*")
+      "products" $products 
-      "define" (dict
+      "influxdb_urls" $influxdb_urls 
-        "process.env.NODE_ENV" "\"production\""
+      "cloudUrls" $cloudUrls
+      "isDevelopment" $isDevelopmentOrTesting
     )
   }}
-    
+  {{ with . | js.Build $opts }}
-    {{ $processed := "" }}
-    {{ with $mainJS }}
-      {{ $processed = . | js.Build $opts }}
-    {{ end }}
-    
-    {{ if $processed }}
     {{ if hugo.IsProduction }}
-        {{ $fingerprinted := $processed | fingerprint }}
+      {{ with . | fingerprint }}
-        {{ if $fingerprinted }}
+        <script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
-          <script defer src="{{ $fingerprinted.RelPermalink }}" integrity="{{ $fingerprinted.Data.Integrity }}" crossorigin="anonymous"></script>
       {{ end }}
     {{ else }}
-        <script defer src="{{ $processed.RelPermalink }}"></script>
+      <script type="module" src="{{ .RelPermalink }}"></script>
-      {{ end }}
     {{ end }}
   {{ end }}
 {{ end }}