added changelog to packageHeader & switched changelog to use the packageHeader component

Author: WilcoSp

app/components/Changelog/Markdown.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const { info, requestedVersion, tpTarget } = defineProps<{
   info: ChangelogMarkdownInfo
-  requestedVersion: string | null
+  requestedVersion: string | null | undefined
   tpTarget?: HTMLElement | null
 }>()
 

app/components/Package/Header.vue

@@ -6,6 +6,7 @@ import { useModal } from '~/composables/useModal'
 import { useAtproto } from '~/composables/atproto/useAtproto'
 import { togglePackageLike } from '~/utils/atproto/likes'
 import { isEditableElement } from '~/utils/input'
+import { usePackageChangelog } from '~/composables/usePackageChangelog'
 
 const props = defineProps<{
   pkg?: Pick<SlimPackument, 'name' | 'versions' | 'dist-tags'> | null
@@ -14,7 +15,7 @@ const props = defineProps<{
   latestVersion?: SlimVersion | null
   provenanceData?: ProvenanceDetails | null
   provenanceStatus?: string | null
-  page: 'main' | 'docs' | 'code' | 'diff'
+  page: 'main' | 'docs' | 'code' | 'diff' | 'changes'
   versionUrlPattern: string
 }>()
 
@@ -127,6 +128,15 @@ const diffLink = computed((): RouteLocationRaw | null => {
   return diffRoute(props.pkg.name, props.resolvedVersion, props.latestVersion.version)
 })
 
+const { data: changelog } = usePackageChangelog(packageName, requestedVersion)
+
+const changelogLink = computed((): RouteLocationRaw | null => {
+  if (!changelog.value || props.pkg == null || props.resolvedVersion == null) {
+    return null
+  }
+  return { name: 'changes', params: { path: [props.pkg.name, 'v', props.resolvedVersion] } }
+})
+
 const keyboardShortcuts = useKeyboardShortcuts()
 
 onKeyStroke(
@@ -181,6 +191,16 @@ onKeyStroke(
   { dedupe: true },
 )
 
+onKeyStroke(
+  e => keyboardShortcuts.value && isKeyWithoutModifiers(e, '-') && !isEditableElement(e.target),
+  e => {
+    if (changelogLink.value === null) return
+    e.preventDefault()
+    navigateTo(changelogLink.value)
+  },
+  { dedupe: true },
+)
+
 //atproto
 // TODO: Maybe set this where it's not loaded here every load?
 const { user } = useAtproto()
@@ -429,6 +449,15 @@ const likeAction = async () => {
         >
           {{ $t('compare.compare_versions') }}
         </LinkBase>
+        <LinkBase
+          v-if="changelogLink"
+          :to="changelogLink"
+          aria-keyshortcuts="-"
+          class="decoration-none border-b-2 p-1 hover:border-accent/50"
+          :class="page === 'changes' ? 'border-accent text-accent!' : 'border-transparent'"
+        >
+          {{ $t('package.links.changelog') }}
+        </LinkBase>
       </nav>
     </div>
   </div>

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

@@ -5,7 +5,7 @@ definePageMeta({
   name: 'changes',
   path: '/package-changes/:path+',
   alias: ['/package/changes/:path+', '/changes/:path+'],
-  scrollMargin: 150,
+  scrollMargin: 200,
 })
 
 /// routing
@@ -50,7 +50,12 @@ const versionUrlPattern = computed(() => {
   return filePath.value ? `${base}/${filePath.value}` : base
 })
 
-const latestVersion = computed(() => pkg.value?.['dist-tags']?.latest ?? null)
+const latestVersion = computed(() => {
+  if (!pkg.value) return null
+  const latestTag = pkg.value['dist-tags']?.latest
+  if (!latestTag) return null
+  return pkg.value.versions[latestTag] ?? null
+})
 
 watch(
   [version, latestVersion, packageName],
@@ -81,63 +86,68 @@ const versionDate = computed(() => {
 
 const viewOnGit = useViewOnGitProvider(() => changelog.value?.provider)
 
-// defineOgImageComponent('Default', {
-//   title: () => `${pkg.value?.name ?? 'Package'} - Changelogs`,
-//   description: () => pkg.value?.license ?? '',
-//   primaryColor: '#60a5fa',
-// })
+const packageHeaderHeight = usePackageHeaderHeight()
+const stickyStyle = computed(() => {
+  return {
+    '--combined-header-height': `${50 + (packageHeaderHeight.value || 44)}px`,
+  }
+})
+
+defineOgImageComponent('Default', {
+  title: () => `${pkg.value?.name ?? 'Package'} - Changelogs`,
+  description: () => pkg.value?.license ?? '',
+  primaryColor: '#60a5fa',
+})
 </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-3 mb-3 flex-wrap min-w-0">
-          <h1
-            class="font-mono text-lg sm:text-xl font-semibold text-fg hover:text-fg-muted transition-colors truncate"
-          >
-            <NuxtLink v-if="packageName" :to="packageRoute(packageName, version)">
-              {{ packageName }}
-            </NuxtLink>
-          </h1>
-
-          <VersionSelector
-            v-if="(version || latestVersion) && pkg?.versions && pkg?.['dist-tags']"
-            :package-name="packageName"
-            :current-version="version ?? latestVersion!"
-            :versions="pkg.versions"
-            :dist-tags="pkg['dist-tags']"
-            :url-pattern="versionUrlPattern"
-          />
-          <div class="flex-1"></div>
-          <LinkBase
-            v-if="changelog?.link"
-            :to="changelog?.link"
-            :classicon="repoProviderIcon"
-            :title="viewOnGit"
-          >
-            {{ changelog.provider }}
-          </LinkBase>
-
-          <div v-if="changelog?.type == 'md'" ref="tptoc" class="w-14 h-8 ms-auto">
-            <!-- prevents layout shift while loading -->
-          </div>
+  <main class="flex-1 flex flex-col" :style="stickyStyle">
+    <PackageHeader
+      page="changes"
+      :versionUrlPattern
+      :pkg
+      :latestVersion
+      :resolved-version="version"
+      :display-version="pkg?.requestedVersion"
+    />
+    <section class="container w-full pt-3" v-if="!pending">
+      <div
+        class="sticky top-[--combined-header-height] pa-3 z-2 flex justify-between gap-4"
+        :class="$style.gitTocHeader"
+      >
+        <LinkBase
+          v-if="changelog?.link"
+          :to="changelog?.link"
+          :classicon="repoProviderIcon"
+          :title="viewOnGit"
+        >
+          {{ changelog.provider }}
+        </LinkBase>
+        <div v-if="changelog?.type == 'md'" ref="tptoc" class="w-14 h-8">
+          <!- prevents layout shift while loading ->
         </div>
       </div>
-    </header>
-    <section class="container w-full" v-if="!pending">
+
       <LazyChangelogReleases
         v-if="changelog?.type == 'release'"
         :info="changelog"
         :requestedDate="versionDate"
-        :requested-version="version || latestVersion"
+        :requested-version="version || latestVersion?.version"
       />
       <LazyChangelogMarkdown
         v-else-if="changelog?.type == 'md'"
         :info="changelog"
         :tpTarget="tptoc"
-        :requested-version="version || latestVersion"
+        :requested-version="version || latestVersion?.version"
       />
       <p class="mt-5" v-else>{{ $t('changelog.no_logs') }}</p>
     </section>
   </main>
 </template>
+
+<style module>
+.gitTocHeader {
+  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);
+}
+</style>

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

@@ -17,7 +17,6 @@ import { getDependencyCount } from '~/utils/npm/dependency-count'
 import { detectPublishSecurityDowngradeForVersion } from '~/utils/publish-security'
 import { useInstallSizeDiff } from '~/composables/useInstallSizeDiff'
 import { useViewOnGitProvider } from '~/composables/useViewOnGitProvider'
-import { usePackageChangelog } from '~/composables/usePackageChangelog'
 
 defineOgImageComponent('Package', {
   name: () => packageName.value,
@@ -173,7 +172,6 @@ const { data: skillsData } = useLazyFetch<SkillsListResponse>(
 
 const { data: packageAnalysis } = usePackageAnalysis(packageName, requestedVersion)
 const { data: moduleReplacement } = useModuleReplacement(packageName)
-const { data: changelog } = usePackageChangelog(packageName, requestedVersion)
 
 if (
   import.meta.server &&