End-to-end testing, CI script, and JavaScript QoL improvements:

- **Environment variable formatting** - Updated environment variable configuration from array format to object format to comply with Lefthook schema validation requirements.
- **Unified link testing** - Consolidated multiple product-specific link testing commands into a single `e2e-links` command that processes all staged Markdown and HTML files across content directories.
- **Package script integration** - Modified commands to use centralized yarn scripts instead of direct execution, improving maintainability and consistency.
- **Source information extraction** - Enhanced to correctly extract and report source information from frontmatter.
- **URL and source mapping** - Improved handling of URL to source path mapping for better reporting.
- **Ignored anchor links configuration** - Added proper exclusion of behavior-triggering anchor links (like tab navigation) to prevent false positives.
- **Request options correction** - Fixed Cypress request options to ensure `failOnStatusCode` is properly set when `retryOnStatusCodeFailure` is enabled.
- **Improved error reporting** - Enhanced error reporting with more context about broken links.
- **New test scripts added** - Added centralized testing scripts for link checking and codeblock validation.
- **Product-specific test commands** - Added commands for each product version (InfluxDB v2, v3 Core, Enterprise, Cloud, etc.).
- **API docs testing** - Added specialized commands for testing API documentation links.
- **Comprehensive test runners** - Added commands to run all tests of a specific type (`test:links:all`, `test:codeblocks:all`).
- Fix Docker build command and update CONTRIBUTING.

chore(js): JavaScript QoL improvements:

- Refactor main.js with a componentRegistry object and clear initialization of components and globals
- Add a standard index.js with all necessary exports.
- Update javascript.html to use the index.js
- Remove jQuery script tag from header javascript.html (remains in footer)
- Update package file to improve module discovery.
- Improve Hugo and ESLint config for module discovery and ES6 syntax

Author: jstirnaman

.gitignore

@@ -16,6 +16,8 @@ node_modules
 !telegraf-build/scripts
 !telegraf-build/README.md
 /cypress/screenshots/*
+/cypress/videos/*
+test-results.xml
 /influxdb3cli-build-scripts/content
 .vscode/*
 .idea

.husky/_/serve

@@ -0,0 +1,57 @@
+#!/bin/sh
+
+if [ "$LEFTHOOK_VERBOSE" = "1" -o "$LEFTHOOK_VERBOSE" = "true" ]; then
+  set -x
+fi
+
+if [ "$LEFTHOOK" = "0" ]; then
+  exit 0
+fi
+
+call_lefthook()
+{
+  if test -n "$LEFTHOOK_BIN"
+  then
+    "$LEFTHOOK_BIN" "$@"
+  elif lefthook -h >/dev/null 2>&1
+  then
+    lefthook "$@"
+  else
+    dir="$(git rev-parse --show-toplevel)"
+    osArch=$(uname | tr '[:upper:]' '[:lower:]')
+    cpuArch=$(uname -m | sed 's/aarch64/arm64/;s/x86_64/x64/')
+    if test -f "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook"
+    then
+      "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook" "$@"
+    elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook"
+    then
+      "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook" "$@"
+    elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook"
+    then
+      "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook" "$@"
+    elif test -f "$dir/node_modules/lefthook/bin/index.js"
+    then
+      "$dir/node_modules/lefthook/bin/index.js" "$@"
+    
+    elif bundle exec lefthook -h >/dev/null 2>&1
+    then
+      bundle exec lefthook "$@"
+    elif yarn lefthook -h >/dev/null 2>&1
+    then
+      yarn lefthook "$@"
+    elif pnpm lefthook -h >/dev/null 2>&1
+    then
+      pnpm lefthook "$@"
+    elif swift package plugin lefthook >/dev/null 2>&1
+    then
+      swift package --disable-sandbox plugin lefthook "$@"
+    elif command -v mint >/dev/null 2>&1
+    then
+      mint run csjones/lefthook-plugin "$@"
+    else
+      echo "Can't find lefthook in PATH"
+    fi
+  fi
+}
+
+call_lefthook run "serve" "$@"

.nvmrc

@@ -0,0 +1 @@
+v23.10.0

CONTRIBUTING.md

@@ -28,8 +28,10 @@ For the linting and tests to run, you need to install Docker and Node.js
 dependencies.
 
 \_**Note:**
-We strongly recommend running linting and tests, but you can skip them
-(and avoid installing dependencies)
+The git pre-commit and pre-push hooks are configured to run linting and tests automatically
+when you commit or push changes.
+We strongly recommend letting them run, but you can skip them
+(and avoid installing related dependencies)
 by including the `--no-verify` flag with your commit--for example, enter the following command in your terminal:
 
 ```sh
@@ -51,7 +53,7 @@ dev dependencies used in pre-commit hooks for linting, syntax-checking, and test
 Dev dependencies include:
 
 - [Lefthook](https://github.com/evilmartians/lefthook): configures and
-manages pre-commit hooks for linting and testing Markdown content.
+manages git pre-commit and pre-push hooks for linting and testing Markdown content.
 - [prettier](https://prettier.io/docs/en/): formats code, including Markdown, according to style rules for consistency
 - [Cypress]: e2e testing for UI elements and URLs in content
 
@@ -93,9 +95,11 @@ Make your suggested changes being sure to follow the [style and formatting guide
 
 ## Lint and test your changes
 
+`package.json` contains scripts for running tests and linting.
+
 ### Automatic pre-commit checks
 
-docs-v2 uses Lefthook to manage Git hooks, such as pre-commit hooks that lint Markdown and test code blocks.
+docs-v2 uses Lefthook to manage Git hooks that run during pre-commit and pre-push. The hooks run the scripts defined in `package.json` to lint Markdown and test code blocks.
 When you try to commit changes (`git commit`), Git runs
 the commands configured in `lefthook.yml` which pass your **staged** files to Vale,
 Prettier, Cypress (for UI tests and link-checking), and Pytest (for testing Python and shell code in code blocks).

assets/js/index.js

@@ -0,0 +1 @@
+export * from './main.js';

assets/js/main.js

@@ -6,9 +6,6 @@
 /** Import modules that are not components.
  * TODO: Refactor these into single-purpose component modules.
  */
