From 3cbc66d258e24ed93c1f3fe9cd99367471557178 Mon Sep 17 00:00:00 2001
From: kapoorkartik <kapoorkartik110@gmail.com>
Date: Sun, 2 Nov 2025 14:49:18 +0530
Subject: [PATCH] feat: add copy button to code blocks on install page

---
 _includes/css/copy-btn.css | 24 ++++++++++++++++++++++++
 combo.css                  |  1 +
 site.js                    | 25 +++++++++++++++++++++++++
 3 files changed, 50 insertions(+)
 create mode 100644 _includes/css/copy-btn.css

diff --git a/_includes/css/copy-btn.css b/_includes/css/copy-btn.css
new file mode 100644
index 0000000..14855c7
--- /dev/null
+++ b/_includes/css/copy-btn.css
@@ -0,0 +1,24 @@
+/* Code block container */
+pre {
+  position: relative;
+  background: #002b36;
+  color: #FFFFFF;
+  padding: 0.75rem 1rem !important;
+  border-radius: 6px;
+  overflow: auto;
+  min-height: 2.5rem; /* <-- ensures one-liners have room */
+}
+
+/* Copy button */
+.copy-button {
+  position: absolute;
+  top: 0.4rem;
+  right: 0.5rem;
+  background: none;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
+  line-height: 1; /* prevent vertical misalignment */
+}
diff --git a/combo.css b/combo.css
index c64e1a6..7ff5083 100644
--- a/combo.css
+++ b/combo.css
@@ -3,3 +3,4 @@
 {% include css/base.css %}
 {% include css/skeleton.css %}
 {% include css/main.css %}
+{% include css/copy-btn.css%}
diff --git a/site.js b/site.js
index 09f5e7d..7d1582c 100644
--- a/site.js
+++ b/site.js
@@ -1 +1,26 @@
 [...document.getElementById("install").getElementsByTagName("code")].forEach(x => x.tabIndex = 0);
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('pre > code').forEach((codeBlock) => {
+        const button = document.createElement('button');
+        button.className = 'copy-button';
+        button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="20" height="20"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4 a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
+        button.addEventListener('click', async () => {
+            try {
+                await navigator.clipboard.writeText(codeBlock.innerText);
+                button.classList.add('copied');
+                // button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="20" height="20"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4 a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
+                button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 24 24" width="14" fill="currentColor"><path d="M9 16.2l-3.5-3.5L4 14.2l5 5 12-12-1.4-1.4z"/></svg>';
+                setTimeout(() => {
+                    button.classList.remove('copied');
+                    button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="20" height="20"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4 a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
+                }, 1500);
+            } catch {
+                button.textContent = 'Error';
+            }
+        });
+
+        const pre = codeBlock.parentNode;
+        pre.style.position = 'relative';
+        pre.appendChild(button);
+    });
+});
\ No newline at end of file