feat: add copy readme as markdown button on package page (#1058)

carwack · ghostdevv · web-flow · commit c6e579832c13 · 2026-02-06T21:30:46.000Z
Co-authored-by: Willow (GHOST) &lt;git@willow.sh&gt;
diff --git a/app/pages/package/[[org]]/[name].vue b/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: '', md: '', playgroundLinks: [], toc: [] }) },
 )
 
+//copy README file as Markdown
+const { copied: copiedReadme, copy: copyReadme } = useClipboard({
+  source: () => readmeData.value?.md ?? '',
+  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,39 @@ 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">
+              <!-- Copy readme as Markdown button -->
+              <TooltipApp
+                v-if="readmeData?.md"
+                :text="$t('package.readme.copy_as_markdown')"
+                position="bottom"
+              >
+                <button
+                  type="button"
+                  @click="copyReadme()"
+                  class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 inline-flex items-center gap-1.5"
+                  :class="
+                    copiedReadme ? 'text-accent bg-accent/10' : 'text-fg-subtle bg-bg hover:text-fg'
+                  "
+                  :aria-label="
+                    copiedReadme ? $t('common.copied') : $t('package.readme.copy_as_markdown')
+                  "
+                >
+                  <span
+                    :class="copiedReadme ? 'i-carbon:checkmark' : 'i-simple-icons:markdown'"
+                    class="size-3"
+                    aria-hidden="true"
+                  />
+                  {{ copiedReadme ? $t('common.copied') : $t('common.copy') }}
+                </button>
+              </TooltipApp>
+              <ReadmeTocDropdown
+                v-if="readmeData?.toc && readmeData.toc.length > 1"
+                :toc="readmeData.toc"
+                :active-id="activeTocId"
+                :scroll-to-heading="scrollToHeading"
+              />
+            </div>
           </ClientOnly>
         </div>
 
diff --git a/i18n/locales/de-DE.json b/i18n/locales/de-DE.json
@@ -221,7 +221,8 @@
         "important": "Wichtig",
         "warning": "Warnung",
         "caution": "Vorsicht"
-      }
+      },
+      "copy_as_markdown": "README als Markdown kopieren"
     },
     "provenance_section": {
       "title": "Herkunft",
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
@@ -221,7 +221,8 @@
         "important": "Important",
         "warning": "Warning",
         "caution": "Caution"
-      }
+      },
+      "copy_as_markdown": "Copy README as Markdown"
     },
     "provenance_section": {
       "title": "Provenance",
diff --git a/i18n/locales/es.json b/i18n/locales/es.json
@@ -208,7 +208,8 @@
       "title": "Léeme",
       "no_readme": "No hay README disponible.",
       "view_on_github": "Ver en GitHub",
-      "toc_title": "Índice"
+      "toc_title": "Índice",
+      "copy_as_markdown": "Copiar README como Markdown"
     },
     "keywords_title": "Palabras clave",
     "compatibility": "Compatibilidad",
diff --git a/i18n/locales/fr-FR.json b/i18n/locales/fr-FR.json
@@ -206,7 +206,8 @@
       "title": "Readme",
       "no_readme": "Aucun README disponible.",
       "view_on_github": "Voir sur GitHub",
-      "toc_title": "Sommaire"
+      "toc_title": "Sommaire",
+      "copy_as_markdown": "Copier le README en markdown"
     },
     "keywords_title": "Mots-clés",
     "compatibility": "Compatibilité",
diff --git a/i18n/locales/it-IT.json b/i18n/locales/it-IT.json
@@ -221,7 +221,8 @@
         "important": "Importante",
         "warning": "Avvertenza",
         "caution": "Cautela"
