From 61c21cc16954a878a8c82f04af8b225a03417bfd Mon Sep 17 00:00:00 2001
From: Suradet Pratomsak <pharmacistsabot@gmail.com>
Date: Thu, 1 Jan 2026 06:01:40 +0700
Subject: [PATCH 1/5] feat: add feature related post

---
 src/components/blog/RelatedPosts.astro | 68 ++++++++++++++++++++++++++
 src/layouts/BlogPostLayout.astro       | 12 ++++-
 src/utils/post-utils.ts                | 65 ++++++++++++++++++++++++
 3 files changed, 144 insertions(+), 1 deletion(-)
 create mode 100644 src/components/blog/RelatedPosts.astro
 create mode 100644 src/utils/post-utils.ts

diff --git a/src/components/blog/RelatedPosts.astro b/src/components/blog/RelatedPosts.astro
new file mode 100644
index 0000000..018c040
--- /dev/null
+++ b/src/components/blog/RelatedPosts.astro
@@ -0,0 +1,68 @@
+---
+import type { CollectionEntry } from 'astro:content';
+
+import BlogPostCard from './BlogPostCard.astro';
+
+type Props = {
+  relatedPosts: CollectionEntry<'blog'>[];
+};
+
+const { relatedPosts } = Astro.props;
+---
+
+{
+  relatedPosts.length > 0 && (
+    <section class="related-posts">
+      <h2 class="related-posts-heading">You might also like</h2>
+      <div class="related-posts-grid">
+        {relatedPosts.map(post => (
+          <BlogPostCard post={post} />
+        ))}
+      </div>
+    </section>
+  )
+}
+
+<style>
+  .related-posts {
+    margin-top: 4rem;
+    padding-top: 3rem;
+    border-top: 1px solid var(--card-border-color);
+  }
+
+  .related-posts-heading {
+    font-family: var(--font-serif);
+    font-size: clamp(1.3rem, 4vw, 1.6rem);
+    text-align: center;
+    margin-bottom: 2rem;
+    color: var(--font-color);
+  }
+
+  .related-posts-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.5rem;
+  }
+
+  @media (max-width: 1024px) {
+    .related-posts-grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (max-width: 768px) {
+    .related-posts {
+      margin-top: 3rem;
+      padding-top: 2rem;
+    }
+
+    .related-posts-grid {
+      grid-template-columns: 1fr;
+      gap: 1.25rem;
+    }
+
+    .related-posts-heading {
+      margin-bottom: 1.5rem;
+    }
+  }
+</style>
diff --git a/src/layouts/BlogPostLayout.astro b/src/layouts/BlogPostLayout.astro
index 94fdbde..0390a31 100644
--- a/src/layouts/BlogPostLayout.astro
+++ b/src/layouts/BlogPostLayout.astro
@@ -2,8 +2,12 @@
 import type { MarkdownHeading } from 'astro';
 import type { CollectionEntry } from 'astro:content';
 
+import { getCollection } from 'astro:content';
+
+import RelatedPosts from '@/components/blog/RelatedPosts.astro';
 import Toc from '@/components/blog/Toc.astro';
 import ViewCounter from '@/components/blog/ViewCounter.astro';
+import { getRelatedPosts } from '@/utils/post-utils';
 import { slugify } from '@/utils/slugify';
 
 import BaseLayout from './BaseLayout.astro';
@@ -23,8 +27,12 @@ const formattedDate = new Date(pubDate).toLocaleDateString('en-US', {
   day: 'numeric',
 });
 
-// ใช้ slug ที่ส่งมา หรือสร้างจาก title เพื่อใช้เป็น key ในฐานข้อมูล
+// Use the provided slug or generate from title as a database key
 const postSlug = slug || slugify(title);
+
+// Fetch all blog posts and compute related posts
+const allPosts = await getCollection('blog');
+const relatedPosts = getRelatedPosts(allPosts, postSlug, tags, category, 3);
 ---
 
 <BaseLayout title={title} description={description}>
@@ -72,6 +80,8 @@ const postSlug = slug || slugify(title);
           }
         </div>
       </footer>
+
+      <RelatedPosts relatedPosts={relatedPosts} />
     </article>
 
     <aside class="right-sidebar">
