commit

src/lib/components/custom/post-preview.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { formatDate } from '$lib/utils';
+	import * as config from '$lib/config';
+	import type { Post } from '$lib/types';
+
+	import { dev } from '$app/environment';
+	export let post: Post;
+</script>
+
+<!-- <li class="post"> -->
+{#if post.cover}
+	<a href={post.slug} class="cover">
+		{#if dev}
+			{#await import(/* @vite-ignore */ `/src/posts/${post.slug}${post.cover}`) then { default: src }}
+				<img {src} alt={post.title} loading="lazy" />
+			{/await}
+		{:else}
+			<img
+				src="{config.repository}/raw/main/src/posts/{post.slug}{post.cover}"
+				alt={post.title}
+				loading="lazy"
+			/>
+		{/if}
+	</a>
+{/if}
+<div class="p-4">
+	{#if post.kicker}
+		<span class="kicker">{post.kicker}</span>
+	{/if}
+	<h3 class="title">
+		<a href={post.slug}>{post.title}</a>
+	</h3>
+	<p class="date">{formatDate(post.date)}</p>
+	<p class="description">{post.description}</p>
+	<div class="tags">
+		{#each post.categories as tag}
+			<span class="tag">#{tag}</span>
+		{/each}
+	</div>
+</div>
+<!-- </li> -->

src/lib/config.ts

@@ -6,3 +6,4 @@ export const url = dev
 	? 'http://localhost:5173/'
 	: 'https://el3um4s.github.io/memento-sveltekit-and-github-pages';
 export const repository = 'https://github.com/el3um4s/memento-sveltekit-and-github-pages';
+export const pagination = 6;

src/routes/+page.svelte

@@ -1,11 +1,28 @@
 <script lang="ts">
-	import { formatDate } from '$lib/utils';
+	import { flip } from 'svelte/animate';
+	import { quintOut } from 'svelte/easing';
+	import { base } from '$app/paths';
+
 	import * as config from '$lib/config';
 
-	import { dev } from '$app/environment';
-	// import { repository } from '$root/package.json';
+	import PostPreview from '$lib/components/custom/post-preview.svelte';
+	import type { Post } from '$lib/types';
+
+	// export let data;
+	let { data } = $props();
+
+	let totalPosts: Post[] = data.posts;
+	let page = $derived(parseInt(data.page ?? '0'));
+	let totalPages = Math.ceil(totalPosts.length / config.pagination);
+	let start = $derived(page * config.pagination);
+	let end = $derived(
+		page === totalPages - 1 ? totalPosts.length - 1 : start + config.pagination - 1
+	);
 
-	export let data;
+	let posts = $derived(totalPosts.slice(start, end + 1));
+
+	let nextPage = $derived(page === totalPages - 1 ? -1 : page + 1);
+	let previousPage = $derived(page === 0 ? -1 : page - 1);
 </script>
 
 <svelte:head>
@@ -15,39 +32,24 @@
 <!-- Posts -->
 <section class="list-posts">
 	<ul class="list">
-		{#each data.posts as post}
-			<li class="post">
-				{#if post.cover}
-					<a href={post.slug} class="cover">
-						{#if dev}
-							{#await import(/* @vite-ignore */ `/src/posts/${post.slug}${post.cover}`) then { default: src }}
-								<img {src} alt={post.title} loading="lazy" />
-							{/await}
-						{:else}
-							<img
-								src="{config.repository}/raw/main/src/posts/{post.slug}{post.cover}"
-								alt={post.title}
-								loading="lazy"
-							/>
-						{/if}
-					</a>
-				{/if}
-				<div class="p-4">
-					{#if post.kicker}
-						<span class="kicker">{post.kicker}</span>
-					{/if}
-					<h3 class="title">
-						<a href={post.slug}>{post.title}</a>
-					</h3>
-					<p class="date">{formatDate(post.date)}</p>
-					<p class="description">{post.description}</p>
-					<div class="tags">
-						{#each post.categories as tag}
-							<span class="tag">#{tag}</span>
-						{/each}
-					</div>
-				</div>
+		{#each posts as post (post.slug)}
+			<li class="post" animate:flip={{ easing: quintOut }}>
+				<PostPreview {post}></PostPreview>
 			</li>
 		{/each}
 	</ul>
 </section>
+
+<!-- Pagination -->
+<div>
+	{#if previousPage > 0}
+		<a href="{base}?page={previousPage}">Previous</a>
+	{/if}
+	{#if previousPage == 0}
+		<a href="{base}/">Previous</a>
+	{/if}
+
+	{#if nextPage >= 0}
+		<a href="{base}?page={nextPage}">Next</a>
+	{/if}
+</div>

src/routes/+page.ts

@@ -1,7 +1,8 @@
 import type { Post } from '$lib/types';
 
-export async function load({ fetch }) {
+export async function load({ fetch, url }) {
 	const response = await fetch('api/posts');
 	const posts: Post[] = await response.json();
-	return { posts };
+	const page = url.searchParams.get('page');
+	return { posts, page };
 }