Merge branch 'main' into fix/issue-2044

Author: eryue0220

.storybook/main.ts

@@ -8,10 +8,10 @@ const config = {
   features: {
     backgrounds: false,
   },
-  async viteFinal(config) {
-    config.plugins ??= []
+  async viteFinal(newConfig) {
+    newConfig.plugins ??= []
 
-    config.plugins.push({
+    newConfig.plugins.push({
       name: 'ignore-internals',
       transform(_, id) {
         if (id.includes('/app/pages/blog/') && id.endsWith('.md')) {
@@ -23,7 +23,7 @@ const config = {
     // vue-docgen-api can crash on components that import types from other
     // .vue files (it tries to parse the SFC with @babel/parser as plain TS).
     // This wrapper catches those errors so the build doesn't fail.
-    const docgenPlugin = config.plugins?.find(
+    const docgenPlugin = newConfig.plugins?.find(
       (p): p is Extract<typeof p, { name: string }> =>
         !!p && typeof p === 'object' && 'name' in p && p.name === 'storybook:vue-docgen-plugin',
     )
@@ -48,7 +48,7 @@ const config = {
       }
     }
 
-    return config
+    return newConfig
   },
 } satisfies StorybookConfig
 

app/components/BuildEnvironment.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { BuildInfo } from '#shared/types'
-
 const { footer = false, buildInfo: buildInfoProp } = defineProps<{
   footer?: boolean
   buildInfo?: BuildInfo

app/components/Code/DirectoryListing.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { PackageFileTree } from '#shared/types'
 import type { RouteLocationRaw } from 'vue-router'
 import type { RouteNamedMap } from 'vue-router/auto-routes'
 import { ADDITIONAL_ICONS, getFileIcon } from '~/utils/file-icons'

app/components/Code/FileTree.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { PackageFileTree } from '#shared/types'
 import type { RouteLocationRaw } from 'vue-router'
 import type { RouteNamedMap } from 'vue-router/auto-routes'
 import { ADDITIONAL_ICONS, getFileIcon } from '~/utils/file-icons'

app/components/Code/MobileTreeDrawer.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { PackageFileTree } from '#shared/types'
 import type { RouteNamedMap } from 'vue-router/auto-routes'
 
 defineProps<{

app/components/Compare/ComparisonGrid.vue

@@ -17,6 +17,7 @@ const props = defineProps<{
 
 /** Total column count including the optional no-dep column */
 const totalColumns = computed(() => props.columns.length + (props.showNoDependency ? 1 : 0))
+const visibleColumns = computed(() => Math.min(totalColumns.value, 4))
 
 /** Compute plain-text tooltip for a replacement column */
 function getReplacementTooltip(col: ComparisonGridColumn): string {
@@ -30,32 +31,43 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
   <div class="overflow-x-auto">
     <div
       class="comparison-grid"
-      :class="[totalColumns === 4 ? 'min-w-[800px]' : 'min-w-[600px]', `columns-${totalColumns}`]"
-      :style="{ '--columns': totalColumns }"
+      :style="{
+        '--package-count': totalColumns,
+        '--visible-columns': visibleColumns,
+      }"
     >
       <!-- Header row -->
       <div class="comparison-header">
-        <div class="comparison-label" />
+        <div class="comparison-label relative bg-bg" />
 
         <!-- Package columns -->
-        <div v-for="col in columns" :key="col.name" class="comparison-cell comparison-cell-header">
-          <span class="inline-flex items-center gap-1.5 truncate">
+        <div
+          v-for="col in columns"
+          :key="col.name"
+          class="comparison-cell comparison-cell-header min-w-0"
+        >
+          <div class="flex items-start justify-center gap-1.5 min-w-0">
             <LinkBase
               :to="packageRoute(col.name, col.version)"
-              class="text-sm truncate"
-              block
+              class="flex min-w-0 flex-col items-center text-center text-sm"
               :title="col.version ? `${col.name}@${col.version}` : col.name"
             >
-              {{ col.name }}<template v-if="col.version">@{{ col.version }}</template>
+              <span class="min-w-0 break-words line-clamp-1">
+                {{ col.name }}
+              </span>
+              <span v-if="col.version" class="text-fg-muted line-clamp-1">
+                @{{ col.version }}
+              </span>
             </LinkBase>
+
             <TooltipApp v-if="col.replacement" :text="getReplacementTooltip(col)" position="bottom">
               <span
-                class="i-lucide:lightbulb w-3.5 h-3.5 text-amber-500 shrink-0 cursor-help"
+                class="i-lucide:lightbulb mt-0.5 h-3.5 w-3.5 shrink-0 cursor-help text-amber-500"
                 role="img"
                 :aria-label="$t('package.replacement.title')"
               />
             </TooltipApp>
-          </span>
+          </div>
         </div>
 
         <!-- "No dep" column (always last) -->
@@ -100,29 +112,30 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
 
 <style scoped>
 .comparison-grid {
+  --label-column-width: 140px;
+  --package-column-width: calc((100% - var(--label-column-width)) / var(--visible-columns));
   display: grid;
   gap: 0;
-}
-
-.comparison-grid.columns-2 {
-  grid-template-columns: minmax(120px, 180px) repeat(2, 1fr);
-}
-
-.comparison-grid.columns-3 {
-  grid-template-columns: minmax(120px, 160px) repeat(3, 1fr);
-}
-
-.comparison-grid.columns-4 {
-  grid-template-columns: minmax(100px, 140px) repeat(4, 1fr);
+  grid-template-columns:
+    var(--label-column-width)
+    repeat(var(--package-count), minmax(var(--package-column-width), var(--package-column-width)));
 }
 
 .comparison-header {
   display: contents;
 }
 
 .comparison-header > .comparison-label {
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--color-border);
+  z-index: 3;
+}
+
+.comparison-label {
+  position: sticky;
+  left: 0;
+  z-index: 2;
+  inline-size: var(--label-column-width);
+  min-inline-size: var(--label-column-width);
+  isolation: isolate;
 }
 
 .comparison-header > .comparison-cell-header {

app/components/Compare/FacetBarChart.vue

@@ -178,8 +178,8 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
               bold: false,
               color: colors.value.fg,
               value: {
-                formatter: ({ config }) => {
-                  return config?.datapoint?.formattedValue ?? '0'
+                formatter: ({ config: formatterConfig }) => {
+                  return formatterConfig?.datapoint?.formattedValue ?? '0'
                 },
               },
             },

app/components/Compare/FacetCard.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { FacetValue } from '#shared/types'
-
 const props = defineProps<{
   /** Facet label */
   label: string

app/components/Compare/FacetRow.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { FacetValue } from '#shared/types'
-
 const props = defineProps<{
   /** Facet label */
   label: string
@@ -90,7 +88,9 @@ function isCellLoading(index: number): boolean {
 <template>
   <div class="contents">
     <!-- Label cell -->
-    <div class="comparison-label flex items-center gap-1.5 px-4 py-3 border-b border-border">
+    <div
+      class="comparison-label relative bg-bg flex items-center gap-1.5 px-4 py-3 border-b border-border"
+    >
       <span class="text-xs text-fg-muted uppercase tracking-wider">{{ label }}</span>
       <TooltipApp v-if="description" :text="description" position="top">
         <span class="i-lucide:info w-3 h-3 text-fg-subtle cursor-help" aria-hidden="true" />
@@ -153,3 +153,13 @@ function isCellLoading(index: number): boolean {
     </div>
   </div>
 </template>
+
+<style lang="css" scoped>
+.comparison-label {
+  position: sticky;
+  left: 0;
+  z-index: 2;
+  inline-size: var(--label-column-width);
+  min-inline-size: var(--label-column-width);
+}
+</style>

app/components/OgImage/Package.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { joinURL } from 'ufo'
-
 const props = withDefaults(
   defineProps<{
     name: string
@@ -38,16 +36,7 @@ const { data: pkg, refresh: refreshPkg } = usePackage(
 )
 const displayVersion = computed(() => pkg.value?.requestedVersion ?? null)
 
-const repositoryUrl = computed(() => {
-  const repo = displayVersion.value?.repository
-  if (!repo?.url) return null
-  let url = normalizeGitUrl(repo.url)
-  // append `repository.directory` for monorepo packages
-  if (repo.directory) {
-    url = joinURL(`${url}/tree/HEAD`, repo.directory)
-  }
-  return url
-})
+const { repositoryUrl } = useRepositoryUrl(displayVersion)
 
 const { data: likes, refresh: refreshLikes } = useFetch(() => `/api/social/likes/${name.value}`, {
   default: () => ({ totalLikes: 0, userHasLiked: false }),