feat: add copy button functionality to code blocks in README

Author: imrofayel

app/components/Readme.vue

@@ -1,6 +1,40 @@
-<!-- simple component only taking slot -->
+<script setup lang="ts">
+const { copy } = useClipboard()
+
+const handleCopy = async (e: MouseEvent) => {
+  const target = (e.target as HTMLElement).closest('[data-copy]')
+  if (!target) return
+
+  // Find the code block sibling
+  const wrapper = target.closest('.readme-code-block')
+  if (!wrapper) return
+
+  const pre = wrapper.querySelector('pre')
+  if (!pre?.textContent) return
+
+  await copy(pre.textContent)
+
+  // Visual feedback
+  const icon = target.querySelector('span')
+  if (icon) {
+    const originalIcon = 'i-carbon:copy'
+    const successIcon = 'i-carbon:checkmark'
+
+    icon.classList.remove(originalIcon)
+    icon.classList.add(successIcon)
+
+    setTimeout(() => {
+      icon.classList.remove(successIcon)
+      icon.classList.add(originalIcon)
+    }, 2000)
+  }
+}
+</script>
+
 <template>
-  <article class="readme prose prose-invert max-w-[70ch]">
+  <article class="readme prose prose-invert max-w-[70ch]" @click="handleCopy">
+    <!-- Hidden element to safelist icons for dynamic usage -->
+    <div class="hidden i-carbon:copy i-carbon:checkmark"></div>
     <slot />
   </article>
 </template>
@@ -96,6 +130,48 @@
   box-sizing: border-box;
 }
 
+.readme :deep(.readme-code-block) {
+  display: block;
+  width: 100%;
+  position: relative;
+}
+
+.readme :deep(.readme-copy-button) {
+  position: absolute;
+  top: 0.4rem;
+  right: 0.4rem;
+  left: auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--bg-subtle) 80%, transparent);
+  border: 1px solid var(--border);
+  color: var(--fg-subtle);
+  opacity: 0;
+  transition:
+    opacity 0.2s ease,
+    color 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.readme :deep(.readme-code-block:hover .readme-copy-button) {
+  opacity: 1;
+}
+
+.readme :deep(.readme-copy-button:hover) {
+  color: var(--fg);
+  border-color: var(--border-hover);
+}
+
+.readme :deep(.readme-copy-button > span) {
+  width: 1.05rem;
+  height: 1.05rem;
+  display: inline-block;
+  pointer-events: none;
+}
+
 .readme :deep(pre code),
 .readme :deep(.shiki code) {
   background: transparent !important;

server/utils/readme.ts

@@ -135,12 +135,14 @@ const ALLOWED_TAGS = [
   'sub',
   'kbd',
   'mark',
+  'button',
 ]
 
 const ALLOWED_ATTR: Record<string, string[]> = {
   a: ['href', 'title', 'target', 'rel'],
   img: ['src', 'alt', 'title', 'width', 'height'],
   source: ['src', 'srcset', 'type', 'media'],
+  button: ['class', 'title', 'type', 'aria-label', 'data-copy'],
   th: ['colspan', 'rowspan', 'align'],
   td: ['colspan', 'rowspan', 'align'],
   h3: ['id', 'data-level'],
@@ -305,7 +307,14 @@ export async function renderReadmeHtml(
 
   // Syntax highlighting for code blocks (uses shared highlighter)
   renderer.code = ({ text, lang }: Tokens.Code) => {
-    return highlightCodeSync(shiki, text, lang || 'text')
+    const html = highlightCodeSync(shiki, text, lang || 'text')
+    // Add copy button
+    return `<div class="readme-code-block" dir="ltr">
+<button type="button" class="readme-copy-button" title="Copy code" check-icon="i-carbon:checkmark" copy-icon="i-carbon:copy" data-copy>
+<span class="i-carbon:copy" aria-hidden="true"></span>
+</button>
+${html}
+</div>`
   }
 
   // Resolve image URLs (with GitHub blob → raw conversion)