update project

Author: trongcong

app-pm2.json

@@ -0,0 +1,9 @@
+{
+	"apps": [
+		{
+			"name": "techtalk",
+			"script": "npm",
+			"args": "start"
+		}
+	]
+}

common/utils.js

@@ -31,3 +31,10 @@ function pluralize(time, label) {
   }
   return time + label + 's ago'
 }
+
+export function getRandomArrayElement(arr, n) {
+  const shuffled = arr.sort(() => 0.5 - Math.random())
+
+  // Get sub-array of first n elements after shuffled
+  return shuffled.slice(0, n)
+}

components/ListPostItem.vue

@@ -5,7 +5,7 @@
       class="__title"
       :to="{
         name: 'p-slug',
-        params: { post: post, slug: post.slug }
+        params: { post: post, slug: post.slug, random_posts: random_posts }
       }"
       v-html="post.title.rendered"
     ></NuxtLink>
@@ -36,6 +36,10 @@ export default {
     post: {
       type: Object,
       default: () => {}
+    },
+    randomPosts: {
+      type: Array,
+      default: () => []
     }
   },
   computed: {

pages/blog.vue

@@ -2,7 +2,12 @@
   <div>
     <div class="list-news-wrap">
       <ul class="list-news">
-        <ListPostItem v-for="post in posts" :key="post.id" :post="post" />
+        <ListPostItem
+          v-for="post in posts"
+          :key="post.id"
+          :post="post"
+          :random_posts="random_posts"
+        />
       </ul>
       <Pagination :current-page="currentPage" :total-pages="totalPages" />
     </div>
@@ -12,6 +17,8 @@
 <script>
 import ListPostItem from '~/components/ListPostItem'
 import Pagination from '~/components/Pagination.vue'
+import { getRandomArrayElement } from '~/common/utils'
+
 export default {
   name: 'Blog',
   components: { ListPostItem, Pagination },
@@ -20,6 +27,7 @@ export default {
   data() {
     return {
       posts: [],
+      random_posts: [],
       currentPage: 1,
       totalPosts: 0,
       totalPages: 0,
@@ -29,15 +37,14 @@ export default {
   asyncData({ $axios, query, error }) {
     const page = +query.page || 1
     return $axios
-      .get(
-        `https://techtalk.vn/wp-json/wp/v2/posts?_embed&page=${page}&per_page=20`
-      )
+      .get(`//techtalk.vn/wp-json/wp/v2/posts?_embed&page=${page}&per_page=20`)
       .then((res) => {
         return {
           posts: res.data,
           totalPosts: +res.headers['x-wp-total'],
           totalPages: +res.headers['x-wp-totalpages'],
           currentPage: +page,
+          random_posts: getRandomArrayElement(res.data, 10),
           title:
             'Result page ' +
             +page +
@@ -73,7 +80,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 .list-news {
   list-style-type: none;
   padding: 0;

pages/p/_slug.vue

@@ -2,15 +2,28 @@
   <div v-if="isValidPost()">
     <h1 class="title" v-html="post.title.rendered"></h1>
     <div class="news-content" v-html="post.content.rendered"></div>
+
+    <ul class="list-news">
+      <ListPostItem
+        v-for="p in random_posts"
+        :key="p.id"
+        :post="p"
+        :random_posts="random_posts"
+      />
+    </ul>
   </div>
 </template>
 
 <script>
+import ListPostItem from '~/components/ListPostItem'
+
 export default {
   name: 'P',
+  components: { ListPostItem },
   data() {
     return {
-      post: {}
+      post: {},
+      random_posts: []
     }
   },
   head() {
@@ -58,27 +71,48 @@ export default {
         }
       : {}
   },
-  asyncData({ $axios, params, error }) {
+  async asyncData({ $axios, params, error }) {
     console.log('asyncData post single', params)
 
     if (!params.post) {
       const slug = params.slug
-      return $axios
-        .get(`https://techtalk.vn/wp-json/wp/v2/posts?_embed&slug=${slug}`)
-        .then((res) => {
-          if (!res.data.length)
-            error({ statusCode: 404, message: 'Post not found!' })
-          return {
-            post: res.data.length ? res.data[0] : []
-          }
-        })
-        .catch(function(ex) {
-          console.log('parsing failed', ex)
-          error({ statusCode: 404, message: ex })
-        })
+      try {
+        const res = await $axios.get(
+          `//techtalk.vn/wp-json/wp/v2/posts?_embed&slug=${slug}`
+        )
+        const resRd = await $axios.get(
+          `//techtalk.vn/wp-json/wp/v2/posts?_embed&categories=${
+            res.data[0].categories[0]
+          }`
+        )
+
+        if (!res.data.length)
+          error({ statusCode: 404, message: 'Post not found!' })
+        return {
+          post: res.data.length ? res.data[0] : [],
+          random_posts: resRd.data.length ? resRd.data : []
+        }
+      } catch (ex) {
+        console.log('parsing failed', ex)
+        error({ statusCode: 404, message: ex })
+      }
+      // return $axios
+      //   .get(`//techtalk.vn/wp-json/wp/v2/posts?_embed&slug=${slug}`)
+      //   .then((res) => {
+      //     if (!res.data.length)
+      //       error({ statusCode: 404, message: 'Post not found!' })
+      //     return {
+      //       post: res.data.length ? res.data[0] : []
+      //     }
+      //   })
+      //   .catch(function(ex) {
+      //     console.log('parsing failed', ex)
+      //     error({ statusCode: 404, message: ex })
+      //   })
     } else {
       return {
-        post: params.post
+        post: params.post,
+        random_posts: params.random_posts
       }
     }
   },