blog posts loading functional

content/blog/about-this-site.md

@@ -0,0 +1,20 @@
+---
+
+title: 'About This Site'
+description: 'A look behind the technologies and inspiration for this site'
+date: '20-07-2024'
+
+---
+
+
+
+# meow
+
+## meow meow
+
+### meow meow meow
+
+nya nya nya 
+
+
+- nyaaaaaa

content/blog/first-post.md

@@ -0,0 +1,18 @@
+---
+
+title: 'First Blog Post'
+description: 'A simple test post to make sure everythings working'
+date: '20-07-2024'
+
+---
+
+title
+
+# Hello world
+
+Markdown test post 
+
+- meow
+- nya
+
+dsadsa

content/blog/testPost.md

@@ -1,7 +0,0 @@
-# Hello world
-
-Markdown test post 
-
-- meow
-
-dsadsa

nuxt.config.ts

@@ -2,5 +2,9 @@
 export default defineNuxtConfig({
   compatibilityDate: '2024-04-03',
   devtools: { enabled: true },
-  css: ["@/assets/css/main.scss"]
-})
+  css: ["@/assets/css/main.scss"],
+  modules: ["@nuxt/content"],
+  content: {
+    documentDriven: false
+  }
+})

package.json

@@ -10,6 +10,7 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@nuxt/content": "^2.13.2",
     "nuxt": "^3.12.3",
     "vue": "latest"
   },

pages/blog.vue

@@ -1,3 +0,0 @@
-<template>
-    <p>meow~</p>
-</template>

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>