jatkinson1000/add copy code button option

exampleSite/config.toml

@@ -28,6 +28,7 @@ pygmentsCodeFences=true
   accentColor = "#FD3519"
   mainSections = ['portfolio'] # values: ['post', 'portfolio'] only accept one section, to be displayed bellow 404
   rendererSafe = false # set to true if wish to remove the unsafe renderer setting below (recommended). Titles will not be run through markdownify
+  copyCodeButtonEnabled = false # set to true if copy button should be placed on top of code blocks
 
 [params.notFound]
   gopher = "/images/gopher.png" # checkout https://gopherize.me/

exampleSite/content/post/config-file.md

@@ -42,6 +42,8 @@ pygmentsCodeFences=true
   accentColor = "#FD3519"
   mainSections = ['portfolio']
   rendererSafe = true # set to true if the renderer is not marked unsafe
+  copyCodeButtonEnabled = false # set to true if copy button should be placed on top of code blocks
+
 
 [params.notFound]
   gopher = "/images/gopher.png"

layouts/partials/footer.html

@@ -25,5 +25,10 @@
       }
     });
   </script>
+  {{ if $.Site.Params.copyCodeButtonEnabled }}
+    {{ if (findRE "<pre" .Content 1) }}
+      <script src="/js/copy-code-button.js"></script>
+    {{ end }}
+  {{ end }}
 </body>
 </html>

static/js/copy-code-button.js

@@ -0,0 +1,36 @@
+function addCopyButtons(clipboard) {
+    document.querySelectorAll('pre > code').forEach(function (codeBlock) {
+        var button = document.createElement('button');
+        button.className = 'copy-code-button';
+        button.type = 'button';
+        button.innerText = 'Copy';
+
+        button.addEventListener('click', function () {
+            clipboard.writeText(codeBlock.innerText).then(function () {
+                /* Chrome doesn't seem to blur automatically,
+                   leaving the button in a focused state. */
+                button.blur();
+
+                button.innerText = 'Copied!';
+
+                setTimeout(function () {
+                    button.innerText = 'Copy';
+                }, 2000);
+            }, function (error) {
+                button.innerText = 'Error';
+            });
+        });
+
+        var pre = codeBlock.parentNode;
+        if (pre.parentNode.classList.contains('highlight')) {
+            var highlight = pre.parentNode;
+            highlight.parentNode.insertBefore(button, highlight);
+        } else {
+            pre.parentNode.insertBefore(button, pre);
+        }
+    });
+}
+
+if (navigator && navigator.clipboard) {
+    addCopyButtons(navigator.clipboard);
+}