feat: add tag page

pages/tag/_tag.vue

@@ -0,0 +1,59 @@
+<template>
+  <section class="tags-page-wrapper">
+    <div class="tags-page__header">
+      <h2>
+        Tag: {{ $route.params.tag }}
+      </h2>
+    </div>
+    <div class="tags-page__content-wrapper">
+      <ListBlog :list-blogs="blogsByTag" />
+    </div>
+  </section>
+</template>
+
+<script>
+import { Vue, Component } from 'nuxt-property-decorator'
+import ListBlog from '@/components/organisms/ListBlog.vue'
+
+@Component({
+  components: {
+    ListBlog
+  },
+  async asyncData ({ $content, params }) {
+    /*
+     * Folder inside /content
+     */
+    const path = 'blog'
+    const blog = await $content(path, { deep: true })
+      .only(['title', 'description', 'image', 'slug', 'published', 'tags'])
+      .sortBy('published', 'desc')
+      .fetch()
+
+    const blogsByTag = blog.filter((article) => {
+      const blogTags = article.tags.map(x => x.toLowerCase())
+      return blogTags.includes(params.tag)
+    })
+
+    return {
+      blogsByTag
+    }
+  },
+  head () {
+    return {
+      title: `Blog Tagged - ${this.captialise(this.$route.params.tag)}`,
+      link: [
+        {
+          hid: 'canonical',
+          rel: 'canonical',
+          href: `${process.env.baseUrl}/tags/${this.$route.params.tag}`
+        }
+      ]
+    }
+  }
+})
+export default class TagPage extends Vue {
+  captialise (text) {
+    return text.charAt(0).toUpperCase() + text.slice(1)
+  }
+}
+</script>

pages/tag/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <div class="flex justify-center">
+      <h2
+        class="text-center text-3xl mb-4 uppercase bg-black text-white inline-block mx-auto px-2"
+      >
+        All Tags
+      </h2>
+    </div>
+    <ul>
+      <li v-for="tag in tags" :key="tag" class="text-center mb-2">
+        <nuxt-link
+          :to="{ name: 'tags-tag', params: { tag: tag.toLowerCase() } }"
+          class="text-4xl hover:underline"
+        >
+          {{ tag }}
+        </nuxt-link>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { IContentDocument } from '@nuxt/content/types/content'
+import { Vue, Component } from 'nuxt-property-decorator'
+
+@Component({
+  name: 'TagListPage',
+  async asyncData ({ $content }) {
+    function onlyUnique (value: string, index: number, self: string[]) {
+      return self.indexOf(value) === index
+    }
+    const blog: IContentDocument[] = await $content('blog')
+      .only(['tags'])
+      .fetch<IContentDocument[]>()
+
+    /**
+     * Tags của tất cả pài viết
+     */
+    const tags = blog
+      .flatMap(blog => blog.tags)
+      .filter(onlyUnique)
+
+    return {
+      tags
+    }
+  },
+  head () {
+    return {
+      title: 'Article Tags - Learning Laravel and VueJS',
+      link: [
+        {
+          hid: 'canonical',
+          rel: 'canonical',
+          href: `${process.env.baseUrl}/tags`
+        }
+      ]
+    }
+  }
+})
+export default class TagListPage extends Vue {}
+</script>