Skip to content

Commit 2b05461

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #3652 from komal-agarwal5/main
Blog home page
2 parents 4cda6bb + 5f44d40 commit 2b05461

File tree

9 files changed

+148
-63
lines changed

9 files changed

+148
-63
lines changed

‎package-lock.json

Lines changed: 2 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"write-heading-ids": "docusaurus write-heading-ids"
1717
},
1818
"dependencies": {
19-
"@docusaurus/core": "^3.3.2",
19+
"@docusaurus/core": "^3.4.0",
2020
"@docusaurus/plugin-content-pages": "^3.3.2",
2121
"@docusaurus/plugin-google-analytics": "^3.3.2",
2222
"@docusaurus/plugin-google-gtag": "^3.3.2",
@@ -26,6 +26,7 @@
2626
"@docusaurus/plugin-vercel-analytics": "^3.3.2",
2727
"@docusaurus/preset-classic": "^3.3.2",
2828
"@docusaurus/remark-plugin-npm2yarn": "^3.4.0",
29+
"@docusaurus/theme-classic": "^3.4.0",
2930
"@docusaurus/theme-live-codeblock": "^3.3.2",
3031
"@docusaurus/theme-mermaid": "^3.3.2",
3132
"@docusaurus/theme-search-algolia": "^3.3.2",

‎src/database/blogs/index.tsx

Lines changed: 137 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,140 @@
11
interface Blog {
2-
id: number;
3-
title: string;
4-
image: string;
5-
description: string;
6-
slug: string;
7-
}
2+
id: number;
3+
title: string;
4+
image: string;
5+
description: string;
6+
slug: string;
7+
}
88

