From f0b302eaa7775810375063fec99cdb5c2e6dfade Mon Sep 17 00:00:00 2001
From: Yatharth Yadav <yatharthcoding@gmail.com>
Date: Sun, 1 Feb 2026 18:12:48 +0530
Subject: [PATCH] added copy button

---
 config.toml                   |  11 +++---
 static/css/copy-button-v2.css |  61 ++++++++++++++++++++++++++++++++++
 static/images/check-icon.png  | Bin 0 -> 372 bytes
 static/images/copy-icon.png   | Bin 0 -> 610 bytes
 static/js/copy-button.js      |  47 ++++++++++++++++++++++++++
 5 files changed, 115 insertions(+), 4 deletions(-)
 create mode 100644 static/css/copy-button-v2.css
 create mode 100644 static/images/check-icon.png
 create mode 100644 static/images/copy-icon.png
 create mode 100644 static/js/copy-button.js

diff --git a/config.toml b/config.toml
index d1a20b3f..2b15fed5 100755
--- a/config.toml
+++ b/config.toml
@@ -3,7 +3,7 @@ RelativeURLs=true
 CanonifyURLs=true
 title = "Collabora Online - Community Page"
 copyright = "Unless a license is otherwise specified, content is under CC-BY-SA 3.0 <br> <br> Beaver illustrations are under <a href='https://github.com/CollaboraOnline/CollaboraOnline.github.io/blob/master/content/images/beaver/LICENSE'>Copyright © 2025 Collabora Ltd. All rights reserved.</a>"
-paginate = 2
+
 languageCode = "en"
 DefaultContentLanguage = "en"
 enableInlineShortcodes = true
@@ -53,8 +53,8 @@ type = "type"
   showLanguageSwitcher = false
 
   # Custom CSS and JS. Relative to /static/css and /static/js respectively.
-  customCSS = ["buttons.css", "anim.css", "header.css", "dropdown.css", "sidebar.css", "post-content.css"]
-  customJS = []
+  customCSS = ["buttons.css", "anim.css", "header.css", "dropdown.css", "sidebar.css", "post-content.css", "copy-button-v2.css"]
+  customJS = ["copy-button.js"]
 
   [params.social]
     rss = true
@@ -91,5 +91,8 @@ type = "type"
   [services.instagram]
     disableInlineCSS = true
 
-  [services.twitter]
+  [services.x]
     disableInlineCSS = true
