Skip to content

Commit ef16667

Browse files
sandersonsanderson
committed
Merge branch 'master' into monolith-gs-restructure
2 parents 09b83dd + f38ca67 commit ef16667

File tree

120 files changed

+74071
-941
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

120 files changed

+74071
-941
lines changed

‎.circleci/config.yml

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
version: 2
1+
version: 2.1
22
jobs:
33
build:
44
docker:
@@ -41,7 +41,7 @@ jobs:
4141
- /home/circleci/bin
4242
- run:
4343
name: Hugo Build
44-
command: npx hugo --logLevel info --minify --destination workspace/public
44+
command: yarn hugo --environment production --logLevel info --gc --destination workspace/public
4545
- persist_to_workspace:
4646
root: workspace
4747
paths:
@@ -68,7 +68,6 @@ jobs:
6868
when: on_success
6969

7070
workflows:
71-
version: 2
7271
build:
7372
jobs:
7473
- build

‎.github/instructions/contributing.instructions.md

Lines changed: 81 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1679,7 +1679,7 @@ The shortcode takes a regular expression for matching placeholder names.
16791679
Use the `code-placeholder-key` shortcode to format the placeholder names in
16801680
text that describes the placeholder--for example:
16811681
1682-
```
1682+
```markdown
16831683
{{% code-placeholders "DATABASE_NAME|USERNAME|PASSWORD_OR_TOKEN|API_TOKEN|exampleuser@influxdata.com" %}}
16841684
```sh
16851685
curl --request POST http://localhost:8086/write?db=DATABASE_NAME \
@@ -1703,3 +1703,83 @@ InfluxDB API documentation when documentation is deployed.
17031703
Redoc generates HTML documentation using the InfluxDB `swagger.yml`.
17041704
For more information about generating InfluxDB API documentation, see the
17051705
[API Documentation README](https://github.com/influxdata/docs-v2/tree/master/api-docs#readme).
1706+
1707+
## JavaScript in the documentation UI
1708+
1709+
The InfluxData documentation UI uses JavaScript with ES6+ syntax and
1710+
`assets/js/main.js` as the entry point to import modules from
1711+
`assets/js`.
1712+
Only `assets/js/main.js` should be imported in HTML files.
1713+
1714+
`assets/js/main.js` registers components and initializes them on page load.
1715+
1716+
If you're adding UI functionality that requires JavaScript, follow these steps:
1717+
1718+
1. In your HTML file, add a `data-component` attribute to the element that
1719+
should be initialized by your JavaScript code. For example:
1720+
1721+
```html
1722+
<div data-component="my-component"></div>
1723+
```
1724+
1725+
2. Following the component pattern, create a single-purpose JavaScript module
1726+
(`assets/js/components/my-component.js`)
1727+
that exports a single function that receives the component element and initializes it.
1728+
3. In `assets/js/main.js`, import the module and register the component to ensure
1729+
the component is initialized on page load.
1730+
1731+
### Debugging JavaScript
1732+
1733+
To debug JavaScript code used in the InfluxData documentation UI, choose one of the following methods:
1734+
1735+
- Use source maps and the Chrome DevTools debugger.
1736+
- Use debug helpers that provide breakpoints and console logging as a workaround or alternative for using source maps and the Chrome DevTools debugger.
1737+
1738+
#### Using source maps and Chrome DevTools debugger
1739+
1740+
1. In VS Code, select Run > Start Debugging.
1741+
2. Select the "Debug Docs (source maps)" configuration.
1742+
3. Click the play button to start the debugger.
1743+
5. Set breakpoints in the JavaScript source files--files in the
1744+
`assets/js/ns-hugo-imp:` namespace-- in the
1745+
VS Code editor or in the Chrome Developer Tools Sources panel:
1746+
1747+
- In the VS Code Debugger panel > "Loaded Scripts" section, find the
1748+
`assets/js/ns-hugo-imp:` namespace.
1749+
- In the Chrome Developer Tools Sources panel, expand
1750+
`js/ns-hugo-imp:/<YOUR_WORKSPACE_ROOT>/assets/js/`.
1751+
1752+
#### Using debug helpers
1753+
1754+
1. In your JavaScript module, import debug helpers from `assets/js/utils/debug-helpers.js`.
1755+
These helpers provide breakpoints and console logging as a workaround or alternative for
1756+
using source maps and the Chrome DevTools debugger.
1757+
2. Insert debug statements by calling the helper functions in your code--for example:
1758+
1759+
```js
1760+
import { debugLog, debugBreak, debugInspect } from './utils/debug-helpers.js';
1761+
1762+
const data = debugInspect(someData, 'Data');
1763+
debugLog('Processing data', 'myFunction');
1764+
1765+
function processData() {
1766+
// Add a breakpoint that works with DevTools
1767+
debugBreak();
1768+
1769+
// Your existing code...
1770+
}
1771+
```
1772+
1773+
3. Start Hugo in development mode--for example:
1774+
1775+
```bash
1776+
yarn hugo server
1777+
```
1778+
1779+
4. In VS Code, go to Run > Start Debugging, and select the "Debug JS (debug-helpers)" configuration.
1780+
1781+
Your system uses the configuration in `launch.json` to launch the site in Chrome
1782+
and attach the debugger to the Developer Tools console.
1783+
1784+
Make sure to remove the debug statements before merging your changes.
1785+
The debug helpers are designed to be used in development and should not be used in production.

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ node_modules
2121
test-results.xml
2222
/influxdb3cli-build-scripts/content
2323
.vscode/*
24+
!.vscode/launch.json
2425
.idea
2526
**/config.toml
2627
package-lock.json

‎.prettierignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@
33
**/.svn
44
**/.hg
55
**/node_modules
6+
assets/jsconfig.json

‎.vscode/launch.json

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
{
2+
"version": "0.2.0",
3+
"configurations": [
4+
{
5+
"name": "Debug JS (debug-helpers)",
6+
"type": "chrome",
7+
"request": "launch",
8+
"url": "http://localhost:1313",
9+
"webRoot": "${workspaceFolder}",
10+
"skipFiles": [
11+
"<node_internals>/**"
12+
],
13+
"sourceMaps": false,
14+
"trace": true,
15+
"smartStep": false
16+
},
17+
{
18+
"name": "Debug JS (source maps)",
19+
"type": "chrome",
20+
"request": "launch",
21+
"url": "http://localhost:1313",
22+
"webRoot": "${workspaceFolder}",
23+
"sourceMaps": true,
24+
"sourceMapPathOverrides": {
25+
"*": "${webRoot}/assets/js/*",
26+
"main.js": "${webRoot}/assets/js/main.js",
27+
"page-context.js": "${webRoot}/assets/js/page-context.js",
28+
"ask-ai-trigger.js": "${webRoot}/assets/js/ask-ai-trigger.js",
29+
"ask-ai.js": "${webRoot}/assets/js/ask-ai.js",
30+
"utils/*": "${webRoot}/assets/js/utils/*",
31+
"services/*": "${webRoot}/assets/js/services/*"
32+
},
33+
"skipFiles": [
34+
"<node_internals>/**",
35+
"node_modules/**",
36+
"chrome-extension://**"
37+
],
38+
"trace": true,
39+
"smartStep": true,
40+
"disableNetworkCache": true,
41+
"userDataDir": "${workspaceFolder}/.vscode/chrome-user-data",
42+
"runtimeArgs": [
43+
"--disable-features=VizDisplayCompositor"
44+
]
45+
},
46+
]
47+
}

‎CONTRIBUTING.md

Lines changed: 81 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1667,7 +1667,7 @@ The shortcode takes a regular expression for matching placeholder names.
16671667
Use the `code-placeholder-key` shortcode to format the placeholder names in
16681668
text that describes the placeholder--for example:
16691669
1670-
```
1670+
```markdown
16711671
{{% code-placeholders "DATABASE_NAME|USERNAME|PASSWORD_OR_TOKEN|API_TOKEN|exampleuser@influxdata.com" %}}
16721672
```sh
16731673
curl --request POST http://localhost:8086/write?db=DATABASE_NAME \
@@ -1691,3 +1691,83 @@ InfluxDB API documentation when documentation is deployed.
16911691
Redoc generates HTML documentation using the InfluxDB `swagger.yml`.
16921692
For more information about generating InfluxDB API documentation, see the
16931693
[API Documentation README](https://github.com/influxdata/docs-v2/tree/master/api-docs#readme).
1694+
1695+
## JavaScript in the documentation UI
1696+
1697+
The InfluxData documentation UI uses JavaScript with ES6+ syntax and
1698+
`assets/js/main.js` as the entry point to import modules from
1699+
`assets/js`.
1700+
Only `assets/js/main.js` should be imported in HTML files.
1701+
1702+
`assets/js/main.js` registers components and initializes them on page load.
1703+
1704+
If you're adding UI functionality that requires JavaScript, follow these steps:
1705+
1706+
1. In your HTML file, add a `data-component` attribute to the element that
1707+
should be initialized by your JavaScript code. For example:
1708+
1709+
```html
1710+
<div data-component="my-component"></div>
1711+
```
1712+
1713+
2. Following the component pattern, create a single-purpose JavaScript module
1714+
(`assets/js/components/my-component.js`)
1715+
that exports a single function that receives the component element and initializes it.
1716+
3. In `assets/js/main.js`, import the module and register the component to ensure
1717+
the component is initialized on page load.
1718+
1719+
### Debugging JavaScript
1720+
1721+
To debug JavaScript code used in the InfluxData documentation UI, choose one of the following methods:
1722+
1723+
- Use source maps and the Chrome DevTools debugger.
1724+
- Use debug helpers that provide breakpoints and console logging as a workaround or alternative for using source maps and the Chrome DevTools debugger.
1725+
1726+
#### Using source maps and Chrome DevTools debugger
1727+
1728+
1. In VS Code, select Run > Start Debugging.
1729+
2. Select the "Debug Docs (source maps)" configuration.
1730+
3. Click the play button to start the debugger.
1731+
5. Set breakpoints in the JavaScript source files--files in the
1732+
`assets/js/ns-hugo-imp:` namespace-- in the
1733+
VS Code editor or in the Chrome Developer Tools Sources panel:
1734+
1735+
- In the VS Code Debugger panel > "Loaded Scripts" section, find the
1736+
`assets/js/ns-hugo-imp:` namespace.
1737+
- In the Chrome Developer Tools Sources panel, expand
1738+
`js/ns-hugo-imp:/<YOUR_WORKSPACE_ROOT>/assets/js/`.
1739+
1740+
#### Using debug helpers
1741+
1742+
1. In your JavaScript module, import debug helpers from `assets/js/utils/debug-helpers.js`.
1743+
These helpers provide breakpoints and console logging as a workaround or alternative for
1744+
using source maps and the Chrome DevTools debugger.
1745+
2. Insert debug statements by calling the helper functions in your code--for example:
1746+
1747+
```js
1748+
import { debugLog, debugBreak, debugInspect } from './utils/debug-helpers.js';
1749+
1750+
const data = debugInspect(someData, 'Data');
1751+
debugLog('Processing data', 'myFunction');
1752+
1753+
function processData() {
1754+
// Add a breakpoint that works with DevTools
1755+
debugBreak();
1756+
1757+
// Your existing code...
1758+
}
1759+
```
1760+
1761+
3. Start Hugo in development mode--for example:
1762+
1763+
```bash
1764+
yarn hugo server
1765+
```
1766+
1767+
4. In VS Code, go to Run > Start Debugging, and select the "Debug JS (debug-helpers)" configuration.
1768+
1769+
Your system uses the configuration in `launch.json` to launch the site in Chrome
1770+
and attach the debugger to the Developer Tools console.
1771+
1772+
Make sure to remove the debug statements before merging your changes.
1773+
The debug helpers are designed to be used in development and should not be used in production.

0 commit comments

Comments
 (0)