Related Post

components/RelatedPosts.js

@@ -0,0 +1,34 @@
+import Link from 'next/link'
+import siteMetadata from '@/data/siteMetadata'
+
+const RelatedPosts = ({ posts }) => {
+  if (!posts || posts.length === 0) return null
+
+  return (
+    <div className="my-2 rounded-lg bg-gray-100 py-4 pl-4 pr-4 dark:bg-gray-800 xl:py-8">
+      <h2 className="toc-ignore mb-2 text-base font-bold uppercase tracking-wide text-gray-800 dark:text-gray-200">
+        Related Tags Posts
+      </h2>
+      {posts.map((post, index) => (
+        <div key={post.slug} className="py-2">
+          <div className="flex flex-row content-center justify-start space-x-6">
+            <div className="min-w-[80px] text-xs font-semibold text-rose-400">
+              {new Date(post.date).toLocaleDateString(siteMetadata.locale, {
+                year: 'numeric',
+                month: '2-digit',
+                day: '2-digit',
+              })}
+            </div>
+            <Link key={index} href={`/blog/${post.slug}`}>
+              <a className="truncate text-sm font-semibold text-gray-500 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300">
+                {post.title}
+              </a>
+            </Link>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default RelatedPosts

layouts/PostToc.js

@@ -6,10 +6,11 @@ import siteMetadata from '@/data/siteMetadata'
 import Comments from '@/components/comments'
 import ScrollTopAndComment from '@/components/ScrollTopAndComment'
 import TocSide from '@/components/Tocbot'
+import RelatedPosts from '@/components/RelatedPosts'
 
 const postDateTemplate = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
 
-export default function PostLayout({ frontMatter, authorDetails, children }) {
+export default function PostLayout({ frontMatter, authorDetails, children, relatedPosts }) {
   const { slug, date, title, tags } = frontMatter
 
   return (
@@ -46,6 +47,7 @@ export default function PostLayout({ frontMatter, authorDetails, children }) {
             <div className="divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0">
               <div className="prose max-w-none pt-10 pb-8 dark:prose-dark">{children}</div>
               <Comments frontMatter={frontMatter} />
+              <RelatedPosts posts={relatedPosts} />
             </div>
             <footer style={{ position: 'sticky', top: '32px' }}>
               <TocSide />

pages/blog/[...slug].js

@@ -3,9 +3,25 @@ import PageTitle from '@/components/PageTitle'
 import generateRss from '@/lib/generate-rss'
 import { MDXLayoutRenderer } from '@/components/MDXComponents'
 import { formatSlug, getAllFilesFrontMatter, getFileBySlug, getFiles } from '@/lib/mdx'
+import kebabCase from '@/lib/utils/kebabCase'
 
 const DEFAULT_LAYOUT = 'PostToc'
 
+function getRelatedPosts(allPosts, currentPost) {
+  const defaultCount = 5
+
+  return allPosts
+    .filter(
+      (item) =>
+        item.draft !== true &&
+        item.slug !== currentPost.frontMatter.slug &&
+        item.tags.filter((tag) =>
+          currentPost.frontMatter.tags.map((m) => kebabCase(m)).includes(kebabCase(tag))
+        ).length > 0
+    )
+    .slice(0, defaultCount)
+}
+
 export async function getStaticPaths() {
   const posts = getFiles('blog')
   return {
@@ -31,16 +47,18 @@ export async function getStaticProps({ params }) {
   })
   const authorDetails = await Promise.all(authorPromise)
 
+  const relatedPosts = getRelatedPosts(allPosts, post)
+
   // rss
   if (allPosts.length > 0) {
     const rss = generateRss(allPosts)
     fs.writeFileSync('./public/feed.xml', rss)
   }
 
-  return { props: { post, authorDetails, prev, next } }
+  return { props: { post, authorDetails, prev, next, relatedPosts } }
 }
 
-export default function Blog({ post, authorDetails, prev, next }) {
+export default function Blog({ post, authorDetails, prev, next, relatedPosts }) {
   const { mdxSource, toc, frontMatter } = post
 
   return (
@@ -54,6 +72,7 @@ export default function Blog({ post, authorDetails, prev, next }) {
           authorDetails={authorDetails}
           prev={prev}
           next={next}
+          relatedPosts={relatedPosts}
         />
       ) : (
         <div className="mt-24 text-center">