chore: updated recent blog posts UI (#543)

Co-authored-by: Tushar Mathur <[email protected]>

docusaurus.config.ts

@@ -229,7 +229,7 @@ export default {
       },
     ],
     [
-      "@docusaurus/plugin-content-blog",
+      "./plugins/custom-blog-plugin.ts",
       {
         path: "blog",
         editLocalizedFiles: false,

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,
+}

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

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()

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>
   )

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>

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
+}