Related content fine-tune

Author: gallayl

src/components/ReadNext.astro

@@ -1,32 +1,44 @@
 ---
 import PostCard from './PostCard.astro';
-import ReadNextCard from './ReadNextCard.astro';
 import type { CollectionEntry } from 'astro:content';
 
 interface Props {
   currentSlug: string;
-  tags: string[];
   relatedPosts: CollectionEntry<'posts'>[];
   prevPost?: CollectionEntry<'posts'> | null;
   nextPost?: CollectionEntry<'posts'> | null;
 }
 
-const { currentSlug, tags, relatedPosts, prevPost, nextPost } = Astro.props;
-const showRelatedPosts = relatedPosts.length > 1;
-const hasContent = showRelatedPosts || prevPost || nextPost;
+const { currentSlug, relatedPosts, prevPost, nextPost } = Astro.props;
+
+const MAX_CARDS = 3;
+const seen = new Set<string>([currentSlug]);
+const cards: CollectionEntry<'posts'>[] = [];
+
+for (const post of relatedPosts) {
+  if (cards.length >= MAX_CARDS) break;
+  if (!seen.has(post.id)) {
+    seen.add(post.id);
+    cards.push(post);
+  }
+}
+
+for (const post of [prevPost, nextPost]) {
+  if (cards.length >= MAX_CARDS) break;
+  if (post && !seen.has(post.id)) {
+    seen.add(post.id);
+    cards.push(post);
+  }
+}
 ---
 
 {
-  hasContent && (
+  cards.length > 0 && (
     <aside class="read-next">
       <div class="read-next-inner">
         <h3 class="read-next-heading">Read Next</h3>
         <div class="read-next-feed">
-          {showRelatedPosts && (
-            <ReadNextCard currentSlug={currentSlug} tags={tags} relatedPosts={relatedPosts} />
-          )}
-          {prevPost && <PostCard post={prevPost} />}
-          {nextPost && <PostCard post={nextPost} />}
+          {cards.map(post => <PostCard post={post} />)}
         </div>
       </div>
     </aside>

src/components/ReadNextCard.astro

@@ -89,7 +89,6 @@ const primaryTag = tags?.[0];
 
   <ReadNext
     currentSlug={post.id}
-    tags={tags || []}
     relatedPosts={relatedPosts}
     prevPost={prevPost}
     nextPost={nextPost}

src/layouts/PostLayout.astro

@@ -13,9 +13,16 @@ export async function getStaticPaths() {
   return sorted.map((post, index) => {
     const prev = index > 0 ? sorted[index - 1] : null;
     const next = index < sorted.length - 1 ? sorted[index + 1] : null;
-    const primaryTag = post.data.tags?.[0];
-    const relatedPosts = primaryTag
-      ? sorted.filter(p => p.data.tags?.includes(primaryTag) && p.id !== post.id)
+    const currentTags = post.data.tags ?? [];
+    const relatedPosts = currentTags.length > 0
+      ? sorted
+          .filter(p => p.id !== post.id && p.data.tags?.some(t => currentTags.includes(t)))
+          .map(p => ({
+            post: p,
+            overlap: p.data.tags!.filter(t => currentTags.includes(t)).length,
+          }))
+          .sort((a, b) => b.overlap - a.overlap || b.post.data.date.valueOf() - a.post.data.date.valueOf())
+          .map(r => r.post)
       : [];
     const authorData = post.data.author
       .map(authorId => authors.find(a => a.data.id === authorId)?.data)