feat: add copy readme to markdown button

Author: IdrisGit

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

@@ -62,9 +62,15 @@ const { data: readmeData } = useLazyFetch<ReadmeResponse>(
     const version = requestedVersion.value
     return version ? `${base}/v/${version}` : base
   },
-  { default: () => ({ html: '', playgroundLinks: [], toc: [] }) },
+  { default: () => ({ html: '', markdown: '', playgroundLinks: [], toc: [] }) },
 )
 
+const readmeMarkdown = computed(() => readmeData.value?.markdown ?? '')
+const { copied: copiedMarkdown, copy: copyMarkdown } = useClipboard({
+  source: readmeMarkdown,
+  copiedDuring: 2000,
+})
+
 // Track active TOC item based on scroll position
 const tocItems = computed(() => readmeData.value?.toc ?? [])
 const { activeId: activeTocId, scrollToHeading } = useActiveTocItem(tocItems)
@@ -1136,12 +1142,33 @@ onKeyStroke(
             </a>
           </h2>
           <ClientOnly>
-            <ReadmeTocDropdown
-              v-if="readmeData?.toc && readmeData.toc.length > 1"
-              :toc="readmeData.toc"
-              :active-id="activeTocId"
-              :scroll-to-heading="scrollToHeading"
-            />
+            <div class="flex items-center gap-2">
+              <button
+                v-if="readmeData?.markdown"
+                type="button"
+                class="flex items-center h-8 gap-1.5 px-2 py-2 font-mono text-xs bg-bg-subtle border border-border-subtle border-solid rounded-md transition-colors duration-150 hover:(text-fg border-border-hover) active:scale-95 focus:border-border-hover focus-visible:outline-accent/70 hover:text-fg"
+                :class="copiedMarkdown ? 'text-fg' : 'text-fg-muted'"
+                :aria-label="
+                  copiedMarkdown ? $t('common.copied') : $t('package.readme.copy_markdown')
+                "
+                @click="copyMarkdown()"
+              >
+                <span
+                  class="w-3.5 h-3.5"
+                  :class="copiedMarkdown ? 'i-carbon:checkmark text-accent' : 'i-carbon:document'"
+                  aria-hidden="true"
+                />
+                <span aria-live="polite">{{
+                  copiedMarkdown ? $t('common.copied') : $t('package.readme.copy_markdown')
+                }}</span>
+              </button>
+              <ReadmeTocDropdown
+                v-if="readmeData?.toc && readmeData.toc.length > 1"
+                :toc="readmeData.toc"
+                :active-id="activeTocId"
+                :scroll-to-heading="scrollToHeading"
+              />
+            </div>
           </ClientOnly>
         </div>
 

i18n/locales/en.json

@@ -215,6 +215,7 @@
       "no_readme": "No README available.",
       "view_on_github": "View on GitHub",
       "toc_title": "Outline",
+      "copy_markdown": "Copy markdown",
       "callout": {
         "note": "Note",
         "tip": "Tip",

lunaria/files/en-GB.json

@@ -215,6 +215,7 @@
       "no_readme": "No README available.",
       "view_on_github": "View on GitHub",
       "toc_title": "Outline",
+      "copy_markdown": "Copy markdown",
       "callout": {
         "note": "Note",
         "tip": "Tip",

lunaria/files/en-US.json

@@ -215,6 +215,7 @@
       "no_readme": "No README available.",
       "view_on_github": "View on GitHub",
       "toc_title": "Outline",
+      "copy_markdown": "Copy markdown",
       "callout": {
         "note": "Note",
         "tip": "Tip",

server/api/registry/readme/[...pkg].get.ts

@@ -107,7 +107,7 @@ export default defineCachedEventHandler(
       }
 
       if (!readmeContent || readmeContent === NPM_MISSING_README_SENTINEL) {
-        return { html: '', playgroundLinks: [], toc: [] }
+        return { html: '', markdown: '', playgroundLinks: [], toc: [] }
       }
 
       // Parse repository info for resolving relative URLs to GitHub

server/utils/readme.ts

@@ -277,7 +277,7 @@ export async function renderReadmeHtml(
   packageName: string,
   repoInfo?: RepositoryInfo,
 ): Promise<ReadmeResponse> {
-  if (!content) return { html: '', playgroundLinks: [], toc: [] }
+  if (!content) return { html: '', markdown: '', playgroundLinks: [], toc: [] }
 
   const shiki = await getShikiHighlighter()
   const renderer = new marked.Renderer()
@@ -455,6 +455,7 @@ ${html}
 
   return {
     html: convertToEmoji(sanitized),
+    markdown: content,
     playgroundLinks: collectedLinks,
     toc,
   }

shared/types/readme.ts

@@ -30,6 +30,8 @@ export interface TocItem {
 export interface ReadmeResponse {
   /** Rendered HTML content */
   html: string
+  /** Raw markdown content */
+  markdown: string
   /** Extracted playground/demo links */
   playgroundLinks: PlaygroundLink[]
   /** Table of contents extracted from headings */