Skip to content

Commit 826e614

Browse files
ajay-dhangarajay-dhangar
committed
update style
1 parent 36568d1 commit 826e614

16 files changed

+692
-34
lines changed

‎.yarn/install-state.gz

6.92 KB
Binary file not shown.

‎docusaurus.config.js

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
// Note: type annotations allow type checking and IDEs autocompletion
33
const path = require("path");
44
const tailwindPlugin = require("./src/plugins/tailwind-config.cjs");
5-
// const lightCodeTheme = require("prism-react-renderer/themes/github");
5+
const lightCodeTheme = require("prism-react-renderer/themes/github");
66
const darkCodeTheme = require("prism-react-renderer/themes/vsDark");
77
module.exports = async function createConfigAsync() {
88
/** @type {import('@docusaurus/types').Config} */
@@ -17,7 +17,7 @@ module.exports = async function createConfigAsync() {
1717
organizationName: "javascript-mastery",
1818
projectName: "JavaScript Mastery",
1919

20-
plugins: [
20+
plugins: [
2121
async function plugin(context, options) {
2222
return {
2323
name: "docusaurus-plugin-module-alias",
@@ -42,8 +42,7 @@ module.exports = async function createConfigAsync() {
4242
({
4343
docs: {
4444
sidebarPath: require.resolve("./sidebars.js"),
45-
editUrl:
46-
"#",
45+
editUrl: "#",
4746
remarkPlugins: [(await import("remark-math")).default],
4847
rehypePlugins: [(await import("rehype-katex")).default],
4948
// Equivalent to `enableUpdateBy`.
@@ -53,8 +52,7 @@ module.exports = async function createConfigAsync() {
5352
},
5453
blog: {
5554
showReadingTime: true,
56-
editUrl:
57-
"#",
55+
editUrl: "#",
5856
remarkPlugins: [(await import("remark-math")).default],
5957
rehypePlugins: [(await import("rehype-katex")).default],
6058
},
@@ -97,7 +95,7 @@ module.exports = async function createConfigAsync() {
9795
{ to: "/blog", label: "Blog", position: "left" },
9896
{ to: "/about", label: "About", position: "right" },
9997
{
100-
href: "#",
98+
href: "https://github.com/javascript-mastery/javascript-mastery.github.io",
10199
label: "GitHub",
102100
position: "right",
103101
},
@@ -138,9 +136,22 @@ module.exports = async function createConfigAsync() {
138136
copyright: `Copyright © ${new Date().getFullYear()} JavaScript Mastery, Inc. Built with Docusaurus.`,
139137
},
140138
prism: {
141-
theme: darkCodeTheme,
139+
theme: lightCodeTheme,
142140
darkTheme: darkCodeTheme,
143-
additionalLanguages: ["csharp", "nginx"],
141+
additionalLanguages: [
142+
"csharp",
143+
"nginx",
144+
"java",
145+
"latex",
146+
"haskell",
147+
"matlab",
148+
"PHp",
149+
"powershell",
150+
"bash",
151+
"diff",
152+
"json",
153+
"scss",
154+
],
144155
},
145156
}),
146157
stylesheets: [

‎package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"@docusaurus/plugin-content-docs": "3.0.0-beta.0",
2222
"@docusaurus/preset-classic": "3.0.0-beta.0",
2323
"@docusaurus/theme-live-codeblock": "3.0.0-beta.0",
24+
"@heroicons/react": "^2.1.5",
2425
"@mdx-js/react": "^2.3.0",
2526
"aegis-web-sdk": "^1.38.3",
2627
"clsx": "^1.2.1",
@@ -30,10 +31,12 @@
3031
"raw-loader": "^4.0.2",
3132
"react": "^18.2.0",
3233
"react-dom": "^18.2.0",
34+
"react-icons": "^5.3.0",
3335
"react-simple-code-editor": "^0.11.0",
3436
"rehype-katex": "6",
3537
"remark-math": "5",
36-
"sass": "^1.53.0"
38+
"sass": "^1.53.0",
39+
"swiper": "^11.1.14"
3740
},
3841
"browserslist": {
3942
"production": [

‎src/components/Home/Blog.tsx

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import React from "react";
2+
import { FaBookOpen, FaNewspaper, FaImages } from "react-icons/fa";
3+
4+
import Link from "@docusaurus/Link";
5+
6+
const Blog: React.FC = () => {
7+
const blogPosts = [
8+
{
9+
title: "Getting Started with JavaScript",
10+
description:
11+
"Learn the fundamentals of JavaScript and how to set up your development environment.",
12+
icon: (
13+
<FaBookOpen className="h-12 w-12 text-blue-500 dark:text-yellow-400 mb-4" />
14+
),
15+
link: "#", // /blog/getting-started-with-js
16+
},
17+
{
18+
title: "Advanced JavaScript Techniques",
19+
description:
20+
"Explore advanced topics in JavaScript, such as closures, async programming, and more.",
21+
icon: (
22+
<FaNewspaper className="h-12 w-12 text-blue-500 dark:text-yellow-400 mb-4" />
23+
),
24+
link: "#", // /blog/advanced-js-techniques
25+
},
26+
{
27+
title: "JavaScript Tools & Libraries",
28+
description:
29+
"Discover powerful tools and libraries to streamline your JavaScript development process.",
30+
icon: (
31+
<FaImages className="h-12 w-12 text-blue-500 dark:text-yellow-400 mb-4" />
32+
),
33+
link: "#", // /blog/js-tools-and-libraries
34+
},
35+
];
36+
37+
return (
38+
<section className="py-20 bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100">
39+
<div className="container mx-auto px-6 lg:px-20 text-center">
40+
<h2 className="text-3xl lg:text-4xl font-bold mb-12">
41+
Blog & Resources
42+
</h2>
43+
<p className="text-lg mb-8 text-gray-600 dark:text-gray-300">
44+
Stay updated with the latest JavaScript trends, tutorials, and tips
45+
from our expert team.
46+
</p>
47+
<div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
48+
{blogPosts.map((post, index) => (
49+
<Link
50+
key={index}
51+
to={post.link}
52+
className="flex flex-col items-center p-6 bg-white dark:bg-gray-800 shadow-lg rounded-lg transform hover:scale-105 transition duration-300"
53+
>
54+
{post.icon}
55+
<h3 className="text-xl font-semibold mb-2">{post.title}</h3>
56+
<p className="text-sm text-gray-600 dark:text-gray-400">
57+
{post.description}
58+
</p>
59+
</Link>
60+
))}
61+
</div>
62+
<div className="mt-12">
63+
<a
64+
href="/blog"
65+
className="text-blue-600 dark:text-yellow-400 font-semibold text-lg underline hover:text-blue-700 dark:hover:text-yellow-500"
66+
>
67+
View All Articles
68+
</a>
69+
</div>
70+
</div>
71+
</section>
72+
);
73+
};
74+
75+
export default Blog;

‎src/components/Home/Community.tsx

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import React from 'react';
2+
import Link from '@docusaurus/Link';
3+
import { FaComments, FaUsers, FaChalkboardTeacher, FaHeadset } from 'react-icons/fa'; // React Icons
4+
5+
interface Feature {
6+
title: string;
7+
description: string;
8+
icon: React.FC<React.SVGProps<SVGSVGElement>>; // This type remains the same
9+
link: string;
10+
}
11+
12+
const features: Feature[] = [
13+
{
14+
title: 'Community Forums',
15+
description:
16+
'Engage with fellow learners and experienced developers. Share knowledge, ask questions, and collaborate on projects.',
17+
icon: FaComments, // Replacing ChatAlt2Icon with FaComments
18+
link: '#', // /community/forums
19+
},
20+
{
21+
title: 'Live Chat Groups',
22+
description:
23+
'Join real-time discussions in our chat groups. Stay updated with the latest trends and get instant help when you need it.',
24+
icon: FaUsers, // Replacing UsersIcon with FaUsers
25+
link: '#', // /community/chat
26+
},
27+
{
28+
title: 'Expert Mentorship',
29+
description:
30+
'Receive guidance from industry experts. Our mentors are here to help you navigate your learning journey and achieve your goals.',
31+
icon: FaChalkboardTeacher, // Replacing AcademicCapIcon with FaChalkboardTeacher
32+
link: '#',
33+
},
34+
{
35+
title: '24/7 Support',
36+
description:
37+
'Access our support team anytime. Whether you have technical issues or need assistance with your learning path, we’re here to help.',
38+
icon: FaHeadset, // Replacing SupportIcon with FaHeadset
39+
link: '#',
40+
},
41+
];
42+
43+
const Community: React.FC = () => {
44+
return (
45+
<section className="py-20 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
46+
<div className="container px-4">
47+
<h2 className="text-3xl lg:text-4xl font-bold text-center mb-8">
48+
Community & Support
49+
</h2>
50+
<p className="text-lg lg:text-xl text-center mb-12">
51+
Join our vibrant community and take advantage of comprehensive support to enhance your learning experience. Connect, collaborate, and grow with JavaScript Mastery.
52+
</p>
53+
<div className="grid gap-8 grid-cols-1 lg:grid-cols-4 md:grid-cols-2">
54+
{features.map((feature, index) => (
55+
<div
56+
key={index}
57+
className="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 flex flex-col items-center text-center"
58+
>
59+
<feature.icon className="h-12 w-12 text-blue-500 dark:text-yellow-400 mb-4" />
60+
<h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
61+
<p className="flex-grow mb-4">{feature.description}</p>
62+
<Link
63+
to={feature.link}
64+
className="mt-auto inline-block px-4 py-2 bg-blue-500 dark:bg-yellow-400 text-white dark:text-gray-800 font-semibold rounded-lg shadow-md hover:bg-blue-600 dark:hover:bg-yellow-500 transition-colors duration-300"
65+
>
66+
Learn More
67+
</Link>
68+
</div>
69+
))}
70+
</div>
71+
</div>
72+
</section>
73+
);
74+
};
75+
76+
export default Community;

‎src/components/Home/Courses.tsx

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import React from 'react';
2+
import Link from '@docusaurus/Link';
3+
4+
interface Course {
5+
title: string;
6+
description: string;
7+
link: string;
8+
}
9+
10+
const courses: Course[] = [
11+
{
12+
title: 'JavaScript Basics',
13+
description: 'Get started with JavaScript fundamentals and build a strong foundation.',
14+
link: '#',
15+
},
16+
{
17+
title: 'Advanced JavaScript',
18+
description: 'Deepen your understanding with advanced topics like closures, prototypes, and async programming.',
19+
link: '#',
20+
},
21+
{
22+
title: 'JavaScript for Web Development',
23+
description: 'Learn how to build dynamic web applications with JavaScript, HTML, and CSS.',
24+
link: '#',
25+
},
26+
{
27+
title: 'Node.js Essentials',
28+
description: 'Master back-end JavaScript and create powerful server-side applications with Node.js.',
29+
link: '#',
30+
},
31+
{
32+
title: 'JavaScript Libraries & Frameworks',
33+
description: 'Explore popular libraries and frameworks like React, Vue, and Angular.',
34+
link: '#',
35+
},
36+
{
37+
title: 'Full-Stack JavaScript',
38+
description: 'Combine front-end and back-end skills to become a full-stack JavaScript developer.',
39+
link: '#',
40+
},
41+
];
42+
43+
const Courses: React.FC = () => {
44+
return (
45+
<section className="py-16 bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
46+
<div className="container mx-auto px-4">
47+
<h2 className="text-3xl lg:text-4xl font-bold text-center mb-8">
48+
Courses & Learning Paths
49+
</h2>
50+
<p className="text-lg lg:text-xl text-center mb-12">
51+
Discover comprehensive courses and learning paths to take you from JavaScript beginner to pro. Start your journey today!
52+
</p>
53+
<div className="grid gap-8 grid-cols-1 lg:grid-cols-3 md:grid-cols-2">
54+
{courses.map((course, index) => (
55+
<div key={index} className="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md flex flex-col">
56+
<h3 className="text-xl font-semibold mb-3">{course.title}</h3>
57+
<p className="flex-grow mb-6">{course.description}</p>
58+
<Link
59+
to={course.link}
60+
className="mt-auto inline-block px-5 py-3 text-white bg-blue-600 hover:bg-blue-700 rounded-lg text-center transition duration-300"
61+
>
62+
Learn More
63+
</Link>
64+
</div>
65+
))}
66+
</div>
67+
</div>
68+
</section>
69+
);
70+
};
71+
72+
export default Courses;

‎src/components/Home/GetStarted.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import Link from '@docusaurus/Link';
2+
import React from 'react';
3+
import { FaArrowRight } from 'react-icons/fa'; // React Icon for Arrow
4+
5+
const GetStarted: React.FC = () => {
6+
return (
7+
<section className="py-20 bg-blue-500 dark:bg-blue-700 text-white">
8+
<div className="container mx-auto px-6 text-center">
9+
<h2 className="text-3xl lg:text-4xl font-bold mb-4">
10+
Get Started Today!
11+
</h2>
12+
<p className="text-lg lg:text-xl mb-8 max-w-2xl mx-auto">
13+
Take the first step towards mastering JavaScript with our interactive courses and hands-on projects. Join thousands of learners who are already on their journey to becoming JavaScript experts.
14+
</p>
15+
<Link
16+
to="/docs/"
17+
className="inline-flex items-center justify-center px-6 py-3 bg-yellow-400 hover:bg-yellow-500 text-gray-800 font-semibold rounded-lg shadow-md transition-colors duration-300"
18+
>
19+
Get Started
20+
<FaArrowRight className="ml-2 h-5 w-5" />
21+
</Link>
22+
</div>
23+
</section>
24+
);
25+
};
26+
27+
export default GetStarted;

0 commit comments

Comments
 (0)