From 5036d3602f02896df2fb896db2413deb33106b23 Mon Sep 17 00:00:00 2001
From: kmacoders <hungkids3003@gmail.com>
Date: Thu, 1 Jul 2021 00:06:02 +0700
Subject: [PATCH] feat: add utils | page

---
 content/blog/first-blog-post-ehandy.md | 23 +++++++++++
 pages/blog/page/_page.vue              | 23 +++++++++++
 utils/getContent.js                    | 48 ++++++++++++++++++++++
 utils/getRoutes.js                     |  6 +++
 utils/getSiteMeta.js                   | 56 ++++++++++++++++++++++++++
 utils/global.js                        | 18 +++++++++
 6 files changed, 174 insertions(+)
 create mode 100644 content/blog/first-blog-post-ehandy.md
 create mode 100644 utils/getContent.js
 create mode 100644 utils/getRoutes.js
 create mode 100644 utils/getSiteMeta.js
 create mode 100644 utils/global.js

diff --git a/content/blog/first-blog-post-ehandy.md b/content/blog/first-blog-post-ehandy.md
new file mode 100644
index 0000000..594b468
--- /dev/null
+++ b/content/blog/first-blog-post-ehandy.md
@@ -0,0 +1,23 @@
+---
+title: Fisrt Blog Post eHandy
+description: 'Empower your NuxtJS application with @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.'
+image: 'https://cdn.emk.dev/templates/featured-image.png'
+tags: ['VueJS', 'Nuxt']
+published: '2021-06-30'
+---
+
+## Getting started
+
+Empower your NuxtJS application with `@nuxtjs/content` module: write in a `content/` directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a **Git-based Headless CMS**.
+
+## Writing content
+
+Learn how to write your `content/`, supporting Markdown, YAML, CSV and JSON: https://content.nuxtjs.org/writing.
+
+## Fetching content
+
+Learn how to fetch your content with `$content`: https://content.nuxtjs.org/fetching.
+
+## Displaying content
+
+Learn how to display your Markdown content with the `<nuxt-content>` component directly in your template: https://content.nuxtjs.org/displaying.
diff --git a/pages/blog/page/_page.vue b/pages/blog/page/_page.vue
index c4cfeaa..19e8a50 100644
--- a/pages/blog/page/_page.vue
+++ b/pages/blog/page/_page.vue
@@ -14,6 +14,7 @@
 
 <script>
 import { Vue, Component } from 'nuxt-property-decorator'
+import getContent from '@/utils/getContent'
 import FeaturedBlog from '@/components/organisms/FeaturedBlog'
 import ListBlog from '@/components/organisms/ListBlog.vue'
 
@@ -21,7 +22,29 @@ import ListBlog from '@/components/organisms/ListBlog.vue'
   components: {
     FeaturedBlog,
     ListBlog
+  },
+  async asyncData ({ $content, params, error }) {
+    const content = await getContent($content, params, error, 'blog')
+
+    console.log(content)
+    return {
+      allArticles: content.allArticles,
+      paginatedArticles: content.paginatedArticles
+    }
+  },
+  head () {
+    return {
+      title: `Blog page ${this.$route.params.page} - eHanndy`,
+      link: [
+        {
+          hid: 'canonical',
+          rel: 'canonical',
+          href: `${this.$config.baseUrl}/blog/page/${this.$route.params.page}`
+        }
+      ]
+    }
   }
+
 })
 export default class PageBlog extends Vue {
 }
