From a67c114815966104d69139a5a5f48dec42e43481 Mon Sep 17 00:00:00 2001
From: Badri Sunderarajan <badrihippo@gmail.com>
Date: Mon, 9 Mar 2020 18:45:40 +0530
Subject: [PATCH] Paginate homepage

---
 src/pages/Index.vue | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index 23a7dd6..bedc9e6 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -26,14 +26,28 @@
         <div class="post-feed">
           <Card v-for="{ node }, count in $page.posts.edges" :key="node.id" :cardData="node" :isLarge="count % 6 == 0 ? true : false" />
         </div>
+        <Pager :info="$page.posts.pageInfo" linkClass="button" style="height: 5rem; text-align:center;" />
       </div>
     </main>
   </Layout>
 </template>
 
+<style lang="css">
+
+.button {
+  color: white;
+  background: #81645B;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin: 0.5rem;
+}
+
+</style>
+
 <script>
   import Navbar from '../components/Navbar'
   import Card from '../components/Card';
+  import { Pager } from 'gridsome'
 
   export default {
     metaInfo: {
@@ -42,7 +56,9 @@
       }
     },
     components: {
-      Navbar, Card
+      Navbar,
+      Card,
+      Pager,
     },
     computed: {
       HeroBgImage(metadata) {
@@ -60,11 +76,17 @@
 </script>
 
 <page-query>
-{
+query Posts($page: Int) {
   posts: allGhostPost(
       sortBy: "published_at",
       order: DESC,
-  ) {
+      perPage: 6,
+      page: $page,
+  ) @paginate {
+    pageInfo {
+      totalPages
+      currentPage
+    }
     edges {
       node {
         title