diff --git a/src/utils/post-utils.ts b/src/utils/post-utils.ts
new file mode 100644
index 0000000..8f04575
--- /dev/null
+++ b/src/utils/post-utils.ts
@@ -0,0 +1,65 @@
+import type { CollectionEntry } from 'astro:content';
+
+/**
+ * Calculate related posts based on tags and category matching.
+ * Uses a scoring system: +2 points per matching tag, +1 point for matching category.
+ * Falls back to most recent posts if no related posts are found.
+ */
+export function getRelatedPosts(
+  allPosts: CollectionEntry<'blog'>[],
+  currentSlug: string,
+  currentTags: string[],
+  currentCategory: string,
+  limit: number = 3,
+): CollectionEntry<'blog'>[] {
+  // Filter out the current post
+  const otherPosts = allPosts.filter(post => post.slug !== currentSlug);
+
+  // Calculate scores for each post
+  const scoredPosts = otherPosts.map((post) => {
+    let score = 0;
+
+    // +2 points for each matching tag
+    const postTags = post.data.tags || [];
+    for (const tag of postTags) {
+      if (currentTags.includes(tag)) {
+        score += 2;
+      }
+    }
+
+    // +1 point for matching category
+    if (post.data.category === currentCategory) {
+      score += 1;
+    }
+
+    return { post, score };
+  });
+
+  // Sort by score (descending), then by pubDate (descending) for tie-breaking
+  scoredPosts.sort((a, b) => {
+    if (b.score !== a.score) {
+      return b.score - a.score;
+    }
+    // Tie-breaker: newer posts first
+    return (
+      new Date(b.post.data.pubDate).getTime()
+        - new Date(a.post.data.pubDate).getTime()
+    );
+  });
+
+  // Check if we have any posts with score > 0
+  const postsWithScore = scoredPosts.filter(item => item.score > 0);
+
+  if (postsWithScore.length > 0) {
+    // Return top 'limit' related posts
+    return postsWithScore.slice(0, limit).map(item => item.post);
+  }
+
+  // Fallback: return most recent posts if no related posts found
+  const recentPosts = [...otherPosts].sort(
+    (a, b) =>
+      new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime(),
+  );
+
+  return recentPosts.slice(0, limit);
+}

From 9a8cf930ab394a15da615457dd0ee20e4f944a85 Mon Sep 17 00:00:00 2001
From: Suradet Pratomsak <pharmacistsabot@gmail.com>
Date: Thu, 1 Jan 2026 06:13:26 +0700
Subject: [PATCH 2/5] refactor(blog): harden related posts logic and optimize
 collection usage

---
 src/components/blog/RelatedPosts.astro |  8 +++++-
 src/layouts/BlogPostLayout.astro       |  7 ++---
 src/lib/blog.ts                        | 22 +++++++++++++++
 src/utils/post-utils.ts                | 38 +++++++++++++++++---------
 4 files changed, 57 insertions(+), 18 deletions(-)
 create mode 100644 src/lib/blog.ts

diff --git a/src/components/blog/RelatedPosts.astro b/src/components/blog/RelatedPosts.astro
index 018c040..7b8a46c 100644
--- a/src/components/blog/RelatedPosts.astro
+++ b/src/components/blog/RelatedPosts.astro
@@ -16,7 +16,9 @@ const { relatedPosts } = Astro.props;
       <h2 class="related-posts-heading">You might also like</h2>
       <div class="related-posts-grid">
         {relatedPosts.map(post => (
-          <BlogPostCard post={post} />
+          <div class="grid-item" data-post-id={post.slug}>
+            <BlogPostCard post={post} />
+          </div>
         ))}
       </div>
     </section>
@@ -44,6 +46,10 @@ const { relatedPosts } = Astro.props;
     gap: 1.5rem;
   }
 
