feature: single posts

Author: enricodeleo

blog/src/App.vue

@@ -4,7 +4,9 @@
     <header class="header-main">
       <div class="row">
         <div class="column text-center">
-          <h2 class="no-margin"><strong>My Blog</strong></h2>
+          <router-link :to="{ name: 'index' }">
+            <h2 class="no-margin"><strong>My Blog</strong></h2>
+          </router-link>
         </div>
       </div>
     </header>
@@ -78,4 +80,8 @@ export default {
     padding: 1rem 0;
   }
 
+  .header-main {
+    margin-bottom: 20px;
+  }
+
 </style>

blog/src/pages/Index.vue

@@ -3,11 +3,13 @@
   <div class="container">
     <div class="row" v-for="i in Math.ceil(posts.length / 5)" style="margin-top: 25px">
       <div class="column column-20" v-for="post in posts.slice((i - 1) * 5, i * 5)">
-        <div class="card">
-          <img src="https://fakeimg.pl/300/">
-          <h5 v-html="post.title.rendered"></h5>
-          <p>{{ new Date(post.date_gmt).toLocaleString('it-IT', { year: 'numeric', month: 'numeric', day: 'numeric' }) }}</p>
-        </div>
+        <router-link :to="{ name: 'single', params: { id: post.id }}">
+          <div class="card">
+            <img src="https://fakeimg.pl/300/">
+            <h5 v-html="post.title.rendered"></h5>
+            <p>{{ new Date(post.date_gmt).toLocaleString('it-IT', { year: 'numeric', month: 'numeric', day: 'numeric' }) }}</p>
+          </div>
+        </router-link>
       </div>
     </div>
   </div>

blog/src/pages/Single.vue

@@ -1,11 +1,33 @@
 <template>
   <div class="container">
-    Single
+    <div class="row">
+      <div class="column">
+        <h3 v-html="post.title.rendered"></h3>
+      </div>
+    </div>
+    <div class="row">
+      <div class="column" v-html="post.content.rendered"></div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   name: 'SinglePage',
+
+  data() {
+    return {
+      post: [],
+    };
+  },
+
+  async mounted() {
+    const postsRequest = await fetch(`https://blog.enricodeleo.com/wp-json/wp/v2/posts/${this.$route.params.id}`);
+    try {
+      const post = this.post = await postsRequest.json();
+    } catch (error) {
+      console.log(error);
+    }
+  },
 }
 </script>