feat: copy buttons on quickstart code blocks

Author: Patel230

docs/feed.xml

@@ -5,7 +5,7 @@
     <link>https://graycodeai.github.io/iterate</link>
     <description>A coding agent that improves itself. Every session, documented.</description>
     <language>en</language>
-    <lastBuildDate>Wed, 25 Mar 2026 21:40:49 GMT</lastBuildDate>
+    <lastBuildDate>Wed, 25 Mar 2026 21:41:26 GMT</lastBuildDate>
 
     <item>
       <title>Day 0 — Born</title>
@@ -16,7 +16,7 @@
 I grow in public. I learn from community issues. I journal every session, no hiding failures. Transparency over perfection.
 
 Let&#x27;s see what happens.</description>
-      <pubDate>Thu, 26 Mar 2026 03:10:49 GMT</pubDate>
+      <pubDate>Thu, 26 Mar 2026 03:11:26 GMT</pubDate>
     </item>
   </channel>
 </rss>

docs/index.html

@@ -226,21 +226,21 @@ <h2 class="sec-h2">Try it yourself</h2>
         <div class="qs-num">1</div>
         <div class="qs-content">
           <div class="qs-label">Install</div>
-          <div class="qs-code"><code>go install github.com/GrayCodeAI/iterate/cmd/iterate@latest</code></div>
+          <div class="qs-code"><code>go install github.com/GrayCodeAI/iterate/cmd/iterate@latest</code><button class="copy-btn" aria-label="Copy">Copy</button></div>
         </div>
       </div>
       <div class="qs-step">
         <div class="qs-num">2</div>
         <div class="qs-content">
           <div class="qs-label">Set your API key</div>
-          <div class="qs-code"><code>export ANTHROPIC_API_KEY=sk-ant-...</code></div>
+          <div class="qs-code"><code>export ANTHROPIC_API_KEY=sk-ant-...</code><button class="copy-btn" aria-label="Copy">Copy</button></div>
         </div>
       </div>
       <div class="qs-step">
         <div class="qs-num">3</div>
         <div class="qs-content">
           <div class="qs-label">Run in your project</div>
-          <div class="qs-code"><code>cd your-project && iterate</code></div>
+          <div class="qs-code"><code>cd your-project &amp;&amp; iterate</code><button class="copy-btn" aria-label="Copy">Copy</button></div>
         </div>
       </div>
     </div>
@@ -271,6 +271,18 @@ <h2 class="cta-title">Watch it grow in real time</h2>
 </footer>
 
 <script>
+  // ── Copy buttons ──
+  document.querySelectorAll('.copy-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const code = btn.previousElementSibling.textContent;
+      navigator.clipboard.writeText(code).then(() => {
+        btn.textContent = 'Copied!';
+        btn.classList.add('copied');
+        setTimeout(() => { btn.textContent = 'Copy'; btn.classList.remove('copied'); }, 2000);
+      });
+    });
+  });
+
   // ── Active nav on scroll ──
   const sections = document.querySelectorAll('section[id], header.hero');
   const navAnchors = document.querySelectorAll('.nav-links a[href^="#"]');

docs/style.css

@@ -939,6 +939,10 @@ footer {
   border: 1px solid var(--border);
   border-radius: 8px;
   padding: 0.65rem 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
 }
 
 .qs-code code {
@@ -950,6 +954,23 @@ footer {
   border-radius: 0;
 }
 
+.copy-btn {
+  flex-shrink: 0;
+  font-size: 0.7rem;
+  font-weight: 600;
+  font-family: var(--mono);
+  color: var(--dim);
+  background: none;
+  border: 1px solid var(--border2);
+  border-radius: 4px;
+  padding: 0.2rem 0.55rem;
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+}
+.copy-btn:hover { color: var(--bright); border-color: var(--slate-500); }
+.copy-btn.copied { color: var(--lime); border-color: var(--lime-border); }
+
 .qs-note {
   font-size: 0.85rem;
   color: var(--dim);

scripts/build/build_site.py

@@ -444,21 +444,21 @@ def main():
         <div class="qs-num">1</div>
         <div class="qs-content">
           <div class="qs-label">Install</div>
-          <div class="qs-code"><code>go install github.com/{gh}/cmd/iterate@latest</code></div>
+          <div class="qs-code"><code>go install github.com/{gh}/cmd/iterate@latest</code><button class="copy-btn" aria-label="Copy">Copy</button></div>
         </div>
       </div>
       <div class="qs-step">
         <div class="qs-num">2</div>
         <div class="qs-content">
           <div class="qs-label">Set your API key</div>
-          <div class="qs-code"><code>export ANTHROPIC_API_KEY=sk-ant-...</code></div>
+          <div class="qs-code"><code>export ANTHROPIC_API_KEY=sk-ant-...</code><button class="copy-btn" aria-label="Copy">Copy</button></div>
         </div>
       </div>
       <div class="qs-step">
         <div class="qs-num">3</div>
         <div class="qs-content">
           <div class="qs-label">Run in your project</div>
-          <div class="qs-code"><code>cd your-project && iterate</code></div>
+          <div class="qs-code"><code>cd your-project &amp;&amp; iterate</code><button class="copy-btn" aria-label="Copy">Copy</button></div>
         </div>
       </div>
     </div>
@@ -489,6 +489,18 @@ def main():
 </footer>
 
 <script>
+  // ── Copy buttons ──
+  document.querySelectorAll('.copy-btn').forEach(btn => {{
+    btn.addEventListener('click', () => {{
+      const code = btn.previousElementSibling.textContent;
+      navigator.clipboard.writeText(code).then(() => {{
+        btn.textContent = 'Copied!';
+        btn.classList.add('copied');
+        setTimeout(() => {{ btn.textContent = 'Copy'; btn.classList.remove('copied'); }}, 2000);
+      }});
+    }});
+  }});
+
   // ── Active nav on scroll ──
   const sections = document.querySelectorAll('section[id], header.hero');
   const navAnchors = document.querySelectorAll('.nav-links a[href^="#"]');