Merge torrust#180: Add link to previous and next posts under each blo…

…g post

acdbeab Add link to previous and next posts under each blog post (Graeme Byrne)

Pull request description:

  * Add new component called `PrevNextPost.svelte` to `singletons` component folder.
  * This component is placed in the `+layout.svelte` file of `(blog-article)` route.`currentPost` and `allPosts` are passed as props to the component.
  * The component is then responsible for displaying navigation links to the next and previous blog posts based on the currently viewed post.
  * This enhances user experience by providing easy navigation between posts.
  * The component uses TypeScript for type safety and reactive statements to dynamically update the displayed links.
  * It also includes appropriate styling for a clean and visually appealing layout.

ACKs for top commit:
  josecelano:
    ACK acdbeab

Tree-SHA512: 3ee4b14064837a40ae5ab9280790a28704836742af77499866456c530d7cc1d0c07a885421afcefd534e6169fb32606242149fa232b06f145d90837541844122

src/lib/components/singletons/PrevNextPost.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import type { BlogPost } from '$lib/utils/types';
+	import Icon from '@iconify/svelte';
+
+	export let currentPost: BlogPost;
+	export let allPosts: BlogPost[];
+
+	let prevPost: BlogPost | null = null;
+	let nextPost: BlogPost | null = null;
+
+	$: {
+		if (currentPost && allPosts.length) {
+			allPosts.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
+
+			const currentIndex = allPosts.findIndex((post) => post.slug === currentPost.slug);
+
+			if (currentIndex !== -1) {
+				prevPost = currentIndex > 0 ? allPosts[currentIndex - 1] : null;
+				nextPost = currentIndex < allPosts.length - 1 ? allPosts[currentIndex + 1] : null;
+			}
+		}
+	}
+</script>
+
+<div class="container">
+	<div class="nextPost">
+		{#if nextPost}
+			<a href="/{nextPost.slug}">{nextPost.title}</a>
+			<div class="arrow arrowNext">
+				<Icon icon="material-symbols:arrow-left" width="44" height="44" style="color: #650000" />
+				<p>Next Post</p>
+			</div>
+		{:else}
+			<h3 class="inactive">You're up to date. More to come soon!</h3>
+		{/if}
+	</div>
+
+	<div class="previousPost">
+		{#if prevPost}
+			<a href="/{prevPost.slug}">{prevPost.title}</a>
+			<div class="arrow arrowPrevious">
+				<p>Previous Post</p>
+				<Icon icon="material-symbols:arrow-right" width="44" height="44" style="color: #650000" />
+			</div>
+		{:else}
+			<h3 class="inactive">You are reading our first post.</h3>
+		{/if}
+	</div>
+</div>
+
+<style lang="scss">
+	.container {
+		display: flex;
+		justify-content: space-between;
+		border-top: 1px solid #979797;
+		border-bottom: 1px solid #979797;
+	}
+
+	.nextPost,
+	.previousPost {
+		flex: 1;
+		padding-top: 1.5rem;
+		padding-bottom: 1.5rem;
+	}
+
+	.nextPost {
+		border-right: 1px solid #979797;
+	}
+
+	.previousPost {
+		text-align: right;
+	}
+
+	.arrow {
+		display: flex;
+		align-items: center;
+	}
+
+	.arrowNext {
+		justify-content: flex-start;
+	}
+
+	.arrowPrevious {
+		justify-content: flex-end;
+	}
+
+	.inactive {
+		color: gray;
+	}
+</style>

src/routes/(blog-article)/+layout.server.ts

@@ -6,6 +6,7 @@ export async function load({ url }: { url: { pathname: string } }) {
 	const post = filteredPosts.find((post) => post.slug === slug);
 
 	return {
-		post
+		post,
+		allPosts: filteredPosts
 	};
 }

src/routes/(blog-article)/+layout.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import Header from '$lib/components/organisms/Header.svelte';
 	import Footer from '$lib/components/organisms/Footer.svelte';
 	import Tag from '$lib/components/atoms/Tag.svelte';
@@ -9,10 +10,19 @@
 	import type { BlogPost } from '$lib/utils/types';
 	import RelatedPosts from '$lib/components/organisms/RelatedPosts.svelte';
 	import Image from '$lib/components/atoms/Image.svelte';
+	import PrevNextPost from '$lib/components/singletons/PrevNextPost.svelte';
+	import { allPosts } from '$lib/data/blog-posts';
+
+	export let data: { post: BlogPost; allPosts: BlogPost[] };
+	let post: BlogPost;
 
-	export let data: { post: BlogPost };
 	$: ({ post } = data);
 
+	onMount(() => {
+		console.log('Current post:', post);
+		console.log('All posts:', allPosts[0]);
+	});
+
 	let metaKeywords = keywords;
 
 	$: {
@@ -87,6 +97,8 @@
 			</div>
 		</article>
 
+		<PrevNextPost currentPost={post} {allPosts} />
+
 		{#if post.relatedPosts && post.relatedPosts.length > 0}
 			<div class="container">
 				<RelatedPosts posts={post.relatedPosts} />