Skip to content

Commit 909e17a

Browse files
ajay-dhangarajay-dhangar
committed
added new features
1 parent 313b008 commit 909e17a

21 files changed

+921
-68
lines changed

‎.yarn/install-state.gz

14.4 KB
Binary file not shown.

‎docusaurus.config.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,8 @@ module.exports = async function createConfigAsync() {
8787
label: "Docs",
8888
},
8989
{ to: "/blogs", label: "Blogs", position: "left" },
90+
{ to: "/features", label: "Features", position: "left" },
91+
9092
{ to: "/about", label: "About", position: "right" },
9193
{
9294
href: "https://github.com/javascript-mastery/javascript-mastery.github.io",

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,14 @@
2525
"@heroicons/react": "^2.1.5",
2626
"@mdx-js/react": "^2.3.0",
2727
"aegis-web-sdk": "^1.38.3",
28+
"chart.js": "^4.4.6",
2829
"clsx": "^1.2.1",
2930
"docusaurus-plugin-sass": "^0.2.2",
3031
"object-inspect": "^1.12.0",
3132
"prism-react-renderer": "^1.3.5",
3233
"raw-loader": "^4.0.2",
3334
"react": "^18.2.0",
35+
"react-chartjs-2": "^5.2.0",
3436
"react-dom": "^18.2.0",
3537
"react-feather": "^2.0.10",
3638
"react-icons": "^5.3.0",

‎src/components/BrowserWindow/BrowserWindow.module.css

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
.browserWindow {
2+
border: 3px solid var(--ifm-color-emphasis-200);
3+
border-radius: var(--ifm-global-radius);
4+
box-shadow: var(--ifm-global-shadow-lw);
5+
margin-bottom: var(--ifm-leading);
6+
}
7+
8+
.browserWindowHeader {
9+
align-items: center;
10+
background: var(--ifm-color-emphasis-200);
11+
display: flex;
12+
padding: 0.5rem 1rem;
13+
}
14+
15+
.row::after {
16+
content: "";
17+
display: table;
18+
clear: both;
19+
}
20+
21+
.buttons {
22+
white-space: nowrap;
23+
}
24+
25+
.right {
26+
align-self: center;
27+
width: 10%;
28+
}
29+
30+
[data-theme="light"] {
31+
--ifm-background-color: #fff;
32+
}
33+
34+
.browserWindowAddressBar {
35+
flex: 1 0;
36+
margin: 0 1rem 0 0.5rem;
37+
border-radius: 12.5px;
38+
background-color: var(--ifm-background-color);
39+
color: var(--ifm-color-gray-800);
40+
padding: 5px 15px;
41+
font: 400 13px Arial, sans-serif;
42+
user-select: none;
43+
}
44+
45+
[data-theme="dark"] .browserWindowAddressBar {
46+
color: var(--ifm-color-gray-300);
47+
}
48+
49+
.dot {
50+
margin-right: 6px;
51+
margin-top: 4px;
52+
height: 12px;
53+
width: 12px;
54+
background-color: #bbb;
55+
border-radius: 50%;
56+
display: inline-block;
57+
}
58+
59+
.browserWindowMenuIcon {
60+
margin-left: auto;
61+
}
62+
63+
.bar {
64+
width: 17px;
65+
height: 3px;
66+
background-color: #aaa;
67+
margin: 3px 0;
68+
display: block;
69+
}
70+
71+
.browserWindowBody {
72+
background-color: var(--ifm-background-color);
73+
border-bottom-left-radius: inherit;
74+
border-bottom-right-radius: inherit;
75+
padding: 1rem;
76+
}
77+
78+
.browserWindowBody > *:last-child {
79+
margin-bottom: 0;
80+
}

‎src/components/BrowserWindow/index.tsx

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React, {type CSSProperties, type ReactNode} from 'react';
2+
import clsx from 'clsx';
3+
4+
import styles from './BrowserWindow.module.css';
5+
6+
interface Props {
7+
children: ReactNode;
8+
minHeight?: number;
9+
url: string;
10+
style?: CSSProperties;
11+
bodyStyle?: CSSProperties;
12+
}
13+
14+
export default function BrowserWindow({
15+
children,
16+
minHeight,
17+
url = 'http://localhost:3000',
18+
style,
19+
bodyStyle,
20+
}: Props): JSX.Element {
21+
return (
22+
<div className={styles.browserWindow} style={{...style, minHeight}}>
23+
<div className={styles.browserWindowHeader}>
24+
<div className={styles.buttons}>
25+
<span className={styles.dot} style={{background: '#f25f58'}} />
26+
<span className={styles.dot} style={{background: '#fbbe3c'}} />
27+
<span className={styles.dot} style={{background: '#58cb42'}} />
28+
</div>
29+
<div className={clsx(styles.browserWindowAddressBar, 'text--truncate')}>
30+
{url}
31+
</div>
32+
<div className={styles.browserWindowMenuIcon}>
33+
<div>
34+
<span className={styles.bar} />
35+
<span className={styles.bar} />
36+
<span className={styles.bar} />
37+
</div>
38+
</div>
39+
</div>
40+
41+
<div className={styles.browserWindowBody} style={bodyStyle}>
42+
{children}
43+
</div>
44+
</div>
45+
);
46+
}

‎src/components/MySheet.tsx

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React, { useState } from "react";
2+
import Sheet from "../ui/Sheet";
3+
import Separator from "@src/ui/Separator";
4+
import Link from "@docusaurus/Link";
5+
6+
interface ListItem {
7+
label: string;
8+
link: string;
9+
}
10+
11+
interface ContentProps {
12+
title: string;
13+
description: string;
14+
list: ListItem[];
15+
}
16+
17+
const MySheet: React.FC<ContentProps> = ({ title, description, list }) => {
18+
const [isSheetOpen, setIsSheetOpen] = useState(false);
19+
20+
const toggleSheet = () => {
21+
setIsSheetOpen(!isSheetOpen);
22+
};
23+
24+
return (
25+
<div className="mt-8">
26+
<button
27+
onClick={toggleSheet}
28+
className="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 border-none"
29+
>
30+
{title}
31+
</button>
32+
33+
<Sheet isOpen={isSheetOpen} onClose={toggleSheet} Title={title}>
34+
<p className="text-gray-800 dark:text-gray-200">
35+
{description}
36+
</p>
37+
<Separator orientation="horizontal" className="my-4" />
38+
39+
<ul>
40+
{list.map((item, index) => (
41+
<li key={index} className="text-gray-800 dark:text-gray-200 mb-2">
42+
<Link
43+
to={item.link}
44+
className="hover:underline text-blue-600 dark:text-blue-400"
45+
>
46+
{item.label}
47+
</Link>
48+
</li>
49+
))}
50+
</ul>
51+
</Sheet>
52+
</div>
53+
);
54+
};
55+
56+
export default MySheet;

‎src/pages/about/index.mdx

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,27 @@
11
---
2-
toc_max_heading_level: 4
3-
description: A page that tells you who am I.
2+
title: About Us
3+
description: Learn more about JavaScript Mastery and our mission.
4+
hide_table_of_contents: true
45
---
56

6-
## About Me
7+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
8+
<div className="p-4 space-y-4">
9+
<h1 className="text-3xl font-bold">About Us</h1>
10+
<p className="text-lg">
11+
JavaScript Mastery is a community of developers who love JavaScript. We
12+
create free and premium courses to help you learn JavaScript and advance
13+
your career. Our Docs are open-source and available on GitHub. We are
14+
always looking for contributors to help us create more content. If you are
15+
interested, please reach out to us.
16+
</p>
17+
</div>
18+
<div className="flex justify-center items-center">
19+
<div className="w-64 h-64">
20+
<img
21+
src="https://github.com/javascript-mastery.png"
22+
alt="JavaScript Mastery"
23+
/>
24+
</div>
25+
</div>
26+
</div>
727

8-
I am a software engineer with a passion for building scalable and reliable systems. I have experience in developing web applications, microservices, and cloud-native applications. I am proficient in various programming languages and technologies, including JavaScript, Python, Go, Docker, Kubernetes, and AWS.

0 commit comments

Comments
 (0)