Add pagination

components/Pagination.vue

@@ -1,22 +1,73 @@
 <template>
-  <div class="w-full flex items-center justify-between space-x-2 mt-10 font-sans">
+  <nav class="w-full flex items-center justify-between space-x-2 mt-10 font-sans" v-if="pages > 1">
     <!-- Link PREV button -->
-    <button class="font-bold text-lighterblue py-2 opacity-50 cursor-not-allowed" @click="doSomething">
+    <n-link title="Prev"
+      class="font-bold text-lighterblue py-2 hover:text-lightblue focus:shadow-none focus:text-blue transition duration-75"
+      :to="page !== 1 ? goTo(page - 1) : goTo(page)"
+      :class="page === 1 ? 'opacity-50 cursor-not-allowed' : ''"
+    >
       <IconLeft />	
-    </button>
+    </n-link>
     <!-- Page numbers container -->
     <div class="flex space-x-2 text-lighterblue">
-      <div class="flex items-center justify-center px-1 h-10 cursor-pointer transition duration-75 sm:px-2">1</div>
-      <div class="flex items-center justify-center px-1 h-10 cursor-default transition duration-75 sm:px-2">&middot;&middot;&middot;</div>
-      <div class="flex items-center justify-center px-1 h-10 cursor-pointer transition duration-75 sm:px-2">3</div>
-      <div class="flex items-center justify-center px-1 h-10 cursor-default transition duration-75 sm:px-2 text-lightblue font-bold">4</div>
-      <div class="flex items-center justify-center px-1 h-10 cursor-pointer transition duration-75 sm:px-2">5</div>
-      <div class="flex items-center justify-center px-1 h-10 cursor-default transition duration-75 sm:px-2">&middot;&middot;&middot;</div>
-      <div class="flex items-center justify-center px-1 h-10 cursor-pointer transition duration-75 sm:px-2">7</div>
+      <n-link class="pagination-item cursor-pointer" :class="{'pagination-item--active': page === 1}" :to="goTo(1)">1</n-link>
+      <div class="pagination-item" v-if="page > delta + 1">&middot;&middot;&middot;</div>
+      <n-link
+        v-if="p !== 1 && p !== pages && Math.abs(p - page) < delta"
+        :class="{'pagination-item--active': page === p}"
+        class="pagination-item cursor-pointer"
+        v-for="p in pages" :key="p"
+        v-text="p"
+        :to="goTo(p)"
+      />
+      <div class="pagination-item" v-if="page < pages -  delta">&middot;&middot;&middot;</div>
+      <n-link class="pagination-item cursor-pointer" :class="{'pagination-item--active': page === pages}" :to="goTo(pages)">{{ pages }}</n-link>
     </div>
     <!-- Link NEXT button -->
-    <button class="font-bold text-lighterblue py-2 hover:text-lightblue focus:shadow-none focus:text-blue transition duration-75" @click="doSomething">
-      <IconRight />
-    </button>
-  </div>
-</template>
+    <n-link title="Next"
+      class="font-bold text-lighterblue py-2 hover:text-lightblue focus:shadow-none focus:text-blue transition duration-75"
+      :to="page !== pages ? goTo(page + 1) : goTo(page)"
+      :class="page === pages ? 'opacity-50 cursor-not-allowed' : ''"
+    >
+      <IconRight />	
+    </n-link>
+  </nav>
+</template>
+
+<script>
+const VISIBLE_PAGES_DELTA = 2
+
+export default {
+  props: {
+    page: Number,
+    posts: Number,
+    perPage: Number
+  },
+  computed: {
+    pages(){
+      return Math.ceil(this.posts / this.perPage)
+    },
+    delta() {
+      return VISIBLE_PAGES_DELTA
+    }
+  },
+  methods: {
+    goTo(page) {
+      if (page === 1) return '/'
+      return '/' + page
+    }
+  }
+}
+</script>
+
+<style>
+.pagination-item {
+  @apply flex items-center justify-center px-1 h-10 transition duration-75;
+  @screen sm {
+    @apply px-2;
+  }
+}
+.pagination-item--active {
+  @apply text-lightblue font-bold cursor-default;
+}
+</style>

pages/_homepage.vue

@@ -0,0 +1,37 @@
+<template>
+	<div class="my-grid">
+		<aside class="md:sticky top-0 lg:space-y-4">
+			<h1 class="lg:hidden mb-4">Tous les articles</h1>
+			<Sidebar :categories="categories" baseurl="articles" :main="{url: '/', title: 'Tous les articles'}"/>
+		</aside>
+
+		<div class="md:col-span-3">
+			<Articles :posts="posts" baseurl="articles" />
+			<Pagination :perPage="perPage" :page="page" :posts="totalPosts" />
+		</div>
+	</div>
+</template>
+
+<script>
+	const PER_PAGE = 12
+
+	export default {
+		async asyncData({$content, params}) {
+			const perPage = PER_PAGE;
+			const page = parseInt(params.homepage || 1) || 1;
+			const totalPosts = (await $content("posts").fetch()).length;
+			const skip = PER_PAGE * (page - 1);
+			const posts = await $content("posts")
+				.sortBy("date", "desc").skip(skip).limit(perPage).fetch();
+			const categories = await $content("categories")
+				.sortBy("ordre", "asc").fetch();
+			if (!posts.length) throw new Error('Not found')
+
+			posts.forEach((p, i) => {
+				let c = categories.find(c => p.categories.includes(c.titre));
+				p.category = c;
+			})
+			return { posts, categories, page, perPage, totalPosts };
+		}
+	}
+</script>