Add copy button to codeblocks on install pages

install/arch/index.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Install - Arch
+js: ["copy-button.js"]
 ---
 
 # Installing Ronin on Arch

install/fedora/index.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Install - Fedora
+js: ["copy-button.js"]
 ---
 
 # Installing Ronin on Fedora

install/freebsd/index.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Install - FreeBSD
+js: ["copy-button.js"]
 ---
 
 # Installing Ronin on FreeBSD

install/index.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Install
+js: ["copy-button.js"]
 ---
 
 # Install

install/macos/index.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Install - macOS
+js: ["copy-button.js"]
 ---
 
 # Installing Ronin on macOS

install/nix/index.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Install - Nix
+js: ["copy-button.js"]
 ---
 
 # Installing Ronin on Nix

install/opensuse/index.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Install - OpenSUSE
+js: ["copy-button.js"]
 ---
 
 # Installing Ronin on OpenSUSE

install/termux/index.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Install - Termux
+js: ["copy-button.js"]
 ---
 
 # Installing Ronin on Termux

install/ubuntu/index.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Install - Ubuntu
+js: ["copy-button.js"]
 ---
 
 # Installing Ronin on Ubuntu

javascript/copy-button.js

@@ -0,0 +1,53 @@
+"use strict";
+
+function initCopyButtons() {
+  // Make sure browser supports clipboard functionality
+  if (!window.navigator?.clipboard) {
+    return;
+  }
+
+  const codeBlocks = document.querySelectorAll(".highlighter-rouge > .highlight");
+
+  codeBlocks.forEach((elem) => {
+    const code = elem.querySelector(".highlight > code");
+    if (!code) {
+      return;
+    }
+
+    let timeout;
+    const button = document.createElement("button");
+    button.type = "button";
+    button.textContent = "Copy to clipboard";
+    button.className = "copy-button";
+    button.addEventListener("click", async () => {
+      try {
+        await window.navigator.clipboard.writeText(code.textContent.trim());
+        button.classList.add("copied");
+
+        if (timeout) {
+          clearTimeout(timeout);
+        }
+        timeout = setTimeout(() => {
+          button.classList.remove("copied");
+        }, 1500);
+      } catch (error) {
+        console.error("Failed to copy to clipboard:", error);
+      }
+    });
+
+    elem.insertBefore(button, elem.querySelector(":scope > .highlight"));
+  });
+}
+
+(() => {
+  function ready(callback) {
+    if (document.readyState != "loading") {
+      callback();
+    } else {
+      document.addEventListener("DOMContentLoaded", callback);
+    }
+  }
+
+  ready(initCopyButtons);
+})();
+

stylesheets/default.css

@@ -271,6 +271,41 @@ button#dark-mode-toggle svg#dark-mode-moon {
 	background-color: #ffa8a8;
 }
 
+.content .highlighter-rouge > .highlight {
+  position: relative;
+}
+
+.content .copy-button + pre.highlight {
+  padding-right: 40px;
+}
+
+.content .copy-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  border: none;
+  width: 36px;
+  height: 36px;
+  background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23808080" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>');
+  background-color: #000;
+  background-repeat: no-repeat;
+  background-position: center;
+  text-indent: 100%;
+  white-space: nowrap;
+  color: transparent;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.content .copy-button:hover {
+  filter: brightness(2);
+}
+
+.content .copy-button.copied {
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"></path></svg>');
+}
+
 /*
  * Blog posts
  */