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,29 @@
+document.querySelectorAll("pre").forEach(ele => {
+    var codeElement = ele.querySelector("code")
+
+    if (codeElement != null) {
+        with (document) {
+            var copyButtonContainer = createElement('div')
+            copyButtonContainer.classList.add("copy-button-container")
+            var copyButton = createElement('button');
+            copyButtonContainer.append(copyButton)
+        }
+
+        with (copyButton) {
+            className = "copy-button"
+            innerText = 'copy';
+
+            addEventListener('click', () => {                
+                navigator.clipboard.writeText(codeElement.innerText).then(e => {
+                    innerText = "copied"
+                }).catch(e => {
+                    innerText = "error"
+                })
+                setTimeout(() => innerText = "copy", 900)
+            });
+        }
+
+        ele.parentElement.insertBefore(copyButtonContainer, ele)
+    }
+})
+