blog home page

Author: harjotgill

blog/ai-code-reviews-reclaims-2023-10-05/blog.md

@@ -4,7 +4,7 @@ title: How AI Code Review Reclaims Your Team's Time
 description: How AI Code Review Reclaims Your Team's Time
 authors: [simone]
 tags: ["AI", "Code Review", "Productivity"]
-image: ./preview.png
+image: /img/blog-previews/ai-code-reviews-reclaims.png
 ---
 
 ### Introduction

blog/ai-transforming-traditional-code-review-practices-2024-03-29/blog.md

@@ -5,7 +5,7 @@ description:
   In a world where the office is just a step away from your bed, we dive into
   the challenges and triumphs of maintaining code quality across continents.
 authors: [dotlabs]
-image: ./preview.jpeg
+image: /img/blog-previews/boosting-engineering-efficiency.jpeg
 tags: ["AI", "Code Reviews", "Remote Work"]
 ---
 

blog/boosting-engineering-efficiency-2023-11-13/blog.md

@@ -4,7 +4,7 @@ title: AI and the Future of Code Reviews - A Deep Dive into CodeRabbit
 description: AI and the Future of Code Reviews - A Deep Dive into CodeRabbit
 authors: [gur, vishu]
 tags: ["CodeRabbit", "AI", "Code Reviews"]
-image: ./preview.jpeg
+image: /img/blog-previews/coderabbit-deep-dive.jpeg
 ---
 
 We are witnessing an inflection point in the software development industry.

blog/coderabbit-deep-dive-2023-08-26/blog.md

@@ -16,10 +16,10 @@ tags:
     "Caching",
     "Scheduler",
   ]
-image: ./preview.png
+image: /img/blog-previews/fluxninja-acquisition.png
 ---
 
