Add recent blog posts on homepage

- Implemented custom plugin to generate `blog-posts-metadata.json` - Integrated `blog-posts-metadata.json` data into RecentBlogPosts component - Enhanced `RecentBlogPost` component to include title, date, reading time, and description - Styled `RecentBlogPosts` using Figma-style cards - Added `recentBlogPostsOnHomePage` parameter in `customFields` in `docusaurus.config.js` Signed-off-by: Shivank Anchal <[email protected]>
replica-io · Aug 9, 2024 · bd7be13 · bd7be13
1 parent 52a4646
commit bd7be13
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 9 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -32,6 +32,7 @@ const config = {
     description: 'An open-source framework for building practical distributed replication mechanisms.',
     gitHubUrl: gitHubUrl,
     siteLicense: siteLicense,
+    recentBlogPostsOnHomePage: 5
   },
 
   // GitHub pages deployment config.
@@ -49,6 +50,21 @@ const config = {
 
   clientModules: ['/js/unscrambleEmail.js'],
 
+  plugins:[
+    [
+      './plugins/blog-plugin',
+      {
+        blogTitle: 'Replica_IO Blog',
+        blogDescription: 'Blog of the Replica_IO project - an open-source framework for building practical distributed replication mechanisms.',
+        showReadingTime: true,
+        showLastUpdateTime: true,
+        showLastUpdateAuthor: true,
+        // Remove this to remove the "edit this page" links.
+        editUrl: `${siteGitHubUrl}/edit/main/`,
+      },
+    ]
+  ],
+
   presets: [
     [
       'classic',
@@ -59,15 +75,7 @@ const config = {
           // Remove this to remove the "edit this page" links.
           editUrl: `${siteGitHubUrl}/edit/main/`,
         },
-        blog: {
-          blogTitle: 'Replica_IO Blog',
-          blogDescription: 'Blog of the Replica_IO project - an open-source framework for building practical distributed replication mechanisms.',
-          showReadingTime: true,
-          showLastUpdateTime: true,
-          showLastUpdateAuthor: true,
-          // Remove this to remove the "edit this page" links.
-          editUrl: `${siteGitHubUrl}/edit/main/`,
-        },
+        blog: false,
         theme: {
           customCss: ['./src/css/custom.css'],
         },

diff --git a/plugins/blog-plugin.js b/plugins/blog-plugin.js
@@ -0,0 +1,33 @@
+import { shouldBeListed } from '@docusaurus/plugin-content-blog/src/blogUtils';
+const blogPluginExports = require('@docusaurus/plugin-content-blog');
+
+const defaultBlogPlugin = blogPluginExports.default;
+
+async function blogPluginExtended(...pluginArgs) {
+  const blogPluginInstance = await defaultBlogPlugin(...pluginArgs);
+
+  return {
+    // Add all properties of the default blog plugin so existing functionality is preserved
+    ...blogPluginInstance,
+
+    /**
+     * Override the default `contentLoaded` hook to access blog posts data
+     */
+    contentLoaded: async function (params) {
+      const { content, actions } = params;
+
+      const posts = content.blogPosts
+        .filter(shouldBeListed)
+        .map(({ content: _, ...post }) => post);
+      actions.createData('blog-posts-metadata.json', posts);
+
+      // Call the default overridden `contentLoaded` implementation
+      return blogPluginInstance.contentLoaded(params);
+    },
+  };
+}
+
+module.exports = {
+  ...blogPluginExports,
+  default: blogPluginExtended,
+};
diff --git a/src/components/RecentBlogPost/index.jsx b/src/components/RecentBlogPost/index.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+const RecentBlogPost = ({ post }) => {
+    const { metadata } = post;
+    const formattedDate = new Date(metadata.date).toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+    });
+    const readingTime = Math.round(metadata.readingTime);
+
+    return (
+        <a href={metadata.permalink} className="card" style={{ textDecoration: 'none', color: 'inherit' }}>
+            <div className="card__header">
+                <h3>{metadata.title}</h3>
+            </div>
+            <div className="card__body">
+                <p>{metadata.description}</p>
+            </div>
+            <div className="card__footer">
+                <p>{formattedDate} · {readingTime} min read</p>
+            </div>
+        </a>
+    );
+};
+
+export default RecentBlogPost;
diff --git a/src/components/RecentBlogPosts/index.jsx b/src/components/RecentBlogPosts/index.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import posts from '@site/.docusaurus/docusaurus-plugin-content-blog/default/blog-posts-metadata.json';
+import RecentBlog from '../RecentBlogPost';
+
+const RecentBlogPosts = ({ nrPosts }) => {
+    const recentPosts = posts.slice(0, nrPosts);
+
+    if (recentPosts.length === 0) {
+        return null;
+    }
+
+    return (
+        <div>
+            <h1>Recent Blog Posts</h1>
+            <div className="card__wrapper" style={{ display: 'grid', gap: '1rem' }}>
+                {recentPosts.map((post, index) => (
+                    <RecentBlog key={index} post={post} />
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default RecentBlogPosts;
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
@@ -6,6 +6,8 @@ import clsx from 'clsx';
 
 import Heading from '@theme/Heading';
 import styles from './index.module.css';
+import RecentBlogs from '../components/RecentBlogPosts';
+
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
@@ -39,6 +41,8 @@ export default function Home() {
 
   useBrokenLinks().collectAnchor('#contact-email');
 
+  const nrRecentBlogPosts = siteConfig.customFields.recentBlogPostsOnHomePage;
+
   return (
     <Layout
       description={siteConfig.customFields.description}>
@@ -115,6 +119,9 @@ export default function Home() {
             </p>
           </p>
         </p>
+        <div className="container padding-vert--xl">
+          <RecentBlogs nrPosts={nrRecentBlogPosts} />
+        </div>
       </main>
     </Layout>
   );