feat: add utils | page

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.

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 {
 }

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
+  }
+}

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));
+};

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,
+    },
+  ];
+};

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',
+};