From b11fff8633e13bd3d67326ec183b5919b5d1f256 Mon Sep 17 00:00:00 2001
From: Ava Wroten <jo@wroten.me>
Date: Mon, 9 Mar 2020 22:30:49 -0500
Subject: [PATCH] Paginated blog

---
 src/assets/style/_pagination.scss | 13 +++++++++++++
 src/assets/style/index.scss       |  3 ++-
 src/pages/Index.vue               | 15 ++++++++++++---
 3 files changed, 27 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..a33a08a
--- /dev/null
+++ b/src/assets/style/_pagination.scss
@@ -0,0 +1,13 @@
+.pagination {
+  text-align: center;
+  margin: 1rem;
+
+  a {
+    padding: 1rem;
+
+    &.active {
+      color: white;
+      text-decoration: none;
+    }
+  }
+}
diff --git a/src/assets/style/index.scss b/src/assets/style/index.scss
index 60f7495..58f7fc2 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 'pagination';
+@import 'utils';
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index c1602d1..92adde9 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -8,12 +8,19 @@
       <PostCard v-for="edge in $page.posts.edges" :key="edge.node.id" :post="edge.node"/>
     </div>
 
+    <div class="pagination">
+      <Pager :info="$page.posts.pageInfo"/>
+    </div>
   </Layout>
 </template>
 
 <page-query>
-{
-  posts: allPost {
+query ($page: Int) {
+  posts: allPost(perPage: 10, page: $page) @paginate {
+    pageInfo {
+      totalPages
+      currentPage
+    }
     edges {
       node {
         id
@@ -42,11 +49,13 @@
 <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: 'Home'