fixed going to latest & changed going to has to only client side

Author: WilcoSp

app/components/Changelog/Markdown.vue

@@ -11,29 +11,31 @@ const { data, error } = await useFetch(
   () => `/api/changelog/md/${info.provider}/${info.repo}/${info.path}`,
 )
 
-watch(
-  [() => data.value?.toc, () => requestedVersion?.toLowerCase(), () => route.hash],
-  ([toc, rv, hash]) => {
-    if (toc && hash) {
-      navigateTo(hash)
-      return
-    }
-
-    if (!toc || !rv || hash) {
-      return
-    }
+if (import.meta.client) {
+  watch(
+    [() => data.value?.toc, () => requestedVersion?.toLowerCase(), () => route.hash],
+    ([toc, rv, hash]) => {
+      if (toc && hash) {
+        navigateTo(hash)
+        return
+      }
 
-    for (const item of toc) {
-      if (item.text.toLowerCase().includes(rv)) {
-        navigateTo(`#${item.id}`)
+      if (!toc || !rv || hash) {
         return
       }
-    }
-  },
-  {
-    immediate: true,
-  },
-)
+
+      for (const item of toc) {
+        if (item.text.toLowerCase().includes(rv)) {
+          navigateTo(`#${item.id}`)
+          return
+        }
+      }
+    },
+    {
+      immediate: true,
+    },
+  )
+}
 </script>
 <template>
   <Teleport v-if="data?.toc && data.toc.length > 1 && !!tpTarget" :to="tpTarget">

app/components/Changelog/Releases.vue

@@ -12,6 +12,7 @@ const { data: releases, error } = await useFetch<ReleaseData[]>(
 )
 
 const route = useRoute()
+const router = useRouter()
 
 const matchingDateReleases = computed(() => {
   if (!requestedDate || !releases.value) {
@@ -28,32 +29,34 @@ const matchingDateReleases = computed(() => {
   })
 })
 
-watch(
-  [() => route.hash, () => requestedDate?.toLowerCase(), releases, () => requestedVersion],
-  ([hash, date, r, rv]) => {
-    if (hash && r) {
-      // ensures the user is scrolled to the hash
-      navigateTo(hash)
-      return
-    }
-    if (hash || !date || !r) {
-      return
-    }
-    if (rv) {
-      for (const match of matchingDateReleases.value ?? []) {
-        if (match.title.toLowerCase().includes(rv)) {
-          navigateTo(`#release-${slugify(match.title)}`)
-          return
+if (import.meta.client) {
+  watch(
+    [() => route.hash, () => requestedDate?.toLowerCase(), releases, () => requestedVersion],
+    ([hash, date, r, rv]) => {
+      if (hash && r) {
+        // ensures the user is scrolled to the hash
+        navigateTo(hash, { replace: true })
+        return
+      }
+      if (hash || !date || !r) {
+        return
+      }
+      if (rv) {
+        for (const match of matchingDateReleases.value ?? []) {
+          if (match.title.toLowerCase().includes(rv)) {
+            navigateTo(`#release-${slugify(match.title)}`, { replace: true })
+            return
+          }
         }
       }
-    }
 
-    navigateTo(`#date-${date}`)
-  },
-  {
-    immediate: true,
-  },
-)
+      navigateTo(`#date-${date}`, { replace: true })
+    },
+    {
+      immediate: true,
+    },
+  )
+}
 </script>
 <template>
   <div class="flex flex-col gap-2 py-3" v-if="releases">

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

@@ -58,7 +58,7 @@ const latestVersion = computed(() => {
 })
 
 watch(
-  [version, latestVersion, packageName],
+  [version, () => latestVersion.value?.version, packageName],
   ([v, latest, name]) => {
     if (!v && latest && name) {
       const pathSegments = [...name.split('/'), 'v', latest]
@@ -138,7 +138,7 @@ defineOgImageComponent('Default', {
         <SkeletonBlock class="h-5 w-3/4 max-w-2xl rounded" />
       </section>
 
-      <Suspense v-else>
+      <Suspense v-else-if="latestVersion?.version">
         <template #default>
           <LazyChangelogReleases
             v-if="changelog?.type == 'release'"