add pagination

src/assets/style/_pagination.scss

@@ -0,0 +1,28 @@
+.pagination { 
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.paging { 
+  text-decoration: none;
+  padding: 12px 16px;
+  border: 1px solid #adadad;
+  color: grey !important;
+  background-color: #fff;
+}
+
+.paging.active {
+  color: #fff !important;
+  background-color: #38b2ac;
+}
+
+.paging:first-child {
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+
+.paging:last-child { 
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+}

src/assets/style/index.scss

@@ -4,4 +4,5 @@
 @import 'base';
 @import 'code';
 @import 'content-box';
-@import 'utils';
+@import 'utils';
+@import 'pagination';

src/pages/Index.vue

@@ -8,12 +8,21 @@
       <PostCard v-for="edge in $page.posts.edges" :key="edge.node.id" :post="edge.node"/>
     </div>
 
+    <!-- Pagination -->
+    <div class="pagination">
+      <Pager :info="$page.posts.pageInfo" linkClass="paging" prevLabel="Prev" nextLabel="Next" />
+    </div>
+
   </Layout>
 </template>
 
 <page-query>
-query {
-  posts: allPost(filter: { published: { eq: true }}) {
+query ($page: Int) {
+  posts: allPost(perPage: 6, page: $page, filter: { published: { eq: true }}) @paginate {
+    pageInfo {
+      totalPages
+      currentPage
+    }
     edges {
       node {
         id
@@ -37,11 +46,13 @@ query {
 <script>
 import Author from '~/components/Author.vue'
 import PostCard from '~/components/PostCard.vue'
+import { Pager } from 'gridsome'
 
 export default {
   components: {
     Author,
-    PostCard
+    PostCard,
+    Pager
   },
   metaInfo: {
     title: 'Hello, world!'

src/templates/Post.vue

@@ -44,6 +44,10 @@ export default {
     return {
       title: this.$page.post.title,
       meta: [
+        {
+          name: 'title',
+          content: this.$page.post.title
+        },
         {
           name: 'description',
           content: this.$page.post.description