fix: content page layout shift

bsdayo · May 6, 2024 · 32705ec · 32705ec
1 parent 2e9d388
commit 32705ec
Showing 1 changed file with 15 additions and 8 deletions.
diff --git a/.vitepress/theme/Layout.vue b/.vitepress/theme/Layout.vue
@@ -63,20 +63,27 @@ onMounted(() => {
   )
 })
 
-// Post related
+// Current post
 const currentPost = ref<Post | undefined>(undefined)
+watch(
+  () => page.value.relativePath,
+  (newPath) => {
+    // Find current post
+    const postId = newPath.match(/posts\/(.*)\//)?.[1]
+    currentPost.value = postId ? posts.find((post) => post.id === postId) : undefined
+  },
+  { immediate: true }
+)
+
+// Process markdown image
 const mdImgSelector = '.vp-doc img'
 onMounted(() => {
   watch(
-    () => page.value.relativePath,
-    async (newPath) => {
+    () => currentPost.value,
+    async (post) => {
+      if (!post) return
       await nextTick() // Wait for the DOM to update
 
-      // Find current post
-      const postId = newPath.match(/posts\/(.*)\//)?.[1]
-      if (!postId) return
-      currentPost.value = posts.find((post) => post.id === postId)
-
       // Append alt text to images
       document.querySelectorAll(mdImgSelector).forEach((img) => {
         const alt = img.attributes.getNamedItem('alt')