From 47d6d0218656714fb91cf67e8e8a1335880dcde5 Mon Sep 17 00:00:00 2001
From: BBaoVanC <bbaovanc@bbaovanc.com>
Date: Fri, 20 Jan 2023 17:14:18 -0600
Subject: [PATCH] Add copy to clipboard to code blocks

---
 assets/css/bobastyle.css                      | 13 +++++++-
 assets/js/back-to-top.js                      |  8 -----
 assets/js/bobatheme.js                        | 30 +++++++++++++++++++
 i18n/en.yaml                                  |  3 ++
 i18n/es.yaml                                  |  3 ++
 .../_default/_markup/render-codeblock.html    | 10 ++++++-
 layouts/partials/head.html                    |  2 +-
 7 files changed, 58 insertions(+), 11 deletions(-)
 delete mode 100644 assets/js/back-to-top.js
 create mode 100644 assets/js/bobatheme.js

diff --git a/assets/css/bobastyle.css b/assets/css/bobastyle.css
index 327b8ee..1415fdc 100644
--- a/assets/css/bobastyle.css
+++ b/assets/css/bobastyle.css
@@ -689,12 +689,23 @@ table.markdown {
   background-color: var(--background-1);
   border-radius: 8px;
 }
-.code-block > .code-type {
+.code-block > .code-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
   background-color: var(--background-2);
   padding: 4px 8px;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
+}
+.code-block > .code-header > .code-type {
+  border-top-left-radius: 8px;
   font-family: monospace;
+  margin: auto 0;
+}
+/* TODO: make the code copy button prettier */
+.code-block > .code-header > .code-copy-button:hover {
+  cursor: pointer;
 }
 .code-block > .highlight {
   margin: 8px 4px;
diff --git a/assets/js/back-to-top.js b/assets/js/back-to-top.js
deleted file mode 100644
index 13a65a1..0000000
--- a/assets/js/back-to-top.js
+++ /dev/null
@@ -1,8 +0,0 @@
-const backToTop = document.getElementById("back-to-top");
-window.onscroll = function() {
-    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
-        backToTop.style.display = "block";
-    } else {
-        backToTop.style.display = "none";
-    }
-}
diff --git a/assets/js/bobatheme.js b/assets/js/bobatheme.js
new file mode 100644
index 0000000..af463bd
--- /dev/null
+++ b/assets/js/bobatheme.js
@@ -0,0 +1,30 @@
+// back to top
+const backToTop = document.getElementById("back-to-top");
+window.onscroll = function() {
+    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
+        backToTop.style.display = "block";
+    } else {
+        backToTop.style.display = "none";
+    }
+}
+
+// code block copy to clipboard
+window.onload = () => {
+    document.querySelectorAll(".code-block").forEach(codeBlock => {
+        const button = codeBlock.querySelector(".code-header > .code-copy-button");
+        // TODO: maybe get this from HTMLElement.innerText on the actual code block content element
+        // but it's hard to select it; `data-lang` attribute might not always be there (if lang is unset)
+        const rawCode = codeBlock.querySelector("pre.code-raw").innerText;
+
+        const originalCopyText = button.innerHTML;
+        button.onclick = event => {
+            navigator.clipboard.writeText(rawCode);
+            console.log(rawCode);
+            // TODO: maybe we could add a fancier indicator, like a flash or something
+            event.target.innerHTML = "Copied!";
+            setTimeout(() => {
+                event.target.innerHTML = originalCopyText;
+            }, 3000);
+        }
+    });
+}
diff --git a/i18n/en.yaml b/i18n/en.yaml
index d537b1b..ceac1e1 100644
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -14,6 +14,9 @@ latest_posts:
 see_also:
   other: "SEE ALSO:"
 
+copy_to_clipboard:
+  other: "Copy"
+
 
 # Meta items
 long_date:
diff --git a/i18n/es.yaml b/i18n/es.yaml
index c43d681..68e3ded 100644
--- a/i18n/es.yaml
+++ b/i18n/es.yaml
@@ -14,6 +14,9 @@ latest_posts:
 see_also:
   other: "Véase también:"
 
+copy_to_clipboard:
+  other: "Copiar"
+
 
 # Meta items
 long_date:
diff --git a/layouts/_default/_markup/render-codeblock.html b/layouts/_default/_markup/render-codeblock.html
index 51ae5fd..ea3a58d 100644
--- a/layouts/_default/_markup/render-codeblock.html
+++ b/layouts/_default/_markup/render-codeblock.html
@@ -1,5 +1,13 @@
 <div class="code-block">
-    <div class="code-type">{{ .Type }}</div>
+    <div class="code-header">
+        <span class="code-type">{{ .Type }}</span>
+        <a class="code-copy-button">
+            {{ i18n "copy_to_clipboard" }}
+        </a>
+    </div>
     {{/* a div.highlight is already created by highlight function */}}
     {{ highlight .Inner .Type }}
+
+    {{/* for copy to clipboard */}}
+    <pre class="code-raw" style="display: none;">{{ .Inner }}</pre>
 </div>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 9bbd66b..031a99c 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -13,7 +13,7 @@
         <link rel="stylesheet" type="text/css" href="{{ .Permalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
     {{ end }}
 
-    {{ with resources.Get "js/back-to-top.js" | fingerprint "sha512" }}
+    {{ with resources.Get "js/bobatheme.js" | fingerprint "sha512" }}
         <script defer src="{{ .Permalink }}" type="text/javascript" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
     {{ end }}
     {{ with resources.Get "js/share-event.js" | fingerprint "sha512" }}