Added Pagination

.babelrc

@@ -0,0 +1,8 @@
+{
+    "presets": [
+        "next/babel"
+    ],
+    "plugins": [
+        "inline-react-svg"
+    ]
+}

components/Pagination.jsx

@@ -0,0 +1,92 @@
+import Link from "next/link";
+import { useMemo } from "react";
+import DoubleChev from "../icons/double-chev.svg";
+import SingleChev from "../icons/single-chev.svg";
+
+const Pagination = ({ isLast, currentPage, numberOfPages }) => {
+	const { isFirst, prevRoute, nextRoute } = useMemo(
+		() => ({
+			isFirst: currentPage === 1,
+			prevRoute: `/blogs/page/${currentPage - 1}`,
+			nextRoute: `/blogs/page/${currentPage + 1}`,
+		}),
+		[currentPage]
+	);
+
+	return (
+		numberOfPages > 1 && (
+			<div className="flex items-center justify-between max-w-lg mx-auto mt-2 px-2">
+				{/* 1st and Previous btn */}
+				<div className="flex items-center space-x-2">
+					<Link href="/blogs/page/1">
+						<button
+							disabled={isFirst}
+							className="pagination-btn group">
+							<DoubleChev
+								fill={isFirst ? "white" : "#10b981"}
+								className="group-hover:fill-current group-hover:text-white"
+							/>
+						</button>
+					</Link>
+					<Link href={prevRoute}>
+						<button
+							disabled={isFirst}
+							className="pagination-btn group">
+							<SingleChev
+								fill={isFirst ? "white" : "#10b981"}
+								className="group-hover:fill-current group-hover:text-white"
+							/>
+						</button>
+					</Link>
+				</div>
+
+				<div className="flex items-center space-x-2">
+					{Array.from({ length: numberOfPages }, (_, i) => (
+						<Link
+							href={
+								currentPage === i + 1
+									? `#`
+									: `/blogs/page/${i + 1}`
+							}
+							key={i}>
+							<button
+								disabled={currentPage === i + 1}
+								className={`pagination-btn group ${
+									currentPage === i + 1 &&
+									"pagination-btn-active !opacity-100"
+								}`}>
+								{i + 1}
+							</button>
+						</Link>
+					))}
+				</div>
+
+				{/* Last and Next btn */}
+				<div className="flex items-center space-x-2">
+					<Link href={nextRoute}>
+						<button
+							disabled={isLast}
+							className="pagination-btn group rotate-180">
+							<SingleChev
+								fill={isLast ? "white" : "#10b981"}
+								className="group-hover:fill-current group-hover:text-white"
+							/>
+						</button>
+					</Link>
+					<Link href={`/blogs/page/${numberOfPages}`}>
+						<button
+							disabled={isLast}
+							className="pagination-btn group rotate-180">
+							<DoubleChev
+								fill={isLast ? "white" : "#10b981"}
+								className="group-hover:fill-current group-hover:text-white"
+							/>
+						</button>
+					</Link>
+				</div>
+			</div>
+		)
+	);
+};
+
+export default Pagination;

config/index.js

@@ -0,0 +1 @@
+export const BLOGS_PER_PAGE = 6;

jsconfig.json

@@ -14,6 +14,15 @@
             "utils/*": [
                 "./utils/*"
             ],
+            "config/*": [
+                "./config/*"
+            ],
+            "lib/*": [
+                "./lib/*"
+            ],
+            "@/icons/*": [
+                "./icons/*"
+            ],
         }
     },
     "exclude": [

lib/getPosts.js

@@ -0,0 +1,17 @@
+import fs from "fs";
+import { read } from "gray-matter";
+import path from "path";
+import { sortbyDate } from "utils/";
+
+const getPosts = () => {
+	const files = fs.readdirSync(path.join("posts"));
+	const posts = files.map(fileName => {
+		const slug = fileName.replace(".md", "");
+		const { data: frontmatter } = read(path.join("posts", fileName));
+		return { slug, ...frontmatter };
+	});
+
+	return posts.sort(sortbyDate);
+};
+
+export default getPosts;

package.json

@@ -14,6 +14,7 @@
   },
   "devDependencies": {
     "autoprefixer": "^10.2.6",
+    "babel-plugin-inline-react-svg": "^2.0.1",
     "postcss": "^8.3.5",
     "tailwindcss": "^2.2.4"
   }

pages/blogs/index.js

@@ -1,34 +1,6 @@
-import fs from "fs";
-import path from "path";
-import Layout from "components/Layout";
-import matter from "gray-matter";
-import Post from "components/Post";
-import { sortbyDate } from "utils";
-
-const BlogsPage = ({ posts }) => {
-	return (
-		<Layout title="All Blogs">
-			<h1 className="text-4xl border-b-4 p-5 mb-3">Blogs</h1>
-			<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
-				{posts.map(({ slug, ...post }) => (
-					<Post key={slug} post={{ slug, ...post }} />
-				))}
-			</div>
-		</Layout>
-	);
-};
+import BlogsPage from "./page/[pageNumber]";
+import { getStaticProps } from "./page/[pageNumber]";
 
 export default BlogsPage;
 
