Add Copy Button

CONTRIBUTORS.md

@@ -3,6 +3,7 @@
 - [Chip Senkbeil](https://github.com/chipsenkbeil)
 - [Dale Noe](https://github.com/dalenoe)
 - [Gabor Nagy](https://github.com/Aigeruth)
+- [Gary Chan](https://github.com/essesoul)
 - [Harry Khanna](https://github.com/hkhanna)
 - [Ihor Dvoretskyi](https://github.com/idvoretskyi)
 - [Jacob Wood](https://github.com/jacoblukewood)
@@ -142,4 +143,4 @@
 - [Shaked8634](https://github.com/shaked8634)  
 - [Leo Heimann Ruiz](https://leo.heitmannruiz.org/)
 - [Antoine "Toinux" Wam](https://github.com/itzwam)
-- [Reberti Carvalho Soares](https://github.com/RebertiCS)
+- [Reberti Carvalho Soares](https://github.com/RebertiCS)

layouts/partials/footer.html

@@ -16,4 +16,8 @@
       [<a href="{{ .Site.Params.commit }}/{{ .GitInfo.Hash }}" target="_blank" rel="noopener">{{ .GitInfo.AbbreviatedHash }}</a>]
     {{ end }}
   </section>
+  <!-- copy code -->
+  {{ if (findRE "<code" .Content 1) }}
+<script src="{{"/js/clipboard.js" | relURL}}"></script>
+  {{ end }}
 </footer>

layouts/partials/head.html

@@ -19,3 +19,7 @@
 {{ if .IsHome }}{{ partial "head/hugo-generator.html" . }}{{ end }}
 
 {{ partial "head/extensions.html" . }}
+
+{{ if (findRE "<pre" .Content 1) }}
+    <link rel="stylesheet" href="/css/clipboard.css">
+{{ end }}

static/css/clipboard.css

@@ -0,0 +1,37 @@
+.clipboard-button {
+    position: absolute;
+    right: 0;
+    padding: 5px 7px 3px 7px;
+    margin: 5px;
+    color: #767676;
+    border-color: #767676;
+    background-color: #ededed;
+    border: 1px solid;
+    border-radius: 6px;
+    font-size: 0.8em;
+    z-index: 1;
+    opacity: 0;
+    transition: 0.1s;
+  }
+  .clipboard-button > svg {
+    fill: #767676;
+  }
+  .clipboard-button:hover {
+    cursor: pointer;
+    border-color: #696969;
+    background-color: #e0e0e0;
+  }
+  .clipboard-button:hover > svg {
+    fill: #696969;
+  }
+  .clipboard-button:focus {
+    outline: 0;
+  }
+  .highlight {
+    position: relative;
+  }
+  .highlight:hover > .clipboard-button {
+    opacity: 1;
+    transition: 0.2s;
+  }
+

static/js/clipboard.js

@@ -0,0 +1,37 @@
+const svgCopy =
+  '<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path></svg>';
+const svgCheck =
+  '<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" fill="rgb(63, 185, 80)" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>';
+
+const addCopyButtons = (clipboard) => {
+    document.querySelectorAll("pre > code").forEach((codeBlock) => {
+      const button = document.createElement("button");
+      button.className = "clipboard-button";
+      button.type = "button";
+      button.innerHTML = svgCopy;
+      button.addEventListener("click", () => {
+        clipboard.writeText(codeBlock.innerText).then(
+          () => {
+            button.blur();
+            button.innerHTML = svgCheck;
+            setTimeout(() => (button.innerHTML = svgCopy), 2000);
+          },
+          (error) => (button.innerHTML = "Error")
+        );
+      });
+      const pre = codeBlock.parentNode;
+      pre.parentNode.insertBefore(button, pre);
+    });
+};
+if (navigator && navigator.clipboard) {
+    addCopyButtons(navigator.clipboard);
+  } else {
+    const script = document.createElement("script");
+    script.src =
+      "https://cdnjs.cloudflare.com/ajax/libs/clipboard-polyfill/2.7.0/clipboard-polyfill.promise.js";
+    script.integrity = "sha256-waClS2re9NUbXRsryKoof+F9qc1gjjIhc2eT7ZbIv94=";
+    script.crossOrigin = "anonymous";
+    script.onload = () => addCopyButtons(clipboard);
+    document.body.appendChild(script);
+  }
+