Skip to content

Commit 2e6705e

Browse files
CohinemCohinem
authored
Aded Getting started, download,contribute (#1)
1 parent 8e4a16a commit 2e6705e

File tree

3 files changed

+407
-9
lines changed

3 files changed

+407
-9
lines changed

‎src/routes/contribute/index.tsx

Lines changed: 200 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,207 @@
11
import Layout from "@components/Layout";
2-
import { Typography } from "@mui/material";
2+
import Page from "@components/Page";
3+
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';
6+
7+
const Section = ({ title, children }: { title: string; children: React.ReactNode }) => (
8+
<Box sx={{ mb: 4 }}>
9+
<Typography variant="h6" gutterBottom sx={{ fontWeight: '600', mt: 3, mb: 2 }}>
10+
{title}
11+
</Typography>
12+
{children}
13+
</Box>
14+
);
15+
16+
const CodeBlock = ({ children }: { children: React.ReactNode }) => {
17+
const theme = useTheme();
18+
return (
19+
<Box
20+
sx={{
21+
bgcolor: theme.surfaceVariant,
22+
color: theme.onSurfaceVariant,
23+
p: 2,
24+
borderRadius: 1,
25+
fontFamily: 'monospace',
26+
fontSize: '0.875rem',
27+
overflowX: 'auto',
28+
mb: 2,
29+
}}
30+
>
31+
{children}
32+
</Box>
33+
);
34+
};
335

436
export default function Contribute() {
37+
const theme = useTheme();
38+
39+
const content = (
40+
<Box>
41+
<Typography sx={{ mt: 2 }}>
42+
Contributions to <b>LNReader</b> are welcome and greatly appreciated! Follow the guide below to get started.
43+
</Typography>
44+
45+
<Section title="Setting up your environment">
46+
<Typography sx={{ mb: 2 }}>
47+
After forking to your own GitHub org or account, follow these steps to get started:
48+
</Typography>
49+
<List>
50+
<ListItem>
51+
<ListItemIcon><CodeIcon /></ListItemIcon>
52+
<ListItemText
53+
primary="Node.js version <= 16.13.1"
54+
secondary="For version management, we recommend using nvm"
55+
secondaryTypographyProps={{ color: theme.onSurface }}
56+
/>
57+
</ListItem>
58+
<ListItem>
59+
<ListItemIcon><CodeIcon /></ListItemIcon>
60+
<ListItemText
61+
primary="Java SDK version <= 11"
62+
secondary="For version management, you can optionally use jenv"
63+
secondaryTypographyProps={{ color: theme.onSurface }}
64+
/>
65+
</ListItem>
66+
<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></>}
71+
secondaryTypographyProps={{ color: theme.onSurface }}
72+
/>
73+
</ListItem>
74+
</List>
75+
</Section>
76+
77+
<Section title="Quick Start Steps">
78+
<List>
79+
<ListItem>
80+
<ListItemText
81+
primary="Clone your fork to your local machine:"
82+
secondary={
83+
<CodeBlock>
84+
git clone https://github.com/&lt;your-username&gt;/lnreader.git
85+
</CodeBlock>
86+
}
87+
/>
88+
</ListItem>
89+
<ListItem>
90+
<ListItemText
91+
primary="Step into the local repository:"
92+
secondary={
93+
<CodeBlock>
94+
cd lnreader
95+
</CodeBlock>
96+
}
97+
/>
98+
</ListItem>
99+
<ListItem>
100+
<ListItemText
101+
primary="Install dependencies:"
102+
secondary={
103+
<CodeBlock>
104+
npm install
105+
</CodeBlock>
106+
}
107+
/>
108+
</ListItem>
109+
<ListItem>
110+
<ListItemText
111+
primary="Build the APK:"
112+
secondary={
113+
<CodeBlock>
114+
npm run buildRelease
115+
</CodeBlock>
116+
}
117+
/>
118+
</ListItem>
119+
</List>
120+
</Section>
121+
122+
<Section title="Developing on Android">
123+
<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).
125+
</Typography>
126+
<List>
127+
<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></>}
132+
secondaryTypographyProps={{ color: theme.onSurface }}
133+
/>
134+
</ListItem>
135+
<ListItem>
136+
<ListItemIcon><CodeIcon /></ListItemIcon>
137+
<ListItemText primary="IDE of your choice" />
138+
</ListItem>
139+
</List>
140+
<Typography sx={{ mt: 2, mb: 1 }}>
141+
Development Steps:
142+
</Typography>
143+
<Typography sx={{ mt: 2, mb: 1 }}>
144+
Check if Android device/emulator is connected:
145+
</Typography>
146+
<CodeBlock>
147+
adb devices
148+
</CodeBlock>
149+
<Typography sx={{ mt: 2, mb: 1 }}>
150+
Run Metro for development:
151+
</Typography>
152+
<CodeBlock>
153+
npm start
154+
</CodeBlock>
155+
<Typography sx={{ mt: 2, mb: 1 }}>
156+
View on your Android device (run in a new terminal):
157+
</Typography>
158+
<CodeBlock>
159+
npm run android
160+
</CodeBlock>
161+
<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.
163+
</Typography>
164+
</Section>
165+
166+
<Section title="Style & Linting">
167+
<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>.
169+
</Typography>
170+
<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:
172+
</Typography>
173+
<CodeBlock>
174+
npm run lint
175+
</CodeBlock>
176+
</Section>
177+
178+
<Box sx={{ my: 4, textAlign: "center" }}>
179+
<Button
180+
variant="contained"
181+
startIcon={<BrushIcon />}
182+
sx={{
183+
borderRadius: 12,
184+
background: theme.primaryContainer,
185+
color: theme.onPrimaryContainer,
186+
textTransform: "none",
187+
}}
188+
href="https://github.com/LNReader/lnreader/fork"
189+
target="_blank"
190+
rel="noopener noreferrer"
191+
>
192+
Start Contributing
193+
</Button>
194+
</Box>
195+
<Divider />
196+
</Box>
197+
);
198+
5199
return (
6200
<Layout>
7-
<Typography>Contribute</Typography>
201+
<Page
202+
title="Contribute"
203+
content={content}
204+
/>
8205
</Layout>
9206
);
10-
}
207+
}