-export async function getStaticProps(context) {
-	const files = fs.readdirSync(path.join("posts"));
-
-	const posts = files.map(fileName => {
-		const slug = fileName.replace(".md", "");
-		const { data: frontmatter } = matter.read(path.join("posts", fileName));
-		return { slug, ...frontmatter };
-	});
-	return {
-		props: { posts: posts.sort(sortbyDate) },
-	};
-}
+export { getStaticProps };

pages/blogs/page/[pageNumber].js

@@ -0,0 +1,61 @@
+import fs from "fs";
+import path from "path";
+import Layout from "components/Layout";
+import Post from "components/Post";
+import { BLOGS_PER_PAGE } from "config";
+import getPosts from "lib/getPosts";
+import Pagination from "components/Pagination";
+
+const BlogsPage = ({ posts, numberOfPages, hasMorePages, currentPage }) => {
+	return (
+		<Layout title={`Blogs - Page ${currentPage}`}>
+			<h1 className="text-4xl border-b-4 p-5 mb-3">Blogs</h1>
+			<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
+				{posts.map(({ slug, ...post }) => (
+					<Post key={slug} post={{ slug, ...post }} />
+				))}
+			</div>
+			<Pagination
+				currentPage={currentPage}
+				isLast={!hasMorePages}
+				numberOfPages={numberOfPages}
+			/>
+		</Layout>
+	);
+};
+
+export default BlogsPage;
+
+export async function getStaticPaths() {
+	const files = fs.readdirSync(path.join("posts"));
+	const numberOfPages = Math.ceil(files.length / BLOGS_PER_PAGE);
+
+	const paths = [];
+	for (let i = 0; i < numberOfPages; i++) {
+		paths.push({ params: { pageNumber: (i + 1).toString() } });
+	}
+	return {
+		paths,
+		fallback: false,
+	};
+}
+
+export async function getStaticProps({ params }) {
+	const pageNumber = parseInt(params?.pageNumber ?? 1);
+	const files = fs.readdirSync(path.join("posts"));
+	const numberOfPages = Math.ceil(files.length / BLOGS_PER_PAGE);
+
+	const posts = getPosts();
+
+	return {
+		props: {
+			posts: posts.slice(
+				(pageNumber - 1) * BLOGS_PER_PAGE,
+				pageNumber * BLOGS_PER_PAGE
+			),
+			numberOfPages,
+			currentPage: pageNumber,
+			hasMorePages: numberOfPages > pageNumber,
+		},
+	};
+}

pages/index.js

@@ -1,10 +1,7 @@
-import fs from "fs";
-import path from "path";
 import Layout from "components/Layout";
-import matter from "gray-matter";
 import Link from "next/link";
 import Post from "components/Post";
-import { sortbyDate } from "utils";
+import getPosts from "lib/getPosts";
 
 const HomePage = ({ posts }) => {
 	return (
@@ -29,14 +26,8 @@ const HomePage = ({ posts }) => {
 export default HomePage;
 
 export async function getStaticProps(context) {
-	const files = fs.readdirSync(path.join("posts"));
-
-	const posts = files.map(fileName => {
-		const slug = fileName.replace(".md", "");
-		const { data: frontmatter } = matter.read(path.join("posts", fileName));
-		return { slug, ...frontmatter };
-	});
+	const posts = getPosts();
 	return {
-		props: { posts: posts.sort(sortbyDate).slice(0, 6) },
+		props: { posts: posts.slice(0, 6) },
 	};
 }

styles/globals.css

@@ -26,6 +26,12 @@ html::-webkit-scrollbar-thumb {
 	.nav-link {
 		@apply cursor-pointer uppercase text-base hover:text-indigo-300 opacity-80 hover:opacity-100;
 	}
+	.pagination-btn {
+		@apply cursor-pointer text-lg text-emerald-500 bg-white border border-emerald-500 py-1 px-2 rounded-full flex items-center justify-center h-10 w-10 disabled:opacity-50 disabled:text-white disabled:bg-emerald-500 disabled:border-none disabled:cursor-not-allowed hover:opacity-80 hover:bg-emerald-500 hover:border-none hover:text-white;
+	}
+	.pagination-btn-active {
+		@apply text-white bg-emerald-500 border-none;
+	}
 }
 
 /* Fix category colors in production */

tailwind.config.js

@@ -1,3 +1,5 @@
+const colors = require("tailwindcss/colors");
+
 module.exports = {
 	mode: "jit",
 	purge: [
@@ -6,7 +8,17 @@ module.exports = {
 	],
 	darkMode: false, // or 'media' or 'class'
 	theme: {
-		extend: {},
+		extend: {
+			colors: {
+				rose: colors.rose,
+				fuchsia: colors.fuchsia,
+				indigo: colors.indigo,
+				teal: colors.teal,
+				lime: colors.lime,
+				orange: colors.orange,
+				emerald: colors.emerald,
+			},
+		},
 	},
 	variants: {
 		extend: {},