blog featured posts

Author: harjotgill

plugins/blog-plugin.js

@@ -44,15 +44,11 @@ async function blogPluginExtended(...pluginOptions) {
         };
       }
 
-      // Create the gallery page
       data.actions.addRoute({
-        // Add route for the home page
-        path: "/home",
+        path: "/featured-posts",
         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
+        component: "@site/src/components/FeaturedPosts/FeaturedPosts.tsx",
         modules: {
           blogPosts: await Promise.all(
             allBlogPosts.map(createRecentPostModule),

src/components/Home/Home.module.css renamed to src/components/FeaturedPosts/FeaturedPosts.module.css

@@ -1,14 +1,14 @@
 import React from "react";
-import styles from "./Home.module.css";
+import styles from "./FeaturedPosts.module.css";
 import Layout from "@theme/Layout";
 import { Content } from "@theme/BlogPostPage";
 import clsx from "clsx";
 
-interface HomeProps {
+interface FeaturedPostsProps {
   readonly blogPosts: readonly { readonly Preview: Content; metadata: any }[];
 }
 
-function Home({ blogPosts }: HomeProps): JSX.Element {
+function FeaturedPosts({ blogPosts }: FeaturedPostsProps): JSX.Element {
   return (
     <Layout>
       <div className="container margin-top--lg margin-bottom--lg">
@@ -19,11 +19,11 @@ function Home({ blogPosts }: HomeProps): JSX.Element {
         </div>
         <div className="row">
           {blogPosts.map(({ metadata }, index) => (
-            <HomeCard
-              key={`${metadata.date}-${index}-home`}
+            <FeaturedPostsCard
+              key={`${metadata.date}-${index}-featured-posts`}
               index={index}
               metadata={metadata}
-              context={"home"}
+              context={"featured-posts"}
             />
           ))}
         </div>
@@ -32,9 +32,9 @@ function Home({ blogPosts }: HomeProps): JSX.Element {
   );
 }
 
-export default Home;
+export default FeaturedPosts;
 
-export function HomeCard({ index, metadata, context }): JSX.Element {
+export function FeaturedPostsCard({ index, metadata, context }): JSX.Element {
   return (
     <div className={`${clsx("col col--3 col--offset-1")} ${styles.card}`}>
       <div className="text--center">