feat: copy compare table as markdown

app/components/CopyToClipboardButton.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<{
+  copied: boolean
+  copyText?: string
+  copiedText?: string
+  ariaLabelCopy?: string
+  ariaLabelCopied?: string
+}>()
+
+const buttonCopyText = computed(() => props.copyText || $t('common.copy'))
+const buttonCopiedText = computed(() => props.copiedText || $t('common.copied'))
+const buttonAriaLabelCopy = computed(() => props.ariaLabelCopy || $t('common.copy'))
+const buttonAriaLabelCopied = computed(() => props.ariaLabelCopied || $t('common.copied'))
+
+const emit = defineEmits<{
+  click: []
+}>()
+
+function handleClick() {
+  emit('click')
+}
+</script>
+
+<template>
+  <div class="group relative" v-bind="$attrs">
+    <slot />
+    <button
+      type="button"
+      @click="handleClick"
+      class="absolute z-20 inset-is-0 top-full inline-flex items-center gap-1 px-2 py-1 rounded border text-xs font-mono whitespace-nowrap transition-all duration-150 opacity-0 -translate-y-1 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto focus-visible:opacity-100 focus-visible:translate-y-0 focus-visible:pointer-events-auto"
+      :class="[
+        $style.copyButton,
+        copied ? 'text-accent bg-accent/10' : 'text-fg-muted bg-bg border-border',
+      ]"
+      :aria-label="copied ? buttonAriaLabelCopied : buttonAriaLabelCopy"
+    >
+      <span
+        :class="copied ? 'i-lucide:check' : 'i-lucide:copy'"
+        class="w-3.5 h-3.5"
+        aria-hidden="true"
+      />
+      {{ copied ? buttonCopiedText : buttonCopyText }}
+    </button>
+  </div>
+</template>
+
+<style module>
+.copyButton {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  width: 1px;
+  transition:
+    opacity 0.25s 0.1s,
+    translate 0.15s 0.1s,
+    clip 0.01s 0.34s allow-discrete,
+    clip-path 0.01s 0.34s allow-discrete,
+    height 0.01s 0.34s allow-discrete,
+    width 0.01s 0.34s allow-discrete;
+}
+
+:global(.group):hover .copyButton,
+.copyButton:focus-visible {
+  clip: auto;
+  clip-path: none;
+  height: auto;
+  overflow: visible;
+  width: auto;
+  transition:
+    opacity 0.15s,
+    translate 0.15s;
+}
+
+@media (hover: none) {
+  .copyButton {
+    display: none;
+  }
+}
+</style>

app/pages/compare.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
 import { NO_DEPENDENCY_ID } from '~/composables/usePackageComparison'
 import { useRouteQuery } from '@vueuse/router'
+import { escapeHtml } from '#shared/utils/html'
+import { NPMX_SITE } from '#shared/utils/constants'
 
 definePageMeta({
   name: 'compare',
 })
 
 const router = useRouter()
 const canGoBack = useCanGoBack()
+const { copied, copy } = useClipboard({ copiedDuring: 2000 })
+const gridRef = useTemplateRef<HTMLDivElement>('gridRef')
 
 // Sync packages with URL query param (stable ref - doesn't change on other query changes)
 const packagesParam = useRouteQuery<string>('packages', '', { mode: 'replace' })
@@ -79,6 +83,57 @@ const gridHeaders = computed(() =>
   gridColumns.value.map(col => (col.version ? `${col.name}@${col.version}` : col.name)),
 )
 
