Skip to content

Commit 3147f03

Browse files
arghyaxcodesarghyaxcodes
committed
feat(site): Refactor HomePage to use new layout structure and components for improved organization and readability
- Reorganizes HomePage to utilize modular components, enhancing clarity, maintainability, and scalability. - Updates layout to integrate new sections for streamlined content presentation. - Simplifies logic by removing unused code and redundant features, focusing on a modular design approach. - Improves responsiveness and user experience while maintaining compatibility with the existing design system.
1 parent 363ac7e commit 3147f03

2 files changed

Lines changed: 269 additions & 454 deletions

File tree

‎src/app/(site)/layout.tsx‎

Lines changed: 245 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,262 @@
1-
import { baseOptions } from "@/app/layout.config";
1+
"use client";
2+
3+
import { baseOptions, linkItems } from "@/app/layout.config";
24
import { Footer } from "@/components/footer";
5+
import { GitHubIcon } from "@/components/icons";
6+
import { useDarkMode } from "@/hooks/useDarkMode";
7+
import Link from "fumadocs-core/link";
38
import { HomeLayout } from "fumadocs-ui/layouts/home";
9+
import {
10+
NavbarMenu,
11+
NavbarMenuContent,
12+
NavbarMenuLink,
13+
NavbarMenuTrigger,
14+
} from "fumadocs-ui/layouts/home/navbar";
15+
import {
16+
Book,
17+
ComponentIcon,
18+
Heart,
19+
MessageCircle,
20+
PlusIcon,
21+
Server,
22+
Users,
23+
} from "lucide-react";
24+
import Image from "next/image";
425
import type { ReactNode } from "react";
26+
import React from "react";
527

