Skip to content

Commit 8272141

Browse files
studyhogstudyhog
authored
Merge pull request #60 from studyhog/develop
Develop
2 parents 38d737f + 43e90a5 commit 8272141

File tree

16 files changed

+276
-443
lines changed

16 files changed

+276
-443
lines changed

‎package-lock.json

Lines changed: 58 additions & 328 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"@testing-library/user-event": "^13.5.0",
1414
"react": "^18.2.0",
1515
"react-dom": "^18.2.0",
16+
"react-router-dom": "^6.3.0",
1617
"react-scripts": "5.0.1",
1718
"web-vitals": "^2.1.4"
1819
},

‎public/favicon.ico

-3.78 KB
Binary file not shown.

‎public/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
<meta name="theme-color" content="#000000" />
88
<meta
99
name="description"
10-
content="Web site created using create-react-app"
10+
content="A collection of steam deck resources"
1111
/>
12-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
12+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/Steam_Deck_favicon.svg" />
1313
<!--
1414
manifest.json provides metadata used when your web app is installed on a
1515
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

‎public/logo192.png

-5.22 KB
Binary file not shown.

‎public/logo512.png

-9.44 KB
Binary file not shown.

‎src/App.js

Lines changed: 40 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,49 @@
1-
import "./App.css";
21
import {createTheme, ThemeProvider} from "@mui/material/styles";
3-
import Typography from "@mui/material/Typography";
2+
import useMediaQuery from '@mui/material/useMediaQuery';
3+
import {Route, Routes} from "react-router-dom";
44
import {Page} from "./components/Page";
55
import {Header} from "./components/Header";
6-
import {EMULATION_RESOURCES} from "./data/emulation";
7-
import {GUIDE_RESOURCES} from "./data/guide";
8-
import {PLUGIN_RESOURCES} from "./data/plugin";
9-
import {ROM_RESOURCES} from "./data/rom";
10-
import {VALVE_RESOURCES} from "./data/valve";
11-
import {OTHER_RESOURCES} from "./data/other";
12-
import {SCRIPT_RESOURCES} from "./data/script";
13-
import {GAME_REVIEW_RESOURCES} from "./data/game_review";
14-
import {NON_STEAM_LAUNCHER_RESOURCES} from "./data/non_steam_launcher";
15-
import {resourceTitleComparator} from "./utils";
16-
17-
const darkTheme = createTheme({
18-
palette: {
19-
mode: "dark",
20-
}
21-
});
22-
23-
const ALL_RESOURCES = {
24-
"Emulation": EMULATION_RESOURCES,
25-
"Guides": GUIDE_RESOURCES,
26-
"Plugins": PLUGIN_RESOURCES,
27-
"ROM": ROM_RESOURCES,
28-
"Valve": VALVE_RESOURCES,
29-
"Launchers": NON_STEAM_LAUNCHER_RESOURCES,
30-
"Game Performance/Reviews": GAME_REVIEW_RESOURCES,
31-
"Scripts": SCRIPT_RESOURCES,
32-
"Other": OTHER_RESOURCES,
33-
}
6+
import {PAGE_RESOURCE_MAP} from "./data/constants";
7+
import CssBaseline from '@mui/material/CssBaseline';
8+
import {useState} from "react";
9+
import "./App.css";
3410

3511
function App() {
12+
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
13+
const resources = PAGE_RESOURCE_MAP;
14+
const resourceKeys = Object.keys(resources);
15+
const [darkMode, setDarkMode] = useState(prefersDarkMode);
16+
const theme = createTheme({
17+
palette: {
18+
mode: darkMode ? "dark" : "light",
19+
}
20+
})
21+
const header = <Header
22+
title={"Steam Deck Resources"}
23+
links={resourceKeys}
24+
setDarkMode={setDarkMode}
25+
/>;
3626
return (
37-
<ThemeProvider theme={darkTheme}>
38-
<div className="App" style={{
39-
background: darkTheme.palette.background.default,
40-
}}>
41-
<Header title={"Steam Deck Resources"}/>
42-
{Object.entries(ALL_RESOURCES).map(([title, resources], i) => {
43-
const sortedResources = resources.sort(resourceTitleComparator);
44-
return <div key={`${title}-${i}-container-div`}>
45-
<Typography
46-
variant="h6"
47-
sx={{flexGrow: 1}}
48-
color={darkTheme.palette.text.primary}
49-
>
50-
{title}
51-
</Typography>
52-
<Page
53-
title={title}
54-
resources={sortedResources}
55-
/>
56-
<br/>
57-
</div>
58-
})}
59-
</div>
60-
</ThemeProvider>
27+
<CssBaseline enableColorScheme>
28+
<ThemeProvider theme={theme}>
29+
<div className="App" style={{
30+
background: theme.palette.background.default,
31+
}}>
32+
{header}
33+
<Routes>
34+
{Object.entries(resources).map(
35+
([title, pageResources], i) => <Route
36+
path={`/${title}`}
37+
key={`${title}-${i}-route`}
38+
element={
39+
<Page resources={pageResources}/>
40+
}
41+
/>
42+
)}
43+
</Routes>
44+
</div>
45+
</ThemeProvider>
46+
</CssBaseline>
6147
);
6248
}
6349

