feat: bash input signs are no more part of copy btn content (#161)

Side:
- adjusted CodeGroup component similarly how it was done on blog to prevent buggy behavior
- added $ signs to bash block on Installation page

Author: Kirill Bolotsky

src/components/shared/code/code-group.js

@@ -1,13 +1,11 @@
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
-import { getRandomKey } from 'utils';
 
 import Code from './code';
 import styles from './code-group.module.scss';
 
 const CodeGroup = ({ children, labels, lineNumbers, heightTogglers }) => {
   const [currentIndex, setCurrentIndex] = useState(0);
-  const randomKey = getRandomKey();
   return (
     <div className={styles.wrapper}>
       <div className={styles.header}>
@@ -26,21 +24,18 @@ const CodeGroup = ({ children, labels, lineNumbers, heightTogglers }) => {
           </div>
         ))}
       </div>
-      <style>
-        {`.${styles.itemsContainer}.${randomKey} > div:nth-child(${
-          currentIndex + 1
-        }) { display: block; }`}
-      </style>
-      <div className={`${styles.itemsContainer} ${randomKey}`}>
-        {React.Children.map(children, (child, i) => (
-          <Code
-            showLineNumbers={lineNumbers[i]}
-            key={i}
-            showHeightToggler={heightTogglers[i]}
-          >
-            {child.props.children}
-          </Code>
-        ))}
+      <div className={`${styles.itemsContainer}`}>
+        {React.Children.map(children, (child, i) =>
+          i === currentIndex ? (
+            <Code
+              showLineNumbers={lineNumbers[i]}
+              key={i}
+              showHeightToggler={heightTogglers[i]}
+            >
+              {child.props.children}
+            </Code>
+          ) : null,
+        )}
       </div>
     </div>
   );

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

@@ -44,9 +44,3 @@
 .code-tab_active {
   color: #fff;
 }
-
-.items-container {
-  > div {
-    display: none;
-  }
-}

src/components/shared/code/code.js

@@ -61,12 +61,20 @@ const Code = ({ children, showLineNumbers, showHeightToggler }) => {
     };
   }
 
+  const declaredLang = getLanguageDeclaration(children.props?.className);
+  let copyBtnContent =
+    children.props?.children ?? 'Sorry, nothing to copy here';
+
+  if (declaredLang === 'bash') {
+    copyBtnContent = copyBtnContent.replace(/^\$\s/gm, '');
+  }
+
   return (
-    <WithCopyButton dataToCopy={children.props?.children}>
+    <WithCopyButton dataToCopy={copyBtnContent}>
       <Highlight
         {...defaultProps}
         code={children.props?.children}
-        language={getLanguageDeclaration(children.props?.className)}
+        language={declaredLang}
       >
         {({ className, tokens, getLineProps, getTokenProps }) => (
           <pre
@@ -84,12 +92,17 @@ const Code = ({ children, showLineNumbers, showHeightToggler }) => {
                       <span className={styles.lineNumber}>{i + 1}</span>
                     )}
                     <span className={styles.lineContent}>
-                      {line.map((token, key) => (
-                        <span
-                          {...getTokenProps({ token, key })}
-                          style={undefined}
-                        />
-                      ))}
+                      {line.map((token, key) => {
+                        return (
+                          <span
+                            {...getTokenProps({
+                              token,
+                              key,
+                            })}
+                            style={undefined}
+                          />
+                        );
+                      })}
                     </span>
                   </div>
                 );

src/data/markdown/docs/01 guides/01 Getting started/02 Installation.md

@@ -7,10 +7,10 @@ title: 'Installation'
 ### Debian/Ubuntu
 
 ```bash
-sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys 379CE192D401AB61
-echo "deb https://dl.bintray.com/loadimpact/deb stable main" | sudo tee -a /etc/apt/sources.list
-sudo apt-get update
-sudo apt-get install k6
+$ sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys 379CE192D401AB61
+$ echo "deb https://dl.bintray.com/loadimpact/deb stable main" | sudo tee -a /etc/apt/sources.list
+$ sudo apt-get update
+$ sudo apt-get install k6
 ```
 
 > #### ⚠️ If you are behind a firewall or proxy
@@ -20,23 +20,23 @@ sudo apt-get install k6
 > alternative approach instead:
 >
 > ```bash
-> wget -q -O - https://bintray.com/user/downloadSubjectPublicKey?username=bintray | sudo apt-key add -
+> $ wget -q -O - https://bintray.com/user/downloadSubjectPublicKey?username=bintray | sudo apt-key add -
 > ```
 
 ### Red Hat/CentOS
 
 ```bash
-wget https://bintray.com/loadimpact/rpm/rpm -O bintray-loadimpact-rpm.repo
-sudo mv bintray-loadimpact-rpm.repo /etc/yum.repos.d/
-sudo yum install k6
+$ wget https://bintray.com/loadimpact/rpm/rpm -O bintray-loadimpact-rpm.repo
+$ sudo mv bintray-loadimpact-rpm.repo /etc/yum.repos.d/
+$ sudo yum install k6
 ```
 
 ## Mac (brew)
 
 <CodeGroup labels={['Brew']}>
 
 ```bash
-brew install k6
+$ brew install k6
 ```
 
 </CodeGroup>
@@ -55,7 +55,7 @@ Install the binary in your `PATH` to run **k6** from any location.
 <CodeGroup labels={['Docker']}>
 
 ```bash
-docker pull loadimpact/k6
+$ docker pull loadimpact/k6
 ```
 
 </CodeGroup>