-// import * as codeblocksPreferences from './api-libs.js';
-// import * as datetime from './datetime.js';
-// import * as featureCallouts from './feature-callouts.js';
 import * as apiLibs from './api-libs.js';
 import * as codeControls from './code-controls.js';
 import * as contentInteractions from './content-interactions.js';
@@ -21,15 +18,6 @@ import * as pageContext from './page-context.js';
 import * as pageFeedback from './page-feedback.js';
 import * as tabbedContent from './tabbed-content.js';
 import * as v3Wayfinding from './v3-wayfinding.js';
-// import * as homeInteractions from './home-interactions.js';
-// import { getUrls, getReferrerHost, InfluxDBUrl } from './influxdb-url.js';
-// import * as keybindings from './keybindings.js';
-// import * as listFilters from './list-filters.js';
-// import { Modal } from './modal.js';
-// import { showNotifications } from './notifications.js';
-// import ReleaseTOC from './release-toc.js';
-// import * as scroll from './scroll.js';
-// import { TabbedContent } from './tabbed-content.js';
 
 /** Import component modules
  *  The component pattern organizes JavaScript, CSS, and HTML for a specific UI element or interaction:
@@ -41,40 +29,95 @@ 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 FluxInfluxDBVersionsTrigger from './flux-influxdb-versions.js';
 import { SearchButton } from './search-button.js';
 import { SidebarToggle } from './sidebar-toggle.js';
 import Theme from './theme.js';
 import ThemeSwitch from './theme-switch.js';
-// import CodeControls from './code-controls.js';
-// import ContentInteractions from './content-interactions.js';
-// import CustomTimestamps from './custom-timestamps.js';
-// import Diagram from './Diagram.js';
-// import FluxGroupKeysExample from './FluxGroupKeysExample.js';
-import FluxInfluxDBVersionsTrigger from './flux-influxdb-versions.js';
-// import PageFeedback from './page-feedback.js';
-// import SearchInput from './SearchInput.js';
-// import Sidebar from './Sidebar.js';
-// import V3Wayfinding from './v3-wayfinding.js';
-// import VersionSelector from './VersionSelector.js';
-
-// Expose libraries and components within a namespaced object (for backwards compatibility or testing)
-// Expose libraries and components within a namespaced object (for backwards compatibility or testing)
-
 
+/**
+ * Component Registry
+ * A central registry that maps component names to their constructor functions.
+ * Add new components to this registry as they are created or migrated from non-component modules.
+ * This allows for:
+ * 1. Automatic component initialization based on data-component attributes
+ * 2. Centralized component management
+ * 3. Easy addition/removal of components
+ * 4. Simplified testing and debugging
+ */
+const componentRegistry = {
+  'ask-ai-trigger': AskAITrigger,
+  'code-placeholder': CodePlaceholder,
+  'custom-time-trigger': CustomTimeTrigger,
+  'flux-influxdb-versions-trigger': FluxInfluxDBVersionsTrigger,
+  'search-button': SearchButton,
+  'sidebar-toggle': SidebarToggle,
+  'theme': Theme,
+  'theme-switch': ThemeSwitch
+};
 
