feat: Add "Copy for AI" button to package page

[NormVg]

feat: Add "Copy for AI" button to package page

Summary

Adds a "Copy for AI" button that copies package information formatted as markdown, optimized for pasting into AI assistants (Claude, ChatGPT, etc.).

---

Files Changed

app/pages/[...package].vue

Single file modification with ~117 insertions, ~28 deletions.

---

Implementation Details

1. State Management (Script Section)

// New refs for copy state
const copiedForAI = ref(false)

// Computed property that generates AI-optimized markdown
const aiContextText = computed(() => {
  // Package header: # package-name@version
  // Description as blockquote
  // Package info (install command, license, repo, homepage)
  // README content extracted from HTML
})

// Copy function with 2-second feedback
async function copyForAI() {
  await navigator.clipboard.writeText(aiContextText.value)
  copiedForAI.value = true
  setTimeout(() => (copiedForAI.value = false), 2000)
}

2. README Text Extraction

Since SlimPackument doesn't include raw README markdown (fetched separately as HTML), the implementation extracts text content client-side:

if (import.meta.client) {
  const tempDiv = document.createElement('div')
  tempDiv.innerHTML = readmeData.value.html
  const textContent = tempDiv.innerText || tempDiv.textContent || ''
  parts.push(textContent.trim())
}

3. Primary Button (Desktop Only)

Located right of the package description:

<button
  type="button"
  class="btn shrink-0 gap-2 min-w-32 hidden sm:inline-flex"
  @click="copyForAI"
>
  <span class="i-carbon-machine-learning w-4 h-4" />
  <span>{{ copiedForAI ? 'copied!' : 'copy for ai' }}</span>
</button>

• Uses btn shortcut from design system
• hidden sm:inline-flex - hidden on mobile, visible on ≥640px
• min-w-32 - fixed width prevents size change on text toggle

4. Secondary Button (README Section)

Located next to "Readme" heading:

<button
  type="button"
  class="btn-ghost gap-1.5 text-xs"
  @click="copyForAI"
>
  <span class="i-carbon-machine-learning w-3.5 h-3.5" />
  <span>{{ copiedForAI ? 'copied!' : 'copy for ai' }}</span>
</button>

• Uses btn-ghost shortcut (more subtle)
• Always visible, serves as mobile access point

5. Responsive Layout

Description container updated for responsive behavior:

<div class="flex flex-col sm:flex-row sm:items-start gap-4 sm:gap-6">
  <!-- Description -->
  <!-- Button (hidden on mobile) -->
</div>

• flex-col on mobile (stacked)
• sm:flex-row on desktop (side-by-side)

---

What Gets Copied

# nuxt@4.3.0

> Nuxt is a free and open-source framework with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with Vue.js.

## Package Info
- **Install:** `npm install nuxt`
- **License:** MIT
- **Repository:** https://github.com/nuxt/nuxt
- **Homepage:** https://nuxt.com

## README
[Full README content as plain text...]

---

No New Routes/APIs

This feature is entirely client-side. No new API endpoints or routes were created. Uses existing:

• usePackage() composable for package data
• readmeData from existing README fetch
• Native navigator.clipboard.writeText() API

---

Checklist

• Follows existing code patterns
• Uses design system shortcuts (btn, btn-ghost)
• Responsive design (mobile-friendly)
• Accessible (aria-live for feedback, proper button semantics)
• Wrapped in <ClientOnly> to prevent SSR issues
• No breaking changes
• No new dependencies

[vercel]

@NormVg is attempting to deploy a commit to the danielroe Team on Vercel.

A member of the Team first needs to authorize it.

[danielroe]

this is related to #151 - we should probably have a shared util that we can use both for rendering a package to markdown from the server, and also for copying.

[NormVg]

this is related to #151 - we should probably have a shared util that we can use both for rendering a package to markdown from the server, and also for copying.

so should i make one shared util and add features from the #151 in my codebase ?

[danielroe]

hm. why don't I merge that one first and then you can refactor to share code as needed?

I haven't checked - you might also have some improvements on the markdown rendering

[NormVg]

hm. why don't I merge that one first and then you can refactor to share code as needed?

I haven't checked - you might also have some improvements on the markdown rendering

sure lets me know to improve and update , would love to