From 112f3db16dce94309948231a35d8d8b9db1fdecd Mon Sep 17 00:00:00 2001
From: Mehul Mathur <mathur.mehul01@gmail.com>
Date: Sat, 2 Nov 2024 16:04:13 +0530
Subject: [PATCH] chore: updated recent blog posts UI (#543)

Co-authored-by: Tushar Mathur <tusharmath@gmail.com>
---
 docusaurus.config.ts                 |  2 +-
 plugins/custom-blog-plugin.ts        | 46 ++++++++++++++++++++++++++++
 src/components/blog/BlogListItem.tsx | 38 +++++++++++++++++++++++
 src/theme/BlogPostItem/index.tsx     |  1 -
 src/theme/BlogPostList/index.tsx     | 44 ++++++++------------------
 src/theme/BlogRecentPosts/index.tsx  | 27 +++++++++-------
 src/types/index.d.ts                 |  8 +++++
 7 files changed, 122 insertions(+), 44 deletions(-)
 create mode 100644 plugins/custom-blog-plugin.ts
 create mode 100644 src/components/blog/BlogListItem.tsx

diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index d8f51592b3..2cec480aa9 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -229,7 +229,7 @@ export default {
       },
     ],
     [
-      "@docusaurus/plugin-content-blog",
+      "./plugins/custom-blog-plugin.ts",
       {
         path: "blog",
         editLocalizedFiles: false,
diff --git a/plugins/custom-blog-plugin.ts b/plugins/custom-blog-plugin.ts
new file mode 100644
index 0000000000..2eb4c67535
--- /dev/null
+++ b/plugins/custom-blog-plugin.ts
@@ -0,0 +1,46 @@
+import {PluginOptions, BlogContent} from "@docusaurus/plugin-content-blog"
+import {LoadContext, PluginContentLoadedActions} from "@docusaurus/types"
+
+import * as blogPluginExports from "@docusaurus/plugin-content-blog"
+const defaultBlogPlugin = blogPluginExports.default
+
+async function blogPluginEnhanced(context: LoadContext, options: PluginOptions) {
+  const blogPluginInstance = await defaultBlogPlugin(context, options)
+
+  return {
+    ...blogPluginInstance,
+    async contentLoaded({content, actions}: {content: BlogContent; actions: PluginContentLoadedActions}) {
+      if (blogPluginInstance.contentLoaded) {
+        await blogPluginInstance.contentLoaded({content, actions})
+      }
+
+      const {setGlobalData} = actions
+      const recentBlogPostsLimit = 10
+
+      const recentBlogPosts = [...content.blogPosts].splice(0, recentBlogPostsLimit)
+      const recentBlogPostsMetadata = recentBlogPosts.map((blog) => {
+        const {
+          date,
+          title,
+          frontMatter: {description},
+          authors,
+          permalink,
+        } = blog.metadata
+
+        return {
+          date,
+          title,
+          description,
+          authors,
+          permalink,
+        }
+      })
+      setGlobalData({recentBlogPostsMetadata})
+    },
+  }
+}
+
+module.exports = {
+  ...blogPluginExports,
+  default: blogPluginEnhanced,
+}
diff --git a/src/components/blog/BlogListItem.tsx b/src/components/blog/BlogListItem.tsx
new file mode 100644
index 0000000000..6d34e95f8f
--- /dev/null
+++ b/src/components/blog/BlogListItem.tsx
@@ -0,0 +1,38 @@
+import React from "react"
+import Link from "@docusaurus/Link"
+import clsx from "clsx"
+import {BlogAuthor} from "@site/src/theme/BlogAuthor"
+import {Author} from "@docusaurus/plugin-content-blog"
+
+export interface BlogListItemProps {
+  date: string
+  title: string
+  description: string
+  authors: Author[]
+  permalink: string
+}
+
+const BlogListItem: React.FC<BlogListItemProps> = ({date, title, description, authors, permalink}) => {
+  return (
+    <Link to={permalink} className="flex flex-col overflow-hidden !text-black !no-underline">
+      <div className="flex flex-col flex-1 p-3 md:py-12 md:px-6 gap-2 md:gap-3 border border-solid border-tailCall-border-light-400 hover:border-tailCall-border-dark-100 rounded-lg md:rounded-md">
+        <span className="hidden md:flex text-content-mini text-black">
+          {new Date(date).toLocaleDateString("en-US", {
+            month: "long",
+            day: "numeric",
+            year: "numeric",
+          })}
+        </span>
+        <div className="flex flex-col flex-1 gap-1 md:gap-2">
+          <span className={clsx("text-title-small line-clamp-2")}>{title}</span>
+          <span className="flex-1 text-content-tiny md:text-content-small line-clamp-1 md:line-clamp-3 text-tailCall-light-600 blog-post-content-desc">
+            {description}
+          </span>
+        </div>
+        {authors[0] && <BlogAuthor author={authors[0]} containerClassName="mt-auto" />}
+      </div>
+    </Link>
+  )
+}
+
+export default BlogListItem
diff --git a/src/theme/BlogPostItem/index.tsx b/src/theme/BlogPostItem/index.tsx
index 21c9bcca6b..c37e8c847b 100644
--- a/src/theme/BlogPostItem/index.tsx
+++ b/src/theme/BlogPostItem/index.tsx
@@ -6,7 +6,6 @@ import BlogPostItemHeader from "@theme/BlogPostItem/Header"
 import BlogPostItemContent from "@theme/BlogPostItem/Content"
 import BlogPostItemFooter from "@theme/BlogPostItem/Footer"
 import type {Props} from "@theme/BlogPostItem"
-import BlogRecentPosts from "../BlogRecentPosts"
 // apply a bottom margin in list view
 function useContainerClassName() {
   const {isBlogPostPage} = useBlogPost()
diff --git a/src/theme/BlogPostList/index.tsx b/src/theme/BlogPostList/index.tsx
index 87b5335770..5e4f3326c3 100644
--- a/src/theme/BlogPostList/index.tsx
+++ b/src/theme/BlogPostList/index.tsx
@@ -1,41 +1,23 @@
 import React from "react"
-import Link from "@docusaurus/Link"
 import type {Props} from "@theme/BlogListPage"
-import {BlogAuthor} from "../BlogAuthor"
-import clsx from "clsx"
-
-const RegularPost = ({item}: {item: Props["items"][0]}) => (
-  <Link to={item.content.metadata.permalink} className="flex flex-col overflow-hidden !text-black !no-underline">
-    <PostContent item={item} />
-  </Link>
-)
-
-const PostContent = ({item}: {item: Props["items"][0]}) => (
-  <div className="flex flex-col flex-1 p-3 md:py-12 md:px-6 gap-2 md:gap-3 border border-solid border-tailCall-border-light-400 hover:border-tailCall-border-dark-100 rounded-lg md:rounded-md">
-    <span className="hidden md:flex text-content-mini text-black">
-      {new Date(item.content.metadata.date).toLocaleDateString("en-US", {
-        month: "long",
-        day: "numeric",
-        year: "numeric",
-      })}
-    </span>
-    <div className="flex flex-col flex-1 gap-1 md:gap-2">
-      <span className={clsx("text-title-small line-clamp-2")}>{item.content.metadata.title}</span>
-      <span className="flex-1 text-content-tiny md:text-content-small line-clamp-1 md:line-clamp-3 text-tailCall-light-600 blog-post-content-desc">
-        {item.content.metadata.frontMatter.description}
-      </span>
-    </div>
-    {item.content.metadata.authors[0] && (
-      <BlogAuthor author={item.content.metadata.authors[0]} containerClassName="mt-auto" />
-    )}
-  </div>
-)
+import BlogListItem from "@site/src/components/blog/BlogListItem"
 
 function BlogPostList({items}: {items: Props["items"]}): JSX.Element {
   return (
     <div className="grid grid-cols-1 gap-4 md:gap-3 md:grid-cols-2 lg:grid-cols-3">
       {items.map((item) => {
-        return <RegularPost key={item.content.metadata.permalink} item={item} />
+        const {permalink, date, title, description, authors} = item.content.metadata
+
+        return (
+          <BlogListItem
+            key={permalink}
+            date={date}
+            title={title}
+            description={description}
+            authors={authors}
+            permalink={permalink}
+          />
+        )
       })}
     </div>
   )
diff --git a/src/theme/BlogRecentPosts/index.tsx b/src/theme/BlogRecentPosts/index.tsx
index b4ade650c5..d7ebb0c243 100644
--- a/src/theme/BlogRecentPosts/index.tsx
+++ b/src/theme/BlogRecentPosts/index.tsx
@@ -1,13 +1,16 @@
 import React, {useEffect} from "react"
-import Link from "@docusaurus/Link"
 import {useLocation} from "@docusaurus/router"
 import type {Props} from "@theme/BlogLayout"
 import {isBlogPost} from "@site/src/utils"
+import {usePluginData} from "@docusaurus/useGlobalData"
+import BlogListItem from "@site/src/components/blog/BlogListItem"
 
 export default function BlogRecentPosts({sidebar}: {sidebar: Props["sidebar"]}): JSX.Element {
   const [isBlogPostPage, setIsBlogPostPage] = React.useState(false)
   const location = useLocation()
 
+  const {recentBlogPostsMetadata} = usePluginData("docusaurus-plugin-content-blog") as any
+
   useEffect(() => {
     setIsBlogPostPage(isBlogPost())
   }, [location.pathname])
@@ -18,17 +21,19 @@ export default function BlogRecentPosts({sidebar}: {sidebar: Props["sidebar"]}):
         <div className="col col--7">
           <hr className="h-[1px] !bg-tailCall-light-300" />
           <h1 className=" text-title-medium">Recent Blog Posts</h1>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            {sidebar?.items.map((item) => {
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-5 md:gap-3 mb-10 md:mb-20">
+            {recentBlogPostsMetadata?.map((item: RecentBlogPostItem) => {
+              const {permalink, date, title, description, authors} = item
+
               return (
-                <Link to={item.permalink} className="w-full my-4 !no-underline">
-                  <img
-                    src={`/images/${item.permalink}.png`}
-                    className="w-full rounded-xl aspect-[1.88] object-cover"
-                    alt=""
-                  />
-                  <h1 className=" text-title-medium text-black">{item.title}</h1>
-                </Link>
+                <BlogListItem
+                  key={permalink}
+                  date={date}
+                  title={title}
+                  description={description}
+                  authors={authors}
+                  permalink={permalink}
+                />
               )
             })}
           </div>
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 02086dc041..f7fd0da9ae 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -139,3 +139,11 @@ type CustomerFeedback = {
 
 declare module "docusaurus-lunr-search/src/theme/SearchBar"
 declare module "react-platform-js"
+
+type RecentBlogPostItem = {
+  date: string
+  title: string
+  description: string
+  authors: Author[]
+  permalink: string
+}