add code for copy button (#97)

kapunahelewong · web-flow · commit 52fcc93ca2bc · 2021-07-27T00:04:39.000Z
Signed-off-by: Kapunahele Wong &lt;kapunahelewong@gmail.com&gt;
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -27,3 +27,59 @@ function toggleNav() {
     leftnavToggle.classList.remove("open");
   }
 }
+
+// Add copy button on code blocks
+// This code is kindly shared under the MIT License by Tom Spencer in their most excellent [tutorial](https://www.tomspencer.dev/blog/2018/09/14/adding-click-to-copy-buttons-to-a-hugo-powered-blog/).
+
+(function() {
+  'use strict';
+
+  if(!document.queryCommandSupported('copy')) {
+    return;
+  }
+
+  function confirmationMsg(el, msg) {
+    el.textContent = msg;
+    setTimeout(function() {
+      el.textContent = "Copy";
+    }, 1200);
+  }
+
+  function selectText(node) {
+    var selection = window.getSelection();
+    var range = document.createRange();
+    range.selectNodeContents(node);
+    selection.removeAllRanges();
+    selection.addRange(range);
+    return selection;
+  }
+  
+  // Create a copy button 
+  function addCopyButton(containerEl) {
+    var copyBtn = document.createElement("button");
+    copyBtn.className = "highlight-copy-btn";
+    copyBtn.textContent = "Copy";
+
+    var codeEl = containerEl.firstElementChild;
+    copyBtn.addEventListener('click', function() {
+      try {
+        var selection = selectText(codeEl);
+        document.execCommand('copy');
+        selection.removeAllRanges();
+
+        confirmationMsg(copyBtn, 'Copied!')
+      } catch(e) {
+        console && console.log(e);
+        confirmationMsg(copyBtn, 'Failed.')
+      }
+    });
+
+    containerEl.appendChild(copyBtn);
+  }
+
+  // Add copy button to code blocks
+  var highlightBlocks = document.getElementsByClassName('highlight');
+  Array.prototype.forEach.call(highlightBlocks, addCopyButton);
+})();
+
+
diff --git a/assets/sass/custom.sass b/assets/sass/custom.sass
@@ -293,3 +293,26 @@ footer
   a
     color: lighten($primary-color, 30%)
     text-decoration: none
+
+
+  
+// styles for copy button on code snippets
+.highlight 
+    position: relative
+
+.highlight pre 
+    padding-right: 75px
+
+.highlight-copy-btn 
+    position: absolute
+    top: 7px
+    right: 7px
+    border: 0
+    border-radius: 4px
+    font-size: 0.8rem
+    color: #fff
+    background-color: #777
+    min-width: 55px
+
+.highlight-copy-btn:hover 
+    background-color: #666
diff --git a/content/docs/demo.md b/content/docs/demo.md
@@ -206,6 +206,33 @@ Common languages used in Kubernetes documentation code blocks include:
 - `xml`
 - `none` (disables syntax highlighting for the block)
 
+The following are some examples of inline code blocks:
+
+```html
+<html>
+  <div>
+    <p>Sample HTML</p>
+  </div>
+</html>
+```
+
+```js
+function myFunction() {
+  console.log("A JavaScript function");
+}
+```
+
+```css
+body
+  font-family: $font-family-body
+  font-size: .9rem
+  font-color: $font-color
+
+.logo
+  max-width: 200px
+```
+
+
 ### Code blocks containing Hugo shortcodes
 
 To show raw Hugo shortcodes as in the above example and prevent Hugo