+function copyComparisonGridAsMd() {
+  const grid = gridRef.value?.querySelector('.comparison-grid')
+  if (!grid) return
+  const md = gridToMarkdown(grid as HTMLElement)
+  copy(md)
+}
+
+/*
+ * Convert the comparison grid DOM to a Markdown table.
+ * We build a proper HTML <table> from the grid structure and delegate to `htmlToMarkdown` for the actual conversion.
+ */
+function gridToMarkdown(gridEl: HTMLElement): string {
+  const children = Array.from(gridEl.children)
+  const headerRow = children[0]
+  const dataRows = children.slice(1)
+
+  if (!headerRow || dataRows.length === 0) return ''
+
+  const headerCells = Array.from(headerRow.children).slice(1)
+  if (headerCells.length === 0) return ''
+
+  const ths = headerCells.map(cell => {
+    const link = cell.querySelector('a')
+    if (link) {
+      const href = link.getAttribute('href') || ''
+      const absoluteHref = /^https?:\/\/|^\/\//.test(href) ? href : `${NPMX_SITE}${href}`
+      return `<th><a href="${escapeHtml(absoluteHref)}">${escapeHtml(link.textContent?.trim() || '')}</a></th>`
+    }
+    return `<th>${escapeHtml(cell.textContent?.trim() || '')}</th>`
+  })
+
+  const trs = dataRows.map(row => {
+    const rowChildren = Array.from(row.children)
+    const label = rowChildren[0]?.textContent?.trim() || ''
+    const valueCells = rowChildren.slice(1)
+    const tds = [label, ...valueCells.map(cell => cell.textContent?.trim() || '-')]
+      .map(v => `<td>${escapeHtml(v)}</td>`)
+      .join('')
+    return `<tr>${tds}</tr>`
+  })
+
+  const tableHtml = [
+    '<table>',
+    `<thead><tr><th>Metric</th>${ths.join('')}</tr></thead>`,
+    `<tbody>${trs.join('')}</tbody>`,
+    '</table>',
+  ].join('')
+
+  return htmlToMarkdown(tableHtml, { tablePipeAlign: false })
+}
+
 useSeoMeta({
   title: () =>
     packages.value.length > 0
@@ -193,7 +248,23 @@ useSeoMeta({
 
       <!-- Comparison grid -->
       <section v-if="canCompare" class="mt-10" aria-labelledby="comparison-heading">
-        <h2 id="comparison-heading" class="text-xs text-fg-subtle uppercase tracking-wider mb-4">
+        <CopyToClipboardButton
+          v-if="packagesData && packagesData.some(p => p !== null)"
+          :copied="copied"
+          :copy-text="$t('compare.packages.copy_as_markdown')"
+          class="mb-4 inline-block hidden md:inline-flex"
+          @click="copyComparisonGridAsMd"
+        >
+          <h2 id="comparison-heading" class="text-xs text-fg-subtle uppercase tracking-wider">
+            {{ $t('compare.packages.section_comparison') }}
+          </h2>
+        </CopyToClipboardButton>
+
+        <h2
+          v-else
+          id="comparison-heading"
+          class="text-xs text-fg-subtle uppercase tracking-wider mb-4"
+        >
           {{ $t('compare.packages.section_comparison') }}
         </h2>
 
@@ -209,7 +280,7 @@ useSeoMeta({
 
         <div v-else-if="packagesData && packagesData.some(p => p !== null)">
           <!-- Desktop: Grid layout -->
-          <div class="hidden md:block overflow-x-auto">
+          <div ref="gridRef" class="hidden md:block overflow-x-auto">
             <CompareComparisonGrid :columns="gridColumns" :show-no-dependency="showNoDependency">
               <CompareFacetRow
                 v-for="facet in selectedFacets"
@@ -241,7 +312,7 @@ useSeoMeta({
           </div>
 
           <h2
-            id="comparison-heading"
+            id="trends-comparison-heading"
             class="text-xs text-fg-subtle uppercase tracking-wider mb-4 mt-10"
           >
             {{ $t('compare.facets.trends.title') }}

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

@@ -669,7 +669,12 @@ const showSkeleton = shallowRef(false)
       >
         <!-- Package name and version -->
         <div class="flex items-baseline gap-x-2 gap-y-1 sm:gap-x-3 flex-wrap min-w-0">
-          <div class="group relative flex flex-col items-start min-w-0">
+          <CopyToClipboardButton
+            :copied="copiedPkgName"
+            :copy-text="$t('package.copy_name')"
+            class="flex flex-col items-start min-w-0"
+            @click="copyPkgName()"
+          >
             <h1
               class="font-mono text-2xl sm:text-3xl font-medium min-w-0 break-words"
               :title="pkg.name"
@@ -683,30 +688,14 @@ const showSkeleton = shallowRef(false)
                 {{ orgName ? pkg.name.replace(`@${orgName}/`, '') : pkg.name }}
               </span>
             </h1>
+          </CopyToClipboardButton>
 
-            <!-- Floating copy name button -->
-            <button
-              type="button"
-              @click="copyPkgName()"
-              class="absolute z-20 inset-is-0 top-full inline-flex items-center gap-1 px-2 py-1 rounded border text-xs font-mono whitespace-nowrap transition-all duration-150 opacity-0 -translate-y-1 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto focus-visible:opacity-100 focus-visible:translate-y-0 focus-visible:pointer-events-auto"
-              :class="[
-                $style.copyButton,
-                copiedPkgName ? 'text-accent bg-accent/10' : 'text-fg-muted bg-bg border-border',
-              ]"
-              :aria-label="copiedPkgName ? $t('common.copied') : $t('package.copy_name')"
-            >
-              <span
-                :class="copiedPkgName ? 'i-lucide:check' : 'i-lucide:copy'"
-                class="w-3.5 h-3.5"
-                aria-hidden="true"
-              />
-              {{ copiedPkgName ? $t('common.copied') : $t('package.copy_name') }}
-            </button>
-          </div>
-
-          <span
+          <CopyToClipboardButton
             v-if="resolvedVersion"
-            class="inline-flex items-baseline gap-1.5 font-mono text-base sm:text-lg text-fg-muted shrink-0 relative group"
+            :copied="copiedVersion"
+            :copy-text="$t('package.copy_version')"
+            class="inline-flex items-baseline gap-1.5 font-mono text-base sm:text-lg text-fg-muted shrink-0"
+            @click="copyVersion()"
           >
             <!-- Version resolution indicator (e.g., "latest → 4.2.0") -->
             <template v-if="requestedVersion && resolvedVersion !== requestedVersion">
@@ -749,26 +738,7 @@ const showSkeleton = shallowRef(false)
               class="text-fg-subtle text-sm shrink-0"
               >{{ $t('package.not_latest') }}</span
             >
-
-            <!-- Floating copy version button -->
-            <button
-              type="button"
-              @click="copyVersion()"
-              class="absolute z-20 inset-is-0 top-full inline-flex items-center gap-1 px-2 py-1 rounded border text-xs font-mono whitespace-nowrap transition-all duration-150 opacity-0 -translate-y-1 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto focus-visible:opacity-100 focus-visible:translate-y-0 focus-visible:pointer-events-auto"
-              :class="[
-                $style.copyButton,
-                copiedVersion ? 'text-accent bg-accent/10' : 'text-fg-muted bg-bg border-border',
-              ]"
-              :aria-label="copiedVersion ? $t('common.copied') : $t('package.copy_version')"
-            >
-              <span
-                :class="copiedVersion ? 'i-lucide:check' : 'i-lucide:copy'"
-                class="w-3.5 h-3.5"
-                aria-hidden="true"
-              />
-              {{ copiedVersion ? $t('common.copied') : $t('package.copy_version') }}
-            </button>
-          </span>
+          </CopyToClipboardButton>
 
           <!-- Docs + Code + Compare — inline on desktop, floating bottom bar on mobile -->
           <ButtonGroup
@@ -1541,39 +1511,6 @@ const showSkeleton = shallowRef(false)
   grid-area: sidebar;
 }
 
-.copyButton {
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  width: 1px;
-  transition:
-    opacity 0.25s 0.1s,
-    translate 0.15s 0.1s,
-    clip 0.01s 0.34s allow-discrete,
-    clip-path 0.01s 0.34s allow-discrete,
-    height 0.01s 0.34s allow-discrete,
-    width 0.01s 0.34s allow-discrete;
-}
-
-:global(.group):hover .copyButton,
-.copyButton:focus-visible {
-  clip: auto;
-  clip-path: none;
-  height: auto;
-  overflow: visible;
-  width: auto;
-  transition:
-    opacity 0.15s,
-    translate 0.15s;
-}
-
-@media (hover: none) {
-  .copyButton {
-    display: none;
-  }
-}
-
 /* Mobile floating nav: safe-area positioning + kbd hiding */
 @media (max-width: 639.9px) {
   .packageNav {

app/utils/html-to-markdown.ts

@@ -0,0 +1,21 @@
+import { parseFragment } from 'parse5'
+import { fromParse5 } from 'hast-util-from-parse5'
+import { toMdast } from 'hast-util-to-mdast'
+import { toMarkdown as mdastToMarkdown } from 'mdast-util-to-markdown'
+import { gfmTableToMarkdown } from 'mdast-util-gfm-table'
+
+export interface HtmlToMarkdownOptions {
+  /** Whether to pad table columns to equal width (default: `true`). */
+  tablePipeAlign?: boolean
+}
+
+/**
+ * Convert an HTML string to Markdown
+ */
+export function htmlToMarkdown(html: string, options: HtmlToMarkdownOptions = {}): string {
+  const { tablePipeAlign = true } = options
+  const dom = parseFragment(html)
+  const hast = fromParse5(dom)
+  const mdast = toMdast(hast)
+  return mdastToMarkdown(mdast, { extensions: [gfmTableToMarkdown({ tablePipeAlign })] })
+}

i18n/locales/en.json

@@ -910,6 +910,7 @@
       "section_packages": "Packages",
       "section_facets": "Facets",
       "section_comparison": "Comparison",
+      "copy_as_markdown": "Copy table",
       "loading": "Loading package data...",
       "error": "Failed to load package data. Please try again.",
       "empty_title": "Select packages to compare",

i18n/locales/pl-PL.json

@@ -910,6 +910,7 @@
       "section_packages": "Pakiety",
       "section_facets": "Aspekty",
       "section_comparison": "Porównanie",
+      "copy_as_markdown": "Kopiuj tabelę",
       "loading": "Ładowanie danych pakietów...",
       "error": "Nie udało się wczytać danych pakietów. Spróbuj ponownie.",
       "empty_title": "Wybierz pakiety do porównania",

i18n/schema.json

@@ -2734,6 +2734,9 @@
             "section_comparison": {
               "type": "string"
             },
+            "copy_as_markdown": {
+              "type": "string"
+            },
             "loading": {
               "type": "string"
             },

lunaria/files/en-GB.json

@@ -909,6 +909,7 @@
       "section_packages": "Packages",
       "section_facets": "Facets",
       "section_comparison": "Comparison",
+      "copy_as_markdown": "Copy table",
       "loading": "Loading package data...",
       "error": "Failed to load package data. Please try again.",
       "empty_title": "Select packages to compare",

lunaria/files/en-US.json

@@ -909,6 +909,7 @@
       "section_packages": "Packages",
       "section_facets": "Facets",
       "section_comparison": "Comparison",
+      "copy_as_markdown": "Copy table",
       "loading": "Loading package data...",
       "error": "Failed to load package data. Please try again.",
       "empty_title": "Select packages to compare",

lunaria/files/pl-PL.json

@@ -909,6 +909,7 @@
       "section_packages": "Pakiety",
       "section_facets": "Aspekty",
       "section_comparison": "Porównanie",
+      "copy_as_markdown": "Kopiuj tabelę",
       "loading": "Ładowanie danych pakietów...",
       "error": "Nie udało się wczytać danych pakietów. Spróbuj ponownie.",
       "empty_title": "Wybierz pakiety do porównania",