for releases now also matching on version in release title for scrolling

added scroll margin classes
ensuring to navigate to hash if present

Author: WilcoSp

app/components/Changelog/Card.vue

@@ -13,16 +13,19 @@ const formattedDate = computed(() => {
 
 const cardId = computed(() => (release.publishedAt ? `date-${formattedDate.value}` : undefined))
 
-const navId = computed(() => `release-${encodeURI(release.title)}:`)
+const navId = computed(() => `release-${encodeURI(release.title)}`)
 
 function navigateToTitle() {
   navigateTo(`#${navId.value}`)
 }
 </script>
 <template>
-  <section class="border border-border rounded-lg p-4 sm:p-6">
-    <div class="flex gap-2 items-center" :id="cardId">
-      <h2 class="text-1xl sm:text-2xl font-medium min-w-0 break-words py-2" :id="navId">
+  <section class="border border-border rounded-lg p-4 sm:p-6 scroll-mt-18" :id="cardId">
+    <div class="flex gap-2 items-center">
+      <h2
+        class="text-1xl sm:text-2xl font-medium min-w-0 break-words py-2 scroll-mt-20"
+        :id="navId"
+      >
         <a
           class="hover:decoration-accent hover:text-accent focus-visible:decoration-accent focus-visible:text-accent transition-colors duration-200"
           :class="$style.linkTitle"

app/components/Changelog/Releases.vue

@@ -1,24 +1,52 @@
 <script setup lang="ts">
-const { info, requestedDate } = defineProps<{
+const { info, requestedDate, requestedVersion } = defineProps<{
   info: ChangelogReleaseInfo
   requestedDate?: string
+  requestedVersion?: string | null | undefined
 }>()
 
 const { data: releases } = useFetch<ReleaseData[]>(
   () => `/api/changelog/releases/${info.provider}/${info.repo}`,
 )
 
 const route = useRoute()
-const router = useRouter()
+
+const matchingDateReleases = computed(() => {
+  if (!requestedDate || !releases.value) {
+    return
+  }
+
+  return releases.value.filter(release => {
+    if (!release.publishedAt) {
+      return
+    }
+    const date = new Date(release.publishedAt).toISOString().split('T')[0]
+
+    return date == requestedDate
+  })
+})
 
 watch(
-  [() => route.hash, () => requestedDate, releases],
-  ([hash, date, r]) => {
+  [() => route.hash, () => requestedDate, releases, () => requestedVersion],
+  ([hash, date, r, rv]) => {
+    if (hash && r) {
+      // ensures the user is scrolled to the hash
+      navigateTo(hash)
+      return
+    }
     if (hash || !date || !r) {
       return
     }
+    if (rv) {
+      for (const match of matchingDateReleases.value ?? []) {
+        if (match.title.includes(rv)) {
+          navigateTo(`#release-${encodeURI(match.title)}`)
+          return
+        }
+      }
+    }
 
-    router.push(`#date-${date}`)
+    navigateTo(`#date-${date}`)
   },
   {
     immediate: true,

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

@@ -127,6 +127,7 @@ const versionDate = computed(() => {
         v-if="changelog?.type == 'release'"
         :info="changelog"
         :requestedDate="versionDate"
+        :requested-version="version || latestVersion"
       />
       <LazyChangelogMarkdown
         v-else-if="changelog?.type == 'md'"