sorting by rank + pagination

src/pages/Index.vue

@@ -9,6 +9,15 @@
         />
       </div>
     </div>
+     <div class="pagination flex justify-center mb-8">
+        <Pagination
+          :baseUrl="baseurl"
+          :currentPage="$page.entries.pageInfo.currentPage"
+          :totalPages="$page.entries.pageInfo.totalPages"
+          :maxVisibleButtons="5"
+          v-if="$page.entries.pageInfo.totalPages > 1"
+        />
+      </div>
   </Layout>
 </template>
 
@@ -16,7 +25,7 @@
 
 query($page:Int) {
 
-  entries: allBlog(perPage: 9, page: $page) @paginate {
+  entries: allBlog(perPage: 10, page: $page, sortBy: "created", order: DESC) @paginate {
     totalCount
     pageInfo {
       totalPages
@@ -49,6 +58,7 @@ query($page:Int) {
 
 <script>
 import PostListItem from "~/components/PostListItem.vue";
+import Pagination from "~/components/Pagination.vue";
 
 export default {
   metaInfo: {
@@ -56,6 +66,12 @@ export default {
   },
   components: {
     PostListItem,
+    Pagination
+  },
+  computed: {
+    baseurl: function() {
+     return ""
+    }
   },
 };
 </script>

src/pages/People.vue

@@ -5,13 +5,22 @@
         <PostListItem v-for="edge in $page.entries.edges" :key="edge.node.id" :record="edge.node" />
       </div>
     </div>
+    <div class="pagination flex justify-center mb-8">
+        <Pagination
+          :baseUrl="baseurl"
+          :currentPage="$page.entries.pageInfo.currentPage"
+          :totalPages="$page.entries.pageInfo.totalPages"
+          :maxVisibleButtons="5"
+          v-if="$page.entries.pageInfo.totalPages > 1"
+        />
+      </div>
   </Layout>
 </template>
 
 <page-query>
 
 query($page:Int) {
-  entries: allPerson(perPage: 80, page: $page) @paginate {
+  entries: allPerson(perPage: 20, page: $page, sortBy: "rank", order: DESC) @paginate {
     totalCount
     pageInfo {
       totalPages
@@ -41,7 +50,7 @@ query($page:Int) {
 </page-query>
 
 <script>
-
+import Pagination from "~/components/Pagination.vue";
 import PostListItem from '~/components/PostListItem.vue';
 
 export default {
@@ -49,7 +58,13 @@ export default {
     title: "People"
   },
   components: {
-    PostListItem
-  }
+    PostListItem,
+    Pagination
+  },
+  computed: {
+    baseurl: function() {
+     return "/people/"
+    }
+  },
 };
 </script>

src/pages/Projects.vue

@@ -5,13 +5,22 @@
         <PostListItem v-for="edge in $page.entries.edges" :key="edge.node.id" :record="edge.node" />
       </div>
     </div>
+     <div class="pagination flex justify-center mb-8">
+        <Pagination
+          :baseUrl="baseurl"
+          :currentPage="$page.entries.pageInfo.currentPage"
+          :totalPages="$page.entries.pageInfo.totalPages"
+          :maxVisibleButtons="5"
+          v-if="$page.entries.pageInfo.totalPages > 1"
+        />
+      </div>
   </Layout>
 </template>
 
 <page-query>
 
 query($page:Int) {
-  entries: allProject(perPage: 40, page: $page) @paginate {
+  entries: allProject(perPage: 10, page: $page, sortBy: "rank", order: DESC) @paginate {
     totalCount
     pageInfo {
       totalPages
@@ -20,6 +29,7 @@ query($page:Int) {
     edges {
       node {
         title
+        path
         members
         rank
         linkedin
@@ -45,15 +55,21 @@ query($page:Int) {
 </page-query>
 
 <script>
-
 import PostListItem from '~/components/PostListItem.vue';
+import Pagination from "~/components/Pagination.vue";
 
 export default {
   metaInfo: {
     title: "Projects"
   },
   components: {
-    PostListItem
-  }
+    PostListItem,
+    Pagination
+  },
+  computed: {
+    baseurl: function() {
+     return "/projects/"
+    }
+  },
 };
 </script>