blog posts loading functional

pages/blog/[...slug].vue

@@ -1,4 +1,4 @@
-<script>
+<!-- <script>
   export default {
     async asyncData({ $content, params }) {
       const post = await $content('blog', params.slug).fetch()
@@ -6,11 +6,31 @@
       return { post }
     }
   }
-</script>
+</script> -->
 
 <template>
     <main>
-      <ContentDoc />
+      <a href="/"><-- Return Home</a>
+      <ContentDoc v-slot="{ doc }">
+        <article class="post">
+          <h1>{{ doc.title }}</h1>
+          <p>{{ doc.date }}</p>
+          <hr/>
+          <ContentRenderer :value="doc" />
+        </article>
+      </ContentDoc> 
     </main>
-  </template>
-  
+    
+    
+    <!-- <main>
+      <ContentSlot :use="$slots.title" unwrap="p" />
+      <ContentDoc />
+    </main> -->
+</template>
+  
+<style>
+  .post{
+    width: 80%;
+  }
+
+</style>