for releases the date is now being used to send you as close as possible to the version that was selected

Author: WilcoSp

app/components/Changelog/Card.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
 import type { ReleaseData } from '~~/shared/types/changelog'
-import { useDateFormat } from '#imports'
 
 const { release } = defineProps<{
   release: ReleaseData
 }>()
-const formattedDate = useDateFormat(() => release.publishedAt, 'YYYY-MM-DD', {})
+const formattedDate = computed(() => {
+  if (!release.publishedAt) {
+    return
+  }
+  return new Date(release.publishedAt).toISOString().split('T')[0]
+})
 
 const cardId = computed(() => (release.publishedAt ? `date-${formattedDate.value}` : undefined))
 

app/components/Changelog/Releases.vue

@@ -1,12 +1,42 @@
 <script setup lang="ts">
-const { info } = defineProps<{ info: ChangelogReleaseInfo }>()
+const { info, requestedDate } = defineProps<{
+  info: ChangelogReleaseInfo
+  requestedDate?: string
+}>()
 
-const { data: releases } = useFetch<ReleaseData[]>(
+const { data: releases, pending } = useFetch<ReleaseData[]>(
   () => `/api/changelog/releases/${info.provider}/${info.repo}`,
 )
+
+const route = useRoute()
+const router = useRouter()
+
+// if (import.meta.client) {
+
+//   watchEffect(() => {
+
+//   })
+// }
+
+watch(
+  [() => route.hash, () => requestedDate, releases],
+  ([hash, date, r]) => {
+    console.log('mario')
+    if (hash || !date || !r) {
+      return
+    }
+
+    router.push(`#date-${date}`)
+  },
+  {
+    immediate: true,
+  },
+)
 </script>
 <template>
   <div class="flex flex-col gap-2 py-3" v-if="releases">
-    <ChangelogCard v-for="release of releases" :release :key="release.id" />
+    <ClientOnly>
+      <ChangelogCard v-for="release of releases" :release :key="release.id" />
+    </ClientOnly>
   </div>
 </template>

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

@@ -5,7 +5,7 @@ definePageMeta({
   name: 'changes',
   path: '/package-changes/:path+',
   alias: ['/package/changes/:path+', '/changes/:path+'],
-  scrollMargin: 140,
+  scrollMargin: 150,
 })
 
 /// routing
@@ -43,7 +43,7 @@ const packageName = computed(() => parsedRoute.value.packageName)
 const version = computed(() => parsedRoute.value.version)
 const filePath = computed(() => parsedRoute.value.filePath?.replace(/\/$/, ''))
 
-const { data: pkg } = usePackage(packageName)
+const { data: pkg } = usePackage(packageName, version)
 
 const versionUrlPattern = computed(() => {
   const base = `/package-changes/${packageName.value}/v/{version}`
@@ -69,6 +69,16 @@ const { data: changelog, pending } = usePackageChangelog(packageName, version)
 const repoProviderIcon = useProviderIcon(() => changelog.value?.provider)
 const tptoc = useTemplateRef('tptoc')
 
+const versionDate = computed(() => {
+  if (!version.value) {
+    return
+  }
+  const time = pkg.value?.time[version.value]
+  if (time) {
+    return new Date(time).toISOString().split('T')[0]
+  }
+})
+
 defineOgImageComponent('Default', {
   title: () => `${pkg.value?.name ?? 'Package'} - Changelogs`,
   description: () => pkg.value?.license ?? '',
@@ -113,7 +123,11 @@ defineOgImageComponent('Default', {
       </div>
     </header>
     <section class="container w-full" v-if="!pending">
-      <LazyChangelogReleases v-if="changelog?.type == 'release'" :info="changelog" />
+      <LazyChangelogReleases
+        v-if="changelog?.type == 'release'"
+        :info="changelog"
+        :requestedDate="versionDate"
+      />
       <LazyChangelogMarkdown
         v-else-if="changelog?.type == 'md'"
         :info="changelog"