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 stateconstcopiedForAI=ref(false)// Computed property that generates AI-optimized markdownconstaiContextText=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 feedbackasyncfunctioncopyForAI(){awaitnavigator.clipboard.writeText(aiContextText.value)copiedForAI.value=truesetTimeout(()=>(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){consttempDiv=document.createElement('div')tempDiv.innerHTML=readmeData.value.htmlconsttextContent=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

[serhalp]

hey @NormVg this gotten quite stale and main has changed drastically in the last 10 weeks so I'm going to close this, but feel free to open a new PR if you'd like! Thank you!