refactor: show 4 random entries instead of nav forward/back on posts

src/modules/blog-post.ts

@@ -11,3 +11,17 @@ export function getPostSlug(post: CollectionEntry<'blog'>) {
 	} = post;
 	return `${pubDate.getFullYear()}/${padTwo(pubDate.getUTCMonth() + 1)}/${padTwo(pubDate.getUTCDate())}/${slug}`;
 }
+
+export function getRandomEntries(posts: Array<CollectionEntry<'blog'>>, count: number, excludeSlug?: string) {
+	const shuffled = posts.slice(0).filter((e) => getPostSlug(e) !== excludeSlug);
+	let i = shuffled.length - 1;
+	const min = i - count;
+	while (i > min) {
+		const index = Math.floor((i + 1) * Math.random());
+		const temp = shuffled[index]!;
+		shuffled[index] = shuffled[i]!;
+		shuffled[i] = temp;
+		i -= 1;
+	}
+	return shuffled.slice(min);
+}

src/pages/blog/[...slug].astro

@@ -1,46 +1,31 @@
 ---
 import { getCollection } from 'astro:content';
 import { Image } from 'astro:assets';
+import { createMarkdownProcessor } from '@astrojs/markdown-remark';
 import Aside from '../../components/Aside.astro';
 import AuthorMeta from '../../components/AuthorMeta.astro';
 import Base from '../../layouts/Base.astro';
 import Link from '../../components/Link.astro';
 import PageInfo from '../../components/PageInfo.astro';
-import PageNav from '../../components/PageNav.astro';
 import Prose from '../../components/Prose.astro';
 import TocList from '../../components/TocList.astro';
 import { Share, ShareLink } from '../../components/Share';
 import type { MarkdownHeading } from 'astro';
-import { getPostSlug } from '../../modules/blog-post';
+import { getPostSlug, getRandomEntries } from '../../modules/blog-post';
 
 export async function getStaticPaths() {
-	const posts = (
-		await getCollection('blog', ({ data }) => {
-			return import.meta.env.DEV || !data.draft;
-		})
-	)
+	const collection = await getCollection('blog', ({ data }) => {
+		return import.meta.env.DEV || !data.draft;
+	});
+	const posts = collection
 		.sort((a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf())
 		.map((post) => {
+			const slug = getPostSlug(post);
 			return {
-				params: { slug: getPostSlug(post) },
-				props: post,
+				params: { slug },
+				props: { ...post, randomEntries: getRandomEntries(collection, 4, slug) },
 			};
-		})
-		.filter(Boolean);
-
-	for (let i = 0; i < posts.length; i++) {
-		const prev = posts[i - 1];
-		const next = posts[i + 1];
-		Object.defineProperty(posts[i]!.props, 'siblings', {
-			configurable: true,
-			enumerable: true,
-			writable: true,
-			value: {
-				prev: prev ? { ...prev.props.data, slug: `${prev.params.slug}/` } : undefined,
-				next: next ? { ...next.props.data, slug: `${next.params.slug}/` } : undefined,
-			},
 		});
-	}
 
 	return posts;
 }
@@ -49,8 +34,7 @@ const {
 	id,
 	data: { draft, title, pubDate, updatedDate, description, toc, heroImage, heroAlt, noHero },
 	render,
-	// @ts-ignore
-	siblings,
+	randomEntries,
 } = Astro.props;
 const { slug } = Astro.params;
 
@@ -75,10 +59,17 @@ for (const h of postHeadings) {
 	levels[depth]!.headings = levels[depth]?.headings || [];
 	levels[depth]!.headings.push({ ...(levels[depth + 1] = { ...h, headings: [] }), headings: [] });
 }
+
+const { render: renderMarkdown } = await createMarkdownProcessor({});
+
+const more = [];
+for (const entry of randomEntries) {
+	more.push({ ...entry, description: await renderMarkdown(entry.data.description ?? '') });
+}
 ---
 
 <Base title={title} description={description} image={heroImage?.src}>
-	<article itemprop="blogPost" itemscope itemtype="http://schema.org/Article">
+	<article class="mb-12" itemprop="blogPost" itemscope itemtype="http://schema.org/Article">
 		<meta itemprop="mainEntityOfPage" content={`${slug}`} />
 		<Prose>
 			<h1 itemprop="name headline" transition:name={`title-${slug!.replace(/.*\//, '')}`}>
@@ -140,7 +131,23 @@ for (const h of postHeadings) {
 	</article>
 
 	<aside class="select-none">
-		<Prose><h2 id="post-nav" class="!text-lg">More posts</h2></Prose>
-		<PageNav next={siblings.next} prev={siblings.prev} />
+		<Prose>
+			<h2 id="post-nav">More posts</h2>
+		</Prose>
+
+		<ul class="flex flex-col gap-8">
+			{
+				more.map((entry) => (
+					<li>
+						<Link class="text-xl font-bold" href={`/blog/${getPostSlug(entry)}/`} itemprop="url">
+							{entry.data.title}
+						</Link>
+						<div class="prose prose-slate line-clamp-2 dark:prose-invert">
+							<Fragment set:html={entry.description.code ?? ''} />
+						</div>
+					</li>
+				))
+			}
+		</ul>
 	</aside>
 </Base>