From ddba1fc23ecac835a921254f89345a3c0aed1d34 Mon Sep 17 00:00:00 2001
From: Akis <mavrommatisakis@gmail.com>
Date: Tue, 3 Jan 2023 19:58:24 +0200
Subject: [PATCH] add prev/next post

---
 src/lib/BlogCard/PostOuter.svelte       |  2 +-
 src/routes/blog/[title]/+page.server.ts |  5 +++-
 src/routes/blog/[title]/+page.svelte    | 35 +++++++++++++++++++++++--
 3 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/lib/BlogCard/PostOuter.svelte b/src/lib/BlogCard/PostOuter.svelte
index 20b0653..44369c6 100644
--- a/src/lib/BlogCard/PostOuter.svelte
+++ b/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>
\ No newline at end of file
diff --git a/src/routes/blog/[title]/+page.server.ts b/src/routes/blog/[title]/+page.server.ts
index 4d8c9fa..9c4478b 100644
--- a/src/routes/blog/[title]/+page.server.ts
+++ b/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;
diff --git a/src/routes/blog/[title]/+page.svelte b/src/routes/blog/[title]/+page.svelte
index 139306d..b114438 100644
--- a/src/routes/blog/[title]/+page.svelte
+++ b/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>
\ No newline at end of file
+</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>
\ No newline at end of file