‎src/routes/download/index.tsx

Lines changed: 81 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,88 @@
11
import Layout from "@components/Layout";
2-
import { Typography } from "@mui/material";
2+
import Page from "@components/Page";
3+
import { useTheme } from "@hooks/useTheme";
4+
import { Box, Button, Card, Divider, Typography, Link } from "@mui/material";
5+
import { Android } from "@mui/icons-material";
6+
7+
const downloadLink = "https://github.com/LNReader/lnreader/releases/download/v2.0.0-beta.2/lnreader-v2.0.0-beta.2.apk";
38

49
export default function Download() {
10+
const theme = useTheme();
11+
512
return (
613
<Layout>
7-
<Typography>Download</Typography>
14+
<Page
15+
title="Download LNReader"
16+
content={
17+
<Box>
18+
<Typography sx={{ mt: 2 }}>
19+
<b>LNReader</b> is a Tachiyomi-like, free and open source light novel reader for Android. Download it now and start enjoying your favorite stories!
20+
</Typography>
21+
<Box sx={{ my: 4, textAlign: "center" }}>
22+
<Button
23+
variant="contained"
24+
startIcon={<Android />}
25+
sx={{
26+
borderRadius: 12,
27+
background: theme.primaryContainer,
28+
color: theme.onPrimaryContainer,
29+
textTransform: "none",
30+
py: 1,
31+
px: 3,
32+
fontSize: "1.1rem",
33+
}}
34+
href={downloadLink}
35+
target="_blank"
36+
rel="noopener noreferrer"
37+
>
38+
Download APK
39+
</Button>
40+
</Box>
41+
<Card
42+
sx={{
43+
bgcolor: theme.tertiaryContainer,
44+
my: 2,
45+
p: 2,
46+
borderRadius: 2,
47+
}}
48+
>
49+
<Typography sx={{ mb: 2, fontWeight: "600" }}>
50+
Important Note
51+
</Typography>
52+
<Typography sx={{ fontSize: 16 }}>
53+
<b>LNReader</b> comes without any pre-installed plugins. Visit our{" "}
54+
<Link href="/plugins" color="inherit">
55+
<b>Plugins page</b>
56+
</Link>{" "}
57+
to add content sources.
58+
</Typography>
59+
</Card>
60+
{/* for later? thought I would find lines in Readme.*/}
61+
{/*
62+
<Box sx={{ mt: 4 }}>
63+
<Typography variant="h6" sx={{ mb: 2 }}>
64+
Features
65+
</Typography>
66+
<ul>
67+
<li>
68+
<Typography>Read light novels offline</Typography>
69+
</li>
70+
<li>
71+
<Typography></Typography>
72+
</li>
73+
<li>
74+
<Typography></Typography>
75+
</li>
76+
<li>
77+
<Typography></Typography>
78+
</li>
79+
</ul>
80+
</Box>
81+
*/}
82+
<Divider sx={{ my: 4 }} />
83+
</Box>
84+
}
85+
/>
886
</Layout>
987
);
10-
}
88+
}

0 commit comments

Comments
 (0)