diff --git a/utils/getContent.js b/utils/getContent.js
new file mode 100644
index 0000000..269c4b8
--- /dev/null
+++ b/utils/getContent.js
@@ -0,0 +1,48 @@
+export default async ($content, params, error, path) => {
+  const currentPage = parseInt(params.page)
+  /**
+   * Số items trên 1 page
+   */
+  const perPage = 14
+  const allArticles = await $content(path).fetch()
+  const totalArticles = allArticles.length
+
+  /**
+   * Số trang
+   * Tổng items / items trên 1 page
+   */
+  const lastPage = Math.ceil(totalArticles / perPage)
+  const lastPageCount = totalArticles % perPage
+
+  /**
+   * Tính số items cần bỏ qua khi get
+   */
+  const skipNumber = () => {
+    if (currentPage === 1) {
+      return 0
+    }
+    if (currentPage === lastPage) {
+      return totalArticles - lastPageCount
+    }
+    return (currentPage - 1) * perPage
+  }
+
+  /**
+   * get items skip
+   */
+  const paginatedArticles = await $content(path)
+    .only(['title', 'description', 'image', 'slug', 'tags', 'published'])
+    .sortBy('published', 'desc')
+    .limit(perPage)
+    .skip(skipNumber())
+    .fetch()
+
+  if (currentPage === 0 || !paginatedArticles.length) {
+    return error({ statusCode: 404, message: 'No articles found!' })
+  }
+
+  return {
+    allArticles,
+    paginatedArticles
+  }
+}
diff --git a/utils/getRoutes.js b/utils/getRoutes.js
new file mode 100644
index 0000000..dc6714c
--- /dev/null
+++ b/utils/getRoutes.js
@@ -0,0 +1,6 @@
+export default async () => {
+  const { $content } = require('@nuxt/content');
+  const files = await $content({ deep: true }).only(['path']).fetch();
+
+  return files.map((file) => (file.path === '/index' ? '/' : file.path));
+};
diff --git a/utils/getSiteMeta.js b/utils/getSiteMeta.js
new file mode 100644
index 0000000..8329b14
--- /dev/null
+++ b/utils/getSiteMeta.js
@@ -0,0 +1,56 @@
+import global from './global';
+
+export default (meta) => {
+  return [
+    {
+      hid: 'description',
+      name: 'description',
+      content: (meta && meta.description) || global.siteDesc,
+    },
+    {
+      hid: 'og:type',
+      property: 'og:type',
+      content: (meta && meta.type) || global.siteType,
+    },
+    {
+      hid: 'og:url',
+      property: 'og:url',
+      content: (meta && meta.url) || global.siteUrl,
+    },
+    {
+      hid: 'og:title',
+      property: 'og:title',
+      content: (meta && meta.title) || global.siteTitle,
+    },
+    {
+      hid: 'og:description',
+      property: 'og:description',
+      content: (meta && meta.description) || global.siteDesc,
+    },
+    {
+      hid: 'og:image',
+      property: 'og:image',
+      content: (meta && meta.mainImage) || global.mainImage,
+    },
+    {
+      hid: 'twitter:url',
+      name: 'twitter:url',
+      content: (meta && meta.url) || global.siteUrl,
+    },
+    {
+      hid: 'twitter:title',
+      name: 'twitter:title',
+      content: (meta && meta.title) || global.siteTitle,
+    },
+    {
+      hid: 'twitter:description',
+      name: 'twitter:description',
+      content: (meta && meta.description) || global.siteDesc,
+    },
+    {
+      hid: 'twitter:image',
+      name: 'twitter:image',
+      content: (meta && meta.mainImage) || global.mainImage,
+    },
+  ];
+};
diff --git a/utils/global.js b/utils/global.js
new file mode 100644
index 0000000..45f6011
--- /dev/null
+++ b/utils/global.js
@@ -0,0 +1,18 @@
+/*
+  these are the global variables, make sure to change them for yours
+  you can add anything you like here, just import this file and
+  access any variable via object syntax global.yourVarName
+*/
+export default {
+  siteUrl: 'https://example.com',
+  siteName: 'Starter Blog',
+  author: 'Joe Blogs',
+  twitterHandle: '@joeblogs',
+  twitterURL: 'https://twitter.com/garethredfern',
+  githubURL: 'https://github.com/garethredfern',
+  siteTitle: 'Add Your Main Site Title Here',
+  siteDesc:
+    'A description for your site here, this will show on the home page.',
+  mainImage: '',
+  siteType: 'website',
+};