docs-v2/.github/instructions/assets.instructions.md

applyTo
assets/**/*.md, layouts/**/*.html

JavaScript in the documentation UI

The InfluxData documentation UI uses JavaScript with ES6+ syntax and assets/js/main.js as the entry point to import modules from.

1. In your HTML file, add a data-component attribute to the element that will encapsulate the UI feature and use the JavaScript module.

   <div data-component="my-component"></div>
   

2. In assets/js/main.js, import your module and initialize it on the element.

Debugging helpers for JavaScript

In your JavaScript module, import the debug helpers from assets/js/utils/debug-helpers.js.

   import { debugLog, debugBreak, debugInspect } from './utils/debug-helpers.js';

   const data = debugInspect(someData, 'Data');
   debugLog('Processing data', 'myFunction');

   function processData() {
     // Add a breakpoint that works with DevTools
     debugBreak();
     
     // Your existing code...
   }

Debugging with VS Code

1. Start Hugo in development mode--for example:

   yarn hugo server
   

2. 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.

Make sure to remove the debug statements before merging your changes. The debug helpers are designed to be used in development and should not be used in production.

See full CONTRIBUTING.md for complete details.