applying most changes recommended from review (thanks alexdln)

Author: WilcoSp

app/components/Changelog/Card.vue

@@ -2,9 +2,8 @@
 import type { ReleaseData } from '~~/shared/types/changelog'
 import { slugify } from '~~/shared/utils/html'
 
-const { release, tocHeaderClass } = defineProps<{
+const { release } = defineProps<{
   release: ReleaseData
-  tocHeaderClass: string
 }>()
 const formattedDate = computed(() => {
   if (!release.publishedAt) {
@@ -13,7 +12,7 @@ const formattedDate = computed(() => {
   return new Date(release.publishedAt).toISOString().split('T')[0]
 })
 
-const cardId = computed(() => (release.publishedAt ? `date-${formattedDate.value}` : undefined))
+const cardId = computed(() => (formattedDate.value ? `date-${formattedDate.value}` : undefined))
 
 const navId = computed(() => `release-${slugify(release.title)}`)
 
@@ -26,7 +25,9 @@ function navigateToTitle() {
     class="border border-border rounded-lg p-4 pt-2 sm:p-6 sm:pt-4 scroll-mt-18"
     :id="cardId"
   >
-    <div class="flex gap-2 items-center sticky z-3 text-2xl p-2" :class="tocHeaderClass">
+    <div
+      class="flex gap-2 items-center sticky z-3 text-2xl p-2 border-border bg-bg top-[--combined-header-height]"
+    >
       <h2
         class="text-1xl sm:text-2xl font-medium min-w-0 break-words py-2 scroll-mt-20"
         :id="navId"
@@ -62,10 +63,10 @@ function navigateToTitle() {
 <style module>
 .linkTitle::after {
   content: '__';
-  @apply inline i-lucide:link rtl-flip ms-1 opacity-0;
+  @apply inline i-lucide:link rtl-flip ms-1 opacity-0 text-[0.75em];
 }
 
-.linkTitle:hover:after {
+.linkTitle:hover::after {
   @apply opacity-100;
 }
 </style>

app/components/Changelog/ErrorMsg.vue

@@ -9,7 +9,7 @@ const { pkgName, changelogLink, viewOnGit } = defineProps<{
   <div class="w-full flex items-center flex-col gap-2 mt-4">
     <p>{{ $t('changelog.error.p1', { package: pkgName }) }}</p>
     <i18n-t keypath="changelog.error.p2" tag="p" #viewon>
-      <LinkBase :to="changelogLink">{{ viewOnGit.toLowerCase() }}</LinkBase>
+      <LinkBase :to="changelogLink" class="lowercase">{{ viewOnGit }}</LinkBase>
     </i18n-t>
   </div>
 </template>

app/components/Changelog/Releases.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { slugify } from '~~/shared/utils/html'
 
-const { info, requestedDate, requestedVersion, tocHeaderClass } = defineProps<{
+const { info, requestedDate, requestedVersion } = defineProps<{
   info: ChangelogReleaseInfo
   requestedDate?: string
   requestedVersion?: string | null | undefined
-  tocHeaderClass: string
 }>()
 
 const { data: releases, error } = await useFetch<ReleaseData[]>(
@@ -25,25 +24,25 @@ const matchingDateReleases = computed(() => {
     }
     const date = new Date(release.publishedAt).toISOString().split('T')[0]
 
-    return date == requestedDate
+    return date === requestedDate
   })
 })
 
 if (import.meta.client) {
   watch(
     [() => route.hash, () => requestedDate?.toLowerCase(), releases, () => requestedVersion],
-    ([hash, date, r, rv]) => {
-      if (hash && r) {
+    ([hash, date, uReleases, uRequestedVersion]) => {
+      if (hash && uReleases) {
         // ensures the user is scrolled to the hash
         navigateTo(hash, { replace: true })
         return
       }
-      if (hash || !date || !r) {
+      if (hash || !date || !uReleases) {
         return
       }
-      if (rv) {
+      if (uRequestedVersion) {
         for (const match of matchingDateReleases.value ?? []) {
-          if (match.title.toLowerCase().includes(rv)) {
+          if (match.title.toLowerCase().includes(uRequestedVersion)) {
             navigateTo(`#release-${slugify(match.title)}`, { replace: true })
             return
           }
@@ -61,7 +60,7 @@ if (import.meta.client) {
 </script>
 <template>
   <div class="flex flex-col gap-2 py-3" v-if="releases">
-    <ChangelogCard v-for="release of releases" :release :key="release.id" :tocHeaderClass />
+    <ChangelogCard v-for="release of releases" :release :key="release.id" />
   </div>
   <slot v-else-if="error" name="error"></slot>
 </template>

app/pages/package-changes/[[org]]/[name].vue

@@ -11,9 +11,9 @@ definePageMeta({
 const route = useRoute('changes')
 // Parse package name & version
 // Patterns:
-//   /changes/nuxt/v/4.2.0 → packageName: "nuxt", version: "4.2.0"
-//   /changes/nuxt/v/4.2.0/src/index.ts → packageName: "nuxt", version: "4.2.0"
-//   /changes/@nuxt/kit/v/1.0.0 → packageName: "@nuxt/kit", version: "1.0.0"
+//   /package-changes/nuxt/v/4.2.0 → packageName: "nuxt", version: "4.2.0"
+//   /package-changes/nuxt/v/4.2.0/src/index.ts → packageName: "nuxt", version: "4.2.0"
+//   /package-changes/@nuxt/kit/v/1.0.0 → packageName: "@nuxt/kit", version: "1.0.0"
 const parsedRoute = computed(() => {
   const { org, name } = route.params
 
@@ -50,17 +50,6 @@ const latestVersion = computed(() => {
   return pkg.value.versions[latestTag] ?? null
 })
 
-// watch(
-//   [version, () => latestVersion.value?.version, packageName],
-//   ([v, latest, name]) => {
-//     if (!v && latest && name) {
-//       const pathSegments = [...name.split('/'), 'v', latest]
-//       navigateTo({ name: 'changes', params: { path: pathSegments as [string, ...string[]] } })
-//     }
-//   },
-//   { immediate: true },
-// )
-
 // getting info
 const { data: changelog, pending } = usePackageChangelog(packageName, version)
 
@@ -104,10 +93,9 @@ defineOgImageComponent('Default', {
     />
     <section class="container w-full pt-3">
       <div
-        class="pa-3 z-2 flex justify-between gap-4 h-14 b-b-1"
+        class="pa-3 z-2 flex justify-between gap-4 h-14 b-b-1 border-border bg-bg top-[--combined-header-height]"
         :class="{
-          [$style.tocHeader]: true,
-          sticky: changelog?.type == 'md',
+          sticky: changelog?.type === 'md',
         }"
       >
         <LinkBase
@@ -118,13 +106,13 @@ defineOgImageComponent('Default', {
         >
           {{ changelog.provider }}
         </LinkBase>
-        <div v-if="changelog?.type == 'md'" ref="tptoc" class="w-14 h-8">
-          <!- prevents layout shift while loading ->
+        <div v-if="changelog?.type === 'md'" ref="tptoc" class="w-14 h-8">
+          <!-- prevents layout shift while loading -->
         </div>
       </div>
       <section v-if="pending || resolvingPending" class="flex flex-col gap-2 py-3">
         <SkeletonBlock class="h-8 w-40 rounded" />
-        <ul class="ms-3 list-disc my-[1rem] ps-[1.5rem] marker:color-[--border-hover]">
+        <ul class="ms-3 list-disc my-4 ps-6 marker:color-[--border-hover]">
           <li class="mb-1" v-for="_n in 5">
             <SkeletonBlock class="h-7 w-full max-w-2xl rounded" />
           </li>
@@ -137,11 +125,10 @@ defineOgImageComponent('Default', {
       <Suspense v-else>
         <template #default>
           <LazyChangelogReleases
-            v-if="changelog?.type == 'release'"
+            v-if="changelog?.type === 'release'"
             :info="changelog"
             :requestedDate="versionDate"
             :requested-version="version"
-            :tocHeaderClass="$style.tocHeader"
             #error
           >
             <LazyChangelogErrorMsg
@@ -151,7 +138,7 @@ defineOgImageComponent('Default', {
             />
           </LazyChangelogReleases>
           <LazyChangelogMarkdown
-            v-else-if="changelog?.type == 'md'"
+            v-else-if="changelog?.type === 'md'"
             :info="changelog"
             :tpTarget="tptoc"
             :requested-version="version"
@@ -182,12 +169,3 @@ defineOgImageComponent('Default', {
     </section>
   </main>
 </template>
-
-<style module>
-.tocHeader {
-  /* border-bottom-width: 1px; */
-  border-color: color-mix(in srgb, var(--border) var(--un-border-opacity), transparent);
-  background-color: color-mix(in srgb, var(--bg) var(--un-bg-opacity), transparent);
-  top: var(--combined-header-height); /* top is only used when sticky is used */
-}
-</style>

server/api/changelog/info/[...pkg].get.ts

@@ -36,7 +36,7 @@ export default defineCachedEventHandler(
     swr: true,
     getKey: event => {
       const pkg = getRouterParam(event, 'pkg') ?? ''
-      return `changelogInfo:v1:${pkg.replace(/\/+$/, '').trim()}`
+      return `changelogInfo:v1:${pkg.trim().replace(/\/+$/, '')}`
     },
   },
 )

server/api/changelog/md/[provider]/[owner]/[repo]/[...path].get.ts

@@ -19,8 +19,6 @@ export default defineCachedEventHandler(
     }
 
     try {
-      console.log({ provider })
-
       switch (provider as ProviderId) {
         case 'github':
           return await getGithubMarkDown(owner, repo, path)

server/utils/changelog/detectChangelog.ts

@@ -15,11 +15,7 @@ import { resolveURL } from 'ufo'
  *
  * first checks if releases are available and then changelog.md
  */
-export async function detectChangelog(
-  pkg: ExtendedPackageJson,
-  // packageName: string,
-  // version: string,
-) {
+export async function detectChangelog(pkg: ExtendedPackageJson) {
   if (!pkg.repository?.url) {
     return false
   }