Merge pull request #70 from scalar-labs/add-copy-button-for-code-blocks

Add "Copy" button to code blocks

_includes/scripts.html

@@ -37,3 +37,6 @@
     window.mermaid.init(undefined, document.querySelectorAll('.language-mermaid'));
   });
 </script>
+
+<!-- The following script allows users to press a button to copy content in a code block to a clipboard. (added by josh-wong) -->
+<script src="/assets/js/copy-code-to-clipboard.js"></script>

_sass/minimal-mistakes/_buttons.scss

@@ -94,4 +94,4 @@
   &--small {
     font-size: $type-size-7;
   }
-}
+}

_sass/minimal-mistakes/_syntax.scss

@@ -9,14 +9,41 @@ figure.highlight {
   background: $base00;
   color: $base05;
   font-family: $monospace;
-  font-size: $type-size-6;
+  font-size: $type-size-5-5; /* Originally `font-size: $type-size-6;` (modified by josh-wong) */
   line-height: 1.8;
   border-radius: $border-radius;
 
   > pre,
   pre.highlight {
     margin: 0;
     padding: 1em;
+    /* white-space: pre-wrap; /* Added this initially to make commands in a code block wrap, but that looks a little confusing. Keeping this line but commenting it out for historical sake. (added by josh-wong) */
+  }
+
+  /* The following button style is for the copy button that allows users to copy content in a code block to a clipboard. (added by josh-wong) */
+  pre.highlight > button {
+    background-color: $scalar-primary-color;
+    border: none;
+    color: $lighter-gray;
+    display: block;
+    font-family: $sans-serif;
+    font-size: $type-size-4-5;
+    height: 100%;
+    line-height: 1.5;
+    min-width: 8.5%;
+    outline: none;
+    padding: 0.7em;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition: all 0.2s ease-out;
+
+    &:active,
+    &:focus,
+    &:hover {
+      background-color: darken($scalar-primary-color, 15%);
+      outline: none;
+    }
   }
 }
 
@@ -53,7 +80,7 @@ figure.highlight {
 }
 
 .highlight pre {
-  width: 100%;
+  width: 91.5%;
 }
 
 .highlight .hll {

assets/js/copy-code-to-clipboard.js

@@ -0,0 +1,24 @@
+// This JavaScript file allows users to press a button to copy content in a code block to a clipboard (added by josh-wong)
+var codeBlocks = document.querySelectorAll('pre.highlight');
+
+codeBlocks.forEach(function (codeBlock) {
+  var copyButton = document.createElement('button');
+  copyButton.className = 'copy';
+  copyButton.type = 'button';
+  copyButton.ariaLabel = 'Copy code to clipboard';
+  copyButton.innerText = 'Copy';
+
+  codeBlock.append(copyButton);
+
+  copyButton.addEventListener('click', function () {
+    var code = codeBlock.querySelector('code').innerText.replace("$ ", "").trim(); // Copy the code block, removing any leading `$ `
+    window.navigator.clipboard.writeText(code);
+
+    copyButton.innerText = 'Copied!';
+    var threeSeconds = 3000;
+
+    setTimeout(function () {
+      copyButton.innerText = 'Copy';
+    }, threeSeconds);
+  });
+});