From d5196c48fa43df2b2f785ce74428e6b4767304f1 Mon Sep 17 00:00:00 2001
From: loks0n <22452787+loks0n@users.noreply.github.com>
Date: Sat, 29 Jul 2023 12:57:31 +0100
Subject: [PATCH] feat: paginaaaaation

---
 src/app.css                     |  4 +++
 src/routes/(index)/+page.svelte | 57 ++++++++++++++++++++++++++++++---
 2 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/src/app.css b/src/app.css
index 53df73d..5028e67 100644
--- a/src/app.css
+++ b/src/app.css
@@ -110,6 +110,10 @@ a:visited {
 	filter: brightness(0.8);
 }
 
+button {
+	font-family: 'Azeret Mono Variable', monospace;
+}
+
 article pre {
 	max-width: 100%;
 	overflow-x: scroll;
diff --git a/src/routes/(index)/+page.svelte b/src/routes/(index)/+page.svelte
index acce46c..a0f6063 100644
--- a/src/routes/(index)/+page.svelte
+++ b/src/routes/(index)/+page.svelte
@@ -3,15 +3,21 @@
 	import type { PageData } from './$types';
 
 	export let data: PageData;
+
+	const PAGE_SIZE = 5;
+
+	let page = 0;
+
+	$: posts = data.posts.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);
 </script>
 
 <svelte:head>
 	<title>{SITE_TITLE}</title>
 </svelte:head>
 
-<article>
+<article class="posts">
 	<ul>
-		{#each data.posts as post, index}
+		{#each posts as post, index}
 			<li>
 				<a href={`/${post.slug}`}>
 					{post.title}
@@ -20,20 +26,39 @@
 					{new Date(post.date).toDateString()}
 				</small>
 			</li>
-			{#if index !== data.posts.length - 1}
+			{#if index !== posts.length - 1}
 				<hr />
 			{/if}
 		{/each}
 	</ul>
 </article>
 
+<nav>
+	<button disabled={page === 0} on:click|preventDefault={() => page--}> Newer posts</button>
+
+	<small>
+		{page * PAGE_SIZE + 1} - {Math.min(data.posts.length, (page + 1) * PAGE_SIZE)} of {data.posts
+			.length}
+	</small>
+	<button
+		disabled={(page + 1) * PAGE_SIZE >= data.posts.length}
+		on:click|preventDefault={() => page++}
+	>
+		Older posts
+	</button>
+</nav>
+
 <style>
+	.posts {
+		display: flex;
+		flex-direction: column;
+	}
+
 	small {
 		color: rgb(186, 186, 186);
 		font-size: 0.75rem;
 		font-family: monospace;
 		text-align: right;
-		align-self: center;
 	}
 
 	ul {
@@ -61,4 +86,28 @@
 			font-variation-settings: 'wght' 600;
 		}
 	}
+
+	nav {
+		display: flex;
+		flex: 1;
+		flex-direction: row;
+		align-items: end;
+		justify-content: space-between;
+		margin-top: 2em;
+	}
+
+	button {
+		background: none;
+		border: none;
+		font-size: 1rem;
+		cursor: pointer;
+		text-decoration: underline;
+		color: darkslategray;
+	}
+
+	button:disabled {
+		cursor: not-allowed;
+		text-decoration: none;
+		opacity: 0.5;
+	}
 </style>