Fix 404 issue

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>

components/content/ProseCode.vue

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-defineProps({
-  code: {
-    type: String,
-    default: '',
-  },
-  language: {
-    type: String,
-    default: null,
-  },
-  filename: {
-    type: String,
-    default: null,
-  },
-  highlights: {
-    type: Array as () => number[],
-    default: () => [],
-  },
-  meta: {
-    type: String,
-    default: null,
-  },
-})
-</script>
-
-<template>
-  <div>
-    <slot />
-  </div>
-</template>
-
-<style>
-pre code .line {
-  display: block;
-  min-height: 1rem;
-}
-</style>

pages/blogs/[blog].vue

@@ -2,18 +2,22 @@
 import type { BlogPost } from '@/types/blog'
 
 const { path } = useRoute()
-const articles = await queryContent(path).findOne()
+
+const { data: articles, error } = await useAsyncData(`blog-post-${path}`, () => queryContent(path).findOne())
+
+if (error.value)
+  navigateTo('/404')
 
 const data = computed<BlogPost>(() => {
   return {
-    title: articles.title || 'no-title available',
+    title: articles.value?.title || 'no-title available',
-    description: articles.description || 'no-descriptoin available',
+    description: articles.value?.description || 'no-descriptoin available',
-    image: articles.image || '/nuxt-blog/no-image_cyyits.png',
+    image: articles.value?.image || '/nuxt-blog/no-image_cyyits.png',
-    alt: articles.alt || 'no alter data available',
+    alt: articles.value?.alt || 'no alter data available',
-    ogImage: articles.ogImage || '/nuxt-blog/no-image_cyyits.png',
+    ogImage: articles.value?.ogImage || '/nuxt-blog/no-image_cyyits.png',
-    date: articles.date || 'not-date-available',
+    date: articles.value?.date || 'not-date-available',
-    tags: articles.tags || [],
+    tags: articles.value?.tags || [],
-    published: articles.published || false,
+    published: articles.value?.published || false,
   }
 })
 
@@ -87,7 +91,7 @@ useHead({
       <div
         class="prose prose-pre:max-w-xs sm:prose-pre:max-w-full prose-sm sm:prose-base md:prose-lg prose-h1:no-underline max-w-5xl mx-auto prose-zinc prose-img:rounded-lg"
       >
-        <ContentRenderer :value="articles">
+        <ContentRenderer v-if="articles" :value="articles">
           <template #empty>
             <p>No content found.</p>
           </template>