From 82b9b83ca45b12469814dcbacd574181231d3734 Mon Sep 17 00:00:00 2001
From: Shrikant Giri <shrikantgiri144@gmail.com>
Date: Fri, 21 Nov 2025 15:14:21 +0530
Subject: [PATCH 1/2] Add copy button to code blocks for improved documentation
 usability

---
 docs_theme/css/copy-button.css | 21 +++++++++++++++++++++
 docs_theme/js/copy-button.js   | 19 +++++++++++++++++++
 docs_theme/main.html           |  3 +++
 mkdocs.yml                     |  6 ++++++
 4 files changed, 49 insertions(+)
 create mode 100644 docs_theme/css/copy-button.css
 create mode 100644 docs_theme/js/copy-button.js

diff --git a/docs_theme/css/copy-button.css b/docs_theme/css/copy-button.css
new file mode 100644
index 0000000000..f263da552f
--- /dev/null
+++ b/docs_theme/css/copy-button.css
@@ -0,0 +1,21 @@
+.copy-block-button {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  font-size: 12px;
+  padding: 2px 6px;
+  cursor: pointer;
+
+  background: #f7f7f9;        /* code block bg */
+  border: 1px solid #e1e1e8;  /* code block border */
+  border-radius: 3px;
+
+  color: #dc322f !important;  /* fallback if no span */
+
+  box-shadow: 0 1px 1px rgba(0,0,0,0.04);
+}
+
+/* Separate rule for the span inside the button */
+.copy-block-button span {
+  color: #dc322f !important;
+}
diff --git a/docs_theme/js/copy-button.js b/docs_theme/js/copy-button.js
new file mode 100644
index 0000000000..15fc118b2d
--- /dev/null
+++ b/docs_theme/js/copy-button.js
@@ -0,0 +1,19 @@
+document.addEventListener("DOMContentLoaded", function () {
+  document.querySelectorAll("pre > code").forEach(function (codeBlock) {
+    const button = document.createElement("button");
+    button.className = "copy-block-button";
+    button.type = "button";
+    button.textContent = "Copy";
+
+    button.addEventListener("click", function () {
+      navigator.clipboard.writeText(codeBlock.textContent).then(function () {
+        button.textContent = "Copied!";
+        setTimeout(() => button.textContent = "Copy", 1200);
+      });
+    });
+
+    const pre = codeBlock.parentNode;
+    pre.style.position = "relative";
+    pre.appendChild(button);
+  });
+});
diff --git a/docs_theme/main.html b/docs_theme/main.html
index e373095955..a584f95393 100644
--- a/docs_theme/main.html
+++ b/docs_theme/main.html
@@ -16,6 +16,9 @@
   <link href="{{ 'css/bootstrap.css'|url }}" rel="stylesheet">
   <link href="{{ 'css/bootstrap-responsive.css'|url }}" rel="stylesheet">
   <link href="{{ 'css/default.css'|url }}" rel="stylesheet">
+  {% for path in config.extra_css %}
+    <link href="{{ path|url }}" rel="stylesheet">
+  {% endfor %}
 
 
   <script type="text/javascript">
diff --git a/mkdocs.yml b/mkdocs.yml
index 010aaefe23..c980e5e208 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -87,3 +87,9 @@ nav:
      - 'Mozilla Grant': 'community/mozilla-grant.md'
      - 'Funding': 'community/funding.md'
      - 'Jobs': 'community/jobs.md'
+
+extra_css:
+  - css/copy-button.css
+
+extra_javascript:
+  - js/copy-button.js

From d690b86f9a5195b136486071c08425b982416703 Mon Sep 17 00:00:00 2001
From: Shrikant Giri <shrikantgiri144@gmail.com>
Date: Fri, 21 Nov 2025 15:19:06 +0530
Subject: [PATCH 2/2] Add copy button to code blocks for improved documentation
 usability

---
 docs_theme/css/copy-button.css | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/docs_theme/css/copy-button.css b/docs_theme/css/copy-button.css
index f263da552f..cbd38bc3f9 100644
--- a/docs_theme/css/copy-button.css
+++ b/docs_theme/css/copy-button.css
@@ -6,16 +6,15 @@
   padding: 2px 6px;
   cursor: pointer;
 
-  background: #f7f7f9;        /* code block bg */
-  border: 1px solid #e1e1e8;  /* code block border */
+  background: #f7f7f9;
+  border: 1px solid #e1e1e8;
   border-radius: 3px;
 
-  color: #dc322f !important;  /* fallback if no span */
+  color: #dc322f !important;
 
   box-shadow: 0 1px 1px rgba(0,0,0,0.04);
 }
 
-/* Separate rule for the span inside the button */
 .copy-block-button span {
   color: #dc322f !important;
 }