-      }
+      },
+      "copy_as_markdown": "Copia README come Markdown"
     },
     "provenance_section": {
       "title": "Provenienza",
diff --git a/lunaria/files/de-DE.json b/lunaria/files/de-DE.json
@@ -221,7 +221,8 @@
         "important": "Wichtig",
         "warning": "Warnung",
         "caution": "Vorsicht"
-      }
+      },
+      "copy_as_markdown": "README als Markdown kopieren"
     },
     "provenance_section": {
       "title": "Herkunft",
diff --git a/lunaria/files/en-GB.json b/lunaria/files/en-GB.json
@@ -221,7 +221,8 @@
         "important": "Important",
         "warning": "Warning",
         "caution": "Caution"
-      }
+      },
+      "copy_as_markdown": "Copy README as Markdown"
     },
     "provenance_section": {
       "title": "Provenance",
diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
@@ -221,7 +221,8 @@
         "important": "Important",
         "warning": "Warning",
         "caution": "Caution"
-      }
+      },
+      "copy_as_markdown": "Copy README as Markdown"
     },
     "provenance_section": {
       "title": "Provenance",
diff --git a/lunaria/files/es-419.json b/lunaria/files/es-419.json
@@ -208,7 +208,8 @@
       "title": "Léame",
       "no_readme": "No hay README disponible.",
       "view_on_github": "Ver en GitHub",
-      "toc_title": "Índice"
+      "toc_title": "Índice",
+      "copy_as_markdown": "Copiar README como Markdown"
     },
     "keywords_title": "Palabras clave",
     "compatibility": "Compatibilidad",
diff --git a/lunaria/files/es-ES.json b/lunaria/files/es-ES.json
@@ -208,7 +208,8 @@
       "title": "Léeme",
       "no_readme": "No hay README disponible.",
       "view_on_github": "Ver en GitHub",
-      "toc_title": "Índice"
+      "toc_title": "Índice",
+      "copy_as_markdown": "Copiar README como Markdown"
     },
     "keywords_title": "Palabras clave",
     "compatibility": "Compatibilidad",
diff --git a/lunaria/files/fr-FR.json b/lunaria/files/fr-FR.json
@@ -206,7 +206,8 @@
       "title": "Readme",
       "no_readme": "Aucun README disponible.",
       "view_on_github": "Voir sur GitHub",
-      "toc_title": "Sommaire"
+      "toc_title": "Sommaire",
+      "copy_as_markdown": "Copier le README en markdown"
     },
     "keywords_title": "Mots-clés",
     "compatibility": "Compatibilité",
diff --git a/lunaria/files/it-IT.json b/lunaria/files/it-IT.json
@@ -221,7 +221,8 @@
         "important": "Importante",
         "warning": "Avvertenza",
         "caution": "Cautela"
-      }
+      },
+      "copy_as_markdown": "Copia README come Markdown"
     },
     "provenance_section": {
       "title": "Provenienza",
diff --git a/server/utils/readme.ts b/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: '', md: '', playgroundLinks: [], toc: [] }
 
   const shiki = await getShikiHighlighter()
   const renderer = new marked.Renderer()
@@ -455,6 +455,7 @@ ${html}
 
   return {
     html: convertToEmoji(sanitized),
+    md: content,
     playgroundLinks: collectedLinks,
     toc,
   }
diff --git a/shared/types/readme.ts b/shared/types/readme.ts
@@ -30,6 +30,8 @@ export interface TocItem {
 export interface ReadmeResponse {
   /** Rendered HTML content */
   html: string
+  /** Original markdown content */
+  md: string
   /** Extracted playground/demo links */
   playgroundLinks: PlaygroundLink[]
   /** Table of contents extracted from headings */
diff --git a/test/unit/server/utils/readme.spec.ts b/test/unit/server/utils/readme.spec.ts
@@ -307,3 +307,24 @@ describe('Markdown File URL Resolution', () => {
     })
   })
 })
+
+describe('Markdown Content Extraction', () => {
+  describe('Markdown', () => {
+    it('returns original markdown content unchanged', async () => {
+      const markdown = `# Title\n\nSome **bold** text and a [link](https://example.com).`
+      const result = await renderReadmeHtml(markdown, 'test-pkg')
+
+      expect(result.md).toBe(markdown)
+    })
+  })
+  describe('HTML', () => {
+    it('returns sanitized html', async () => {
+      const markdown = `# Title\n\nSome **bold** text and a [link](https://example.com).`
+      const result = await renderReadmeHtml(markdown, 'test-pkg')
+
+      expect(result.html).toBe(`<h3 id="user-content-title" data-level="1">Title</h3>
+<p>Some <strong>bold</strong> text and a <a href="https://example.com" rel="nofollow noreferrer noopener" target="_blank">link</a>.</p>
+`)
+    })
+  })
+})
