docs(code): Introduce copy code feature

docs/themes/porter/assets/sass/docs-content.scss

@@ -164,7 +164,7 @@
     color: black;
     border: none;
     padding: 0.75em 1em;
-    margin: 0.25em 0 2.5em;
+    margin: 0 0 2.5em;
     font-size: 1rem;
 
     code {
@@ -280,3 +280,12 @@
     min-height: 320px;
   }
 }
+
+.copy-button-container {
+  display: flex;
+  justify-content: flex-end;
+  .copy-button {
+      margin-bottom: 0;
+      padding: 4px;
+  }
+}

docs/themes/porter/layouts/partials/js.html

@@ -5,3 +5,4 @@
   <script src="/js/main.min.js"></script>
   <script src="/js/custom/app_init.js"></script>
   <script src="/js/custom/prism.js"></script>
+  <script src="/js/custom/copy_code.js"></script>

docs/themes/porter/static/js/custom/copy_code.js

@@ -0,0 +1,30 @@
+document.querySelectorAll("pre").forEach(preElement => {
+    var codeElement = preElement.querySelector("code")
+
+    /* There should be code element inside pre element and
+       code element should not have language-console class */
+    if (codeElement != null && !codeElement.classList.contains("language-console")) {
+        var copyButtonContainer = document.createElement('div')
+        copyButtonContainer.classList.add("copy-button-container")
+        var copyButton = document.createElement('button');
+        copyButtonContainer.append(copyButton)
+
+        copyButton.className = "copy-button"
+        copyButton.innerText = 'copy';
+
+        copyButton.addEventListener('click', () => {
+            navigator.clipboard.writeText(codeElement.innerText).then(e => {
+                copyButton.innerText = "copied"
+            }).catch(e => {
+                copyButton.innerText = "error"
+            })
+
+            // Restore original "copy" text on button after 900 milliseconds
+            setTimeout(() => innerText = "copy", 900)
+        });
+
+        // Insert before pre element so that it can appear in top of code block
+        preElement.parentElement.insertBefore(copyButtonContainer, preElement)
+    }
+})
+