BREAKING CHANGE: adjusted code blocks syntax in mdx to match updated API

Side:
- adjusted comment tokens style
- removed redundant console.log

Author: Kirill Bolotsky

CONTRIBUTING_FILE_FORMAT.md

@@ -218,9 +218,9 @@ And, as a result:
 
 ![internal-images/Untitled%207.png](internal-images/Untitled%207.png)
 
-If we want line numbers to be rendered, we shall add the wrapper and adjust our data-props to:
+If we want line numbers to be rendered, we shall add the wrapper and adjust our props to:
 
-    <div class="code-group" data-props='{"labels": [], "lineNumbers": [true]}'>
+    <CodeGroup labels={[]} lineNumbers={[true]}>
 
     ```javascript
     for (var id = 1; id <= 100; id++) {
@@ -231,17 +231,17 @@ If we want line numbers to be rendered, we shall add the wrapper and adjust our
     // tags.name="http://example.com/posts/${}"
     ```
 
-    </div>
+    </CodeGroup>
 
 Here you go:
 
 ![internal-images/Untitled%208.png](internal-images/Untitled%208.png)
 
 ### Headerfull
 
-Pretty much the same routine as with headerless ones, but one difference in data-props, labels field, but I bet, you already got that:
+Pretty much the same routine as with headerless ones, but with one difference in props, labels field, but I bet, you already got that:
 
-    <div class="code-group" data-props='{"labels": ["Nice code!"], "lineNumbers": [true]}'>
+    <CodeGroup labels={["Nice code!"]} lineNumbers={[true]}>
 
     ```javascript
     for (var id = 1; id <= 100; id++) {
@@ -252,15 +252,15 @@ Pretty much the same routine as with headerless ones, but one difference in data
     // tags.name="http://example.com/posts/${}"
     ```
 
-    </div>
+    </CodeGroup>
 
 ![internal-images/Untitled%209.png](internal-images/Untitled%209.png)
 
 ### Multiple tabs
 
 To be able to switch between different code tabs, we have to repeat the headerfull routine, but extend labels and md code blocks:
 
-    <div class="code-group" data-props='{"labels": ["Nice code!", "This one is better", "Oh my.."], "lineNumbers": [true, true, true]}'>
+    <CodeGroup labels={["Nice code!", "This one is better", "Oh my.."]} lineNumbers={[true, true, true]}>
 
     ```javascript
     for (var id = 1; id <= 100; id++) {
@@ -290,7 +290,7 @@ To be able to switch between different code tabs, we have to repeat the headerfu
     ```
 
 
-    </div>
+    </CodeGroup>
 
 ![internal-images/Untitled%2010.png](internal-images/Untitled%2010.png)
 
@@ -306,7 +306,7 @@ Line numbers are optional not for the whole code block, but for each tab. That i
 
 See _'Then do this?'_ text line between tabs? **You can not do that**. Put nothing in `code-group` except code blocks, or you'll broke the page.
 
-    <div class="code-group" data-props='{"labels": ["Nice code!"], "lineNumbers": [true]}'>
+    <CodeGroup labels={["Nice code!"]} lineNumbers={[true]}>
 
     ```javascript
     for (var id = 1; id <= 100; id++) {
@@ -324,7 +324,7 @@ See _'Then do this?'_ text line between tabs? **You can not do that**. Put nothi
 
     ```
 
-    </div>
+    </CodeGroup>
 
 ## Table data
 

src/components/shared/code/code.js

