From 62f9b68a16dc0f7fc27217bb67c3926cdb32408e Mon Sep 17 00:00:00 2001
From: BernatBC <bernat.borrasc@gmail.com>
Date: Sat, 31 Aug 2024 11:28:52 +0200
Subject: [PATCH] Add copy code button

---
 assets/scripts/features/copyCode/copyCode.js | 34 ++++++++++++++++++++
 assets/scripts/features/copyCode/index.js    |  1 +
 assets/scripts/features/index.js             |  4 +++
 assets/styles/components/misc.scss           | 12 +++++++
 exampleSite/hugo.yaml                        |  4 +++
 5 files changed, 55 insertions(+)
 create mode 100644 assets/scripts/features/copyCode/copyCode.js
 create mode 100644 assets/scripts/features/copyCode/index.js

diff --git a/assets/scripts/features/copyCode/copyCode.js b/assets/scripts/features/copyCode/copyCode.js
new file mode 100644
index 0000000..e1eb104
--- /dev/null
+++ b/assets/scripts/features/copyCode/copyCode.js
@@ -0,0 +1,34 @@
+if (navigator && navigator.clipboard) {
+  addCopyButtons(navigator.clipboard)
+} else {
+  const script = document.createElement('script')
+  script.src =
+    'https://cdnjs.cloudflare.com/ajax/libs/clipboard-polyfill/2.7.0/clipboard-polyfill.promise.js'
+  script.integrity = 'sha256-waClS2re9NUbXRsryKoof+F9qc1gjjIhc2eT7ZbIv94='
+  script.crossOrigin = 'anonymous'
+  script.onload = function () {
+    addCopyButtons(clipboard)
+  }
+
+  document.body.appendChild(script)
+}
+
+function addCopyButtons(clipboard) {
+  document.querySelectorAll('pre > code').forEach(function (codeBlock) {
+    const button = document.createElement('a')
+    button.className = 'copy-code-button'
+    button.innerHTML = "<i class='fa-regular fa-copy'></i>"
+
+    button.addEventListener('click', function () {
+      clipboard.writeText(codeBlock.innerText)
+    })
+
+    const pre = codeBlock.parentNode
+    if (pre.parentNode.classList.contains('highlight')) {
+      const highlight = pre.parentNode
+      highlight.parentNode.insertBefore(button, highlight)
+    } else {
+      pre.parentNode.insertBefore(button, pre)
+    }
+  })
+}
diff --git a/assets/scripts/features/copyCode/index.js b/assets/scripts/features/copyCode/index.js
new file mode 100644
index 0000000..b1eb504
--- /dev/null
+++ b/assets/scripts/features/copyCode/index.js
@@ -0,0 +1 @@
+import './copyCode'
diff --git a/assets/scripts/features/index.js b/assets/scripts/features/index.js
index 9682acf..a8f2fc7 100644
--- a/assets/scripts/features/index.js
+++ b/assets/scripts/features/index.js
@@ -25,3 +25,7 @@ if (process.env.FEATURE_MATH === '1') {
 if (process.env.FEATURE_EMBEDPDF === '1') {
   import('./embedpdf')
 }
+
+if (process.env.FEATURE_COPYCODEBUTTON === '1') {
+  import('./copyCode')
+}
diff --git a/assets/styles/components/misc.scss b/assets/styles/components/misc.scss
index 4276c78..7dda9c5 100644
--- a/assets/styles/components/misc.scss
+++ b/assets/styles/components/misc.scss
@@ -50,6 +50,18 @@ pre {
   }
 }
 
+.copy-code-button {
+  display: flex;
+  justify-content: right;
+  margin-right: 0.2em;
+  margin-bottom: -1.2em;
+  font-size: 20pt;
+}
+
+.highlight pre { 
+  margin: 0;
+}
+
 html[data-theme='dark'] {
   .paginator {
     .page-item {
diff --git a/exampleSite/hugo.yaml b/exampleSite/hugo.yaml
index 88b75b8..61ef497 100644
--- a/exampleSite/hugo.yaml
+++ b/exampleSite/hugo.yaml
@@ -91,6 +91,10 @@ params:
   # Configure various features of this theme
   features:
 
+    # Enables copy code button
+    copyCodeButton:
+      enable: true
+
     # Enable dark theme
     darkMode:
       enable: true