From c577522f07afc37661725355c62cd9d2abe2faaa Mon Sep 17 00:00:00 2001
From: Semere Tereffe <se.semere.tereffe@gmail.com>
Date: Sat, 13 Dec 2025 15:10:01 +0300
Subject: [PATCH 1/3] add working copy-as-md button

---
 www/src/components/PageTitle.astro | 48 +++++++++++++++++++++++++++++-
 1 file changed, 47 insertions(+), 1 deletion(-)

diff --git a/www/src/components/PageTitle.astro b/www/src/components/PageTitle.astro
index ba71fa2f5f..564d3d05f1 100644
--- a/www/src/components/PageTitle.astro
+++ b/www/src/components/PageTitle.astro
@@ -13,11 +13,13 @@ const {
 	lastUpdated,
 	entry: {
     data: { title, author },
+    body,
 	},
 } = Astro.locals.starlightRoute;
 const slug = Astro.url.pathname.replace(/^\//, "").replace(/\/$/, "");
 
 const isBlogPost = slug.startsWith('blog/');
+const isDocsPost = slug.startsWith('docs/');
 ---
 
 { isBlogPost
@@ -37,10 +39,33 @@ const isBlogPost = slug.startsWith('blog/');
       </div>
     </Fragment>
   : <Fragment>
-      <h1 id="_top">{title}</h1>
+      <div class="title-container">
+        <h1 id="_top">{title}</h1>
+        {
+        isDocsPost ? <button
+          class="copy-markdown-btn"
+          data-copy-as-markdown-button
+          data-body={body}
+        >
+          Copy as Markdown
+        </button> : <Fragment></Fragment>
+        }
+      </div>
       { description && <p class="page-description">{description}</p> }
     </Fragment>
 }
+<script>
+  const buttons = document.querySelectorAll('[data-copy-as-markdown-button]');
+
+  buttons.forEach((button) => {
+    button.addEventListener('click', () => {
+      const body = (button as any).dataset.body;
+      if (body) navigator.clipboard.writeText(body);
+    });
+  });
+
+</script>
+
 
 <style>
 h1 {
@@ -57,6 +82,27 @@ p.page-description {
   color: var(--color-text-secondary);
 }
 
+.title-container {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.copy-markdown-btn {
+  background: var(--sl-color-bg-accent);
+  color: var(--sl-color-white);
+  border: none;
+  border-radius: 4px;
+  padding: 0.3rem 0.6rem;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.copy-markdown-btn:hover {
+  background: var(--sl-color-bg-accent-hover, #555);
+}
+
 h1.blog {
   margin-top: 0.25rem;
 }

From 55805ffe09173988bd55ec3eb21f81f54dc996b8 Mon Sep 17 00:00:00 2001
From: Semere Tereffe <se.semere.tereffe@gmail.com>
Date: Sat, 13 Dec 2025 15:18:14 +0300
Subject: [PATCH 2/3] Improve copy-markdown button: feedback, styles

---
 www/src/components/PageTitle.astro | 54 +++++++++++++++++++++++++-----
 1 file changed, 45 insertions(+), 9 deletions(-)

diff --git a/www/src/components/PageTitle.astro b/www/src/components/PageTitle.astro
index 564d3d05f1..7175b1a829 100644
--- a/www/src/components/PageTitle.astro
+++ b/www/src/components/PageTitle.astro
@@ -58,12 +58,26 @@ const isDocsPost = slug.startsWith('docs/');
   const buttons = document.querySelectorAll('[data-copy-as-markdown-button]');
 
   buttons.forEach((button) => {
-    button.addEventListener('click', () => {
-      const body = (button as any).dataset.body;
-      if (body) navigator.clipboard.writeText(body);
+    button.addEventListener('click', async () => {
+      const body = button.dataset.body;
+      if (!body || button.disabled) return;
+
+      try {
+        await navigator.clipboard.writeText(body);
+
+        const originalText = button.textContent;
+        button.textContent = 'Copied!';
+        button.disabled = true;
+
+        setTimeout(() => {
+          button.textContent = originalText;
+          button.disabled = false;
+        }, 1000);
+      } catch (err) {
+        console.error('Failed to copy markdown:', err);
+      }
     });
   });
-
 </script>
 
 
@@ -85,22 +99,44 @@ p.page-description {
 .title-container {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 0.75rem;
 }
 
 .copy-markdown-btn {
-  background: var(--sl-color-bg-accent);
-  color: var(--sl-color-white);
-  border: none;
+  background: transparent;
+  color: var(--color-text-secondary);
+  border: 1px solid var(--divider-color);
   border-radius: 4px;
   padding: 0.3rem 0.6rem;
   font-size: 0.875rem;
   cursor: pointer;
-  transition: background 0.2s ease;
+  /* Adding a fixed width to prevent layout shift on press */
+  width: 145px; 
+  transition:
+    color 0.2s ease,
+    border-color 0.2s ease,
+    background-color 0.2s ease,
+    opacity 0.2s ease;
 }
 
 .copy-markdown-btn:hover {
-  background: var(--sl-color-bg-accent-hover, #555);
+  color: var(--color-text);
+  border-color: var(--color-text-dimmed);
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+:root[data-theme='light'] .copy-markdown-btn:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+/* Disabled “copied” state */
+.copy-markdown-btn:disabled {
+  opacity: 0.6;
+  cursor: default;
+  background: transparent;
+  border-color: var(--color-text-dimmed);
+  color: var(--color-text-dimmed);
 }
 
 h1.blog {

From 938188abc2ac0e61567f97081e1c3c1b3f250507 Mon Sep 17 00:00:00 2001
From: Semere Tereffe <se.semere.tereffe@gmail.com>
Date: Sat, 13 Dec 2025 15:35:15 +0300
Subject: [PATCH 3/3] minor: code formatting improvements

---
 www/src/components/PageTitle.astro | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/www/src/components/PageTitle.astro b/www/src/components/PageTitle.astro
index 7175b1a829..ff1f673d0d 100644
--- a/www/src/components/PageTitle.astro
+++ b/www/src/components/PageTitle.astro
@@ -41,17 +41,19 @@ const isDocsPost = slug.startsWith('docs/');
   : <Fragment>
       <div class="title-container">
         <h1 id="_top">{title}</h1>
-        {
-        isDocsPost ? <button
-          class="copy-markdown-btn"
-          data-copy-as-markdown-button
-          data-body={body}
-        >
-          Copy as Markdown
-        </button> : <Fragment></Fragment>
-        }
+        {isDocsPost ? (
+          <button
+            class="copy-markdown-btn"
+            data-copy-as-markdown-button
+            data-body={body}
+          >
+            Copy as Markdown
+          </button>
+        ) : (
+          <Fragment></Fragment>
+        )}
       </div>
-      { description && <p class="page-description">{description}</p> }
+      {description && <p class="page-description">{description}</p>}
     </Fragment>
 }
 <script>