Skip to content

Commit 67c6651

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #3614 from ParnaRoyChowdhury777/main
Issue#2641. Added E-book section
2 parents 9c1ce3c + c056f35 commit 67c6651

File tree

4 files changed

+151
-0
lines changed

4 files changed

+151
-0
lines changed

‎docusaurus.config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -207,6 +207,10 @@ const config = {
207207
to: "/blogs",
208208
html: '<span class="nav-emoji">📰</span> Blogs',
209209
},
210+
{
211+
to: "/ebooks",
212+
html: '<span class="nav-emoji">📚</span> E-books',
213+
},
210214

211215
{
212216
type: "dropdown",

‎src/database/ebooks/index.tsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
interface Book {
2+
id: number;
3+
title: string;
4+
image: string;
5+
description: string;
6+
link: string;
7+
}
8+
9+
const books: Book[] = [
10+
{
11+
id: 1,
12+
title: 'Programming in C',
13+
image: 'https://cdn.geekboots.com/geek/c-language-popularity-meta-1656157189121.jpg',
14+
description: 'C is a general-purpose, procedural computer programming language supporting structured programming, lexical variable scope, and recursion, with a static type system. By design, C provides constructs that map efficiently to typical machine instructions.',
15+
link: 'https://drive.google.com/file/d/1B36OGR_QVEFnJvcH3NiBa0tcBaa2po6W/view?usp=drive_link',
16+
},
17+
{
18+
id: 2,
19+
title: 'Programming in C++',
20+
image: 'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20230703144619/CPP-Language.png',
21+
description: 'C++ is a general-purpose programming language created by Bjarne Stroustrup as an extension of the C programming language, or "C with Classes". The language has expanded significantly over time, and modern C++ now has object-oriented, generic, and functional features in addition to facilities for low-level memory manipulation.',
22+
link: 'https://drive.google.com/file/d/1asF5MoWe2o5eDAG3o_OeA_f5vf9AKKy9/view?usp=drive_link',
23+
},
24+
{
25+
id: 3,
26+
title: 'Programming in Java',
27+
image: 'https://1.bp.blogspot.com/-bIgZGyzK51I/XyzniiD0JYI/AAAAAAAH7W0/dFGu48SV2I4Yg9--YNhAZ4Z6RiNbcWbuwCLcBGAsYHQ/s1600/java.jpg',
28+
description: 'Java is a class-based, object-oriented programming language that is designed to have as few implementation dependencies as possible. It is a general-purpose programming language intended to let application developers write once, run anywhere (WORA), meaning that compiled Java code can run on all platforms that support Java without the need for recompilation.',
29+
link: 'https://drive.google.com/file/d/1Yzw0HDlQ4dECk04hb-1P81xR5dwEBM_k/view?usp=drive_link',
30+
},
31+
{
32+
id: 4,
33+
title: 'Programming in Python',
34+
image: 'https://1.bp.blogspot.com/-WFlTDRQ5nZI/XqMED_-aV8I/AAAAAAAB1NM/X4mEmbLbylYotlO25v8f6v4RM2zQobmVgCLcBGAsYHQ/s1600/image2%2B-%2B2020-04-24T172119.147.jpg',
35+
description: 'Python is an interpreted high-level general-purpose programming language. Python\'s design philosophy emphasizes code readability with its notable use of significant indentation. Its language constructs and object-oriented approach aim to help programmers write clear, logical code for small and large-scale projects.',
36+
link: 'https://drive.google.com/file/d/1NTzQFX47JqjQtFUMMscL264wqpUwIwGT/view?usp=drive_link',
37+
},
38+
];
39+
40+
export default books;

‎src/pages/ebooks/index.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from "react";
2+
import "./style.css";
3+
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
4+
import Layout from "@theme/Layout";
5+
import Link from "@docusaurus/Link";
6+
import books from "../../database/ebooks";
7+
8+
export default function Books() { // Books component
9+
const { siteConfig } = useDocusaurusContext();
10+
11+
return (
12+
<Layout
13+
title={`Blogs from ${siteConfig.title}`}
14+
description="Welcome to CodeHarborHub Blog. Learn the basics to advanced concepts of web development. html, css, javascript, react, node.js, dsa, and more."
15+
>
16+
<section className="blog-page margin-top--lg margin-bottom--lg">
17+
<div className="blog-header">
18+
<h1 className="TitleText">Welcome to CodeHarborHub E-Books </h1>
19+
<p className="SubTitleText">
20+
Learn the basics to advanced concepts of web development. html, css,
21+
javascript, react, node.js, DSA, and many more from our E-Book collection.
22+
</p>
23+
</div>
24+
<div className="card-container">
25+
{books.map((book) => (
26+
<div key={book.id} className="card">
27+
<img src={book.image} alt={book.title} />
28+
<h2>{book.title}</h2>
29+
<p>{book.description}</p>
30+
<Link to={book.link} className="read-more">
31+
Link to the PDF
32+
</Link>
33+
</div>
34+
))}
35+
</div>
36+
</section>
37+
</Layout>
38+
);
39+
}

‎src/pages/ebooks/style.css

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
.blog-page {
2+
margin: 2rem 1rem;
3+
}
4+
.blog-page .blog-header {
5+
text-align: center;
6+
margin: 1rem 0;
7+
}
8+
9+
.blog-page .blog-header .TitleText {
10+
background: linear-gradient(
11+
90deg,
12+
rgb(152 0 255) 0%,
13+
rgb(246 41 41) 50%,
14+
rgb(255 169 8) 100%
15+
);
16+
background-clip: text;
17+
-webkit-text-fill-color: transparent;
18+
}
19+
20+
.blog-page .blog-header .SubTitleText {
21+
font-size: 1rem;
22+
margin: 1rem 0;
23+
}
24+
25+
/* .blog-page .blog-header::after {
26+
content: "";
27+
display: block;
28+
width: 100%;
29+
height: 1px;
30+
background: #dddddd4c;
31+
margin: 1rem 0;
32+
} */
33+
34+
.blog-page .card-container {
35+
margin-top: 2rem;
36+
display: grid;
37+
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
38+
gap: 20px;
39+
}
40+
41+
.blog-page .card-container .card {
42+
border: 1px solid #dddddd4a;
43+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
44+
}
45+
46+
.blog-page .card-container .card img {
47+
width: 100%;
48+
height: 150px;
49+
object-fit: cover;
50+
border-radius: 8px 8px 0 0;
51+
margin-bottom: 0.8rem;
52+
}
53+
54+
.blog-page .card-container .card h2 {
55+
font-size: 1.2rem;
56+
margin-top: 0.5rem 0;
57+
padding: 0 0.5rem;
58+
}
59+
60+
.blog-page .card-container .card p {
61+
font-size: 1rem;
62+
margin-bottom: 1rem;
63+
padding: 0 0.5rem;
64+
}
65+
66+
.blog-page .card-container .card .read-more {
67+
padding: 0.5rem;
68+
}

0 commit comments

Comments
 (0)