Finally implemented blog posts

2 files changed, 44 insertions, 6 deletions

diff --git a/pages/blog/_blog.vue b/pages/blog/_blog.vue
new file mode 100644
index 0000000..3f328eb
--- /dev/null
+++ b/pages/blog/_blog.vue
@@ -0,0 +1,33 @@
+<template>
+    <v-container>
+        <v-card>
+            <v-card-title>{{blogPost.title}}</v-card-title>
+            <v-card-subtitle>{{blogPost.description}}</v-card-subtitle>
+            <v-card-text :to="'/blog'">Back to posts</v-card-text>
+            <v-divider/>
+            <br/>
+            <v-card-text v-html="$md.render(blogPost.body)" />
+        </v-card>
+    </v-container>
+</template>
+
+<script>
+export default {
+  name: '_blog',
+  head: {
+    title: '{{blogpost.title}}'
+  },
+  async asyncData ({ params, payload }) {
+    if (payload) return { blogPost: payload }
+    else {
+      return {
+        blogPost: await require(`~/assets/content/blog/${params.blog}.json`)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/pages/blog/index.vue b/pages/blog/index.vue
index 2e10eba..5619e6b 100644
--- a/pages/blog/index.vue
+++ b/pages/blog/index.vue
@@ -7,13 +7,13 @@
             </header>
         </v-card>
         <v-container>
-            <v-col cols="6">
-                <v-card to="/">
-                    <v-card-title>Blog Post Title</v-card-title>
-                    <v-card-text>Content</v-card-text>
+            <div v-for="post in blogPosts" :key="post.title">
+                <v-card :to="'/blog/' + post.slug">
+                    <v-card-title>{{ post.title }}</v-card-title>
+                    <v-card-subtitle>Created on {{post.date}}</v-card-subtitle>
+                    <v-card-text>{{ post.description }}</v-card-text>
                 </v-card>
-                <br>
-            </v-col>
+            </div>
         </v-container>
     </div>
 </template>
@@ -23,6 +23,11 @@ export default {
   name: 'blog',
   head: {
     title: 'Blog'
+  },
+  computed: {
+    blogPosts () {
+      return this.$store.state.blogPosts
+    }
   }
 }