feat: use Hugo's code block render hook to implement code copy button

Now it can have i18n support

1 files changed, 28 insertions, 0 deletions

diff --git a/assets/ts/codeblock.ts b/assets/ts/codeblock.ts
new file mode 100644
index 0000000..08c3328
--- /dev/null
+++ b/assets/ts/codeblock.ts
@@ -0,0 +1,28 @@
+/**
+ * Copy button for code blocks
+*/
+export default () => {
+    const copyButtons = document.querySelectorAll('.codeblock-copy');
+    copyButtons.forEach(button => {
+        const codeblockID = button.getAttribute('data-id'),
+            copyText = button.textContent,
+            copiedText = button.getAttribute('data-copied-text');
+        if (!codeblockID) return;
+        button.addEventListener('click', (e) => {
+            e.preventDefault();
+            const codeblock = document.getElementById(codeblockID) as HTMLElement;
+            if (!codeblockID) return;
+            navigator.clipboard.writeText(codeblock.textContent)
+                .then(() => {
+                    button.textContent = copiedText;
+                    setTimeout(() => {
+                        button.textContent = copyText;
+                    }, 1000);
+                })
+                .catch(err => {
+                    alert(err)
+                    console.log('Something went wrong', err);
+                });
+        }, false);
+    });
+}
\ No newline at end of file