feat: copy compare table as markdown

app/components/CopyToClipboardButton.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<{
+  copied: boolean
+  copyText?: string
+  copiedText?: string
+  ariaLabelCopy?: string
+  ariaLabelCopied?: string
+  buttonAttrs?: HTMLAttributes
+}>()
+
+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"
+      v-bind="buttonAttrs"
+    >
+      <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

@@ -6,8 +6,10 @@ definePageMeta({
   name: 'compare',
 })
 
+const { locale } = useI18n()
 const router = useRouter()
 const canGoBack = useCanGoBack()
+const { copied, copy } = useClipboard({ copiedDuring: 2000 })
 
 // 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)),
 )
 
+/*
+ * Convert the comparison grid data to a Markdown table.
+ */
+function exportComparisonDataAsMarkdown() {
+  const mdData: Array<Array<string>> = []
+  const headers = [
+    '',
+    ...gridHeaders.value,
+    ...(showNoDependency.value ? [$t('compare.no_dependency.label')] : []),
+  ]
+  mdData.push(headers)
+  const maxLengths = headers.map(item => item.length)
+
+  selectedFacets.value.forEach((facet, index) => {
+    const label = facet.label
+    const data = getFacetValues(facet.id)
+    mdData.push([
+      label,
+      ...data.map(item =>
+        item?.type === 'date'
+          ? new Date(item.display).toLocaleDateString(locale.value, {
+              year: 'numeric',
+              month: 'short',
+              day: 'numeric',
+            })
+          : item?.display || '',
+      ),
+    ])
+    mdData?.[index + 1]?.forEach((item, itemIndex) => {
+      if (item.length > (maxLengths?.[itemIndex] || 0)) {
+        maxLengths[itemIndex] = item.length
+      }
+    })
+  })
+
+  const markdown = mdData.reduce((result, row, index) => {
+    // replacing pipe `|` with `ǀ` (U+01C0 Latin Letter Dental Click) to avoid breaking tables
+    result += `| ${row
+      .map((el, ind) => el.padEnd(maxLengths[ind] || 0, ' ').replace(/\|/g, 'ǀ'))
+      .join(' | ')} |`
+    if (index === 0) {
+      result += `\n|`
+      maxLengths.forEach(len => (result += ` ${'-'.padEnd(len, '-')} |`))
+    }
+    result += `\n`
+    return result
+  }, '')
+
+  copy(markdown)
+}
+
 useSeoMeta({
   title: () =>
     packages.value.length > 0
@@ -193,7 +246,24 @@ 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"
+          :button-attrs="{ class: 'hidden md:inline-flex' }"
+          @click="exportComparisonDataAsMarkdown"
+        >
+          <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>
 
@@ -241,7 +311,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

@@ -670,7 +670,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"
@@ -684,30 +689,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">
@@ -750,26 +739,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
@@ -1542,39 +1512,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 {

i18n/locales/en.json

@@ -913,6 +913,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

@@ -911,6 +911,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

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

lunaria/files/en-GB.json

@@ -912,6 +912,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

@@ -912,6 +912,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

@@ -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",

server/utils/docs/render.ts

@@ -10,7 +10,7 @@ import type { DenoDocNode, JsDocTag } from '#shared/types/deno-doc'
 import { highlightCodeBlock } from '../shiki'
 import { formatParam, formatType, getNodeSignature } from './format'
 import { groupMergedByKind } from './processing'
-import { createSymbolId, escapeHtml, parseJsDocLinks, renderMarkdown } from './text'
+import { escapeHtml, createSymbolId, parseJsDocLinks, renderMarkdown } from './text'
 import type { MergedSymbol, SymbolLookup } from './types'
 
 // =============================================================================