+
+[pagination]
+  pagerSize = 2
diff --git a/static/css/copy-button-v2.css b/static/css/copy-button-v2.css
new file mode 100644
index 00000000..c2bcf6d8
--- /dev/null
+++ b/static/css/copy-button-v2.css
@@ -0,0 +1,61 @@
+/* Fix positioning context */
+.highlight,
+pre {
+    position: relative !important;
+}
+
+.copy-button {
+    position: absolute !important;
+    top: 6px !important;
+    right: 6px !important;
+
+    background: transparent !important;
+    background-color: transparent !important;
+    border: none !important;
+    border-radius: 4px !important;
+
+    cursor: pointer !important;
+    padding: 4px !important;
+    z-index: 100 !important;
+
+    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+
+    backdrop-filter: blur(2px);
+    appearance: none !important;
+    -webkit-appearance: none !important;
+    box-shadow: none !important;
+}
+
+.copy-button:focus {
+    outline: none !important;
+    box-shadow: none !important;
+}
+
+.copy-button:hover {
+    transform: scale(1.1) !important;
+    background: transparent !important;
+    background-color: transparent !important;
+}
+
+.copy-button svg {
+    width: 16px;
+    height: 16px;
+    fill: none;
+    color: #333333 !important;
+    stroke: currentColor;
+    stroke-width: 2;
+}
+
+/* Success state */
+.copy-button.copied {
+    background: transparent !important;
+    background-color: transparent !important;
+    border: none !important;
+}
+
+.copy-button.copied svg {
+    color: #333333 !important;
+}
\ No newline at end of file
diff --git a/static/images/check-icon.png b/static/images/check-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..59161334c1a4368ac14b3f95a2feec581667b87c
GIT binary patch
literal 372
zcmeAS@N?(olHy`uVBq!ia0vp^u0X8M!3HF^K4KRIQjEnx?oJHr&dIz4vh_S&978gk
z-`=q2W-OFB{&BtggY!utn<A%tGRP6@KC80&Y{KSKDW7%ncC-dc@|bBZK04ps!QLvi
zBmY(Tck8`tgPxb>&zBE+S@ToL=E<ITdy$|8cXS;pKc8e^6}g)b#I-b_%da7*#4iUY
z>p{F%rrE1UKZ`A8{O$LD^w;;fv#jKnuBIrrkwl+^VYwNDr2n!_H{Y!ZnY6-w-D0Lf
zuBG>1pGw*(bbkI`5dqbXV2w1J?5n4ERe6L>ft+Va^AaC16!NL^B=_BpF;m{={`GE@
zb)^dX(IbqHQZx_FHJ*CoSJAh(I^~<D<csJ2t_=A1bUXjj8)6GY<{Hd)(wwqL7|0UF
e!V0bkUU#mXOW@CI#Yw<mWbkzLb6Mw<&;$Tnu$D*w

literal 0
HcmV?d00001

diff --git a/static/images/copy-icon.png b/static/images/copy-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..114babf55363a39ac45a2a7465ef9aaa3da45502
GIT binary patch
literal 610
zcmeAS@N?(olHy`uVBq!ia0vp^o<Quz!3HE7RCjU$DaPU;cPEB*=VV?oFfhq@x;TbZ
z#J#<>(VHnyhW*3*`o@=+B08d-8y`e;HwQ<1dq)R5CkHnN=L-7f>gwkD^6IW_3drsV
z5pX;b=_RX``X^4Ks`C536mk7Ob_Jih@6`VIcW*DV@X41u*A+-M_J8l&5+}d(tv!FI
zO2?PIif_&R|2%X4&#lzzb5TKLqS7|0{e}5%{T_lIyWCCZuj@>yPRpEqL!~=t`BjBU
zYdx)sawhqD?sC~A)hW>F(ZMj`;XD@=2ZoLfo-Rx*4IHyc<NO!ZoI7h$O`hGSPkVoL
zPtl%!K(|l6aFb`X_3cMj+y5(z><MiRS@L-D<&UB|`ya>z*=<)?t$lja&d{zsUy>3%
z|E=;pr}*;h>lIVWzVim<f4Q_WMI&lwk?Pf3xjDT>a-Qz~;WvJ0E?T$wGxz7tWXs-`
zzIlD=X2!Sk@8>%MdG~C(eg@kpF&4Qf2`MnR%*hVQueY?YF>+^2ah|us)>HoF(L;+Y
zHD2B9@R+uWoqt;5$Ik3a3NB{G%F?g1pUJL`+AW>ABschs#r?-~ZclC!;##1*JYn&)
zc}MogdFLfnn-<D(R{S_3rzqs$qoTyf<j~>^w&w=foF~FJtoXf((*Df^CK?7$S3j3^
HP6<r_E%)!3

literal 0
HcmV?d00001

diff --git a/static/js/copy-button.js b/static/js/copy-button.js
new file mode 100644
index 00000000..44bb8ec0
--- /dev/null
+++ b/static/js/copy-button.js
@@ -0,0 +1,47 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const codeBlocks = document.querySelectorAll('pre');
+
+    // Icon SVGs
+    const copyIconSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
+    const checkIconSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>';
+
+    codeBlocks.forEach(function (preBlock) {
+        let container = preBlock;
+
+        // Handle highlighting wrappers
+        if (preBlock.parentNode.classList.contains('highlight')) {
+            container = preBlock.parentNode;
+        } else if (preBlock.parentNode.tagName === 'DIV' && preBlock.parentNode.style.position === 'relative') {
+            container = preBlock.parentNode;
+        }
+
+        container.style.position = 'relative';
+
+        if (container.querySelector('.copy-button')) return;
+
+        const button = document.createElement('button');
+        button.className = 'copy-button';
+        button.title = 'Copy to clipboard';
+        button.innerHTML = copyIconSvg;
+
+        container.appendChild(button);
+
+        button.addEventListener('click', function () {
+            button.blur(); // Remove focus
+
+            let codeText = preBlock.textContent;
+
+            navigator.clipboard.writeText(codeText).then(function () {
+                button.innerHTML = checkIconSvg;
+                button.classList.add('copied');
+
+                setTimeout(function () {
+                    button.innerHTML = copyIconSvg;
+                    button.classList.remove('copied');
+                }, 1000);
+            }, function (err) {
+                console.error('Copy failed: ', err);
+            });
+        });
+    });
+});