the sticky header is now always one with toc instead of github

Author: WilcoSp

app/components/Changelog/Card.vue

@@ -2,8 +2,9 @@
 import type { ReleaseData } from '~~/shared/types/changelog'
 import { slugify } from '~~/shared/utils/html'
 
-const { release } = defineProps<{
+const { release, tocHeaderClass } = defineProps<{
   release: ReleaseData
+  tocHeaderClass: string
 }>()
 const formattedDate = computed(() => {
   if (!release.publishedAt) {
@@ -21,8 +22,11 @@ function navigateToTitle() {
 }
 </script>
 <template>
-  <section class="border border-border rounded-lg p-4 sm:p-6 scroll-mt-18" :id="cardId">
-    <div class="flex gap-2 items-center">
+  <section
+    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">
       <h2
         class="text-1xl sm:text-2xl font-medium min-w-0 break-words py-2 scroll-mt-20"
         :id="navId"

app/components/Changelog/Releases.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { slugify } from '~~/shared/utils/html'
 
-const { info, requestedDate, requestedVersion } = defineProps<{
+const { info, requestedDate, requestedVersion, tocHeaderClass } = defineProps<{
   info: ChangelogReleaseInfo
   requestedDate?: string
   requestedVersion?: string | null | undefined
+  tocHeaderClass: string
 }>()
 
 const { data: releases, error } = await useFetch<ReleaseData[]>(
@@ -32,8 +33,6 @@ if (import.meta.client) {
   watch(
     [() => route.hash, () => requestedDate?.toLowerCase(), releases, () => requestedVersion],
     ([hash, date, r, rv]) => {
-      console.log({ rv })
-
       if (hash && r) {
         // ensures the user is scrolled to the hash
         navigateTo(hash, { replace: true })
@@ -62,7 +61,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" />
+    <ChangelogCard v-for="release of releases" :release :key="release.id" :tocHeaderClass />
   </div>
   <slot v-else-if="error" name="error"></slot>
 </template>

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

@@ -102,12 +102,11 @@ defineOgImageComponent('Default', {
       :resolved-version="version"
       :display-version="pkg?.requestedVersion"
     />
-    {{ requestedVersion }} {{ version }}
     <section class="container w-full pt-3">
       <div
-        class="pa-3 z-2 flex justify-between gap-4 h-14"
+        class="pa-3 z-2 flex justify-between gap-4 h-14 b-b-1"
         :class="{
-          [$style.gitTocHeader]: true,
+          [$style.tocHeader]: true,
           sticky: changelog?.type == 'md',
         }"
       >
@@ -142,6 +141,7 @@ defineOgImageComponent('Default', {
             :info="changelog"
             :requestedDate="versionDate"
             :requested-version="version"
+            :tocHeaderClass="$style.tocHeader"
             #error
           >
             <LazyChangelogErrorMsg
@@ -184,10 +184,10 @@ defineOgImageComponent('Default', {
 </template>
 
 <style module>
-.gitTocHeader {
-  border-bottom-width: 1px;
+.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: var(--combined-header-height); /* top is only used when sticky is used */
 }
 </style>