fix: url-encode repository directory segments and strip .git suffix (#2100)

Author: munaibh

app/composables/useRepositoryUrl.ts

@@ -20,7 +20,8 @@ export function useRepositoryUrl(
 
     // append `repository.directory` for monorepo packages
     if (repo.directory) {
-      url = joinURL(`${url}/tree/HEAD`, repo.directory)
+      const encodedDirectory = repo.directory.split('/').map(encodeURIComponent).join('/')
+      url = joinURL(`${url}/tree/HEAD`, encodedDirectory)
     }
 
     return url

shared/utils/git-providers.ts

@@ -296,7 +296,7 @@ export function normalizeGitUrl(input: string): string | null {
   const raw = input.trim()
   if (!raw) return null
 
-  const normalized = raw.replace(/^git\+/, '')
+  const normalized = raw.replace(/^git\+/, '').replace(/\.git$/i, '')
 
   // Handle ssh:// and git:// URLs by converting to https://
   if (/^(?:ssh|git):\/\//i.test(normalized)) {

test/unit/app/composables/use-repository-url.spec.ts

@@ -0,0 +1,54 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { computed, toValue } from 'vue'
+import type { SlimPackumentVersion } from '#shared/types/npm-registry'
+import { useRepositoryUrl } from '../../../../app/composables/useRepositoryUrl'
+
+function createVersion(repository?: SlimPackumentVersion['repository']): SlimPackumentVersion {
+  return { repository } as SlimPackumentVersion
+}
+
+beforeEach(() => {
+  vi.stubGlobal('computed', computed)
+  vi.stubGlobal('toValue', toValue)
+  vi.stubGlobal('normalizeGitUrl', (url: string) => url)
+})
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+})
+
+describe('useRepositoryUrl', () => {
+  it('returns null when repository url is missing', () => {
+    const { repositoryUrl } = useRepositoryUrl(null)
+    expect(repositoryUrl.value).toBeNull()
+  })
+
+  it('returns the url as-is when there is no directory', () => {
+    const { repositoryUrl } = useRepositoryUrl(
+      createVersion({ url: 'https://github.com/nuxt/nuxt' }),
+    )
+    expect(repositoryUrl.value).toBe('https://github.com/nuxt/nuxt')
+  })
+
+  it('encodes @ in scoped package directory', () => {
+    const { repositoryUrl } = useRepositoryUrl(
+      createVersion({
+        url: 'https://github.com/tailwindlabs/tailwindcss',
+        directory: 'packages/@tailwindcss-vite',
+      }),
+    )
+    expect(repositoryUrl.value).toBe(
+      'https://github.com/tailwindlabs/tailwindcss/tree/HEAD/packages/%40tailwindcss-vite',
+    )
+  })
+
+  it('does not encode slashes between directory segments', () => {
+    const { repositoryUrl } = useRepositoryUrl(
+      createVersion({
+        url: 'https://github.com/withastro/astro',
+        directory: 'packages/astro',
+      }),
+    )
+    expect(repositoryUrl.value).toBe('https://github.com/withastro/astro/tree/HEAD/packages/astro')
+  })
+})

test/unit/shared/utils/git-providers.spec.ts

@@ -1,5 +1,9 @@
 import { describe, expect, it } from 'vitest'
-import { parseRepositoryInfo, type RepositoryInfo } from '#shared/utils/git-providers'
+import {
+  normalizeGitUrl,
+  parseRepositoryInfo,
+  type RepositoryInfo,
+} from '#shared/utils/git-providers'
 
 describe('parseRepositoryInfo', () => {
   it('returns undefined for undefined input', () => {
@@ -386,6 +390,30 @@ describe('parseRepositoryInfo', () => {
   })
 })
 
+describe('normalizeGitUrl', () => {
+  it('strips .git suffix from HTTPS URLs', () => {
+    expect(normalizeGitUrl('https://github.com/tailwindlabs/tailwindcss.git')).toBe(
+      'https://github.com/tailwindlabs/tailwindcss',
+    )
+  })
+
+  it('strips .git suffix from git+https URLs', () => {
+    expect(normalizeGitUrl('git+https://github.com/tailwindlabs/tailwindcss.git')).toBe(
+      'https://github.com/tailwindlabs/tailwindcss',
+    )
+  })
+
+  it('strips .git suffix from ssh URLs', () => {
+    expect(normalizeGitUrl('git@github.com:tailwindlabs/tailwindcss.git')).toBe(
+      'https://github.com/tailwindlabs/tailwindcss',
+    )
+  })
+
+  it('leaves URLs without .git suffix unchanged', () => {
+    expect(normalizeGitUrl('https://github.com/nuxt/nuxt')).toBe('https://github.com/nuxt/nuxt')
+  })
+})
+
 describe('RepositoryInfo type', () => {
   it('includes blobBaseUrl in RepositoryInfo', () => {
     const result = parseRepositoryInfo({