added padding to changelog markdown component

fixed hash being applied when navigating to main
added setting to en-/disable auto scrolling
updated focus styling in packageHeader
header anchor is now by default not visible
changelog release cards are lazy & hydrate on interaction
using useLazyFetch to prevent blocking

Author: WilcoSp

app/components/Changelog/Card.vue

@@ -55,7 +55,12 @@ function navigateToTitle() {
       />
       <!-- :active-id="activeTocId" -->
     </div>
-    <DateTime v-if="release.publishedAt" :datetime="release.publishedAt" date-style="medium" />
+    <DateTime
+      v-if="release.publishedAt"
+      :datetime="release.publishedAt"
+      date-style="medium"
+      class="mb-2 block"
+    />
     <Readme v-if="release.html" :html="release.html"></Readme>
   </section>
 </template>

app/components/Changelog/Markdown.vue

@@ -1,43 +1,50 @@
 <script setup lang="ts">
-const { info, requestedVersion, tpTarget } = defineProps<{
+const { info, goToVersion, tpTarget } = defineProps<{
   info: ChangelogMarkdownInfo
-  requestedVersion: string | null | undefined
+  goToVersion: string | null | undefined
   tpTarget?: HTMLElement | null
 }>()
 
 const route = useRoute()
 
-const { data, error } = await useFetch(
+const { data, error } = await useLazyFetch(
   () => `/api/changelog/md/${info.provider}/${info.repo}/${info.path}`,
 )
 
 if (import.meta.client) {
+  const { settings } = useSettings()
+
   // doing this server side can make it that we go to the homepage
-  watchEffect(() => {
+  const stopWatching = watchEffect(() => {
     const toc = data.value?.toc
 
     if (toc && route.hash) {
-      navigateTo(route.hash)
-      return
+      // scroll if there is a hash in the url
+      return navigateTo(route.hash)
     }
-    if (!toc || !requestedVersion || route.hash) {
+
+    // don't allow auto scrolling when disabled and there was no hash before
+    if (!settings.value.changelogAutoScroll || !toc || !goToVersion || route.hash) {
       return
     }
     // lc = lower case
-    const lcRequestedVersion = requestedVersion.toLowerCase()
+    const lcRequestedVersion = goToVersion.toLowerCase()
     for (const item of toc) {
       if (item.text.toLowerCase().includes(lcRequestedVersion)) {
         navigateTo(`#${item.id}`)
         return
       }
     }
   })
+
+  // stops watchEffect from trigger just before navigating
+  onBeforeRouteLeave(stopWatching)
 }
 </script>
 <template>
   <Teleport v-if="data?.toc && data.toc.length > 1 && !!tpTarget" :to="tpTarget">
     <ReadmeTocDropdown :toc="data.toc" class="justify-self-end" />
   </Teleport>
-  <Readme v-if="data?.html" :html="data.html"></Readme>
+  <Readme v-if="data?.html" :html="data.html" class="pt-4"></Readme>
   <slot v-else-if="error" name="error"></slot>
 </template>

app/components/Changelog/Releases.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { slugify } from '~~/shared/utils/html'
 
-const { info, requestedDate, requestedVersion } = defineProps<{
+const { info, requestedDate, goToVersion } = defineProps<{
   info: ChangelogReleaseInfo
   requestedDate?: string
-  requestedVersion?: string | null | undefined
+  goToVersion?: string | null | undefined
 }>()
 
-const { data: releases, error } = await useFetch<ReleaseData[]>(
+const { data: releases, error } = await useLazyFetch<ReleaseData[]>(
   () => `/api/changelog/releases/${info.provider}/${info.repo}`,
 )
 
@@ -27,15 +27,22 @@ const matchingDateReleases = computed(() => {
 })
 
 if (import.meta.client) {
+  const { settings } = useSettings()
+
   // doing this server side can make it that we go to the homepage
-  watchEffect(() => {
+  const stopWatching = watchEffect(() => {
     const uReleases = releases.value
     if (route.hash && uReleases) {
+      // scroll if there is a hash in the url
       navigateTo(route.hash, { replace: true })
       return
     }
+    // don't allow auto scrolling when disabled and there was no hash before
+    if (!settings.value.changelogAutoScroll) {
+      return
+    }
     const date = requestedDate?.toLowerCase()
-    if (route.hash || !date || !uReleases) {
+    if (route.hash || !date || !uReleases || !goToVersion) {
       return
     }
     const uMatchingDateReleases = matchingDateReleases.value
@@ -44,21 +51,28 @@ if (import.meta.client) {
       return
     }
 
-    if (requestedVersion) {
+    if (goToVersion) {
       for (const match of uMatchingDateReleases) {
-        if (match.title.toLowerCase().includes(requestedVersion)) {
+        if (match.title.toLowerCase().includes(goToVersion)) {
           navigateTo(`#release-${slugify(match.title)}`, { replace: true })
           return
         }
       }
     }
     navigateTo(`#date-${date}`, { replace: true })
   })
+  // stops watchEffect from trigger just before navigating
+  onBeforeRouteLeave(stopWatching)
 }
 </script>
 <template>
   <div class="flex flex-col gap-2 py-3" v-if="releases">
-    <ChangelogCard v-for="release of releases" :release :key="release.id" />
+    <LazyChangelogCard
+      v-for="release of releases"
+      :release
+      :key="release.id"
+      hydrate-on-interaction
+    />
   </div>
   <slot v-else-if="error" name="error"></slot>
 </template>

app/components/Package/Header.vue

@@ -382,7 +382,7 @@ const fundingUrl = computed(() => {
           v-if="changelogLink"
           :to="changelogLink"
           aria-keyshortcuts="-"
-          class="decoration-none border-b-2 p-1 hover:border-accent/50"
+          class="decoration-none border-b-2 p-1 hover:border-accent/50 focus-visible:[outline-offset:-2px]!"
           :class="page === 'changelog' ? 'border-accent text-accent!' : 'border-transparent'"
         >
           {{ $t('package.links.changelog') }}

app/composables/useSettings.ts

@@ -33,6 +33,8 @@ export interface AppSettings {
   instantSearch: boolean
   /** Enable/disable keyboard shortcuts */
   keyboardShortcuts: boolean
+  /** Enable/disable auto scrolling to requested version at package changelog */
+  changelogAutoScroll: boolean
   /** Connector preferences */
   connector: {
     /** Automatically open the web auth page in the browser */
@@ -60,6 +62,7 @@ const DEFAULT_SETTINGS: AppSettings = {
   searchProvider: import.meta.test ? 'npm' : 'algolia',
   instantSearch: true,
   keyboardShortcuts: true,
+  changelogAutoScroll: true,
   connector: {
     autoOpenURL: false,
   },

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

@@ -131,8 +131,8 @@ defineOgImageComponent('Default', {
           <LazyChangelogReleases
             v-if="changelog?.type === 'release'"
             :info="changelog"
-            :requestedDate="versionDate"
-            :requested-version="version"
+            :requested-date="versionDate"
+            :goToVersion="requestedVersion && version"
             #error
           >
             <LazyChangelogErrorMsg
@@ -145,7 +145,7 @@ defineOgImageComponent('Default', {
             v-else-if="changelog?.type === 'md'"
             :info="changelog"
             :tpTarget="tptoc"
-            :requested-version="version"
+            :goToVersion="requestedVersion && version"
             #error
           >
             <LazyChangelogErrorMsg
@@ -180,6 +180,6 @@ defineOgImageComponent('Default', {
 
 <style module>
 .changelog :global(.readme) :is(h1, h2, h3, h4, h5, h6) a[href^='#']::after {
-  content: unset !important;
+  /* content: unset !important; */
 }
 </style>

app/pages/settings.vue

@@ -143,6 +143,15 @@ const setLocale: typeof setNuxti18nLocale = newLocale => {
               :description="$t('settings.enable_graph_pulse_loop_description')"
               v-model="settings.enableGraphPulseLooping"
             />
+
+            <div class="border-t border-border my-4" />
+
+            <!-- Enable auto scrolling to requested version at package changelog -->
+            <SettingsToggle
+              :label="$t('settings.enable_changelog_autoscroll')"
+              :description="$t('settings.enable_changelog_autoscroll_description')"
+              v-model="settings.changelogAutoScroll"
+            />
           </div>
         </section>