Copy to clipboard on docs (#403)

* adding copy to clipboard action * adding copy logic Co-authored-by: Andrés Saldaña <[email protected]>
PlayFab · Sep 21, 2022 · 9aba2b0 · 9aba2b0
1 parent b487fc2
commit 9aba2b0
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 6 deletions.
diff --git a/docs/FAQ.md b/docs/FAQ.md
@@ -4,6 +4,10 @@ title: Frequently Asked Questions
 nav_order: 15
 ---
 
+<link rel="stylesheet" type="text/css" href="./assets/css/code-block.css" media="screen" />
+<script src="./assets/js/code-block.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
+
 # Frequently Asked Questions
 
 ## Can I run a Unity or Unreal game server on Thundernetes?
@@ -14,7 +18,8 @@ You can run any game server that supports the [PlayFab GameServer SDK](https://g
 
 The GameServerBuild template allows you to set custom Annotations and/or Labels along with the Pod specification. This is possible since GameServerBuild includes the entire PodTemplateSpec. Labels and Annotations are copied to the GameServers and the Pods in the GameServerBuild. Check the following YAML for an example:
 
-```yaml
+<div class="code-block-container">
+  <pre id="code-block-text-input" class="code-block-text-input prettyprint lang-bash">
 apiVersion: mps.playfab.com/v1alpha1
 kind: GameServerBuild
 metadata:
@@ -39,8 +44,12 @@ spec:
           ports:
           - containerPort: 80 # your game server port
             protocol: TCP # your game server port protocol
-            name: gameport # required field
-```
+            name: gameport # required field    
+  </pre>
+  <button title="Copy to clipboard" onclick="copyToClipboard()" class="code-block-clipboard-btn" >
+      <img class="code-block-clipboard-icon" src="./assets/images/copy-regular.svg"/>
+  </button>
+</div>
 
 ## Can I run my game server pods in a non-default namespace?
 

diff --git a/docs/Gemfile b/docs/Gemfile
@@ -24,3 +24,5 @@ gem "jekyll-remote-theme", "~> 0.4.3"
 gem "just-the-docs", "~> 0.3.3"
 
 gem "html-proofer", "~> 4.3.0"
+
+gem "webrick", "~> 1.7"
diff --git a/docs/assets/css/code-block.css b/docs/assets/css/code-block.css
@@ -0,0 +1,24 @@
+.code-block-container {
+    border: none !important;
+    background-color: rgb(245, 246, 250);
+    border-radius: 3px;
+    padding: 10px;
+    display: flex;
+    width: -webkit-fill-available;
+}
+.code-block-text-input {
+    overflow-y:hidden;
+    border: none !important;
+    margin: 0px 10px 0px 0px !important;
+    border-radius: 3px;
+    font-size: small;
+    width: -webkit-fill-available;
+}
+.code-block-clipboard-btn {
+    width: 30px;
+    height: 30px;
+}
+.code-block-clipboard-icon {
+    width: 20px;
+    height: 20px;
+}
diff --git a/docs/assets/images/copy-regular.svg b/docs/assets/images/copy-regular.svg
diff --git a/docs/assets/js/code-block.js b/docs/assets/js/code-block.js
@@ -0,0 +1,5 @@
+function copyToClipboard() {
+    const codeBlockChildNodes = document.getElementById("code-block-text-input").childNodes;
+    const codeBlockText = Array.from(codeBlockChildNodes).filter(node => node.innerHTML != undefined).reduce((acc, curr) => acc + curr.innerHTML, "")
+    navigator.clipboard.writeText(codeBlockText);
+}
diff --git a/docs/gameserverapi/README.md b/docs/gameserverapi/README.md
@@ -5,6 +5,10 @@ nav_order: 9
 has_children: true
 ---
 
+<link rel="stylesheet" type="text/css" href="../assets/css/code-block.css" media="screen" />
+<script src="../assets/js/code-block.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
+
 # GameServer API
 
 The GameServer API is a RESTful API service that facilitates access to Thundernetes' Custom Resources: GameServerBuilds, GameServers, and GameServerDetails. It is an alternative for people who don't want to use tools like [kubectl](https://kubernetes.io/docs/reference/kubectl/kubectl/), and an easy way to integrate Thundernetes to your own applications. It also allows you to use our [Thundernetes UI](../thundernetesui/README.md).
@@ -13,9 +17,12 @@ The GameServer API is a RESTful API service that facilitates access to Thunderne
 
 We provide a [Docker image](https://github.com/PlayFab/thundernetes/pkgs/container/thundernetes-gameserverapi) with the API, you have to deploy it into your cluster along with Thundernetes. We also have an [example YAML file](https://github.com/PlayFab/thundernetes/tree/main/samples/gameserverapi) for the deployment, all you have to do is run:
 
-```bash
-kubectl apply -f https://raw.githubusercontent.com/PlayFab/thundernetes/main/samples/gameserverapi/gameserverapi.yaml
-```
+<div class="code-block-container">
+    <pre id="code-block-text-input" class="code-block-text-input prettyprint lang-bash">kubectl apply -f https://raw.githubusercontent.com/PlayFab/thundernetes/main/samples/gameserverapi/gameserverapi.yaml</pre>
+    <button title="Copy to clipboard" onclick="copyToClipboard()" class="code-block-clipboard-btn">    
+        <img class="code-block-clipboard-icon" src="../assets/images/copy-regular.svg"/>
+    </button>
+</div>
 
 This example uses a LoadBalancer to expose the application, so it will be assigned an external IP (this doesn't work locally unless you have a local implementation of a LoadBalancer, you can use [port forwarding](https://kubernetes.io/docs/tasks/access-application-cluster/port-forward-access-application-cluster/) instead).