From 027f142642f0d8b56d77d54b7c02d27c4fb38a0b Mon Sep 17 00:00:00 2001
From: Zulfi Izzulhaq <zulfi.izzulhaq@gmail.com>
Date: Tue, 23 Jun 2020 05:34:14 +0700
Subject: [PATCH 1/2] add pagination

---
 src/assets/style/_pagination.scss | 28 ++++++++++++++++++++++++++++
 src/assets/style/index.scss       |  3 ++-
 src/pages/Index.vue               | 17 ++++++++++++++---
 3 files changed, 44 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/style/_pagination.scss

diff --git a/src/assets/style/_pagination.scss b/src/assets/style/_pagination.scss
new file mode 100644
index 0000000..2cf2134
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/assets/style/index.scss b/src/assets/style/index.scss
index 60f7495..6e20be4 100644
--- a/src/assets/style/index.scss
+++ b/src/assets/style/index.scss
@@ -4,4 +4,5 @@
 @import 'base';
 @import 'code';
 @import 'content-box';
-@import 'utils';
\ No newline at end of file
+@import 'utils';
+@import 'pagination';
\ No newline at end of file
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index d8a60c1..fd824ae 100644
--- a/src/pages/Index.vue
+++ b/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!'

From a30c9f69fa6004be4da5de97ea4dbfae0e8c70fb Mon Sep 17 00:00:00 2001
From: Zulfi Izzulhaq <zulfi.izzulhaq@gmail.com>
Date: Sun, 4 Oct 2020 09:10:59 +0700
Subject: [PATCH 2/2] add meta title in post

---
 src/templates/Post.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/templates/Post.vue b/src/templates/Post.vue
index 21f3763..4d8e80f 100644
--- a/src/templates/Post.vue
+++ b/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