add prev/next post

src/lib/BlogCard/PostOuter.svelte

@@ -7,6 +7,6 @@
 	<slot />
 
 	{#if url}
-		<a href={url}>View on Ghost</a>
+		<a href={url} class="text-center">View on Ghost</a>
 	{/if}
 </div>

src/routes/blog/[title]/+page.server.ts

@@ -4,7 +4,10 @@ import fetchApi from "$lib/ghost";
 export const load = (async ({ params }) => {
 	const data = await fetchApi("posts/slug/" + params.title);
 
+	const allPosts = await fetchApi("posts");
+
 	return {
-		post: data.posts[0]
+		post: data.posts[0],
+		allPosts: allPosts
 	};
 }) satisfies PageServerLoad;

src/routes/blog/[title]/+page.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
+	import { PostOuter, Title, Meta, PostContent, ReadMore, PostsContainer } from "$lib/BlogCard";
+
 	import type { PageData } from "./$types";
 	export let data: PageData;
 
-	import { PostOuter, Title, Meta, PostContent } from "$lib/BlogCard";
+	$: index = data.allPosts.posts.findIndex((post: { slug: string; }) => post.slug === data.post.slug);
+	$: next = data.allPosts.posts[index - 1];
+	$: previous = data.allPosts.posts[index + 1];
 </script>
 
 <svelte:head>
@@ -15,4 +19,31 @@
 		<Meta post={data.post} isPost />
 	</div>
 	<PostContent {data} />
-</PostOuter>
+</PostOuter>
+<div class="flex flex-row flex-wrap justify-center my-4">
+	<PostsContainer>
+		{#if previous}
+			<PostOuter>
+				<h1 class="more-posts">Previous post</h1>
+				<Title post={previous} />
+				<Meta post={previous} />
+				<ReadMore post={previous} />
+			</PostOuter>
+		{/if}
+		
+		{#if next}
+			<PostOuter>
+				<h1 class="more-posts">Next post</h1>
+				<Title post={next} />
+				<Meta post={next} />
+				<ReadMore post={next} />
+			</PostOuter>
+		{/if}
+	</PostsContainer>
+</div>
+
+<style>
+	.more-posts {
+		@apply border-b-solid border-b-grey border-b-1 m-0;
+	}
+</style>