@@ -8,7 +8,6 @@ import styles from './code.module.scss';
 
 const Code = ({ children, showLineNumbers }) => {
   if (!children) return null;
-  console.log(children);
   const codeContainerRef = useRef(null);
   const [codeToCopy, setCodeToCopy] = useState('');
 

src/components/shared/code/code.module.scss

@@ -11,7 +11,7 @@
   text-align: right;
   padding-right: 1em;
   user-select: none;
-  opacity: 0.5;
+  color: $color-additional-1;
 }
 
 .line-content {
@@ -65,6 +65,9 @@
       &-line {
         display: table-row;
       }
+      &.comment {
+        opacity: 0.5;
+      }
       &.keyword {
         color: #00cdff;
       }

src/data/markdown/docs/01 guides/01 Getting started/03 Running k6.md

@@ -8,7 +8,7 @@ excerpt: ''
 Let's start by running a simple local script. Copy the code below, paste it into your
 favourite editor, and save it as "script.js":
 
-<div class="code-group" data-props='{"labels": ["script.js"], "lineNumbers": [true]}'>
+<CodeGroup labels={["script.js"]} lineNumbers={[true]}>
 
 ```javascript
 import http from 'k6/http';
@@ -20,11 +20,11 @@ export default function () {
 }
 ```
 
-</div>
+</CodeGroup>
 
 Then run k6 using this command:
 
-<div class="code-group" data-props='{"labels": ["CLI", "Docker", "Docker in Win PowerShell"]}'>
+<CodeGroup labels={["CLI", "Docker", "Docker in Win PowerShell"]}>
 
 ```shell
 $ k6 run script.js
@@ -44,13 +44,13 @@ $ docker run -i loadimpact/k6 run - <script.js
 $ cat script.js | docker run -i loadimpact/k6 run -
 ```
 
-</div>
+</CodeGroup>
 
 ## Adding more VUs
 
 Now we'll try running a load test with more than 1 virtual user and a slightly longer duration:
 
-<div class="code-group" data-props='{"labels": ["CLI", "Docker", "Docker in Win PowerShell"]}'>
+<CodeGroup labels={["CLI", "Docker", "Docker in Win PowerShell"]}>
 
 ```shell
 k6 run --vus 10 --duration 30s script.js
@@ -64,7 +64,7 @@ docker run -i loadimpact/k6 run --vus 10 --duration 30s - <script.js
 cat script.js | docker run -i loadimpact/k6 run --vus 10 --duration 30s -
 ```
 
-</div>
+</CodeGroup>
 
 _Running a 30-second, 10-VU load test_
 
@@ -75,15 +75,15 @@ which allows you to break larger tests into smaller pieces, or make reusable pie
 Scripts must contain, at the very least, a `default` function - this defines the entry point for
 your VUs, similar to the `main()` function in many other languages:
 
-<div class="code-group" data-props='{"labels": []}'>
+<CodeGroup labels={[]}>
 
 ```javascript
 export default function () {
   // vu code: do things here...
 }
 ```
 
-</div>
+</CodeGroup>
 
 ### The init context and the default function
 
@@ -93,7 +93,7 @@ but code inside and outside your default function can do different things.
 Code _inside_ `default` is called "VU code", and is run over and over for as long as the test is
 running. Code _outside_ of it is called "init code", and is run only once per VU.
 
-<div class="code-group" data-props='{"labels": [""]}'>
+<CodeGroup labels={[""]}>
 
 ```js
 // init code
@@ -104,7 +104,7 @@ export default function( {
 
 ```
 
-</div>
+</CodeGroup>
 
 VU code can make HTTP requests, emit metrics, and generally do everything you'd expect a load test
 to do - with a few important exceptions: you can't load anything from your local filesystem, or
@@ -117,7 +117,7 @@ Read more about the different [life cycle stages of a k6 test](/using-k6/test-li
 If you want to avoid having to type `--vus 10` and `--duration 30s` all the time, you can include
 those settings inside your JavaScript file also:
 
-<div class="code-group" data-props='{"labels": ["script.js"], "lineNumbers": [true]}'>
+<CodeGroup labels={["script.js"]} lineNumbers={[true]}>
 
 ```javascript
 import http from 'k6/http';
@@ -132,11 +132,11 @@ export default function () {
 }
 ```
 
-</div>
+</CodeGroup>
 
 Then you just run the script without those parameters on the command line:
 
-<div class="code-group" data-props='{"labels": ["CLI", "Docker", "Docker in Win PowerShell"]}'>
+<CodeGroup labels={["CLI", "Docker", "Docker in Win PowerShell"]}>
 
 ```shell
 $ k6 run script.js
@@ -150,14 +150,14 @@ $ docker run -i loadimpact/k6 run - <script.js
 C:\ cat script.js | docker run -i loadimpact/k6 run -
 ```
 
-</div>
+</CodeGroup>
 
 ## Stages: ramping up/down VUs
 
 You can also have the VU level ramp up and down during the test. The `options.stages` property
 allows you to configure ramping behaviour.
 
-<div class="code-group" data-props='{"labels": ["stages.js"], "lineNumbers": [true]}'>
+<CodeGroup labels={["stages.js"]} lineNumbers={[true]}>
 
 ```javascript
 import http from 'k6/http';
@@ -178,7 +178,7 @@ export default function () {
 }
 ```
 
-</div>
+</CodeGroup>
 
 This can also be accomplished with more advanced configuration using
 [scenarios](/using-k6/scenarios) and the `ramping-vus` executor.
@@ -195,12 +195,12 @@ One of the goals with k6 is to support running a test in the three execution mod
 
 For running cloud tests from the CLI, you must first register a k6 Cloud account and then log into your account via the CLI. Then, you only have to pass your existing script to the `k6 cloud` command.
 
-<div class="code-group" data-props='{"labels": ["Running a cloud test"]}'>
+<CodeGroup labels={["Running a cloud test"]}>
 
 ```shell
 $ k6 cloud script.js
 ```
 
-</div>
+</CodeGroup>
 
 For detailed instructions and the different options, read more on [running cloud tests from the CLI](/cloud/creating-and-running-a-test/cloud-tests-from-the-cli).

src/data/markdown/docs/01 guides/01 Getting started/04 Results Output.md

@@ -17,7 +17,7 @@ When k6 displays the results to `stdout`, it will show the k6 logo and the follo
 
 ### Test details
 
-<div class="code-group" data-props='{"labels": []}'>
+<CodeGroup labels={[]}>
 
 ```shell
 execution: local
@@ -28,7 +28,7 @@ duration: 1m0s, iterations: -
     vus: 100,  max: 100
 ```
 
-</div>
+</CodeGroup>
 
 - `execution: local` the k6 execution mode (local or cloud).
 - `output: -` the output of the test results. The default is `stdout`.
@@ -46,7 +46,7 @@ The test summary provides a general overview of your test result. The summary pr
 - [Checks](/using-k6/checks) and [thresholds](/using-k6/thresholds).
 - [Groups](/using-k6/tags-and-groups#groups) and [tags](/using-k6/tags-and-groups#tags).
 
-<div class="code-group" data-props='{"labels": []}'>
+<CodeGroup labels={[]}>
 
 ```shell
 data_received..............: 148 MB 2.5 MB/s
@@ -65,31 +65,31 @@ vus........................: 100    min=100 max=100
 vus_max....................: 100    min=100 max=100
 ```
 
-</div>
+</CodeGroup>
 
 > To learn more about the metrics k6 collects and reports, read the [Metrics guide](/using-k6/metrics).
 
 **Output of trend metrics**
 
 [Trend metrics](/using-k6/metrics#metric-types) collect trend statistics (min/max/avg/percentiles) for a series of values. On stdout they are printed like this:
 
-<div class="code-group" data-props='{"labels": []}'>
+<CodeGroup labels={[]}>
 
 ```shell
 http_req_duration..........: avg=143.14ms min=112.87ms med=136.03ms max=1.18s    p(90)=164.2ms  p(95)=177.75ms
 ```
 
-</div>
+</CodeGroup>
 
 You could use the [summary-trend-stats](/using-k6/options#summary-trend-stats) option to change the stats reported for Trend metrics.
 
-<div class="code-group" data-props='{"labels": []}'>
+<CodeGroup labels={[]}>
 
 ```shell
 $ k6 run --summary-trend-stats="avg,p(99)" script.js
 ```
 
-</div>
+</CodeGroup>
 
 ## Output plugins
 
@@ -113,28 +113,28 @@ The list of output plugins are:
 
 You can simultaneously send metrics to several outputs by using the CLI `--out` flag multiple times, for example:
 
-<div class="code-group" data-props='{"labels": []}'>
+<CodeGroup labels={[]}>
 
 ```shell
 $ k6 run \
     --out json=test.json \
     --out influxdb=http://localhost:8086/k6
 ```
 
-</div>
+</CodeGroup>
 
 ## Summary export
 
 Additionally, the `k6 run` command can export the end-of-test summary report to a JSON file that includes data for all test metrics, checks and thresholds.
 
 This is useful to get the aggregated test results in a machine-readable format, for integration with dashboards, external alerts, etc.
 
-<div class="code-group" data-props='{"labels": [] }'>
+<CodeGroup labels={[]}>
 
 ```shell
 $ k6 run --summary-export=export.json script.js
 ```
 
-</div>
+</CodeGroup>
 
 > Read more about the summary on the [JSON plugin documentation](/results-visualization/json#summary-export)