Merge branch 'visual-adjustments' of https://github.com/jellydeck/npmx.dev into visual-adjustments

jellydeck · jellydeck · commit 0a68b7538daf · 2026-02-04T14:45:19.000+05:30
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -191,3 +191,6 @@ jobs:
 
       - name: 🧹 Check for unused code
         run: pnpm knip
+
+      - name: 🧹 Check for unused production code
+        run: pnpm knip --production
diff --git a/app/components/Compare/ComparisonGrid.vue b/app/components/Compare/ComparisonGrid.vue
@@ -22,9 +22,13 @@ defineProps<{
           :key="index"
           class="comparison-cell comparison-cell-header"
         >
-          <span class="font-mono text-sm font-medium text-fg truncate" :title="header">
+          <NuxtLink
+            :to="`/package/${header}`"
+            class="link-subtle font-mono text-sm font-medium text-fg truncate"
+            :title="header"
+          >
             {{ header }}
-          </span>
+          </NuxtLink>
         </div>
       </div>
 
diff --git a/app/components/ProvenanceBadge.vue b/app/components/ProvenanceBadge.vue
@@ -35,10 +35,7 @@ const title = computed(() =>
     class="inline-flex items-center justify-center gap-1 text-xs font-mono text-fg-muted hover:text-fg transition-colors duration-200 min-w-6 min-h-6"
     :title="title"
   >
-    <span
-      class="i-solar-shield-check-outline shrink-0"
-      :class="compact ? 'w-3.5 h-3.5' : 'w-4 h-4'"
-    />
+    <span class="i-lucide-shield-check shrink-0" :class="compact ? 'w-3.5 h-3.5' : 'w-4 h-4'" />
     <span v-if="!compact" class="sr-only sm:not-sr-only">{{
       $t('badges.provenance.verified')
     }}</span>
@@ -48,10 +45,7 @@ const title = computed(() =>
     class="inline-flex items-center gap-1 text-xs font-mono text-fg-muted"
     :title="title"
   >
-    <span
-      class="i-solar-shield-check-outline shrink-0"
-      :class="compact ? 'w-3.5 h-3.5' : 'w-4 h-4'"
-    />
+    <span class="i-lucide-shield-check shrink-0" :class="compact ? 'w-3.5 h-3.5' : 'w-4 h-4'" />
     <span v-if="!compact" class="sr-only sm:not-sr-only">{{
       $t('badges.provenance.verified')
     }}</span>
diff --git a/app/error.vue b/app/error.vue
@@ -5,9 +5,9 @@ const props = defineProps<{
   error: NuxtError
 }>()
 
-const status = computed(() => props.error.status || 500)
+const status = computed(() => props.error.statusCode || 500)
 const statusText = computed(() => {
-  if (props.error.statusText) return props.error.statusText
+  if (props.error.statusMessage) return props.error.statusMessage
   switch (status.value) {
     case 404:
       return 'Page not found'
diff --git a/app/pages/package-docs/[...path].vue b/app/pages/package-docs/[...path].vue
@@ -472,4 +472,11 @@ const showEmptyState = computed(() => docsData.value?.status !== 'ok')
 .docs-content .docs-members pre code {
   @apply text-fg-muted;
 }
+
+.docs-content .docs-symbol-name,
+.docs-content .docs-members dl dd,
+.docs-content .docs-members dl dt code,
+.docs-content .docs-section .docs-symbol .docs-description {
+  word-break: break-all;
+}
 </style>
diff --git a/app/pages/package/[...package].vue b/app/pages/package/[...package].vue
@@ -531,7 +531,7 @@ defineOgImageComponent('Package', {
               class="inline-flex items-center justify-center gap-1.5 text-fg-muted hover:text-fg transition-colors duration-200 min-w-6 min-h-6"
               :title="$t('package.verified_provenance')"
             >
-              <span class="i-solar:shield-check-outline w-3.5 h-3.5 shrink-0" aria-hidden="true" />
+              <span class="i-lucide-shield-check w-3.5 h-3.5 shrink-0" aria-hidden="true" />
             </a>
             <span
               v-if="requestedVersion && latestVersion && resolvedVersion !== latestVersion.version"
@@ -853,7 +853,7 @@ defineOgImageComponent('Package', {
                 class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1"
                 :title="$t('package.stats.inspect_dependency_tree')"
               >
-                <span class="i-solar:eye-scan-outline w-3.5 h-3.5" aria-hidden="true" />
+                <span class="i-lucide-view w-3.5 h-3.5" aria-hidden="true" />
                 <span class="sr-only">{{ $t('package.stats.inspect_dependency_tree') }}</span>
               </a>
             </dd>
diff --git a/docs/content/2.guide/1.features.md b/docs/content/2.guide/1.features.md
@@ -158,18 +158,32 @@ Make sure to replace `TYPE` with one of the options listed below and `YOUR_PACKA
 
 You can further customize your badges by appending query parameters to the badge URL.
 
+##### `labelColor`
+
+Overrides the default label color. You can pass a standard hex code (with or without the `#` prefix).
+
+- **Default**: `#0a0a0a`
+- **Usage**: `?labelColor=HEX_CODE`
+
+##### `label`
+
+Overrides the default label text. You can pass any string to customize the label displayed on the badge.
+
+- **Default**: Depends on the badge type (e.g., "version", "downloads/mo").
+- **Usage**: `?label=YOUR_LABEL`
+
 ##### `color`
 
 Overrides the default strategy color. You can pass a standard hex code (with or without the `#` prefix).
 
 - **Default**: Depends on the badge type (e.g., version is blue, downloads are orange).
 - **Usage**: `?color=HEX_CODE`
 
-| Example        | URL                                   |
-| :------------- | :------------------------------------ |
-| **Hot Pink**   | `.../badge/version/nuxt?color=ff69b4` |
-| **Pure Black** | `.../badge/version/nuxt?color=000000` |
-| **Brand Blue** | `.../badge/version/nuxt?color=3b82f6` |
+| Example        | URL                                    |
+| :------------- | :------------------------------------- |
+| **Hot Pink**   | `.../badge/version/nuxt?colorB=ff69b4` |
+| **Pure Black** | `.../badge/version/nuxt?colorB=000000` |
+| **Brand Blue** | `.../badge/version/nuxt?colorB=3b82f6` |
 
 ##### `name`
 
diff --git a/knip.ts b/knip.ts
@@ -25,8 +25,7 @@ const config: KnipConfig = {
         'uno-preset-rtl.ts!',
         'scripts/**/*.ts',
       ],
-      project: ['**/*.{ts,vue,cjs,mjs}'],
-      ignore: ['test/fixtures/**'],
+      project: ['**/*.{ts,vue,cjs,mjs}', '!test/fixtures/**'],
       ignoreDependencies: [
         '@iconify-json/*',
         '@vercel/kv',
diff --git a/package.json b/package.json
@@ -48,7 +48,6 @@
     "@iconify-json/carbon": "1.2.18",
     "@iconify-json/lucide": "1.2.87",
     "@iconify-json/simple-icons": "1.2.68",
-    "@iconify-json/solar": "1.2.5",
     "@iconify-json/svg-spinners": "1.2.4",
     "@iconify-json/vscode-icons": "1.2.40",
     "@intlify/shared": "11.2.8",
@@ -117,7 +116,6 @@
     "lint-staged": "16.2.7",
     "oxfmt": "0.27.0",
     "oxlint": "1.42.0",
-    "playwright-core": "1.58.0",
     "schema-dts": "1.1.5",
     "simple-git-hooks": "2.13.1",
     "typescript": "5.9.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/server/api/registry/badge/[type]/[...pkg].get.ts b/server/api/registry/badge/[type]/[...pkg].get.ts
@@ -14,6 +14,8 @@ const NPMS_API = 'https://api.npms.io/v2/package'
 const QUERY_SCHEMA = v.object({
   color: v.optional(v.string()),
   name: v.optional(v.string()),
+  labelColor: v.optional(v.string()),
+  label: v.optional(v.string()),
 })
 
 const COLORS = {
@@ -29,8 +31,13 @@ const COLORS = {
   white: '#ffffff',
 }
 
-function measureTextWidth(text: string): number {
-  const charWidth = 7
+const DEFAULT_CHAR_WIDTH = 7
+const CHARS_WIDTH = {
+  engines: 5.5,
+}
+
+function measureTextWidth(text: string, charWidth?: number): number {
+  charWidth ??= DEFAULT_CHAR_WIDTH
   const paddingX = 8
   return Math.max(40, Math.round(text.length * charWidth) + paddingX * 2)
 }
@@ -263,7 +270,9 @@ export default defineCachedEventHandler(
 
       const queryParams = v.safeParse(QUERY_SCHEMA, query)
       const userColor = queryParams.success ? queryParams.output.color : undefined
+      const labelColor = queryParams.success ? queryParams.output.labelColor : undefined
       const showName = queryParams.success && queryParams.output.name === 'true'
+      const userLabel = queryParams.success ? queryParams.output.label : undefined
 
       const badgeTypeResult = v.safeParse(BadgeTypeSchema, typeParam)
       const strategyKey = badgeTypeResult.success ? badgeTypeResult.output : 'version'
@@ -274,14 +283,20 @@ export default defineCachedEventHandler(
       const pkgData = await fetchNpmPackage(packageName)
       const strategyResult = await strategy(pkgData, requestedVersion)
 
-      const finalLabel = showName ? packageName : strategyResult.label
+      const finalLabel = userLabel ? userLabel : showName ? packageName : strategyResult.label
       const finalValue = strategyResult.value
 
       const rawColor = userColor ?? strategyResult.color
       const finalColor = rawColor?.startsWith('#') ? rawColor : `#${rawColor}`
 
+      const rawLabelColor = labelColor ?? '#0a0a0a'
+      const finalLabelColor = rawLabelColor?.startsWith('#') ? rawLabelColor : `#${rawLabelColor}`
+
       const leftWidth = measureTextWidth(finalLabel)
-      const rightWidth = measureTextWidth(finalValue)
+      const rightWidth = measureTextWidth(
+        finalValue,
+        CHARS_WIDTH[strategyKey as keyof typeof CHARS_WIDTH],
+      )
       const totalWidth = leftWidth + rightWidth
       const height = 20
 
@@ -291,7 +306,7 @@ export default defineCachedEventHandler(
             <rect width="${totalWidth}" height="${height}" rx="3" fill="#fff"/>
           </clipPath>
           <g clip-path="url(#r)">
-            <rect width="${leftWidth}" height="${height}" fill="#0a0a0a"/>
+            <rect width="${leftWidth}" height="${height}" fill="${finalLabelColor}"/>
             <rect x="${leftWidth}" width="${rightWidth}" height="${height}" fill="${finalColor}"/>
           </g>
           <g text-anchor="middle" font-family="'Geist', system-ui, -apple-system, sans-serif" font-size="11">
diff --git a/server/api/social/like.delete.ts b/server/api/social/like.delete.ts
@@ -31,6 +31,9 @@ export default eventHandlerWithOAuthSession(async (event, oAuthSession) => {
     })
     const result = await likesUtil.unlikeAPackageAndReturnLikes(body.packageName, loggedInUsersDid)
     return result
+  } else {
+    // Always unlike in the cache if this endpoint is called. May be a mismatch
+    await likesUtil.setUnlikeInCache(body.packageName, loggedInUsersDid)
   }
 
   console.warn(
diff --git a/server/utils/atproto/utils/likes.ts b/server/utils/atproto/utils/likes.ts
@@ -168,9 +168,10 @@ export class PackageLikesUtils {
     let totalLikes = await this.cache.get<number>(totalLikesKey)
     if (!totalLikes) {
       totalLikes = await this.constellationLikes(subjectRef)
-      totalLikes = totalLikes + 1
-      await this.cache.set(totalLikesKey, totalLikes, CACHE_MAX_AGE)
     }
+    totalLikes = totalLikes + 1
+    await this.cache.set(totalLikesKey, totalLikes, CACHE_MAX_AGE)
+
     // We already know the user has not liked the package before so set in the cache
     await this.cache.set(CACHE_USER_LIKES_KEY(packageName, usersDid), true, CACHE_MAX_AGE)
     return {
@@ -212,6 +213,15 @@ export class PackageLikesUtils {
     }
   }
 
+  /**
+   * Access to unlike a package for a user in the cache.
+   * @param packageName
+   * @param usersDid
+   */
+  async setUnlikeInCache(packageName: string, usersDid: string) {
+    await this.cache.set(CACHE_USER_LIKES_KEY(packageName, usersDid), false, CACHE_MAX_AGE)
+  }
+
   /**
    * At this point you should have checked if the user had a record for the package on the network and removed it before updating the cache
    * @param packageName
@@ -230,7 +240,7 @@ export class PackageLikesUtils {
     await this.cache.set(totalLikesKey, totalLikes, CACHE_MAX_AGE)
 
     //Clean up
-    await this.cache.set(CACHE_USER_LIKES_KEY(packageName, usersDid), false, CACHE_MAX_AGE)
+    await this.setUnlikeInCache(packageName, usersDid)
     await this.cache.delete(CACHE_USERS_BACK_LINK(packageName, usersDid))
 
     return {
diff --git a/test/e2e/badge.spec.ts b/test/e2e/badge.spec.ts
