Skip to content

Commit b076e0b

Browse files
nyagaminyagami
committed
updated contribute docs
1 parent 17bb94d commit b076e0b

File tree

1 file changed

+113
-68
lines changed

1 file changed

+113
-68
lines changed

‎src/routes/contribute/index.tsx

Lines changed: 113 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,35 @@
11
import Layout from "@components/Layout";
22
import Page from "@components/Page";
33
import { useTheme } from "@hooks/useTheme";
4-
import { Typography, Box, Button, Divider, List, ListItem, ListItemIcon, ListItemText } from "@mui/material";
5-
import { Code as CodeIcon, Android as AndroidIcon, Brush as BrushIcon } from '@mui/icons-material';
4+
import {
5+
Typography,
6+
Box,
7+
Button,
8+
Divider,
9+
List,
10+
ListItem,
11+
ListItemIcon,
12+
ListItemText,
13+
} from "@mui/material";
14+
import {
15+
Code as CodeIcon,
16+
Android as AndroidIcon,
17+
Brush as BrushIcon,
18+
} from "@mui/icons-material";
619

7-
const Section = ({ title, children }: { title: string; children: React.ReactNode }) => (
20+
const Section = ({
21+
title,
22+
children,
23+
}: {
24+
title: string;
25+
children: React.ReactNode;
26+
}) => (
827
<Box sx={{ mb: 4 }}>
9-
<Typography variant="h6" gutterBottom sx={{ fontWeight: '600', mt: 3, mb: 2 }}>
28+
<Typography
29+
variant="h6"
30+
gutterBottom
31+
sx={{ fontWeight: "600", mt: 3, mb: 2 }}
32+
>
1033
{title}
1134
</Typography>
1235
{children}
@@ -22,9 +45,9 @@ const CodeBlock = ({ children }: { children: React.ReactNode }) => {
2245
color: theme.onSurfaceVariant,
2346
p: 2,
2447
borderRadius: 1,
25-
fontFamily: 'monospace',
26-
fontSize: '0.875rem',
27-
overflowX: 'auto',
48+
fontFamily: "monospace",
49+
fontSize: "0.875rem",
50+
overflowX: "auto",
2851
mb: 2,
2952
}}
3053
>
@@ -39,35 +62,54 @@ export default function Contribute() {
3962
const content = (
4063
<Box>
4164
<Typography sx={{ mt: 2 }}>
42-
Contributions to <b>LNReader</b> are welcome and greatly appreciated! Follow the guide below to get started.
65+
Contributions to <b>LNReader</b> are welcome and greatly appreciated!
66+
Follow the guide below to get started.
4367
</Typography>
4468

4569
<Section title="Setting up your environment">
4670
<Typography sx={{ mb: 2 }}>
47-
After forking to your own GitHub org or account, follow these steps to get started:
71+
After forking to your own GitHub org or account, follow these steps to
72+
get started:
4873
</Typography>
4974
<List>
5075
<ListItem>
51-
<ListItemIcon><CodeIcon /></ListItemIcon>
52-
<ListItemText
53-
primary="Node.js version <= 16.13.1"
76+
<ListItemIcon>
77+
<CodeIcon />
78+
</ListItemIcon>
79+
<ListItemText
80+
primary="Node.js version >= 18"
5481
secondary="For version management, we recommend using nvm"
5582
secondaryTypographyProps={{ color: theme.onSurface }}
5683
/>
5784
</ListItem>
5885
<ListItem>
59-
<ListItemIcon><CodeIcon /></ListItemIcon>
60-
<ListItemText
61-
primary="Java SDK version <= 11"
86+
<ListItemIcon>
87+
<CodeIcon />
88+
</ListItemIcon>
89+
<ListItemText
90+
primary="Java SDK version >= 15"
6291
secondary="For version management, you can optionally use jenv"
6392
secondaryTypographyProps={{ color: theme.onSurface }}
6493
/>
6594
</ListItem>
6695
<ListItem>
67-
<ListItemIcon><AndroidIcon /></ListItemIcon>
68-
<ListItemText
69-
primary="Android SDK"
70-
secondary={<>Download from <a href="https://developer.android.com/studio" target="_blank" rel="noopener noreferrer">Android Studio</a></>}
96+
<ListItemIcon>
97+
<AndroidIcon />
98+
</ListItemIcon>
99+
<ListItemText
100+
primary="Android SDK"
101+
secondary={
102+
<>
103+
Download from{" "}
104+
<a
105+
href="https://developer.android.com/studio"
106+
target="_blank"
107+
rel="noopener noreferrer"
108+
>
109+
Android Studio
110+
</a>
111+
</>
112+
}
71113
secondaryTypographyProps={{ color: theme.onSurface }}
72114
/>
73115
</ListItem>
@@ -77,102 +119,108 @@ export default function Contribute() {
77119
<Section title="Quick Start Steps">
78120
<List>
79121
<ListItem>
80-
<ListItemText
122+
<ListItemText
81123
primary="Clone your fork to your local machine:"
82124
secondary={
83125
<CodeBlock>
84-
git clone https://github.com/&lt;your-username&gt;/lnreader.git
126+
git clone
127+
https://github.com/&lt;your-username&gt;/lnreader.git
85128
</CodeBlock>
86129
}
87130
/>
88131
</ListItem>
89132
<ListItem>
90-
<ListItemText
133+
<ListItemText
91134
primary="Step into the local repository:"
92-
secondary={
93-
<CodeBlock>
94-
cd lnreader
95-
</CodeBlock>
96-
}
135+
secondary={<CodeBlock>cd lnreader</CodeBlock>}
97136
/>
98137
</ListItem>
99138
<ListItem>
100-
<ListItemText
139+
<ListItemText
101140
primary="Install dependencies:"
102-
secondary={
103-
<CodeBlock>
104-
npm install
105-
</CodeBlock>
106-
}
141+
secondary={<CodeBlock>npm install</CodeBlock>}
107142
/>
108143
</ListItem>
109144
<ListItem>
110-
<ListItemText
145+
<ListItemText
111146
primary="Build the APK:"
112-
secondary={
113-
<CodeBlock>
114-
npm run buildRelease
115-
</CodeBlock>
116-
}
147+
secondary={<CodeBlock>npm run buildRelease</CodeBlock>}
117148
/>
118149
</ListItem>
119150
</List>
120151
</Section>
121152

122153
<Section title="Developing on Android">
123154
<Typography sx={{ mb: 2 }}>
124-
You will need an Android device or emulator connected to your computer as well as an IDE of your choice (e.g., VSCode).
155+
You will need an Android device or emulator connected to your computer
156+
as well as an IDE of your choice (e.g., VSCode).
125157
</Typography>
126158
<List>
127159
<ListItem>
128-
<ListItemIcon><AndroidIcon /></ListItemIcon>
129-
<ListItemText
130-
primary="ADB (Android Debug Bridge)"
131-
secondary={<><a href="https://developer.android.com/studio/command-line/adb" target="_blank" rel="noopener noreferrer">Android Developer site</a></>}
160+
<ListItemIcon>
161+
<AndroidIcon />
162+
</ListItemIcon>
163+
<ListItemText
164+
primary="ADB (Android Debug Bridge)"
165+
secondary={
166+
<>
167+
<a
168+
href="https://developer.android.com/studio/command-line/adb"
169+
target="_blank"
170+
rel="noopener noreferrer"
171+
>
172+
Android Developer site
173+
</a>
174+
</>
175+
}
132176
secondaryTypographyProps={{ color: theme.onSurface }}
133177
/>
134178
</ListItem>
135179
<ListItem>
136-
<ListItemIcon><CodeIcon /></ListItemIcon>
180+
<ListItemIcon>
181+
<CodeIcon />
182+
</ListItemIcon>
137183
<ListItemText primary="IDE of your choice" />
138184
</ListItem>
139185
</List>
140-
<Typography sx={{ mt: 2, mb: 1 }}>
141-
Development Steps:
142-
</Typography>
186+
<Typography sx={{ mt: 2, mb: 1 }}>Development Steps:</Typography>
143187
<Typography sx={{ mt: 2, mb: 1 }}>
144188
Check if Android device/emulator is connected:
145189
</Typography>
146-
<CodeBlock>
147-
adb devices
148-
</CodeBlock>
190+
<CodeBlock>adb devices</CodeBlock>
149191
<Typography sx={{ mt: 2, mb: 1 }}>
150192
Run Metro for development:
151193
</Typography>
152-
<CodeBlock>
153-
npm start
154-
</CodeBlock>
194+
<CodeBlock>npm start</CodeBlock>
155195
<Typography sx={{ mt: 2, mb: 1 }}>
156196
View on your Android device (run in a new terminal):
157197
</Typography>
158-
<CodeBlock>
159-
npm run android
160-
</CodeBlock>
198+
<CodeBlock>npm run android</CodeBlock>
161199
<Typography sx={{ mt: 2, mb: 1 }}>
162-
To view changes to the app with new code, save your code and press "r" on the Metro terminal to reload it. The app on the Android device/emulator will reload shortly.
200+
To view changes to the app with new code, save your code and press "r"
201+
on the Metro terminal to reload it. The app on the Android
202+
device/emulator will reload shortly.
163203
</Typography>
164204
</Section>
165205

166206
<Section title="Style & Linting">
167207
<Typography sx={{ mb: 2 }}>
168-
This codebase's linting rules are enforced using <a href="http://eslint.org/" target="_blank" rel="noopener noreferrer">ESLint</a>.
208+
This codebase's linting rules are enforced using{" "}
209+
<a
210+
href="http://eslint.org/"
211+
target="_blank"
212+
rel="noopener noreferrer"
213+
>
214+
ESLint
215+
</a>
216+
.
169217
</Typography>
170218
<Typography sx={{ mb: 2 }}>
171-
It is recommended that you install an ESLint plugin for your editor of choice when working on this codebase. However, you can always check if the source code is compliant by running:
219+
It is recommended that you install an ESLint plugin for your editor of
220+
choice when working on this codebase. However, you can always check if
221+
the source code is compliant by running:
172222
</Typography>
173-
<CodeBlock>
174-
npm run lint
175-
</CodeBlock>
223+
<CodeBlock>npm run lint</CodeBlock>
176224
</Section>
177225

178226
<Box sx={{ my: 4, textAlign: "center" }}>
@@ -198,10 +246,7 @@ export default function Contribute() {
198246

199247
return (
200248
<Layout>
201-
<Page
202-
title="Contribute"
203-
content={content}
204-
/>
249+
<Page title="Contribute" content={content} />
205250
</Layout>
206251
);
207-
}
252+
}

0 commit comments

Comments
 (0)