Skip to content

Commit 9f41b78

Browse files
Mobx01Mobx01
authored
feat: add navigation, footer and start-here page
1 parent a6e1c04 commit 9f41b78

3 files changed

Lines changed: 144 additions & 8 deletions

File tree

‎community-website/pages/index.tsx‎

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,12 @@ const Home: NextPage = () => {
1919
],
2020
typeSpeed: 75,
2121
backSpeed: 75,
22+
loop: true,
2223
};
2324

24-
// #typing-element refers to the <code> rendered below
2525
typed.current = new Typed("#typing-element", options);
2626

2727
return () => {
28-
// Destroy Typed instance during cleanup to prevent memory leaks
2928
typed.current?.destroy();
3029
};
3130
}, []);
@@ -44,6 +43,10 @@ const Home: NextPage = () => {
4443
<title>Your First Open Source Project</title>
4544
<meta name="description" content="YFOSP Community Website" />
4645
<link rel="icon" href="/earth-asia-solid.svg" />
46+
<meta
47+
name="keywords"
48+
content="open source, first contribution, hacktoberfest, community, next.js, typescript"
49+
/>
4750
</Head>
4851

4952
<canvas
@@ -53,7 +56,7 @@ const Home: NextPage = () => {
5356
></canvas>
5457

5558
<main className={`${styles.main} text-black dark:text-white`}>
56-
<NavBar></NavBar>
59+
<NavBar />
5760

5861
<h1 className={styles.title}>
5962
Welcome to{" "}
@@ -73,15 +76,31 @@ const Home: NextPage = () => {
7376
></code>
7477
</p>
7578

79+
<p className={styles.description}>
80+
New to open source? Start with our guided checklist, learn the basics
81+
of Git & GitHub, and pick a beginner‑friendly task from this website
82+
itself.
83+
</p>
84+
7685
<div className={styles.grid}>
77-
<Link href="./community-members">
86+
<Link href="/start-here">
87+
<a className={styles.card}>
88+
<h2>Start Here &rarr;</h2>
89+
<p>
90+
Follow a simple step‑by‑step guide to make your first pull
91+
request to this project.
92+
</p>
93+
</a>
94+
</Link>
95+
96+
<Link href="/community-members">
7897
<a className={styles.card}>
7998
<h2>Our Community &rarr;</h2>
8099
<p>Find information about our community members here 👬</p>
81100
</a>
82101
</Link>
83102

84-
<Link href="./contributors">
103+
<Link href="/contributors">
85104
<a className={styles.card}>
86105
<h2>Our Contributors &rarr;</h2>
87106
<p>
@@ -91,7 +110,7 @@ const Home: NextPage = () => {
91110
</a>
92111
</Link>
93112

94-
<Link href="./community-guidelines">
113+
<Link href="/community-guidelines">
95114
<a className={styles.card}>
96115
<h2>Our Guidelines &rarr;</h2>
97116
<p>
@@ -101,14 +120,14 @@ const Home: NextPage = () => {
101120
</a>
102121
</Link>
103122

104-
<Link href="./educational-resources">
123+
<Link href="/educational-resources">
105124
<a className={styles.card}>
106125
<h2>Education Resources &rarr;</h2>
107126
<p>Various educational resources for your learning journey 📖</p>
108127
</a>
109128
</Link>
110129

111-
<Link href="./learn-git-and-github">
130+
<Link href="/learn-git-and-github">
112131
<a className={styles.card}>
113132
<h2>Learn Git & GitHub &rarr;</h2>
114133
<p>

‎community-website/pages/start-here.tsx‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import type { NextPage } from "next";
2+
import Head from "next/head";
3+
import Link from "next/link";
4+
import styles from "../styles/Home.module.css";
5+
import NavBar from "../components/NavBar";
6+
7+
const StartHere: NextPage = () => {
8+
return (
9+
<div className={styles.container}>
10+
<Head>
11+
<title>Start Here | Your First Open Source Project</title>
12+
<meta
13+
name="description"
14+
content="Step-by-step guide to making your first open source contribution to YFOSP."
15+
/>
16+
</Head>
17+
18+
<main className={`${styles.main} text-black dark:text-white`}>
19+
<NavBar />
20+
21+
<h1 className={styles.title}>Start Here</h1>
22+
<p className={styles.description}>
23+
New to open source? Follow these steps to make your first contribution
24+
to this website.
25+
</p>
26+
27+
<div className={styles.grid}>
28+
<div className={styles.card}>
29+
<h2>1. Set up your tools</h2>
30+
<p>
31+
Install Git and a code editor (for example, Visual Studio Code).
32+
Make sure <code>git --version</code> works in your terminal.
33+
</p>
34+
</div>
35+
36+
<div className={styles.card}>
37+
<h2>2. Fork and clone</h2>
38+
<p>
39+
Go to{" "}
40+
<a
41+
href="https://github.com/yfosp/main-website"
42+
target="_blank"
43+
rel="noopener noreferrer"
44+
>
45+
yfosp/main-website
46+
</a>{" "}
47+
and click <strong>Fork</strong>, then clone your fork to your
48+
machine.
49+
</p>
50+
</div>
51+
52+
<div className={styles.card}>
53+
<h2>3. Create a branch</h2>
54+
<p>
55+
In your project folder, run{" "}
56+
<code>git checkout -b your-feature-name</code> to create a new
57+
feature branch.
58+
</p>
59+
</div>
60+
61+
<div className={styles.card}>
62+
<h2>4. Pick a task</h2>
63+
<p>
64+
Look for issues labeled <code>good first issue</code> or{" "}
65+
<code>help wanted</code>, or improve content such as text,
66+
resources, or documentation.
67+
</p>
68+
</div>
69+
70+
<div className={styles.card}>
71+
<h2>5. Run and test</h2>
72+
<p>
73+
Install dependencies with <code>npm install</code> and start the
74+
dev server with <code>npm run dev</code>. Check your changes in
75+
the browser.
76+
</p>
77+
</div>
78+
79+
<div className={styles.card}>
80+
<h2>6. Commit and open a PR</h2>
81+
<p>
82+
Use <code>git add .</code>, then{" "}
83+
<code>git commit -m &quot;feat: your change&quot;</code> and{" "}
84+
<code>git push</code>. Then open a pull request from your branch
85+
on GitHub.
86+
</p>
87+
</div>
88+
</div>
89+
90+
<p className={styles.description}>
91+
Ready to explore issues?{" "}
92+
<a
93+
href="https://github.com/yfosp/main-website/issues"
94+
target="_blank"
95+
rel="noopener noreferrer"
96+
>
97+
View open issues &rarr;
98+
</a>
99+
</p>
100+
101+
<p className={styles.description}>
102+
Or go back to{" "}
103+
<Link href="/">
104+
<a>the homepage</a>
105+
</Link>
106+
.
107+
</p>
108+
</main>
109+
</div>
110+
);
111+
};
112+
113+
export default StartHere;

‎next-env.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
declare module "*.module.css" {
2+
const classes: { [key: string]: string };
3+
export default classes;
4+
}

0 commit comments

Comments
 (0)