-document.addEventListener('DOMContentLoaded', function () {
+/**
+ * Initialize global namespace for documentation JavaScript
+ * Exposes core modules for debugging, testing, and backwards compatibility
+ */
+function initGlobals() {
   if (typeof window.influxdatadocs === 'undefined') {
     window.influxdatadocs = {};
   }
 
-  // Expose modules to the global object for debugging, testing, and backwards compatibility for non-ES6 modules.
+  // Expose modules to the global object for debugging, testing, and backwards compatibility
   window.influxdatadocs.delay = delay;
   window.influxdatadocs.localStorage = window.LocalStorageAPI = localStorage;
   window.influxdatadocs.pageContext = pageContext;
   window.influxdatadocs.toggleModal = modals.toggleModal;
+  window.influxdatadocs.componentRegistry = componentRegistry;
+  
+  return window.influxdatadocs;
+}
+
+/**
+ * Initialize components based on data-component attributes
+ * @param {Object} globals - The global influxdatadocs namespace
+ */
+function initComponents(globals) {
+  const components = document.querySelectorAll('[data-component]');
+  
+  components.forEach((component) => {
+    const componentName = component.getAttribute('data-component');
+    const ComponentConstructor = componentRegistry[componentName];
+    
+    if (ComponentConstructor) {
+      // Initialize the component and store its instance in the global namespace
+      try {
+        const instance = ComponentConstructor({ component });
+        globals[componentName] = ComponentConstructor;
+        
+        // Optionally store component instances for future reference
+        if (!globals.instances) {
+          globals.instances = {};
+        }
+        
+        if (!globals.instances[componentName]) {
+          globals.instances[componentName] = [];
+        }
+        
+        globals.instances[componentName].push({
+          element: component,
+          instance
+        });
+      } catch (error) {
+        console.error(`Error initializing component "${componentName}":`, error);
+      }
+    } else {
+      console.warn(`Unknown component: "${componentName}"`);
+    }
+  });
+}
 
-  // On content loaded, initialize (not-component-ready) UI interaction modules
-  // To differentiate these from component-ready modules, these modules typically export an initialize function that wraps UI interactions and event listeners.
+/**
+ * Initialize all non-component modules
+ */
+function initModules() {
   modals.initialize();
   apiLibs.initialize();
   codeControls.initialize();
@@ -84,67 +127,24 @@ document.addEventListener('DOMContentLoaded', function () {
   pageFeedback.initialize();
   tabbedContent.initialize();
   v3Wayfinding.initialize();
+}
 
-  /** Initialize components
-   Component Structure: Each component is structured as a jQuery anonymous function that listens for the document ready state.
-  Initialization in main.js: Each component is called in main.js inside a jQuery document ready function to ensure they are initialized when the document is ready.
-  Note: These components should *not* be called directly in the HTML.
-  */
-  const components = document.querySelectorAll('[data-component]');
-  components.forEach((component) => {
-    const componentName = component.getAttribute('data-component');
-    switch (componentName) {
-      case 'ask-ai-trigger':
-        AskAITrigger({ component });
-        window.influxdatadocs[componentName] = AskAITrigger;
-        break;
-      case 'code-placeholder':
-        CodePlaceholder({ component });
-        window.influxdatadocs[componentName] = CodePlaceholder;
-        break;
-      case 'custom-time-trigger':
-        CustomTimeTrigger({ component });
-        window.influxdatadocs[componentName] = CustomTimeTrigger;
-        break;
-      case 'flux-influxdb-versions-trigger':
-        FluxInfluxDBVersionsTrigger({ component });
-        window.influxdatadocs[componentName] = FluxInfluxDBVersionsTrigger;
-        break;
-      case 'search-button':
-        SearchButton({ component });
-        window.influxdatadocs[componentName] = SearchButton;
-        break;
-      case 'sidebar-toggle':
-        SidebarToggle({ component });
-        window.influxdatadocs[componentName] = SidebarToggle;
-        break;
-      case 'theme':
-        Theme({ component });
-        window.influxdatadocs[componentName] = Theme;
-        break;
-        // CodeControls();
-        // ContentInteractions();
-        // CustomTimestamps();
-        // Diagram();
-        // FluxGroupKeysExample();
-        // FluxInfluxDBVersionsModal();
-        // InfluxDBUrl();
-        // Modal();
-        // PageFeedback();
-        // ReleaseTOC();
-        // SearchInput();
-        // showNotifications();
-        // Sidebar();
-        // TabbedContent();
-        // ThemeSwitch({});
-        // V3Wayfinding();
-        // VersionSelector();
-        case 'theme-switch':
-          ThemeSwitch({ component });
-          window.influxdatadocs[componentName] = ThemeSwitch;
-          break;
-      default:
-        console.warn(`Unknown component: ${componentName}`);
-    }
-  });
-});
+/**
+ * Main initialization function
+ */
+function init() {
+  // Initialize global namespace and expose core modules
+  const globals = initGlobals();
+  
+  // Initialize non-component UI modules
+  initModules();
+  
+  // Initialize components from registry
+  initComponents(globals);
+}
+
+// Initialize everything when the DOM is ready
+document.addEventListener('DOMContentLoaded', init);
+
+// Export public API
+export { initGlobals, componentRegistry };

assets/jsconfig.json

@@ -3,7 +3,8 @@
   "baseUrl": ".",
   "paths": {
    "*": [
-    "*"
+    "*",
+    "../node_modules/*"
    ]
   }
  }