feat: copy button in code block (#39)

* style: copy button style

* feat: script to render copy button

* docs: add copy right

* feat: adjust copy button position

3 files changed, 63 insertions, 1 deletions

diff --git a/assets/sass/components/_post.scss b/assets/sass/components/_post.scss
index 2d3db1c..2e4f65a 100644
--- a/assets/sass/components/_post.scss
+++ b/assets/sass/components/_post.scss
@@ -126,6 +126,31 @@ header {
             }
         }
     }
+
+    .highlight {
+        position: relative;
+        &:hover {
+            .copyCodeButton {
+                opacity: 1;
+            }
+        }
+    }
+
+    .copyCodeButton {
+        position: absolute;
+        top: 35px;
+        right: 5px;
+        background: #424242;
+        border: none;
+        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.04),0px 2px 6px rgba(0, 0, 0, 0.04),0px 0px 1px rgba(0, 0, 0, 0.04);;
+        border-radius: 4px;
+        padding: 8px 16px;
+        color: rgba(255, 255, 255, 0.9);
+        cursor: pointer;
+        font-size: 14px;
+        opacity: 0;
+        transition: opacity .3s ease;
+    }
 }
 
 @media screen and (min-width: 800px) {
diff --git a/assets/ts/copyButton.ts b/assets/ts/copyButton.ts
new file mode 100644
index 0000000..03cd6e6
--- /dev/null
+++ b/assets/ts/copyButton.ts
@@ -0,0 +1,35 @@
+// This file is copy from https://github.com/CaiJimmy/hugo-theme-stack/blob/24915a912f23e8c0a21aa156714ea7f071469fdb/assets/ts/main.ts#L61-L87
+// All right reserved by Jimmy Cai
+
+const codeBlocks = document.querySelectorAll('.article-post .highlight');
+const copyText = `Copy`,
+    copiedText = `Copied!`;
+
+export let renderCopyButton = function() {
+    codeBlocks.forEach(codeBlock => {
+        const copyButton = document.createElement('button')
+        copyButton.innerHTML = copyText
+        copyButton.classList.add('copyCodeButton');
+        codeBlock.appendChild(copyButton);
+
+        const pre = codeBlock.getElementsByTagName('pre');
+        // This theme's code block has line number, so the second is where the
+        // real code locate
+        const code = pre[1].textContent;
+
+        copyButton.addEventListener('click', () => {
+            navigator.clipboard.writeText(code)
+                .then(() => {
+                    copyButton.textContent = copiedText;
+
+                    setTimeout(() => {
+                        copyButton.textContent = copyText;
+                    }, 1000);
+                })
+                .catch(err => {
+                    alert(err)
+                    console.log('Something went wrong', err);
+                });
+        });
+    });
+}
diff --git a/assets/ts/features.ts b/assets/ts/features.ts
index cfe676d..ad27b9a 100644
--- a/assets/ts/features.ts
+++ b/assets/ts/features.ts
@@ -1,4 +1,5 @@
-import ThemeColorScheme from "ts/colorScheme";
+import ThemeColorScheme from "ts/colorScheme"
+import { renderCopyButton } from "ts/copyButton"
 import { renderFootnotes } from "ts/footnotes"
 
 let enableFootnotes = false
@@ -11,6 +12,7 @@ const init = () => {
     if (enableFootnotes) {
         renderFootnotes()
     }
+    renderCopyButton()
 }
 
 window.addEventListener('load', () => {