Skip to content

Commit eed94ff

Browse files
harjotgilltyaga001
authored andcommitted
blog home page
1 parent 436179d commit eed94ff

File tree

10 files changed

+82
-0
lines changed

10 files changed

+82
-0
lines changed
Binary file not shown.
Binary file not shown.
Binary file not shown.
-46.1 KB
Binary file not shown.
-84.5 KB
Binary file not shown.
Binary file not shown.
-232 KB
Binary file not shown.

docusaurus.config.ts

+17
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,23 @@ const config: Config = {
5353
// blogPostComponent: "@theme/BlogPostPage",
5454
// },
5555
//],
56+
[
57+
"./plugins/blog-plugin",
58+
{
59+
id: "blog",
60+
routeBasePath: "blog",
61+
path: "./blog",
62+
blogTitle: "CodeRabbit Blog",
63+
blogDescription: "Blog",
64+
tagsBasePath: "/tags",
65+
editLocalizedFiles: false,
66+
showReadingTime: true,
67+
blogSidebarCount: "ALL",
68+
blogSidebarTitle: "All our posts",
69+
blogListComponent: "@theme/BlogListPage",
70+
blogPostComponent: "@theme/BlogPostPage",
71+
},
72+
],
5673
[
5774
"@docusaurus/plugin-client-redirects",
5875
{

src/components/Home/Home.module.css

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.blogCard {
2+
display: grid;
3+
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
4+
grid-gap: 1rem;
5+
}
6+
7+
.card {
8+
/* border: 2px solid #e7e7e7; */
9+
10+
/* border-radius: 4px; */
11+
12+
padding: 0.5rem;
13+
}

src/components/Home/Home.tsx

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from "react";
2+
import styles from "./Home.module.css";
3+
import Layout from "@theme/Layout";
4+
import { Content } from "@theme/BlogPostPage";
5+
import clsx from "clsx";
6+
7+
interface HomeProps {
8+
readonly blogPosts: readonly { readonly Preview: Content; metadata: any }[];
9+
}
10+
11+
function Home({ blogPosts }: HomeProps): JSX.Element {
12+
return (
13+
<Layout>
14+
<div className="container margin-top--lg margin-bottom--lg">
15+
<div className="row">
16+
<div className="col col--3 col--offset-1 ">
17+
<h1>Featured Posts</h1>
18+
</div>
19+
</div>
20+
<div className="row">
21+
{blogPosts.map(({ metadata }, index) => (
22+
<HomeCard
23+
key={`${metadata.date}-${index}-home`}
24+
index={index}
25+
metadata={metadata}
26+
context={"home"}
27+
/>
28+
))}
29+
</div>
30+
</div>
31+
</Layout>
32+
);
33+
}
34+
35+
export default Home;
36+
37+
export function HomeCard({ index, metadata, context }): JSX.Element {
38+
return (
39+
<div className={`${clsx("col col--3 col--offset-1")} ${styles.card}`}>
40+
<div className="text--center">
41+
<img src={metadata.image} alt={metadata.title} width="100" />
42+
</div>
43+
<div className="text--center padding-horiz--md">
44+
<h3>{metadata.title}</h3>
45+
<p>{metadata.description}</p>
46+
<a href={metadata.link} target="_blank" rel="noopener noreferrer">
47+
Read more
48+
</a>
49+
</div>
50+
</div>
51+
);
52+
}

0 commit comments

Comments
 (0)