Add smooth scroll options in blog

Signed-off-by: nurRiyad <[email protected]>

Author: nurRiyad

app/router.options.ts

@@ -0,0 +1,38 @@
+import type { RouterConfig } from '@nuxt/schema'
+
+// https://router.vuejs.org/api/#routeroptions
+export default <RouterConfig>{
+  scrollBehavior: (to, from, savedPosition) => {
+    // scroll to hash, useful for using to="#some-id" in NuxtLink
+    // ex: <NuxtLink to="#top"> To Top </ NuxtLink>
+    if (to.hash) {
+      // console.log('to.hash: ', to.hash)
+      return {
+        el: to.hash,
+        top: 100,
+        behavior: 'smooth',
+      }
+    }
+
+    // The remainder is optional but maybe useful as well
+
+    // if link is to same page, scroll to top with smooth behavior
+    if (to === from) {
+      return {
+        left: 0,
+        top: 0,
+        behavior: 'smooth',
+      }
+    }
+
+    // this will use saved scroll position on browser forward/back navigation
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve({
+          left: savedPosition?.left || 0,
+          top: savedPosition?.top || 0,
+        })
+      }, 500)
+    })
+  },
+}

components/blog/Toc.vue

@@ -2,7 +2,7 @@
 const { path } = useRoute()
 const articles = await queryContent(path).findOne()
 
-const links = articles.body.toc.links
+const links = articles?.body?.toc?.links || []
 </script>
 
 <template>