+  .grid-item {
+    height: 100%;
+  }
+
   @media (max-width: 1024px) {
     .related-posts-grid {
       grid-template-columns: repeat(2, 1fr);
diff --git a/src/layouts/BlogPostLayout.astro b/src/layouts/BlogPostLayout.astro
index 0390a31..767d880 100644
--- a/src/layouts/BlogPostLayout.astro
+++ b/src/layouts/BlogPostLayout.astro
@@ -2,11 +2,10 @@
 import type { MarkdownHeading } from 'astro';
 import type { CollectionEntry } from 'astro:content';
 
-import { getCollection } from 'astro:content';
-
 import RelatedPosts from '@/components/blog/RelatedPosts.astro';
 import Toc from '@/components/blog/Toc.astro';
 import ViewCounter from '@/components/blog/ViewCounter.astro';
+import { getAllBlogPosts } from '@/lib/blog';
 import { getRelatedPosts } from '@/utils/post-utils';
 import { slugify } from '@/utils/slugify';
 
@@ -30,8 +29,8 @@ const formattedDate = new Date(pubDate).toLocaleDateString('en-US', {
 // Use the provided slug or generate from title as a database key
 const postSlug = slug || slugify(title);
 
-// Fetch all blog posts and compute related posts
-const allPosts = await getCollection('blog');
+// Fetch all blog posts (cached) and compute related posts
+const allPosts = await getAllBlogPosts();
 const relatedPosts = getRelatedPosts(allPosts, postSlug, tags, category, 3);
 ---
 
diff --git a/src/lib/blog.ts b/src/lib/blog.ts
new file mode 100644
index 0000000..d793807
--- /dev/null
+++ b/src/lib/blog.ts
@@ -0,0 +1,22 @@
+import type { CollectionEntry } from 'astro:content';
+
+import { getCollection } from 'astro:content';
+
+/**
+ * Cached blog posts collection.
+ * Since Astro pre-renders pages at build time, this module-level cache
+ * ensures the collection is fetched only once during the build process,
+ * avoiding redundant queries across multiple page renders.
+ */
+let cachedPosts: CollectionEntry<'blog'>[] | null = null;
+
+/**
+ * Get all blog posts with caching.
+ * Results are cached at the module level to avoid repeated collection fetches.
+ */
+export async function getAllBlogPosts(): Promise<CollectionEntry<'blog'>[]> {
+  if (cachedPosts === null) {
+    cachedPosts = await getCollection('blog');
+  }
+  return cachedPosts;
+}
diff --git a/src/utils/post-utils.ts b/src/utils/post-utils.ts
index 8f04575..dd673d2 100644
--- a/src/utils/post-utils.ts
+++ b/src/utils/post-utils.ts
@@ -1,5 +1,15 @@
 import type { CollectionEntry } from 'astro:content';
 
+/**
+ * Safely parse a date, returning 0 for invalid dates
+ */
+function safeGetTime(date: Date | string | undefined): number {
+  if (!date)
+    return 0;
+  const parsed = new Date(date);
+  return Number.isNaN(parsed.getTime()) ? 0 : parsed.getTime();
+}
+
 /**
  * Calculate related posts based on tags and category matching.
  * Uses a scoring system: +2 points per matching tag, +1 point for matching category.
@@ -8,27 +18,33 @@ import type { CollectionEntry } from 'astro:content';
 export function getRelatedPosts(
   allPosts: CollectionEntry<'blog'>[],
   currentSlug: string,
-  currentTags: string[],
-  currentCategory: string,
+  currentTags: string[] = [],
+  currentCategory: string = '',
   limit: number = 3,
 ): CollectionEntry<'blog'>[] {
-  // Filter out the current post
-  const otherPosts = allPosts.filter(post => post.slug !== currentSlug);
+  // Normalize inputs with defaults
+  const safeTags = currentTags ?? [];
+  const safeCategory = currentCategory ?? '';
+
+  // Filter out the current post and posts without valid pubDate
+  const otherPosts = allPosts.filter(
+    post => post.slug !== currentSlug && post.data.pubDate,
+  );
 
   // Calculate scores for each post
   const scoredPosts = otherPosts.map((post) => {
     let score = 0;
 
     // +2 points for each matching tag
-    const postTags = post.data.tags || [];
+    const postTags = post.data.tags ?? [];
     for (const tag of postTags) {
-      if (currentTags.includes(tag)) {
+      if (safeTags.includes(tag)) {
         score += 2;
       }
     }
 
     // +1 point for matching category
-    if (post.data.category === currentCategory) {
+    if (safeCategory && post.data.category === safeCategory) {
       score += 1;
     }
 
@@ -41,10 +57,7 @@ export function getRelatedPosts(
       return b.score - a.score;
     }
     // Tie-breaker: newer posts first
-    return (
-      new Date(b.post.data.pubDate).getTime()
-        - new Date(a.post.data.pubDate).getTime()
-    );
+    return safeGetTime(b.post.data.pubDate) - safeGetTime(a.post.data.pubDate);
   });
 
   // Check if we have any posts with score > 0
@@ -57,8 +70,7 @@ export function getRelatedPosts(
 
   // Fallback: return most recent posts if no related posts found
   const recentPosts = [...otherPosts].sort(
-    (a, b) =>
-      new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime(),
+    (a, b) => safeGetTime(b.data.pubDate) - safeGetTime(a.data.pubDate),
   );
 
   return recentPosts.slice(0, limit);

From 28611b5ea952b1901055cd58a4b114b95233ece8 Mon Sep 17 00:00:00 2001
From: Suradet Pratomsak <pharmacistsabot@gmail.com>
Date: Thu, 1 Jan 2026 06:18:25 +0700
Subject: [PATCH 3/5] chore(ts): remove redundant type annotation from default
 param

---
 src/utils/post-utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/post-utils.ts b/src/utils/post-utils.ts
index dd673d2..7bf3b62 100644
--- a/src/utils/post-utils.ts
+++ b/src/utils/post-utils.ts
@@ -20,7 +20,7 @@ export function getRelatedPosts(
   currentSlug: string,
   currentTags: string[] = [],
   currentCategory: string = '',
-  limit: number = 3,
+  limit = 3,
 ): CollectionEntry<'blog'>[] {
   // Normalize inputs with defaults
   const safeTags = currentTags ?? [];

From a6cc17b6cd3510b175829368830e375997195af3 Mon Sep 17 00:00:00 2001
From: Suradet Pratomsak <pharmacistsabot@gmail.com>
Date: Thu, 1 Jan 2026 06:25:29 +0700
Subject: [PATCH 4/5] chore(ts): remove redundant string type annotation

---
 src/utils/post-utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/post-utils.ts b/src/utils/post-utils.ts
index 7bf3b62..7bb85fa 100644
--- a/src/utils/post-utils.ts
+++ b/src/utils/post-utils.ts
@@ -19,7 +19,7 @@ export function getRelatedPosts(
   allPosts: CollectionEntry<'blog'>[],
   currentSlug: string,
   currentTags: string[] = [],
-  currentCategory: string = '',
+  currentCategory = '',
   limit = 3,
 ): CollectionEntry<'blog'>[] {
   // Normalize inputs with defaults

From 2b8add6cf2771a5551f4ed495028c94c1120d3fe Mon Sep 17 00:00:00 2001
From: Suradet Pratomsak <pharmacistsabot@gmail.com>
Date: Thu, 1 Jan 2026 06:28:21 +0700
Subject: [PATCH 5/5] refactor(blog): remove redundant nullish checks for
 default params

---
 src/utils/post-utils.ts | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/utils/post-utils.ts b/src/utils/post-utils.ts
index 7bb85fa..1fee7cb 100644
--- a/src/utils/post-utils.ts
+++ b/src/utils/post-utils.ts
@@ -22,10 +22,6 @@ export function getRelatedPosts(
   currentCategory = '',
   limit = 3,
 ): CollectionEntry<'blog'>[] {
-  // Normalize inputs with defaults
-  const safeTags = currentTags ?? [];
-  const safeCategory = currentCategory ?? '';
-
   // Filter out the current post and posts without valid pubDate
   const otherPosts = allPosts.filter(
     post => post.slug !== currentSlug && post.data.pubDate,
@@ -38,13 +34,13 @@ export function getRelatedPosts(
     // +2 points for each matching tag
     const postTags = post.data.tags ?? [];
     for (const tag of postTags) {
-      if (safeTags.includes(tag)) {
+      if (currentTags.includes(tag)) {
         score += 2;
       }
     }
 
     // +1 point for matching category
-    if (safeCategory && post.data.category === safeCategory) {
+    if (currentCategory && post.data.category === currentCategory) {
       score += 1;
     }