fix: normalize anchor case at link generation time

Per @danielroe's feedback, move toLowerCase() from the client-side
click handler to server-side link generation in resolveUrl(). This
ensures consistent case between anchor hrefs and heading IDs at the
source, allowing native browser hash navigation to work correctly.

- Add .toLowerCase() in server/utils/readme.ts when generating anchor links
- Simplify client-side handler to just return for hash links
- Update tests to reflect the new behavior

Co-Authored-By: Claude (claude-opus-4-5) <noreply@anthropic.com>

Author: niveshdandyan

app/components/Readme.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { scrollToAnchor } from '~/utils/scrollToAnchor'
-
 defineProps<{
   html: string
 }>()
@@ -11,7 +9,6 @@ const { copy } = useClipboard()
 // Combined click handler for:
 // 1. Intercepting npmjs.com links to route internally
 // 2. Copy button functionality for code blocks
-// 3. Hash link scrolling for internal README navigation (Table of Contents)
 function handleClick(event: MouseEvent) {
   const target = event.target as HTMLElement | undefined
   if (!target) return
@@ -50,12 +47,8 @@ function handleClick(event: MouseEvent) {
   const href = anchor.getAttribute('href')
   if (!href) return
 
-  // Handle hash links for internal README navigation (e.g., Table of Contents)
+  // Let browser handle hash links natively (case is normalized server-side)
   if (href.startsWith('#')) {
-    event.preventDefault()
-    // Lowercase the ID to match heading slugs (generated with toLowerCase in slugify)
-    const id = href.slice(1).toLowerCase()
-    scrollToAnchor(id)
     return
   }
 

server/utils/readme.ts

@@ -190,8 +190,9 @@ function slugify(text: string): string {
 function resolveUrl(url: string, packageName: string, repoInfo?: RepositoryInfo): string {
   if (!url) return url
   if (url.startsWith('#')) {
-    // Prefix anchor links to match heading IDs (avoids collision with page IDs)
-    return `#user-content-${url.slice(1)}`
+    // Prefix anchor links and lowercase to match heading IDs
+    // (slugify uses toLowerCase, and prefix avoids collision with page IDs)
+    return `#user-content-${url.slice(1).toLowerCase()}`
   }
   if (hasProtocol(url, { acceptRelative: true })) {
     try {

test/nuxt/components/Readme.spec.ts

@@ -1,14 +1,7 @@
-import { describe, expect, it, vi } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
 import Readme from '~/components/Readme.vue'
 
-// Mock scrollToAnchor
-vi.mock('~/utils/scrollToAnchor', () => ({
-  scrollToAnchor: vi.fn(),
-}))
-
-import { scrollToAnchor } from '~/utils/scrollToAnchor'
-
 describe('Readme', () => {
   describe('rendering', () => {
     it('renders the provided HTML content', async () => {
@@ -20,27 +13,18 @@ describe('Readme', () => {
   })
 
   describe('hash link click handling', () => {
-    it('intercepts hash link clicks and calls scrollToAnchor with lowercase ID', async () => {
+    it('allows native browser handling for hash links (does not prevent default)', async () => {
       const component = await mountSuspended(Readme, {
         props: { html: '<a href="#Installation">Installation</a>' },
       })
 
       const link = component.find('a')
-      await link.trigger('click')
-
-      expect(scrollToAnchor).toHaveBeenCalledWith('installation')
-    })
-
-    it('handles user-content prefixed hash links', async () => {
-      vi.mocked(scrollToAnchor).mockClear()
-      const component = await mountSuspended(Readme, {
-        props: { html: '<a href="#user-content-getting-started">Getting Started</a>' },
-      })
-
-      const link = component.find('a')
-      await link.trigger('click')
+      const clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true })
+      link.element.dispatchEvent(clickEvent)
 
-      expect(scrollToAnchor).toHaveBeenCalledWith('user-content-getting-started')
+      // Hash links should NOT have default prevented - browser handles them natively
+      // (Case normalization happens server-side when generating the href)
+      expect(clickEvent.defaultPrevented).toBe(false)
     })
   })
 })

test/unit/server/utils/readme.spec.ts

@@ -274,6 +274,21 @@ describe('Markdown File URL Resolution', () => {
 
       expect(result.html).toContain('href="#user-content-installation"')
     })
+
+    it('lowercases anchor links to match heading slugs', async () => {
+      const markdown = `[Jump to Installation](#Installation)`
+      const result = await renderReadmeHtml(markdown, 'test-pkg')
+
+      // Anchor links should be lowercased to match heading IDs (slugify uses toLowerCase)
+      expect(result.html).toContain('href="#user-content-installation"')
+    })
+
+    it('lowercases mixed-case anchor links', async () => {
+      const markdown = `[Jump to Getting Started](#Getting-Started)`
+      const result = await renderReadmeHtml(markdown, 'test-pkg')
+
+      expect(result.html).toContain('href="#user-content-getting-started"')
+    })
   })
 
   describe('different git providers', () => {