Merge branch 'main' of https://github.com/graphieros/npmx.dev

Author: graphieros

README.md

@@ -156,6 +156,8 @@ We welcome contributions – please do feel free to explore the project and
 - [npm-alt](https://npm.willow.sh/) – An alternative npm package browser
 - [npkg.lorypelli.dev](https://npkg.lorypelli.dev/) – An alternative frontend to npm made with as little client-side JavaScript as possible
 - [vscode-npmx](https://github.com/npmx-dev/vscode-npmx) – VSCode extension for npmx
+- [nxjt](https://nxjt.netlify.app) – npmx Jump To: Quickly navigate to npmx common webpages.
+- [npmx-digest](https://npmx-digest.trueberryless.org/) – An automated news aggregation website that summarizes npmx activity from GitHub and Bluesky every 8 hours.
 
 If you're building something cool, let us know! 🙏
 

app/components/Package/Card.vue

@@ -160,7 +160,7 @@ const pkgDescription = useMarkdown(() => ({
     <div
       v-if="result.package.keywords?.length"
       :aria-label="$t('package.card.keywords')"
-      class="relative z-10 flex flex-wrap gap-1.5 mt-3 pt-3 border-t border-border list-none m-0 p-0 pointer-events-none"
+      class="relative z-10 flex flex-wrap gap-1.5 mt-3 pt-3 border-t border-border list-none m-0 p-0 pointer-events-none items-center"
     >
       <TagButton
         v-for="keyword in result.package.keywords.slice(0, 5)"

app/components/Package/MetricsBadges.vue

@@ -59,6 +59,7 @@ const typesHref = computed(() => {
         <component
           :is="typesHref ? NuxtLink : 'span'"
           :to="typesHref"
+          :tabindex="!typesHref ? 0 : undefined"
           class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200"
           :class="[
             hasTypes
@@ -83,6 +84,7 @@ const typesHref = computed(() => {
     <li>
       <TooltipApp :text="hasEsm ? $t('package.metrics.esm') : $t('package.metrics.no_esm')">
         <span
+          tabindex="0"
           class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200"
           :class="
             hasEsm
@@ -104,6 +106,7 @@ const typesHref = computed(() => {
     <li v-if="hasCjs">
       <TooltipApp :text="$t('package.metrics.cjs')">
         <span
+          tabindex="0"
           class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs text-fg-muted bg-bg-muted border border-border rounded transition-colors duration-200"
         >
           <span class="i-carbon-checkmark w-3 h-3" aria-hidden="true" />

app/components/Readme.vue

@@ -88,7 +88,7 @@ function handleClick(event: MouseEvent) {
   color: var(--fg);
   @apply font-mono;
   font-weight: 500;
-  margin-top: 2rem;
+  margin-top: 1rem;
   margin-bottom: 1rem;
   line-height: 1.3;
 

app/components/Terminal/Install.vue

@@ -203,9 +203,12 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
             <NuxtLink
               :to="`/package/${createPackageInfo.packageName}`"
               class="text-fg-muted hover:text-fg text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
-              :title="$t('package.create.view', { packageName: createPackageInfo.packageName })"
             >
-              <span class="i-carbon:information w-3 h-3 mt-1" aria-hidden="true" />
+              <TooltipApp
+                :text="$t('package.create.view', { packageName: createPackageInfo.packageName })"
+              >
+                <span class="i-carbon:information w-3 h-3 mt-1" aria-hidden="true" />
+              </TooltipApp>
               <span class="sr-only">{{
                 $t('package.create.view', { packageName: createPackageInfo.packageName })
               }}</span>

app/components/Tooltip/Base.vue

@@ -40,7 +40,7 @@ const { floatingStyles } = useFloating(triggerRef, tooltipRef, {
         <div
           v-if="props.isVisible"
           ref="tooltipRef"
-          class="px-2 py-1 font-mono text-xs text-fg bg-bg-elevated border border-border rounded shadow-lg whitespace-nowrap z-[100] pointer-events-none"
+          class="px-2 py-1 font-mono text-xs text-fg bg-bg-elevated border border-border rounded shadow-lg whitespace-pre-line z-[100] pointer-events-none"
           :style="floatingStyles"
           v-bind="tooltipAttr"
         >

app/components/VersionSelector.vue

@@ -546,7 +546,7 @@ watch(
               <span
                 v-else
                 class="w-3 h-3 transition-transform duration-200 rtl-flip"
-                :class="group.isExpanded ? 'i:carbon:chevron-down' : 'i-carbon:chevron-right'"
+                :class="group.isExpanded ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right'"
                 aria-hidden="true"
               />
             </button>

app/composables/usePackageComparison.ts

@@ -8,16 +8,21 @@ import type {
 import { encodePackageName } from '#shared/utils/npm'
 import type { PackageAnalysisResponse } from './usePackageAnalysis'
 import { isBinaryOnlyPackage } from '#shared/utils/binary-detection'
+import { formatBytes } from '~/utils/formatters'
+import { getDependencyCount } from '~/utils/npm/dependency-count'
 
 export interface PackageComparisonData {
   package: ComparisonPackage
   downloads?: number
   /** Package's own unpacked size (from dist.unpackedSize) */
   packageSize?: number
+  /** Number of direct dependencies */
+  directDeps: number | null
   /** Install size data (fetched lazily) */
   installSize?: {
     selfSize: number
     totalSize: number
+    /** Total dependency count */
     dependencyCount: number
   }
   analysis?: PackageAnalysisResponse
@@ -139,6 +144,7 @@ export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
               },
               downloads: downloads?.downloads,
               packageSize,
+              directDeps: versionData ? getDependencyCount(versionData) : null,
               installSize: undefined, // Will be filled in second pass
               analysis: analysis ?? undefined,
               vulnerabilities: {
@@ -230,7 +236,7 @@ export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
   function isFacetLoading(facet: ComparisonFacet): boolean {
     if (!installSizeLoading.value) return false
     // These facets depend on install-size API
-    return facet === 'installSize' || facet === 'dependencies'
+    return facet === 'installSize' || facet === 'totalDependencies'
   }
 
   // Check if a specific column (package) is loading
@@ -255,40 +261,40 @@ function computeFacetValue(
   t: (key: string, params?: Record<string, unknown>) => string,
 ): FacetValue | null {
   switch (facet) {
-    case 'downloads':
+    case 'downloads': {
       if (data.downloads === undefined) return null
       return {
         raw: data.downloads,
         display: formatCompactNumber(data.downloads),
         status: 'neutral',
       }
-
-    case 'packageSize':
+    }
+    case 'packageSize': {
       if (!data.packageSize) return null
       return {
         raw: data.packageSize,
         display: formatBytes(data.packageSize),
         status: data.packageSize > 5 * 1024 * 1024 ? 'warning' : 'neutral',
       }
-
-    case 'installSize':
+    }
+    case 'installSize': {
       if (!data.installSize) return null
       return {
         raw: data.installSize.totalSize,
         display: formatBytes(data.installSize.totalSize),
         status: data.installSize.totalSize > 50 * 1024 * 1024 ? 'warning' : 'neutral',
       }
-
-    case 'moduleFormat':
+    }
+    case 'moduleFormat': {
       if (!data.analysis) return null
       const format = data.analysis.moduleFormat
       return {
         raw: format,
         display: format === 'dual' ? 'ESM + CJS' : format.toUpperCase(),
         status: format === 'esm' || format === 'dual' ? 'good' : 'neutral',
       }
-
-    case 'types':
+    }
+    case 'types': {
       if (data.isBinaryOnly) {
         return {
           raw: 'binary',
@@ -309,8 +315,8 @@ function computeFacetValue(
               : t('compare.facets.values.types_none'),
         status: types.kind === 'included' ? 'good' : types.kind === '@types' ? 'info' : 'bad',
       }
-
-    case 'engines':
+    }
+    case 'engines': {
       const engines = data.metadata?.engines
       if (!engines?.node) {
         return { raw: null, display: t('compare.facets.values.any'), status: 'neutral' }
@@ -320,8 +326,8 @@ function computeFacetValue(
         display: `Node ${engines.node}`,
         status: 'neutral',
       }
-
-    case 'vulnerabilities':
+    }
+    case 'vulnerabilities': {
       if (!data.vulnerabilities) return null
       const count = data.vulnerabilities.count
       const sev = data.vulnerabilities.severity
@@ -337,8 +343,8 @@ function computeFacetValue(
               }),
         status: count === 0 ? 'good' : sev.critical > 0 || sev.high > 0 ? 'bad' : 'warning',
       }
-
-    case 'lastUpdated':
+    }
+    case 'lastUpdated': {
       if (!data.metadata?.lastUpdated) return null
       const date = new Date(data.metadata.lastUpdated)
       return {
@@ -347,8 +353,8 @@ function computeFacetValue(
         status: isStale(date) ? 'warning' : 'neutral',
         type: 'date',
       }
-
-    case 'license':
+    }
+    case 'license': {
       const license = data.metadata?.license
       if (!license) {
         return { raw: null, display: t('compare.facets.values.unknown'), status: 'warning' }
@@ -358,17 +364,17 @@ function computeFacetValue(
         display: license,
         status: 'neutral',
       }
-
-    case 'dependencies':
-      if (!data.installSize) return null
-      const depCount = data.installSize.dependencyCount
+    }
+    case 'dependencies': {
+      const depCount = data.directDeps
+      if (depCount === null) return null
       return {
         raw: depCount,
         display: String(depCount),
-        status: depCount > 50 ? 'warning' : 'neutral',
+        status: depCount > 10 ? 'warning' : 'neutral',
       }
-
-    case 'deprecated':
+    }
+    case 'deprecated': {
       const isDeprecated = !!data.metadata?.deprecated
       return {
         raw: isDeprecated,
@@ -377,22 +383,23 @@ function computeFacetValue(
           : t('compare.facets.values.not_deprecated'),
         status: isDeprecated ? 'bad' : 'good',
       }
-
+    }
     // Coming soon facets
-    case 'totalDependencies':
-      return null
-
-    default:
+    case 'totalDependencies': {
+      if (!data.installSize) return null
+      const totalDepCount = data.installSize.dependencyCount
+      return {
+        raw: totalDepCount,
+        display: String(totalDepCount),
+        status: totalDepCount > 50 ? 'warning' : 'neutral',
+      }
+    }
+    default: {
       return null
+    }
   }
 }
 
-function formatBytes(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} kB`
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
-}
-
 function isStale(date: Date): boolean {
   const now = new Date()
   const diffMs = now.getTime() - date.getTime()

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

@@ -11,6 +11,7 @@ import { joinURL } from 'ufo'
 import { areUrlsEquivalent } from '#shared/utils/url'
 import { isEditableElement } from '~/utils/input'
 import { formatBytes } from '~/utils/formatters'
+import { getDependencyCount } from '~/utils/npm/dependency-count'
 import { NuxtLink } from '#components'
 import { useModal } from '~/composables/useModal'
 import { useAtproto } from '~/composables/atproto/useAtproto'
@@ -300,11 +301,6 @@ function normalizeGitUrl(url: string): string {
     .replace(/^git@github\.com:/, 'https://github.com/')
 }
 
-function getDependencyCount(version: PackumentVersion | null): number {
-  if (!version?.dependencies) return 0
-  return Object.keys(version.dependencies).length
-}
-
 // Check if a version has provenance/attestations
 // The dist object may have attestations that aren't in the base type
 function hasProvenance(version: PackumentVersion | null): boolean {
@@ -861,11 +857,9 @@ defineOgImageComponent('Package', {
           <div class="space-y-1 sm:col-span-3">
             <dt class="text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-1">
               {{ $t('package.stats.install_size') }}
-              <span
-                class="i-carbon:information w-3 h-3 text-fg-subtle"
-                aria-hidden="true"
-                :title="sizeTooltip"
-              />
+              <TooltipApp :text="sizeTooltip">
+                <span class="i-carbon:information w-3 h-3 text-fg-subtle" aria-hidden="true" />
+              </TooltipApp>
             </dt>
             <dd class="font-mono text-sm text-fg">
               <!-- Package size (greyed out) -->
@@ -1042,11 +1036,11 @@ defineOgImageComponent('Package', {
 
       <!-- README -->
       <section id="readme" class="area-readme min-w-0 scroll-mt-20">
-        <div class="flex flex-wrap items-center justify-between mb-4">
+        <div class="flex flex-wrap items-center justify-between mb-3">
           <h2 id="readme-heading" class="group text-xs text-fg-subtle uppercase tracking-wider">
             <a
               href="#readme"
-              class="inline-flex py-4 px-2 items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
+              class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
             >
               {{ $t('package.readme.title') }}
               <span

app/utils/npm/dependency-count.ts

@@ -0,0 +1,6 @@
+import type { PackumentVersion } from '#shared/types'
+
+export function getDependencyCount(version: PackumentVersion | null): number {
+  if (!version?.dependencies) return 0
+  return Object.keys(version.dependencies).length
+}