Add "copy to clipboard" button to code blocks

_includes/head.html

@@ -14,6 +14,7 @@
 <!-- For all browsers -->
 <link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url | append: '?v=' | append: site.git.last_commit.short_sha }}">
 <link rel="stylesheet" href="https://static.ibugone.com/fontawesome/5/css/all.min.css">
+<script src="/assets/js/clipboard.js" async defer></script>
 
 <!--[if IE]>
   <style>

_sass/page-content.scss

@@ -81,6 +81,44 @@ section.page__content {
     margin-right: auto;
   }
 
+  pre {
+    .copy-button {
+      position: absolute;
+      top: 0.5em;
+      right: 0.5em;
+      z-index: 1;
+      background: none;
+      border: none;
+      border-radius: 0.1em;
+      padding: 0.2em 0.5em;
+      color: white;
+      opacity: 0.1;
+      transition: color 0.25s linear, opacity 0.25s linear;
+
+      &:hover {
+        opacity: 1;
+      }
+
+      &:before {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 2;
+      }
+    }
+
+    &:hover .copy-button {
+      opacity: 0.6;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
   .notice,
   .notice--primary,
   .notice--info,

assets/js/clipboard.js

@@ -0,0 +1,59 @@
+$(document).ready(function() {
+  const copyText = function(text) {
+    const isRTL = document.documentElement.getAttribute('dir') == 'rtl';
+
+    var textarea = document.createElement('textarea');
+    // Prevent zooming on iOS
+    textarea.style.fontSize = '12pt';
+    // Reset box model
+    textarea.style.border = '0';
+    textarea.style.padding = '0';
+    textarea.style.margin = '0';
+    // Move element out of screen horizontally
+    textarea.style.position = 'absolute';
+    textarea.style[isRTL ? 'right' : 'left'] = '-9999px';
+    // Move element to the same position vertically
+    let yPosition = window.pageYOffset || document.documentElement.scrollTop;
+    textarea.style.top = yPosition + "px";
+
+    textarea.setAttribute('readonly', '');
+    textarea.value = text;
+    document.body.appendChild(textarea);
+
+    let success = true;
+    try {
+      textarea.select();
+      success = document.execCommand("copy");
+    } catch {
+      success = false;
+    }
+    textarea.parentNode.removeChild(textarea);
+    return success;
+  };
+
+  const copyButtonEventListener = function(event) {
+    const thisButton = event.target;
+
+    // Locate the <code> element
+    let codeBlock = thisButton.nextElementSibling;
+    while (codeBlock && codeBlock.tagName.toLowerCase() !== 'code') {
+      codeBlock = codeBlock.nextElementSibling;
+    }
+    if (!codeBlock) {
+      // No <code> found - wtf?
+      throw new Error("No code block found beside this button. This is unexpected.");
+    }
+    return copyText(codeBlock.innerText);
+  };
+
+  $(".page__content pre > code").each(function() {
+    // Locate the <pre> element
+    const container = $(this).parent();
+    var copyButton = document.createElement("button");
+    copyButton.title = "Copy to clipboard";
+    copyButton.className = "copy-button";
+    copyButton.innerHTML = '<i class="far fa-copy"></i>';
+    copyButton.addEventListener("click", copyButtonEventListener);
+    container.prepend(copyButton);
+  });
+});