6-
export default function Layout({ children }: { children: ReactNode }) {
28+
export default function SiteLayout({ children }: { children: ReactNode }) {
29+
const { isDarkMode, mounted } = useDarkMode();
730
return (
831
<>
932
<HomeLayout
1033
{...baseOptions}
1134
style={
1235
{
13-
"--spacing-fd-container": "1280px",
14-
} as object
36+
"--spacing-fd-container": "1100px",
37+
paddingTop: "0px",
38+
} as React.CSSProperties
1539
}
40+
links={[
41+
{
42+
type: "menu",
43+
on: "menu",
44+
text: "Learn",
45+
items: [
46+
{
47+
text: "Documentation",
48+
url: "/docs/installation",
49+
icon: <Book />,
50+
},
51+
{
52+
text: "Programs",
53+
url: "/programs/contents",
54+
icon: <ComponentIcon />,
55+
},
56+
],
57+
},
58+
{
59+
type: "custom",
60+
on: "nav",
61+
children: (
62+
<NavbarMenu>
63+
<NavbarMenuTrigger>
64+
<Link href="/docs">Learn</Link>
65+
</NavbarMenuTrigger>
66+
<NavbarMenuContent className="grid grid-cols-1 gap-x-2 p-2 text-[15px] sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-10">
67+
<NavbarMenuLink
68+
href="/docs/introduction"
69+
className="col-span-3 md:row-span-2"
70+
>
71+
<div className="-mx-3 -mt-3">
72+
<Image
73+
src={
74+
isDarkMode && mounted
75+
? "/img/docs-dark.png"
76+
: "/img/docs-light.png"
77+
}
78+
alt="Java Documentation Guide"
79+
className="rounded-t-lg object-cover"
80+
style={{
81+
height: "300px",
82+
maskImage:
83+
"linear-gradient(to bottom,white 70%,transparent)",
84+
}}
85+
width={600}
86+
height={400}
87+
/>
88+
</div>
89+
<p className="font-medium">Getting Started</p>
90+
<p className="text-fd-muted-foreground text-sm">
91+
Learn how to set up Java on your machine and start coding.
92+
</p>
93+
</NavbarMenuLink>
94+
<NavbarMenuLink
95+
href="/programs/contents"
96+
className="col-span-3 md:row-span-2"
97+
>
98+
<div className="-mx-3 -mt-3">
99+
<Image
100+
src={
101+
isDarkMode && mounted
102+
? "/img/programs-dark.png"
103+
: "/img/programs-light.png"
104+
}
105+
alt="Java Programs Collection"
106+
className="rounded-t-lg object-cover"
107+
style={{
108+
height: "300px",
109+
maskImage:
110+
"linear-gradient(to bottom,white 70%,transparent)",
111+
}}
112+
width={600}
113+
height={300}
114+
/>
115+
</div>
116+
<p className="font-medium">Programs Collection</p>
117+
<p className="text-fd-muted-foreground text-sm">
118+
Practice with Java programs from beginner to advanced
119+
level.
120+
</p>
121+
</NavbarMenuLink>
122+
<NavbarMenuLink
123+
href="/docs/introduction"
124+
className="col-span-2 lg:col-start-7 lg:row-start-1"
125+
>
126+
<Book className="bg-fd-primary text-fd-primary-foreground mb-2 rounded-md p-1" />
127+
<p className="font-medium">Java Fundamentals</p>
128+
<p className="text-fd-muted-foreground text-sm">
129+
Master the core concepts of Java programming language.
130+
</p>
131+
</NavbarMenuLink>
132+
133+
<NavbarMenuLink
134+
href="/docs/variables-primitive-data-types"
135+
className="col-span-2 lg:col-start-7 lg:row-start-2"
136+
>
137+
<ComponentIcon className="bg-fd-primary text-fd-primary-foreground mb-2 rounded-md p-1" />
138+
<p className="font-medium">Data Types & Variables</p>
139+
<p className="text-fd-muted-foreground text-sm">
140+
Understand Java's primitive data types and variable
141+
declarations.
142+
</p>
143+
</NavbarMenuLink>
144+
145+
<NavbarMenuLink
146+
href="/docs/class-objects"
147+
className="col-span-2 lg:col-start-9 lg:row-start-1"
148+
>
149+
<Server className="bg-fd-primary text-fd-primary-foreground mb-2 rounded-md p-1" />
150+
<p className="font-medium">Classes & Objects</p>
151+
<p className="text-fd-muted-foreground text-sm">
152+
Learn object-oriented programming with Java classes and
153+
objects.
154+
</p>
155+
</NavbarMenuLink>
156+
157+
<NavbarMenuLink
158+
href="/docs/inheritance"
159+
className="col-span-2 lg:col-start-9 lg:row-start-2"
160+
>
161+
<PlusIcon className="bg-fd-primary text-fd-primary-foreground mb-2 rounded-md p-1" />
162+
<p className="font-medium">Advanced Concepts</p>
163+
<p className="text-fd-muted-foreground text-sm">
164+
Explore inheritance, polymorphism, and advanced Java
165+
features.
166+
</p>
167+
</NavbarMenuLink>
168+
</NavbarMenuContent>
169+
</NavbarMenu>
170+
),
171+
},
172+
{
173+
type: "custom",
174+
on: "nav",
175+
children: (
176+
<NavbarMenu>
177+
<NavbarMenuTrigger>
178+
<Link href="/about">Community</Link>
179+
</NavbarMenuTrigger>
180+
<NavbarMenuContent className="p-2 text-[15px]">
181+
<NavbarMenuLink href="/about" className="md:row-span-2">
182+
<div className="-mx-3 -mt-3">
183+
<Image
184+
src="/mission.svg"
185+
alt="Javaistic Community"
186+
className="mx-auto rounded-t-lg object-cover"
187+
style={{
188+
maskImage:
189+
"linear-gradient(to bottom,white 60%,transparent)",
190+
height: "200px",
191+
width: "320px",
192+
}}
193+
width={400}
194+
height={100}
195+
/>
196+
</div>
197+
<p className="font-medium">About Javaistic</p>
198+
<p className="text-fd-muted-foreground text-sm">
199+
Learn about our mission to make Java education accessible
200+
to everyone.
201+
</p>
202+
</NavbarMenuLink>
203+
204+
<NavbarMenuLink
205+
href="https://github.com/javaistic/javaistic"
206+
className="lg:col-start-2"
207+
>
208+
<GitHubIcon className="bg-fd-primary text-fd-primary-foreground mb-2 size-6 rounded-md p-1" />
209+
<p className="font-medium">Open Source</p>
210+
<p className="text-fd-muted-foreground text-sm">
211+
Contribute to Javaistic on GitHub and help improve Java
212+
education.
213+
</p>
214+
</NavbarMenuLink>
215+
216+
<NavbarMenuLink
217+
href="https://github.com/javaistic/javaistic/graphs/contributors"
218+
className="lg:col-start-2"
219+
>
220+
<Users className="bg-fd-primary text-fd-primary-foreground mb-2 rounded-md p-1" />
221+
<p className="font-medium">Contributors</p>
222+
<p className="text-fd-muted-foreground text-sm">
223+
Meet the amazing developers building Javaistic together.
224+
</p>
225+
</NavbarMenuLink>
226+
227+
<NavbarMenuLink
228+
href="https://github.com/javaistic/javaistic/discussions"
229+
className="lg:col-start-3 lg:row-start-1"
230+
>
231+
<MessageCircle className="bg-fd-primary text-fd-primary-foreground mb-2 rounded-md p-1" />
232+
<p className="font-medium">Discussions</p>
233+
<p className="text-fd-muted-foreground text-sm">
234+
Join conversations, ask questions, and share your Java
235+
journey.
236+
</p>
237+
</NavbarMenuLink>
238+
239+
<NavbarMenuLink
240+
href="https://github.com/javaistic/javaistic/blob/main/CONTRIBUTING.md"
241+
className="lg:col-start-3 lg:row-start-2"
242+
>
243+
<Heart className="bg-fd-primary text-fd-primary-foreground mb-2 rounded-md p-1" />
244+
<p className="font-medium">Contributing</p>
245+
<p className="text-fd-muted-foreground text-sm">
246+
Learn how to contribute content, code, and help grow our
247+
community.
248+
</p>
249+
</NavbarMenuLink>
250+
</NavbarMenuContent>
251+
</NavbarMenu>
252+
),
253+
},
254+
...linkItems,
255+
]}
16256
>
17257
{children}
18258
</HomeLayout>
19-
<Footer/>
259+
<Footer />
20260
</>
21261
);
22262
}

0 commit comments

Comments
 (0)