id with release id will now be applied to all elements

Author: WilcoSp

app/components/Changelog/Markdown.vue

@@ -1,11 +1,18 @@
 <script setup lang="ts">
-const { info } = defineProps<{ info: ChangelogMarkdownInfo }>()
+const { info, tpTarget } = defineProps<{
+  info: ChangelogMarkdownInfo
+  tpTarget?: HTMLElement | null
+}>()
 
 const { data } = useLazyFetch(() => `/api/changelog/md/${info.provider}/${info.repo}/${info.path}`)
 </script>
 <template>
-  <div v-if="data?.toc && data.toc.length > 1" class="flex justify-end mt-3">
+  <Teleport
+    v-if="data?.toc && data.toc.length > 1 && !!tpTarget"
+    :to="tpTarget"
+    class="flex justify-end mt-3"
+  >
     <ReadmeTocDropdown :toc="data.toc" class="justify-self-end" />
-  </div>
+  </Teleport>
   <Readme v-if="data?.html" :html="data.html"></Readme>
 </template>

app/pages/package-changes/[...path].vue

@@ -3,7 +3,7 @@ definePageMeta({
   name: 'changes',
   path: '/package-changes/:path+',
   alias: ['/package/changes/:path+', '/changes/:path+'],
-  scrollMargin: 130,
+  scrollMargin: 140,
 })
 
 /// routing
@@ -65,12 +65,14 @@ watch(
 // getting info
 
 const { data: changelog, pending } = usePackageChangelog(packageName, version)
+
+const header = useTemplateRef('header')
 </script>
 <template>
   <main class="flex-1 flex flex-col">
     <header class="border-b border-border bg-bg sticky top-14 z-20">
       <div class="container pt-4 pb-3">
-        <div class="flex items-center gap-2 mb-3 flex-wrap min-w-0">
+        <div class="flex items-center gap-2 mb-3 flex-wrap min-w-0" ref="header">
           <h1
             class="font-mono text-lg sm:text-xl font-semibold text-fg hover:text-fg-muted transition-colors truncate"
           >
@@ -87,13 +89,18 @@ const { data: changelog, pending } = usePackageChangelog(packageName, version)
             :dist-tags="pkg['dist-tags']"
             :url-pattern="versionUrlPattern"
           />
+          <div class="flex-1"></div>
         </div>
       </div>
     </header>
 
     <section class="container w-full" v-if="changelog">
       <LazyChangelogReleases v-if="changelog.type == 'release'" :info="changelog" />
-      <LazyChangelogMarkdown v-else-if="changelog.type == 'md'" :info="changelog" />
+      <LazyChangelogMarkdown
+        v-else-if="changelog.type == 'md'"
+        :info="changelog"
+        :tpTarget="header"
+      />
       <p v-else-if="!pending" class="mt-5">{{ $t('changelog.no_logs') }}</p>
     </section>
   </main>

server/utils/changelog/markdown.ts

@@ -1,10 +1,10 @@
-import { marked, type Tokens } from 'marked'
+import { type Tokens, marked } from 'marked'
 import {
+  type prefixId as prefixIdFn,
   ALLOWED_ATTR,
   ALLOWED_TAGS,
   calculateSemanticDepth,
   isNpmJsUrlThatCanBeRedirected,
-  prefixId,
   slugify,
   stripHtmlTags,
 } from '../readme'
@@ -112,6 +112,14 @@ export async function changelogRenderer(mdRepoInfo: MarkdownRepoInfo) {
       return `<h${semanticLevel} id="${id}" data-level="${depth}">${text}  <a content-none href="#${id}"><span class="i-lucide:link size-[1em]" aria-hidden="true"></span></a></h${semanticLevel}>\n`
     }
 
+    // Helper to prefix id attributes with 'user-content-'
+    const prefixId: typeof prefixIdFn = (tagName: string, attribs: sanitizeHtml.Attributes) => {
+      if (attribs.id && !attribs.id.startsWith('user-content-')) {
+        attribs.id = `${idPrefix}-${attribs.id}`
+      }
+      return { tagName, attribs }
+    }
+
     return {
       html: sanitizeRawHTML(
         convertToEmoji(
@@ -120,13 +128,18 @@ export async function changelogRenderer(mdRepoInfo: MarkdownRepoInfo) {
           }) as string,
         ),
         mdRepoInfo,
+        prefixId,
       ),
       toc,
     }
   }
 }
 
-export function sanitizeRawHTML(rawHtml: string, mdRepoInfo: MarkdownRepoInfo) {
+export function sanitizeRawHTML(
+  rawHtml: string,
+  mdRepoInfo: MarkdownRepoInfo,
+  prefixId: typeof prefixIdFn,
+) {
   return sanitizeHtml(rawHtml, {
     allowedTags: ALLOWED_TAGS,
     allowedAttributes: ALLOWED_ATTR,