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

Now it can have i18n support

3 files changed, 50 insertions, 33 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
diff --git a/assets/ts/main.ts b/assets/ts/main.ts
index e3f5b6a..5370b2c 100644
--- a/assets/ts/main.ts
+++ b/assets/ts/main.ts
@@ -6,7 +6,7 @@
 *   @link: https://github.com/CaiJimmy/hugo-theme-stack
 */
 import StackGallery from "ts/gallery";
-import { getColor } from 'ts/color';
+import StackCodeBlock from "ts/codeblock";
 import menu from 'ts/menu';
 import createElement from 'ts/createElement';
 import StackColorScheme from 'ts/colorScheme';
@@ -27,39 +27,8 @@ let Stack = {
             setupScrollspy();
         }
 
-        /**
-         * Add copy button to code block
-        */
-        const highlights = document.querySelectorAll('.article-content div.highlight');
-        const copyText = `Copy`,
-            copiedText = `Copied!`;
-
-        highlights.forEach(highlight => {
-            const copyButton = document.createElement('button');
-            copyButton.innerHTML = copyText;
-            copyButton.classList.add('copyCodeButton');
-            highlight.appendChild(copyButton);
-
-            const codeBlock = highlight.querySelector('code[data-lang]');
-            if (!codeBlock) return;
-
-            copyButton.addEventListener('click', () => {
-                navigator.clipboard.writeText(codeBlock.textContent)
-                    .then(() => {
-                        copyButton.textContent = copiedText;
-
-                        setTimeout(() => {
-                            copyButton.textContent = copyText;
-                        }, 1000);
-                    })
-                    .catch(err => {
-                        alert(err)
-                        console.log('Something went wrong', err);
-                    });
-            });
-        });
-
         new StackColorScheme(document.getElementById('dark-mode-toggle'));
+        StackCodeBlock();
     }
 }
 
diff --git a/layouts/_default/_markup/render-codeblock.html b/layouts/_default/_markup/render-codeblock.html
new file mode 100644
index 0000000..052efe3
--- /dev/null
+++ b/layouts/_default/_markup/render-codeblock.html
@@ -0,0 +1,20 @@
+{{- $class := .Attributes.class | default ""    -}}
+{{- $lang  := .Attributes.lang  | default .Type -}}
+<div class="codeblock">
+    <header>
+        <span class="codeblock-lang">{{ $lang }}</span>
+        <button 
+            class="codeblock-copy"
+            data-id="codeblock-id-{{ .Ordinal }}"
+            data-copied-text="Copied!"
+        >
+            Copy
+        </button>
+    </header>
+    <code id="codeblock-id-{{ .Ordinal }}" style="display:none;">{{- .Inner -}}</code>
+    {{- if transform.CanHighlight $lang -}}
+    <div class="{{ $class }}">{{- highlight .Inner $lang -}}</div>
+    {{- else -}}
+    <pre><code class="{{ $class }}">{{- .Inner -}}</code></pre>
+    {{- end -}}
+</div>