Add copy to clipboard to code blocks

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;

assets/js/back-to-top.js

@@ -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";
-    }
-}

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);
+        }
+    });
+}

i18n/en.yaml

@@ -14,6 +14,9 @@ latest_posts:
 see_also:
   other: "SEE ALSO:"
 
+copy_to_clipboard:
+  other: "Copy"
+
 
 # Meta items
 long_date:

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:

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>

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" }}