diff --git a/src/layouts/PostDetails.astro b/src/layouts/PostDetails.astro index 3c1a53d42..8ab45a74b 100644 --- a/src/layouts/PostDetails.astro +++ b/src/layouts/PostDetails.astro @@ -11,9 +11,10 @@ import { SITE } from "@config"; export interface Props { post: CollectionEntry<"blog">; + posts: CollectionEntry<"blog">[]; } -const { post } = Astro.props; +const { post, posts } = Astro.props; const { title, @@ -44,6 +45,19 @@ const layoutProps = { ogImage: ogUrl, scrollSmooth: true, }; + +/* ========== Prev/Next Posts ========== */ + +const allPosts = posts.map(({ data: { title }, slug }) => ({ + slug, + title, +})); + +const currentPostIndex = allPosts.findIndex(a => a.slug === post.slug); + +const prevPost = currentPostIndex !== 0 ? allPosts[currentPostIndex - 1] : null; +const nextPost = + currentPostIndex !== allPosts.length ? allPosts[currentPostIndex + 1] : null; --- @@ -94,6 +108,72 @@ const layoutProps = { + + + + + + { + prevPost && ( + + + <> + + + > + + + Previous Post + {prevPost.title} + + + ) + } + { + nextPost && ( + + + Next Post + {nextPost.title} + + + <> + + + > + + + ) + } + @@ -107,7 +187,7 @@ const layoutProps = { } - diff --git a/src/pages/posts/[slug]/index.astro b/src/pages/posts/[slug]/index.astro index f24a117ee..cce869b1f 100644 --- a/src/pages/posts/[slug]/index.astro +++ b/src/pages/posts/[slug]/index.astro @@ -1,6 +1,7 @@ --- import { type CollectionEntry, getCollection } from "astro:content"; import PostDetails from "@layouts/PostDetails.astro"; +import getSortedPosts from "@utils/getSortedPosts"; export interface Props { post: CollectionEntry<"blog">; @@ -18,6 +19,9 @@ export async function getStaticPaths() { } const { post } = Astro.props; + +const posts = await getCollection("blog"); +const sortedPosts = getSortedPosts(posts); --- - +