‎src/components/Header.js

Lines changed: 53 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,71 @@
1+
import {useState} from "react";
2+
import {useNavigate} from "react-router-dom";
3+
import {IconButton, useTheme} from "@mui/material"
14
import Typography from "@mui/material/Typography";
2-
import {useTheme} from "@mui/material";
5+
import Button from "@mui/material/Button";
6+
import Drawer from "@mui/material/Drawer";
37
import AppBar from '@mui/material/AppBar';
48
import Toolbar from '@mui/material/Toolbar';
5-
import Link from "@mui/material/Link";
69
import GitHubIcon from '@mui/icons-material/GitHub';
10+
import DarkModeIcon from '@mui/icons-material/DarkMode';
11+
import LightModeIcon from '@mui/icons-material/LightMode';
12+
import ListIcon from '@mui/icons-material/List';
13+
import {openInNewWindow} from "../utils";
14+
import {
15+
GITHUB_REPO_URL,
16+
} from "../data/constants";
717

8-
export const Header = ({title}) => {
18+
19+
export const Header = ({title, links, setDarkMode}) => {
920
const theme = useTheme();
21+
const isDark = theme.palette.mode === "dark";
22+
const themeIcon = isDark ? <LightModeIcon/> : <DarkModeIcon/>;
23+
const themeButton = <IconButton onClick={()=>setDarkMode(!isDark)}>{themeIcon}</IconButton>;
24+
25+
const navigate = useNavigate();
26+
const [openDrawer, setOpenDrawer] = useState(false);
1027
const titleComponent = <Typography
1128
variant="h4"
1229
component="a"
1330
sx={{ flexGrow: 1 }}
14-
color={theme.palette.primary.main}
15-
gutterBottom
31+
color={theme.palette.text.primary}
1632
href="/"
1733
>
1834
{title}
19-
</Typography>
20-
return <AppBar position="static">
35+
</Typography>;
36+
const linkComponents = links.map(
37+
(title, i) => <Button
38+
color="inherit"
39+
key={`${title}-${i}-header-button`}
40+
onClick={() => navigate(`/${title}`)}
41+
>
42+
{title || "HOME"}
43+
</Button>
44+
);
45+
return <AppBar position={"sticky"}>
2146
<Toolbar>
2247
{titleComponent}
23-
<Link href="https://www.github.com/studyhog/deck"
24-
target="_blank">
25-
<GitHubIcon/>
26-
</Link>
48+
<Button
49+
color="inherit"
50+
startIcon={<ListIcon/>}
51+
onClick={()=>setOpenDrawer(true)}
52+
>
53+
Jump to
54+
</Button>
55+
{themeButton}
56+
<Drawer
57+
anchor={"right"}
58+
open={openDrawer}
59+
onClose={()=>setOpenDrawer(false)}
60+
>
61+
{linkComponents}
62+
<Button
63+
color="inherit"
64+
onClick={() => {openInNewWindow(GITHUB_REPO_URL)}}
65+
>
66+
<GitHubIcon/>
67+
</Button>
68+
</Drawer>
2769
</Toolbar>
2870
</AppBar>
2971
}

‎src/components/Page.js

Lines changed: 14 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,16 @@
1-
import TableContainer from '@mui/material/TableContainer';
2-
import Table from '@mui/material/Table';
3-
import TableHead from '@mui/material/TableHead';
4-
import TableRow from '@mui/material/TableRow';
5-
import TableCell from '@mui/material/TableCell';
6-
import TableBody from "@mui/material/TableBody";
7-
import {Row} from "./Row";
1+
import {PageContents} from "./PageContents";
82

9-
export const Page = ({title, resources}) => {
10-
const columns = ["Resource", "Watchers", "Forks", "Stars", "Description"];
11-
const tableRowKey = `${title}-TableRow`;
12-
return (
13-
<TableContainer>
14-
<Table
15-
sx={{ minWidth: 650 }}
16-
size="small"
17-
>
18-
<TableHead
19-
key={`${title}-TableHead`}
20-
>
21-
<TableRow key={`${tableRowKey}-header`}>
22-
{columns.map(
23-
(c, i) => <TableCell key={`${tableRowKey}-header-${i}`}>
24-
{c}
25-
</TableCell>
26-
)}
27-
</TableRow>
28-
</TableHead>
29-
<TableBody>
30-
{resources.map((r, i) => {
31-
const currentRowKey = `${tableRowKey}-row-${i}`;
32-
const props = {rowKey: currentRowKey, ...r}
33-
return <Row
34-
key={currentRowKey}
35-
{...props}
36-
/>;
37-
})}
38-
</TableBody>
39-
</Table>
40-
</TableContainer>
41-
)
3+
export const Page = ({resources}) => {
4+
return <>
5+
{
6+
Object.entries(resources).map(
7+
([title, availableResources], i) => <PageContents
8+
key={`${title}-${i}-section`}
9+
sectionNum={i}
10+
title={title}
11+
resources={availableResources}
12+
/>
13+
)
14+
}
15+
</>;
4216
}

‎src/components/PageContents.js

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import TableContainer from '@mui/material/TableContainer';
2+
import Table from '@mui/material/Table';
3+
import TableHead from '@mui/material/TableHead';
4+
import TableRow from '@mui/material/TableRow';
5+
import TableCell from '@mui/material/TableCell';
6+
import TableBody from "@mui/material/TableBody";
7+
import {Row} from "./Row";
8+
import Typography from "@mui/material/Typography";
9+
import {useTheme} from "@mui/material";
10+
11+
export const PageContents = ({sectionNum, title, resources}) => {
12+
const theme = useTheme();
13+
const columns = ["Resource", "Watchers", "Forks", "Stars", "Description"];
14+
const tableRowKey = `${title}-TableRow`;
15+
return (
16+
<div key={`${title}-${sectionNum}-container-div`}>
17+
<Typography
18+
variant="h6"
19+
sx={{flexGrow: 1}}
20+
color={theme.palette.text.primary}
21+
>
22+
{title}
23+
</Typography>
24+
<TableContainer>
25+
<Table
26+
sx={{minWidth: 650}}
27+
size="small"
28+
>
29+
<TableHead
30+
key={`${title}-TableHead`}
31+
>
32+
<TableRow key={`${tableRowKey}-header`}>
33+
{columns.map(
34+
(c, i) => <TableCell key={`${tableRowKey}-header-${i}`}>{c}</TableCell>
35+
)}
36+
</TableRow>
37+
</TableHead>
38+
<TableBody>
39+
{resources.map((r, i) => {
40+
const currentRowKey = `${tableRowKey}-row-${i}`;
41+
const props = {rowKey: currentRowKey, ...r}
42+
return <Row
43+
key={currentRowKey}
44+
{...props}
45+
/>;
46+
})}
47+
</TableBody>
48+
</Table>
49+
</TableContainer>
50+
<br/>
51+
</div>
52+
)
53+
}

‎src/components/Row.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export const Row = ({rowKey, title, badges, link, description}) => {
1212
href={link}
1313
underline="always"
1414
target="_blank"
15-
rel="noreferrer">
15+
rel="noopener noreferrer">
1616
{title}
1717
</Link>
1818
const availableBadges = badges || [];

‎src/data/constants.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import {EMULATION_RESOURCES} from "./emulation";
2+
import {GUIDE_RESOURCES} from "./guide";
3+
import {PLUGIN_RESOURCES} from "./plugin";
4+
import {ROM_RESOURCES} from "./rom";
5+
import {VALVE_RESOURCES} from "./valve";
6+
import {NON_STEAM_LAUNCHER_RESOURCES} from "./non_steam_launcher";
7+
import {GAME_REVIEW_RESOURCES} from "./game_review";
8+
import {SCRIPT_RESOURCES} from "./script";
9+
import {OTHER_RESOURCES} from "./other";
10+
import {resourceTitleComparator} from "../utils";
11+
12+
const ALL_RESOURCES = {
13+
"Emulation": EMULATION_RESOURCES,
14+
"Guides": GUIDE_RESOURCES,
15+
"Plugins": PLUGIN_RESOURCES,
16+
"ROM": ROM_RESOURCES,
17+
"Valve": VALVE_RESOURCES,
18+
"Launchers": NON_STEAM_LAUNCHER_RESOURCES,
19+
"GameReviews": GAME_REVIEW_RESOURCES,
20+
"Scripts": SCRIPT_RESOURCES,
21+
"Other": OTHER_RESOURCES,
22+
}
23+
24+
const ALL_RESOURCES_SORTED = Object.fromEntries(
25+
Object.entries(ALL_RESOURCES).map(
26+
([title, resources]) => {
27+
return [title, resources.sort(resourceTitleComparator)];
28+
}
29+
)
30+
);
31+
32+
export const PAGE_RESOURCE_MAP = Object.assign(
33+
{},
34+
{"": ALL_RESOURCES_SORTED},
35+
Object.fromEntries(
36+
Object.entries(ALL_RESOURCES_SORTED).map(
37+
([title, resources]) => [title, {[title]: resources}]
38+
)
39+
)
40+
);
41+
42+
export const GITHUB_REPO_URL = "https://www.github.com/studyhog/deck";

‎src/index.css

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
11
html, body {
2-
height: 100%;
3-
margin: 0;
42
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
53
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
64
sans-serif;
75
-webkit-font-smoothing: antialiased;
86
-moz-osx-font-smoothing: grayscale;
9-
background: rgb(18, 18, 18);
107
}
118

12-
#root {
13-
height: 100%;
9+
html, body, #root {
10+
height: 100%
1411
}
1512

1613
code {

0 commit comments

Comments
 (0)