feat: allow copying comparison grid as markdown, translations

Author: mikouaji

app/pages/compare.vue

@@ -8,6 +8,8 @@ definePageMeta({
 
 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 +81,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,9 +246,30 @@ 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">
-          {{ $t('compare.packages.section_comparison') }}
-        </h2>
+        <div class="relative group mb-4 inline-block">
+          <h2 id="comparison-heading" class="text-xs text-fg-subtle uppercase tracking-wider">
+            {{ $t('compare.packages.section_comparison') }}
+          </h2>
+
+          <button
+            v-if="packagesData && packagesData.some(p => p !== null)"
+            type="button"
+            class="absolute z-20 inset-is-0 top-full hidden md: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 ? $t('common.copied') : $t('compare.packages.copy_as_markdown')"
+            @click="copyComparisonGridAsMd"
+          >
+            <span
+              :class="copied ? 'i-lucide:check' : 'i-lucide:copy'"
+              class="w-3.5 h-3.5"
+              aria-hidden="true"
+            />
+            {{ copied ? $t('common.copied') : $t('compare.packages.copy_as_markdown') }}
+          </button>
+        </div>
 
         <div
           v-if="
@@ -209,7 +283,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 +315,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') }}
@@ -277,3 +351,38 @@ useSeoMeta({
     </div>
   </main>
 </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>

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 tabele",
       "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 tabele",
       "loading": "Ładowanie danych pakietów...",
       "error": "Nie udało się wczytać danych pakietów. Spróbuj ponownie.",
       "empty_title": "Wybierz pakiety do porównania",