-![FluxNinja joins CodeRabbit](./preview.png)
+![FluxNinja joins CodeRabbit](/img/blog-previews/fluxninja-acquisition.png)
 
 We are excited to announce that CodeRabbit has acquired
 [FluxNinja](https://fluxninja.com), a startup that provides a platform for

blog/fluxninja-acquisition-2024-03-17/blog.md

@@ -6,6 +6,7 @@ description:
   effective and improve user experience.
 authors: [gur]
 tags: ["AI", "Cost Optimization", "Generative AI", "Code Review"]
+image: /img/blog-previews/how-we-built-cost-effective-generative-ai-application.png
 ---
 
 # How we built a cost-effective Generative AI application

blog/how-we-built-cost-effective-generative-ai-application-2023-12-23/blog.md

@@ -4,7 +4,7 @@ title: Modern AI stack for developer productivity
 description:
   Elevate your development workflow with three pillars of developer productivity
   tools powered by Artificial Intelligence
-image: ./preview.jpg
+image: /img/blog-previews/modern-ai-stack-for-developer-productivity.jpg
 authors: [pradeep]
 tags: ["AI", "Developer Tools", "Code Generation", "Code Review", "Knowledge"]
 ---

blog/modern-ai-stack-for-developer-productivity-2024-01-05/blog.md

@@ -7,7 +7,7 @@ description:
   How CodeRabbit uses Aperture to manage OpenAI rate limits with request
   prioritization
 authors: [gur, sumanvs, nato]
-image: ./preview.png
+image: /img/blog-previews/openai-rate-limits.png
 tags: ["AI", "OpenAI", "Rate Limits", "Aperture"]
 ---
 

blog/openai-rate-limits-2023-10-23/blog.md

@@ -35,6 +35,23 @@ const config: Config = {
   },
 
   plugins: [
+    [
+      "./plugins/blog-plugin",
+      {
+        id: "blog",
+        routeBasePath: "blog",
+        path: "./blog",
+        blogTitle: "CodeRabbit Blog",
+        blogDescription: "Blog",
+        tagsBasePath: "/tags",
+        editLocalizedFiles: false,
+        showReadingTime: true,
+        blogSidebarCount: "ALL",
+        blogSidebarTitle: "All our posts",
+        blogListComponent: "@theme/BlogListPage",
+        blogPostComponent: "@theme/BlogPostPage",
+      },
+    ],
     [
       "@docusaurus/plugin-client-redirects",
       {
@@ -77,18 +94,7 @@ const config: Config = {
           breadcrumbs: true,
           showLastUpdateTime: true,
         },
-        blog: {
-          blogTitle: "CodeRabbit Blog",
-          blogDescription: "Blog",
-          tagsBasePath: "/tags",
-          editLocalizedFiles: false,
-          routeBasePath: "/blog",
-          showReadingTime: true,
-          blogSidebarCount: "ALL",
-          blogSidebarTitle: "All our posts",
-          blogListComponent: "@theme/BlogListPage",
-          blogPostComponent: "@theme/BlogPostPage",
-        },
+        blog: false,
         theme: {
           customCss: "./src/css/custom.css",
         },

docusaurus.config.ts

@@ -0,0 +1,72 @@
+const blogPluginExports = require("@docusaurus/plugin-content-blog");
+
+const defaultBlogPlugin = blogPluginExports.default;
+
+async function blogPluginExtended(...pluginOptions) {
+  const blogPluginInstance = await defaultBlogPlugin(...pluginOptions);
+
+  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 (data) {
+      const { content, actions } = data;
+
+      const allBlogPosts = content.blogPosts;
+
+      async function createRecentPostModule(blogPost, index) {
+        return {
+          // Inject the metadata you need for each recent blog post
+          metadata: await actions.createData(
+            `blogpost-metadata-${index}.json`,
+            JSON.stringify({
+              title: blogPost.metadata.title,
+              description: blogPost.metadata.description,
+              frontMatter: blogPost.metadata.frontMatter,
+              image: blogPost.metadata.frontMatter.image,
+              link: blogPost.metadata.permalink,
+              date: blogPost.metadata.date,
+            }),
+          ),
+
+          // Inject the MDX excerpt as a JSX component prop
+          // (what's above the <!-- truncate --> marker)
+          Preview: {
+            __import: true,
+            // The markdown file for the blog post will be loaded by webpack
+            path: blogPost.metadata.source,
+            query: {
+              truncated: true,
+            },
+          },
+        };
+      }
+
+      // Create the gallery page
+      data.actions.addRoute({
+        // Add route for the home page
+        path: "/home",
+        exact: true,
+
+        // The component to use for the "Home" page route
+        component: "@site/src/components/Home/Home.tsx",
+        // These are the props that will be passed to our "Home" page component
+        modules: {
+          blogPosts: await Promise.all(
+            allBlogPosts.map(createRecentPostModule),
+          ),
+        },
+      });
+
+      // Call the default overridden `contentLoaded` implementation
+      return blogPluginInstance.contentLoaded(data);
+    },
+  };
+}
+
+module.exports = {
+  ...blogPluginExports,
+  default: blogPluginExtended,
+};

plugins/blog-plugin.js

@@ -0,0 +1,13 @@
+.blogCard {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  grid-gap: 1rem;
+}
+
+.card {
+  /* border: 2px solid #e7e7e7; */
+
+  /* border-radius: 4px; */
+
+  padding: 0.5rem;
+}

src/components/Home/Home.module.css

@@ -0,0 +1,52 @@
+import React from "react";
+import styles from "./Home.module.css";
+import Layout from "@theme/Layout";
+import { Content } from "@theme/BlogPostPage";
+import clsx from "clsx";
+
+interface HomeProps {
+  readonly blogPosts: readonly { readonly Preview: Content; metadata: any }[];
+}
+
+function Home({ blogPosts }: HomeProps): JSX.Element {
+  return (
+    <Layout>
+      <div className="container margin-top--lg margin-bottom--lg">
+        <div className="row">
+          <div className="col col--3 col--offset-1 ">
+            <h1>Featured Posts</h1>
+          </div>
+        </div>
+        <div className="row">
+          {blogPosts.map(({ metadata }, index) => (
+            <HomeCard
+              key={`${metadata.date}-${index}-home`}
+              index={index}
+              metadata={metadata}
+              context={"home"}
+            />
+          ))}
+        </div>
+      </div>
+    </Layout>
+  );
+}
+
+export default Home;
+
+export function HomeCard({ index, metadata, context }): JSX.Element {
+  return (
+    <div className={`${clsx("col col--3 col--offset-1")} ${styles.card}`}>
+      <div className="text--center">
+        <img src={metadata.image} alt={metadata.title} width="100" />
+      </div>
+      <div className="text--center padding-horiz--md">
+        <h3>{metadata.title}</h3>
+        <p>{metadata.description}</p>
+        <a href={metadata.link} target="_blank" rel="noopener noreferrer">
+          Read more
+        </a>
+      </div>
+    </div>
+  );
+}