migrate blog

Author: lukeocodes

pages/blog/_slug.vue

@@ -1,14 +1,28 @@
 <template>
-  <nuxt-content :document="page" class="prose lg:prose-xl max-w-none" />
+  <div
+    class="px-8 mx-auto mt-12 prose sm:px-6 md:px-4 lg:px-2 xl:px-0 xl:prose-xl lg:prose-lg md:prose-md"
+  >
+    <h2>{{ post.title }}</h2>
+    <p>{{ post.description }}</p>
+    <nuxt-content :document="post" />
+    <h3>Tags</h3>
+    <ul>
+      <li v-for="(tag, index) in post.tags" :key="index">
+        <nuxt-link :to="`/tags/${tag}`">
+          {{ tag }}
+        </nuxt-link>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script>
 export default {
-  async asyncData({ $content }) {
-    const page = await $content('index').fetch()
+  async asyncData({ $content, params: { slug } }) {
+    const post = await $content('blog', slug).fetch()
 
     return {
-      page,
+      post,
     }
   },
 }

pages/blog/index.vue

@@ -1,14 +1,38 @@
 <template>
-  <nuxt-content :document="page" class="prose lg:prose-xl max-w-none" />
+  <div>
+    <Hero heading="Latest Stories" image="/img/blog-index.jpg" />
+    <div
+      class="px-8 mx-auto mt-12 prose sm:px-6 md:px-4 lg:px-2 xl:px-0 xl:prose-xl lg:prose-lg md:prose-md"
+    >
+      <h1>Latest Stories</h1>
+      <div class="lg:grid lg:grid-cols-2 lg:gap-8">
+        <div
+          v-for="(post, index) in posts"
+          :key="index"
+          class="px-6 no-underline bg-gray-200 rounded-lg shadow-lg"
+        >
+          <h3>
+            <nuxt-link :to="`/blog/${post.slug}`">{{ post.title }}</nuxt-link>
+          </h3>
+          <p>
+            {{ post.description }}
+          </p>
+          <p>
+            <nuxt-link :to="`/blog/${post.slug}`">Read more</nuxt-link>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
   async asyncData({ $content }) {
-    const page = await $content('index').fetch()
+    const posts = await $content('blog').fetch()
 
     return {
-      page,
+      posts,
     }
   },
 }