add option to add Copy button for code snippets (#1433)

To add a Copy button wrap code snippet with the following element:
```
<div class="with-copy" markdown="1">

<your-code-snippet>

</div>
```

See the changes to `Kubernetes monitoring with VictoriaMetrics Single` for details.

docs/_includes/extra/head.html

@@ -0,0 +1,2 @@
+<script src="/assets/js/clipboard.min.js"></script>
+<link rel="stylesheet" href="/assets/css/clipboard.css">

docs/_includes/extra/script.js

@@ -15,3 +15,21 @@ $(document).on("click", '.shift li.toc a', function(e) {
        location.hash = segments.pop();
     },1)
 });
+
+/* Clipboard-copy snippet from https://github.com/marcoaugustoandrade/jekyll-clipboardjs/blob/master/copy.js */
+let codes = document.querySelectorAll('.with-copy .highlight > pre > code');
+let countID = 0;
+codes.forEach((code) => {
+
+    code.setAttribute("id", "code" + countID);
+
+    let btn = document.createElement('button');
+    btn.innerHTML = "Copy";
+    btn.className = "btn-copy";
+    btn.setAttribute("data-clipboard-action", "copy");
+    btn.setAttribute("data-clipboard-target", "#code" + countID);
+    code.before(btn);
+    countID++;
+});
+
+let clipboard = new ClipboardJS('.btn-copy');

docs/assets/css/clipboard.css

@@ -0,0 +1,23 @@
+/* modification for button copy */
+.btn-copy {
+    position: absolute;
+    color: #FFF;
+    background: rgba(0, 0, 0, .15);
+    border: 0;
+    padding: 2px 10px;
+    cursor: pointer;
+    right: 0px;
+    top: 0px;
+}
+
+.btn-copy:hover {
+    background: rgba(0, 0, 0, .25);
+}
+
+/* shift snippet syntax type label if Copy button is enabled */
+.with-copy div.highlighter-rouge:after {
+    right: 50px !important;
+}
+.markdown-body .highlight pre, .markdown-body pre {
+    padding: 20px !important;
+}

docs/guides/k8s-monitoring-with-vm-single.md

@@ -28,22 +28,34 @@ We will use:
 
 You need to add the VictoriaMetrics helm repository to install VictoriaMetrics components. We’re going to use VictoriaMetrics single-node. You can do this by running the following command:
 
+<div class="with-copy" markdown="1">
+
 ```bash
 helm repo add vm https://victoriametrics.github.io/helm-charts/
 ```
 
+</div>
+
 Update helm repositories:
 
+<div class="with-copy" markdown="1">
+
 ```bash
 helm repo update
 ```
 
+</div>
+
 To verify that everything is set up correctly you may run this command:
 
+<div class="with-copy" markdown="1">
+
 ```bash
 helm search repo vm/
 ```
 
+</div>
+
 The expected output is:
 
 ```bash
@@ -62,6 +74,8 @@ vm/victoria-metrics-single    0.7.4         1.62.0      Victoria Metrics Single
 
 Run this command in your terminal:
 
+<div class="with-copy" markdown="1">
+
 ```yaml
 cat <<EOF | helm install victoria-metrics vm/victoria-metrics-single -f -
 server:
@@ -70,6 +84,8 @@ server:
 EOF
 ```
 
+</div>
+
 * By running `helm install victoria-metrics vm/victoria-metrics-single` we will install `VictoriaMetrics Single` to default namespace inside your cluster
 * By adding `scrape: enable: true` we add and enable autodiscovery scraping from kubernetes cluster to `VictoriaMetrics Single`
 
@@ -118,10 +134,14 @@ For us it’s important to remember the url for the datasource (copy lines from
 
 Verify that VictoriaMetrics pod is up and running by executing the following command:
 
+<div class="with-copy" markdown="1">
+
 ```bash
 kubectl get pods
 ```
 
+</div>
+
 The expected output is:
 
 ```bash
@@ -134,13 +154,20 @@ victoria-metrics-victoria-metrics-single-server-0   1/1     Running   0
 
 Add the Grafana helm repository. 
 
+<div class="with-copy" markdown="1">
+
 ```bash
 helm repo add grafana https://grafana.github.io/helm-charts
 helm repo update
 ```
+
+</div>
+
 See more info on Grafana ArtifactHUB [https://artifacthub.io/packages/helm/grafana/grafana](https://artifacthub.io/packages/helm/grafana/grafana)
 By installing the Chart with the release name `my-grafana`, you add the VictoriaMetrics datasource with official dashboard and kubernetes dashboard:
 
+<div class="with-copy" markdown="1">
+
 ```yaml
 cat <<EOF | helm install my-grafana grafana/grafana -f -
   datasources:
@@ -181,6 +208,9 @@ cat <<EOF | helm install my-grafana grafana/grafana -f -
         datasource: victoriametrics
 EOF
 ```
+
+</div>
+
 By running this command we:
 * Install Grafana from helm repository.
 * Provision VictoriaMetrics datasource with the url from the output above which we copied before.
@@ -188,18 +218,32 @@ By running this command we:
 * Add this [https://grafana.com/grafana/dashboards/14205](https://grafana.com/grafana/dashboards/14205) dashboard to see Kubernetes cluster metrics.
 
 
-See the output log in your terminal. Copy, paste and run these commands. 
+Check the output log in your terminal.
-The first one will show `admin` password for Grafana admin.
+To see the password for Grafana `admin` user use the following command:
-The second and the third will forward Grafana to `127.0.0.1:3000`:
+
+<div class="with-copy" markdown="1">
 
 ```bash
 kubectl get secret --namespace default my-grafana -o jsonpath="{.data.admin-password}" | base64 --decode ; echo
+```
 
+</div>
+
+Expose Grafana service on `127.0.0.1:3000`:
+
+<div class="with-copy" markdown="1">
+
+```bash
 export POD_NAME=$(kubectl get pods --namespace default -l "app.kubernetes.io/name=grafana,app.kubernetes.io/instance=my-grafana" -o jsonpath="{.items[0].metadata.name}")
 
 kubectl --namespace default port-forward $POD_NAME 3000
 ```
 
+</div>
+
+Now Grafana should be accessible on the [http://127.0.0.1:3000](http://127.0.0.1:3000) address.
+
+
 **4. Check the obtained result in your browser**
 
 To check that VictoriaMetrics has collected metrics from the k8s cluster open in browser [http://127.0.0.1:3000/dashboards](http://127.0.0.1:3000/dashboards) and choose `Kubernetes Cluster Monitoring (via Prometheus)` dashboard. Use `admin` for login and `password` that you previously obtained from kubectl.