refactor: tags page

components/templates/tags/Hero.vue

@@ -0,0 +1,24 @@
+<template>
+  <section class="hero is-info">
+    <div class="hero-body">
+      <h1 class="title is-3 has-text-centered">
+        {{ title }}
+      </h1>
+      <p class="subtitle has-text-centered">
+        {{ subTitle }}
+      </p>
+    </div>
+  </section>
+</template>
+<script lang="ts">
+import { Vue, Component, Prop } from 'nuxt-property-decorator'
+
+@Component
+export default class Hero extends Vue {
+  @Prop({ type: String })
+  title!: string
+
+  @Prop({ type: String })
+  subTitle!: string;
+}
+</script>

components/templates/tags/ListTags.vue

@@ -0,0 +1,25 @@
+<template>
+  <section class="section">
+    <div class="container">
+      <ul class="columns">
+        <li v-for="tag in tags" :key="tag" class="column">
+          <nuxt-link
+            :to="{ name: 'tags-tag', params: { tag: tag.toLowerCase() } }"
+            class="text-4xl hover:underline"
+          >
+            {{ tag }}
+          </nuxt-link>
+        </li>
+      </ul>
+    </div>
+  </section>
+</template>
+<script lang="ts">
+import { Vue, Component, Prop } from 'nuxt-property-decorator'
+
+@Component
+export default class ListTags extends Vue {
+  @Prop({ type: Array })
+  tags!: string[]
+}
+</script>

pages/blog/_slug.vue

@@ -1,6 +1,10 @@
 <template>
   <article class="container content">
-    <nuxt-content :document="blogDetail" />
+    <div class="columns">
+      <div class="column">
+        <nuxt-content :document="blogDetail" />
+      </div>
+    </div>
   </article>
 </template>
 
@@ -10,7 +14,7 @@ import global from '@/utils/global'
 import getSiteMeta from '@/utils/getSiteMeta'
 
 @Component({
-  name: 'ArticlePage',
+  name: 'BlogPage',
   async asyncData ({ $content, params }) {
     const findedBlog = await $content('blog', { deep: true })
       .where({ slug: params.slug })

pages/blog/index.vue

@@ -2,7 +2,7 @@
   <section class="section">
     <div class="container">
       <div class="columns">
-        <div class="column is-10 is-offset-1">
+        <div class="column">
           <FeaturedBlog :first-blog="allArticles[0]" />
           <hr>
           <ListBlog :list-blogs="paginatedArticles" />

pages/tags/_tag.vue

@@ -1,14 +1,16 @@
 <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>
+  <div class="container">
+    <section class="section 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>
+  </div>
 </template>
 
 <script>

pages/tags/index.vue

@@ -1,29 +1,24 @@
 <template>
-  <section>
-    <div class="container">
-      <h1 class="title is-3 mt-3 mb-3 is-flex is-justify-content-center is-align-items-center">
-        All Tags
-      </h1>
-      <ul class="columns">
-        <li v-for="tag in tags" :key="tag" class="column">
-          <nuxt-link
-            :to="{ name: 'tags-tag', params: { tag: tag.toLowerCase() } }"
-            class="text-4xl hover:underline"
-          >
-            {{ tag }}
-          </nuxt-link>
-        </li>
-      </ul>
-    </div>
-  </section>
+  <div class="container">
+    <HeroSection
+      title="Tags"
+      sub-title="All tags in eHandy"
+    />
+    <ListTags :tags="tags" />
+  </div>
 </template>
 
 <script lang="ts">
 import { IContentDocument } from '@nuxt/content/types/content'
 import { Vue, Component } from 'nuxt-property-decorator'
+import Hero from '@/components/templates/tags/Hero.vue'
+import ListTags from '@/components/templates/tags/ListTags.vue'
 
 @Component({
-  name: 'TagListPage',
+  components: {
+    HeroSection: Hero,
+    ListTags
+  },
   async asyncData ({ $content }) {
     function onlyUnique (value: string, index: number, self: string[]) {
       return self.indexOf(value) === index