blog featured posts

harjotgill · harjotgill · commit c962876f3be4 · 2024-04-02T20:52:23.000-07:00
diff --git a/plugins/blog-plugin.js b/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),
diff --git a/src/components/FeaturedPosts/FeaturedPosts.module.css b/src/components/FeaturedPosts/FeaturedPosts.module.css
diff --git a/src/components/FeaturedPosts/FeaturedPosts.tsx b/src/components/FeaturedPosts/FeaturedPosts.tsx
@@ -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">

-Original file line number
+Diff line change
@@ @@ -1,14 +1,14 @@ @@
 importReactfrom"react";
 -importstylesfrom"./Home.module.css";
 +importstylesfrom"./FeaturedPosts.module.css";
 importLayoutfrom"@theme/Layout";
 import{Content}from"@theme/BlogPostPage";
 importclsxfrom"clsx";
 -interfaceHomeProps{
 +interfaceFeaturedPostsProps{
 readonlyblogPosts: readonly{readonlyPreview: Content;metadata: any}[];
+}
 -functionHome({ blogPosts }: HomeProps): JSX.Element{
 +functionFeaturedPosts({ blogPosts }: FeaturedPostsProps): JSX.Element{
 return(
 <Layout>
 <divclassName="container margin-top--lg margin-bottom--lg">
 </div>
 <divclassName="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>
 );
+}
 -exportdefaultHome;
 +exportdefaultFeaturedPosts;
 -exportfunctionHomeCard({ index, metadata, context }): JSX.Element{
 +exportfunctionFeaturedPostsCard({ index, metadata, context }): JSX.Element{
 return(
 <divclassName={`${clsx("col col--3 col--offset-1")}${styles.card}`}>
 <divclassName="text--center">