9-
const blogs: Blog[] = [
10-
{
11-
id: 1,
12-
title: 'Getting started with Microservices',
13-
image: '/assets/images/image01-736d71e3db56657987594b3b11459b5d.png',
14-
description: 'Microservices are an architectural style that structures an application as a collection of small, loosely coupled services.',
15-
slug: 'getting-started-with-microservices'
16-
},
17-
{
18-
id: 2,
19-
title: 'Cryptography and Its Use in Cyber Security',
20-
image: '/img/blogs/introduction-to-cryptography-and-cyber-security.jpg',
21-
description: 'In the realm of cyber security, cryptography stands as a critical tool for protecting information.',
22-
slug: 'introduction-to-cryptography-and-cyber-security'
23-
},
24-
{
25-
id: 3,
26-
title: 'Blog 3 Title',
27-
image: '/img/svg/blogging.svg',
28-
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.',
29-
slug: '#'
30-
},
31-
{
32-
id: 4,
33-
title: 'Blog 4 Title',
34-
image: '/img/svg/blogging.svg',
35-
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.',
36-
slug: '#'
37-
},
38-
{
39-
id: 5,
40-
title: 'Blog 5 Title',
41-
image: '/img/svg/blogging.svg',
42-
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.',
43-
slug: '#'
44-
},
45-
{
46-
id: 6,
47-
title: 'Blog 6 Title',
48-
image: '/img/svg/blogging.svg',
49-
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.',
50-
slug: '#'
51-
}
52-
];
9+
const blogs: Blog[] = [
10+
{
11+
id: 1,
12+
title: "Building RESTful CRUD API in springboot",
13+
image: "img/blogs/image01.png",
14+
description:
15+
" RESTful APIs have become a cornerstone for building scalable, efficient, and maintainable web applications.",
16+
slug: "Building RESTful CRUD API in springboot",
17+
},
18+
{
19+
id: 2,
20+
title: "Getting started with Microservices",
21+
image: "/assets/images/image01-736d71e3db56657987594b3b11459b5d.png",
22+
description:
23+
"Microservices are an architectural style that structures an application as a collection of small, loosely coupled services.",
24+
slug: "getting-started-with-microservices",
25+
},
26+
{
27+
id: 3,
28+
title: "Cryptography and Its Use in Cyber Security",
29+
image: "/img/blogs/introduction-to-cryptography-and-cyber-security.jpg",
30+
description:
31+
"In the realm of cyber security, cryptography stands as a critical tool for protecting information.",
32+
slug: "introduction-to-cryptography-and-cyber-security",
33+
},
34+
{
35+
id: 4,
36+
title: "Getting started with Mern",
37+
image: "/img/blogs/mern.jpg",
38+
description:
39+
" Learn the basics of the MERN stack, from building an API with Express.js to creating a React app.",
40+
slug: "getting-started-with-mern",
41+
},
42+
{
43+
id: 5,
44+
title: "Getting started with Vite",
45+
image: "/img/blogs/react-and-vite.jpg",
46+
description:
47+
"Learn how to get started with React by creating a new app using Vite. Follow the steps to set up your development environment",
48+
slug: "getting-started-with-vite",
49+
},
50+
{
51+
id: 6,
52+
title: "VS Code: Fix Bug in Any Extension by Rebuilding It",
53+
image: "/img/blogs/build-done-vsce.png",
54+
description:
55+
"How to fix a bug in any VS Code extension (.vsix) by rebuilding that extension",
56+
slug: "fix-bug-in-vscode-extension",
57+
},
58+
{
59+
id: 7,
60+
title: "Dockerizing a Rust application with Multi-Stage Builds",
61+
image: "/img/blogs/rust-docker.png",
62+
description:
63+
"Learn the basics of the MERN stack, from building an API with Express.js to creating a React app.",
64+
slug: "dockerizing-a-rust-application-with-multi-stage-builds",
65+
},
66+
{
67+
id: 8,
68+
title: "Git Best Practices: Commit Often, Perfect Later, Publish Once",
69+
image: "/img/svg/coding.svg",
70+
description:
71+
"Git is a powerful tool for managing the development of software projects, but it can be challenging to use effectively. ",
72+
slug: "git-best-practicies",
73+
},
74+
{
75+
id: 9,
76+
title: "Mastering Data Structures in Python",
77+
image: "/img/svg/programming.svg",
78+
description:
79+
"Data structures are essential components in computer science, enabling efficient data storage, manipulation, and retrieval.",
80+
slug: "Mastering Data Structures in Python",
81+
},
82+
{
83+
id: 10,
84+
title: "Automating Tasks with Python",
85+
image: "/img/svg/progress.svg",
86+
description:
87+
"Automation is a powerful way to boost productivity and efficiency by minimizing manual intervention in repetitive tasks.",
88+
slug: "automating-tasks-with-python",
89+
},
90+
{
91+
id: 11,
92+
title: "A Beginner’s Guide to the Top 5 React Hooks",
93+
image: "/img/svg/react.svg",
94+
description:
95+
"Since its inception, React has undergone significant evolution, with each new release introducing enhancements and improvements to the framework.",
96+
slug: "Beginner’s Guide to the Top 5 React Hooks",
97+
},
98+
{
99+
id: 12,
100+
title: "DOM manipulation in JavaScript",
101+
image: "/img/svg/javascript_frameworks.svg",
102+
description:
103+
" This model allows developers to interact with the document programmatically via scripting languages like JavaScript.",
104+
slug: "DOM manipulation in JavaScript",
105+
},
106+
{
107+
id: 13,
108+
title: "CI evolution: From FTP client to GitHub Action",
109+
image: "/img/svg/dev_productivity.svg",
110+
description:
111+
"In the early days of web development, the most common way to deploy a website was to use an FTP client.",
112+
slug: "from-ftp-client-to-github-action",
113+
},
114+
{
115+
id: 14,
116+
title: "Getting Started with PostgreSQL",
117+
image: "/img/svg/educator.svg",
118+
description:
119+
"The PostgreSQL language, primarily SQL (Structured Query Language), is the standard language for interacting with the PostgreSQL database.",
120+
slug: "Getting started with PostgreSQL",
121+
},
122+
{
123+
id: 15,
124+
title: "Getting Started with NextJS",
125+
image: "/img/svg/next_js.svg",
126+
description:
127+
"Next.js is a popular React framework that enables server-side rendering and static site generation, offering an optimized, flexible approach to building modern web applications.",
128+
slug: "Getting-started-with-nextJS",
129+
},
130+
{
131+
id: 16,
132+
title: "Comprehensive Documentation on Linux Development and Cybersecurity",
133+
image: "/img/svg/developer_activity.svg",
134+
description:
135+
"Renowned for its stability, security, and open-source nature, plays a pivotal role in modern computing environments",
136+
slug: "introduction-to-the-Linux-development-and-cyber-security",
137+
},
138+
];
53139

54-
export default blogs;
140+
export default blogs;

‎src/pages/blogs/style.css

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
.blog-page {
22
margin: 2rem 1rem;
33
}
4-
.blog-page .blog-header {
4+
5+
.blog-page .blog-header {
56
text-align: center;
67
margin: 1rem 0;
78
}
89

910
.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-
);
11+
background: linear-gradient(90deg,
12+
rgb(152 0 255) 0%,
13+
rgb(246 41 41) 50%,
14+
rgb(255 169 8) 100%);
1615
background-clip: text;
1716
-webkit-text-fill-color: transparent;
1817
}
@@ -65,4 +64,4 @@
6564

6665
.blog-page .card-container .card .read-more {
6766
padding: 0.5rem;
68-
}
67+
}

‎static/img/blogs/build-done-vsce.png

12.1 KB
Loading

‎static/img/blogs/image01.png

15.2 KB
Loading

‎static/img/blogs/mern.jpg

156 KB
Loading

‎static/img/blogs/react-and-vite.jpg

28.8 KB
Loading

‎static/img/blogs/rust-docker.png

1.29 MB
Loading

0 commit comments

Comments
 (0)