sorting by rank + pagination

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>