Add a copy button to all code blocks in groovydoc

gradle/groovydoc.gradle

@@ -36,6 +36,7 @@ groovydoc {
         }
         copy {
             from 'src/groovydoc/resources/highlightjs' into 'build/docs/groovydoc'
+            from 'src/groovydoc/resources/copycode' into 'build/docs/groovydoc'
         }
     }
 

src/groovydoc/resources/copycode/copybutton.js

@@ -0,0 +1,45 @@
+document.addEventListener("DOMContentLoaded", function(event) {
+  // START of copy button java script
+  // Source: https://remarkablemark.org/blog/2021/06/01/add-copy-code-to-clipboard-button-to-jeyll-site/
+  var codeBlocks = document.querySelectorAll('pre');
+
+  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.trim();
+      if(window.navigator.clipboard && window.isSecureContext) {
+        window.navigator.clipboard.writeText(code);
+      } else {
+        // Source: https://stackoverflow.com/questions/51805395/navigator-clipboard-is-undefined
+        // text area method
+        let textArea = document.createElement("textarea");
+        textArea.value = code;
+        // make the textarea out of viewport
+        textArea.style.position = "fixed";
+        textArea.style.left = "-999999px";
+        textArea.style.top = "-999999px";
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        // here the magic happens
+        document.execCommand('copy')
+        textArea.remove();
+      }
+
+      copyButton.innerText = 'Copied';
+      var fourSeconds = 4000;
+
+      setTimeout(function () {
+        copyButton.innerText = 'Copy';
+      }, fourSeconds);
+    });
+  });
+  // END start of copy button java script
+});

src/groovydoc/resources/org/codehaus/groovy/tools/groovydoc/gstringTemplates/classLevel/classDocName.html

@@ -744,5 +744,77 @@ <h4>${method.typeParameters() ?
     </div>
 </div>
 <!-- ======== END OF BOTTOM NAVBAR ======= -->
+<!-- START of code copy button
+Source: https://remarkablemark.org/blog/2021/06/01/add-copy-code-to-clipboard-button-to-jeyll-site/
+-->
+<script src="${classDoc.relativeRootPath}copybutton.js"></script>
+<style type="text/css">
+
+/*
+pre.highlight .copy {
+}
+.button, button {
+  margin-bottom: 1rem;
+}
+.button, button, input[type="button"], input[type="reset"], input[type="submit"] {
+  display: inline-block;
+  height: 38px;
+  padding: 0 30px;
+  color: #555;
+  text-align: center;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 38px;
+  letter-spacing: .1rem;
+  text-transform: uppercase;
+  text-decoration: none;
+  white-space: nowrap;
+  background-color: transparent;
+  border-radius: 4px;
+  border: 1px solid #bbb;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+*/
+pre {
+  position: relative;
+}
+pre > button {
+  font-family: open sans,HelveticaNeue,helvetica neue,Helvetica,Arial,sans-serif;
+  color: #fff;
+  position: absolute;
+  right: 1em;
+  top: 0.5em;
+  opacity: 0;
+
+  display: inline-block;
+  height: 38px;
+  padding: 0 30px;
+  /*color: #555;*/
+  text-align: center;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 38px;
+  letter-spacing: .1rem;
+  text-transform: uppercase;
+  text-decoration: none;
+  white-space: nowrap;
+  background-color: transparent;
+  border-radius: 4px;
+  border: 1px solid #bbb;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+pre:hover > button {
+  opacity: 1;
+}
+
+pre > button:active,
+pre > button:focus {
+  opacity: 1;
+}
+</style>
+<!-- END of code copy button -->
 </body>
 </html>