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

Author: YFAnt

app/components/AppHeader.vue

@@ -30,12 +30,15 @@ withDefaults(
           <NuxtLink
             to="/search"
             class="link-subtle font-mono text-sm inline-flex items-center gap-2"
+            aria-keyshortcuts="/"
           >
             search
             <kbd
               class="hidden sm:inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded"
-              >/</kbd
+              aria-hidden="true"
             >
+              /
+            </kbd>
           </NuxtLink>
         </li>
         <li v-if="showConnector" class="flex">

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

@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { joinURL } from 'ufo'
-import type { PackumentVersion, NpmVersionDist, ReadmeResponse } from '#shared/types'
+import type { NpmVersionDist, PackumentVersion, ReadmeResponse } from '#shared/types'
 import type { JsrPackageInfo } from '#shared/types/jsr'
 import { assertValidPackageName } from '#shared/utils/npm'
+import { onKeyStroke } from '@vueuse/core'
+import { joinURL } from 'ufo'
+import { areUrlsEquivalent } from '#shared/utils/url'
 
 definePageMeta({
   name: 'package',
@@ -11,6 +13,8 @@ definePageMeta({
 
 const route = useRoute('package')
 
+const router = useRouter()
+
 // Parse package name and optional version from URL
 // Patterns:
 //   /nuxt → packageName: "nuxt", requestedVersion: null
@@ -202,7 +206,15 @@ const repoProviderIcon = computed(() => {
 })
 
 const homepageUrl = computed(() => {
-  return displayVersion.value?.homepage ?? null
+  const homepage = displayVersion.value?.homepage
+  if (!homepage) return null
+
+  // Don't show homepage if it's the same as the repository URL
+  if (repositoryUrl.value && areUrlsEquivalent(homepage, repositoryUrl.value)) {
+    return null
+  }
+
+  return homepage
 })
 
 function normalizeGitUrl(url: string): string {
@@ -311,6 +323,17 @@ useSeoMeta({
   description: () => pkg.value?.description ?? '',
 })
 
+onKeyStroke('.', () => {
+  if (pkg.value && displayVersion.value) {
+    router.push({
+      name: 'code',
+      params: {
+        path: [pkg.value.name, 'v', displayVersion.value.version],
+      },
+    })
+  }
+})
+
 defineOgImageComponent('Package', {
   name: () => pkg.value?.name ?? 'Package',
   version: () => displayVersion.value?.version ?? '',
@@ -656,9 +679,15 @@ defineOgImageComponent('Package', {
                   params: { path: [...pkg.name.split('/'), 'v', displayVersion.version] },
                 }"
                 class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
+                aria-keyshortcuts="."
               >
-                <span class="i-carbon-code w-4 h-4" aria-hidden="true" />
                 code
+                <kbd
+                  class="hidden sm:inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
+                  aria-hidden="true"
+                >
+                  .
+                </kbd>
               </NuxtLink>
             </li>
           </ul>

shared/utils/url.ts

@@ -0,0 +1,27 @@
+import { withoutProtocol, withoutTrailingSlash } from 'ufo'
+
+/**
+ * Normalize a URL for comparison by removing protocol, www prefix,
+ * trailing slashes, hash fragments, and common git tree paths.
+ *
+ * Uses ufo utilities where possible, with additional handling for
+ * www prefix and git-specific paths that ufo's isEqual doesn't cover.
+ */
+export function normalizeUrlForComparison(url: string): string {
+  let normalized = withoutProtocol(url).toLowerCase()
+  normalized = withoutTrailingSlash(normalized)
+  normalized = normalized
+    .replace(/^www\./, '')
+    .replace(/#.*$/, '')
+    .replace(/\/tree\/(head|main|master)(\/|$)/i, '/')
+  return withoutTrailingSlash(normalized)
+}
+
+/**
+ * Check if two URLs point to the same resource.
+ * Handles differences in protocol (http/https), www prefix,
+ * trailing slashes, and common git branch paths.
+ */
+export function areUrlsEquivalent(url1: string, url2: string): boolean {
+  return normalizeUrlForComparison(url1) === normalizeUrlForComparison(url2)
+}

test/unit/url-comparison.spec.ts

@@ -0,0 +1,99 @@
+import { describe, expect, it } from 'vitest'
+import { areUrlsEquivalent, normalizeUrlForComparison } from '#shared/utils/url'
+
+describe('normalizeUrlForComparison', () => {
+  it('removes http protocol', () => {
+    expect(normalizeUrlForComparison('http://github.com/foo')).toBe('github.com/foo')
+  })
+
+  it('removes https protocol', () => {
+    expect(normalizeUrlForComparison('https://github.com/foo')).toBe('github.com/foo')
+  })
+
+  it('removes www prefix', () => {
+    expect(normalizeUrlForComparison('https://www.example.com/foo')).toBe('example.com/foo')
+  })
+
+  it('removes trailing slashes', () => {
+    expect(normalizeUrlForComparison('https://github.com/foo/')).toBe('github.com/foo')
+  })
+
+  it('removes hash fragments', () => {
+    expect(normalizeUrlForComparison('https://github.com/foo#readme')).toBe('github.com/foo')
+  })
+
+  it('removes /tree/head path', () => {
+    expect(normalizeUrlForComparison('https://github.com/foo/bar/tree/head')).toBe(
+      'github.com/foo/bar',
+    )
+  })
+
+  it('removes /tree/main path', () => {
+    expect(normalizeUrlForComparison('https://github.com/foo/bar/tree/main')).toBe(
+      'github.com/foo/bar',
+    )
+  })
+
+  it('removes /tree/master path', () => {
+    expect(normalizeUrlForComparison('https://github.com/foo/bar/tree/master')).toBe(
+      'github.com/foo/bar',
+    )
+  })
+
+  it('removes /tree/HEAD/ with trailing content', () => {
+    expect(normalizeUrlForComparison('https://github.com/foo/bar/tree/HEAD/packages/core')).toBe(
+      'github.com/foo/bar/packages/core',
+    )
+  })
+
+  it('lowercases the URL', () => {
+    expect(normalizeUrlForComparison('https://GitHub.com/Foo/Bar')).toBe('github.com/foo/bar')
+  })
+})
+
+describe('areUrlsEquivalent', () => {
+  it('returns true for identical URLs', () => {
+    expect(areUrlsEquivalent('https://github.com/foo', 'https://github.com/foo')).toBe(true)
+  })
+
+  it('returns true for URLs with different protocols', () => {
+    expect(areUrlsEquivalent('http://github.com/foo', 'https://github.com/foo')).toBe(true)
+  })
+
+  it('returns true for URLs with/without www', () => {
+    expect(areUrlsEquivalent('https://www.example.com', 'https://example.com')).toBe(true)
+  })
+
+  it('returns true for URLs with/without trailing slash', () => {
+    expect(areUrlsEquivalent('https://github.com/foo/', 'https://github.com/foo')).toBe(true)
+  })
+
+  it('returns true for repo URL vs homepage with tree/HEAD', () => {
+    expect(
+      areUrlsEquivalent(
+        'https://github.com/nuxt/nuxt/tree/HEAD/packages/nuxt',
+        'https://github.com/nuxt/nuxt/packages/nuxt',
+      ),
+    ).toBe(true)
+  })
+
+  it('returns true for repo URL vs homepage with tree/main', () => {
+    expect(
+      areUrlsEquivalent('https://github.com/foo/bar', 'https://github.com/foo/bar/tree/main'),
+    ).toBe(true)
+  })
+
+  it('returns false for different repos', () => {
+    expect(areUrlsEquivalent('https://github.com/foo/bar', 'https://github.com/foo/baz')).toBe(
+      false,
+    )
+  })
+
+  it('returns false for different domains', () => {
+    expect(areUrlsEquivalent('https://github.com/foo', 'https://gitlab.com/foo')).toBe(false)
+  })
+
+  it('returns false for repo URL vs separate homepage', () => {
+    expect(areUrlsEquivalent('https://github.com/nuxt/nuxt', 'https://nuxt.com')).toBe(false)
+  })
+})