update content render page

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

components/content/CustomTag.vue

@@ -1,19 +0,0 @@
-<template>
-  <div class="flex w-full justify-center text-xs md:text-base">
-    <div class="md:flex text-black content-center gap-7">
-      <div class="flex items-center">
-        <LogoDate />
-        <slot name="date"></slot>
-      </div>
-      <div class="flex items-center gap-2 flex-wrap underline">
-        <LogoTag />
-        <slot name="tag1"></slot>
-        <slot name="tag2"></slot>
-        <slot name="tag3"></slot>
-        <slot name="tag4"></slot>
-        <slot name="tag5"></slot>
-        <slot></slot>
-      </div>
-    </div>
-  </div>
-</template>

components/content/CustomTitle.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="text-center mt-8">
-    <slot />
-  </div>
-</template>

content/blogs/1. hello-world.md

@@ -1,34 +1,15 @@
 ---
-title: 'How to create a blog site with nuxt3 and nuxt-content-v2 Par 1'
+title: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt
-description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eum, odit earum porro beatae explicabo quisquam asperiores aliquam similique ipsam non deleniti qui sint ad maxime culpa accusantium. Deleniti.'
+date: 1st Jan 2023
-time: 10Jan2022
+description: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat,
-tags: ['sdf', 'javascript', 'nuxt']
+image: https://res.cloudinary.com/dmecmyphj/image/upload/v1673372476/nuxt-blog/intro-to-ts-dmecmyphj_rox0jz.jpg
+alt: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt
+ogImage: https://res.cloudinary.com/dmecmyphj/image/upload/v1673372476/nuxt-blog/intro-to-ts-dmecmyphj_rox0jz.jpg
+provider: cloudinary
+tags: ['nuxt', 'nuxt-content', 'vue', 'typescirpt']
+published: true
 ---
 
-::CustomTitle
-
-# How to create a blog size with nuxt3 and nuxt-content-v2
-
-::
-
-<img class="m-auto rounded-2xl shadow-lg h-52 md:h-96 w-4/5 content-center object-cover" src="/blogs/hello-man/cover.jpg" alt="resdlkf"/>
-
-::CustomTag
-
-#date
-31 Dec 2023
-
-#tag1
-Javascript
-
-#tag2
-Typescipt
-
-#tag3
-Typescipt
-
-::
-
 ## Details
 
 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam incidunt, ipsa ea voluptatibus quas vitae dolorem officia vero rerum at atque non magni esse, enim ducimus asperiores numquam perspiciatis quaerat, quisquam placeat. Explicabo vero ad, reprehenderit veritatis itaque architecto cumque provident odit modi accusantium necessitatibus dolorem pariatur recusandae possimus tempora.

pages/blogs/[blog].vue

@@ -1,9 +1,59 @@
+<script setup lang="ts">
+import type { BlogPost } from '@/types/blog'
+const { path } = useRoute()
+const articles = await queryContent(path).findOne()
+
+const data = computed<BlogPost>(() => {
+  return {
+    title: articles.title || 'no-title available',
+    description: articles.description || 'no-descriptoin available',
+    image:
+      articles.image ||
+      'https://res.cloudinary.com/dmecmyphj/image/upload/v1673378250/nuxt-blog/no-image_cyyits.png',
+    alt: articles.alt || 'no alter data available',
+    ogImage:
+      articles.ogImage ||
+      'https://res.cloudinary.com/dmecmyphj/image/upload/v1673378250/nuxt-blog/no-image_cyyits.png',
+    provider: articles.provider,
+    date: articles.date || 'not-date-available',
+    tags: articles.tags || [],
+    published: articles.published || false,
+  }
+})
+</script>
+
 <template>
   <main class="px-6 container max-w-5xl mx-auto">
+    <header>
+      <h1 class="text-5xl m-7 font-bold text-center">{{ data.title || '' }}</h1>
+      <NuxtImg
+        :src="data.image || ''"
+        :alt="data.alt || ''"
+        class="m-auto rounded-2xl shadow-lg h-52 md:h-96 w-4/5 content-center object-cover"
+      />
+      <div class="flex w-full justify-center text-xs md:text-base my-8">
+        <div class="md:flex text-black content-center gap-7">
+          <div class="flex items-center font-semibold">
+            <LogoDate />
+            <p>{{ data.date || '' }}</p>
+          </div>
+          <div class="flex items-center gap-2 flex-wrap my-5">
+            <LogoTag />
+            <template v-for="tag in data.tags">
+              <p class="bg-gray-200 rounded-md px-3 py-1 font-semibold">{{ tag }}</p>
+            </template>
+          </div>
+        </div>
+      </div>
+    </header>
     <div
       class="prose md:prose-lg prose-h1:no-underline max-w-5xl mx-auto prose-zinc prose-img:rounded-lg"
     >
-      <ContentDoc />
+      <ContentDoc>
+        <template #not-found>
+          <h1>Document not found</h1>
+        </template>
+      </ContentDoc>
     </div>
   </main>
 </template>

pages/blogs/index.vue

@@ -15,7 +15,7 @@ const { data } = await useAsyncData('home', () => queryContent('/blogs').sort({
   <main class="container max-w-5xl mx-auto text-zinc-600">
     <ArchiveHero />
     <div class="space-y-5 my-5">
-      <template v-for="post in data" :key="n">
+      <template v-for="post in data" :key="post.title">
         <ArchiveCard
           :title="post.title"
           :description="post.description"

pages/categories/[category].vue

@@ -32,7 +32,7 @@ const { data } = await useAsyncData('home', () =>
   <main class="container max-w-5xl mx-auto text-zinc-600">
     <CategoryTopic />
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-      <template v-for="post in data" :key="n">
+      <template v-for="post in data" :key="post.title">
         <BlogCard
           :title="post.title"
           :description="post.description"

pages/categories/index.vue

@@ -30,7 +30,7 @@ const topics = [
   <main class="container max-w-5xl mx-auto text-zinc-600">
     <CategoryHero />
     <div class="flex flex-wrap px-6 mt-12 gap-3">
-      <template v-for="topic in topics" :key="n">
+      <template v-for="topic in topics" :key="topic">
         <CategoryCard :title="makeFirstCharUpper(topic)" />
       </template>
     </div>

pages/index.vue

@@ -19,7 +19,7 @@ const { data } = await useAsyncData('home', () =>
   <main class="container max-w-5xl mx-auto text-zinc-600">
     <MainHero />
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-      <template v-for="post in data" :key="n">
+      <template v-for="post in data" :key="post.title">
         <BlogCard
           :title="post.title"
           :description="post.description"

types/blog.ts

@@ -0,0 +1,11 @@
+export interface BlogPost {
+  title: string
+  date: string
+  description: string
+  image: string
+  alt: string
+  ogImage: string
+  provider: string
+  tags: string[]
+  published: boolean
+}