Guusvanmeerveld
/
Materialtube
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added Seo to settings page, added a few optional env variables

Browse Source
main
Guus van Meerveld 2 years ago
parent 44f2db7c25
commit 0973689fb7
Signed by: Guusvanmeerveld
GPG Key ID: 2BA7D7912771966E
9 changed files with 121 additions and 94 deletions
Show Stats Download Patch File Download Diff File

6
next.config.js
Unescape View File

@ -1,3 +1,5 @@
const packageInfo = require("./package.json");
// @ts-check // @ts-check
/** /**
* @type {import('next').NextConfig} * @type {import('next').NextConfig}
@ -8,7 +10,9 @@ module.exports = {
ignoreDuringBuilds: true ignoreDuringBuilds: true
}, },
env: { env: {
NEXT_PUBLIC_GITHUB_URL: "https://github.com/Guusvanmeerveld/MaterialTube" NEXT_PUBLIC_GITHUB_URL: packageInfo.repository.url,
NEXT_PUBLIC_APP_NAME: process.env.APP_NAME ?? packageInfo.displayName,
NEXT_PUBLIC_DEFAULT_SERVER: process.env.DEFAULT_SERVER ?? "vid.puffyan.us"
}, },
basePath: process.env.BASE_PATH ?? "", basePath: process.env.BASE_PATH ?? "",
trailingSlash: !(process.env.CI == "true") trailingSlash: !(process.env.CI == "true")

3
package.json
Unescape View File

@ -3,6 +3,9 @@
"displayName": "MaterialTube", "displayName": "MaterialTube",
"description": "MaterialTube is a beautiful and elegant web client for Invidious servers, built using Next.js and MUI.", "description": "MaterialTube is a beautiful and elegant web client for Invidious servers, built using Next.js and MUI.",
"license": "MIT", "license": "MIT",
"repository": {
"url": "https://github.com/Guusvanmeerveld/MaterialTube"
},
"scripts": { "scripts": {
"dev": "next dev", "dev": "next dev",
"build": "next build", "build": "next build",

4
src/components/Navbar/Drawer.tsx
Unescape View File

@ -36,7 +36,9 @@ const AppDrawer: FC<{
onKeyDown={toggleDrawer(false)} onKeyDown={toggleDrawer(false)}
> >
<Box padding={2}> <Box padding={2}>
<Typography variant="h4">{packageInfo.displayName}</Typography> <Typography variant="h4">
{process.env.NEXT_PUBLIC_APP_NAME}
</Typography>
</Box> </Box>
<Divider /> <Divider />
<List> <List>

23
src/components/Navbar/index.tsx
Unescape View File

@ -91,14 +91,21 @@ const Navbar: FC = () => {
<Menu /> <Menu />
</IconButton> </IconButton>
<Typography <Link href="/" passHref>
variant="h6" <Typography
component="div" variant="h6"
sx={{ mr: 2, display: "flex", alignItems: "center" }} component="div"
> sx={{
<PlayCircleOutline sx={{ mr: 1 }} /> mr: 2,
{packageInfo.displayName} display: "flex",
</Typography> alignItems: "center",
cursor: "pointer"
}}
>
<PlayCircleOutline sx={{ mr: 1 }} />
{process.env.NEXT_PUBLIC_APP_NAME}
</Typography>
</Link>
<Box <Box
sx={{ sx={{

10
src/next-seo.config.ts
Unescape View File

@ -2,13 +2,15 @@ import packageInfo from "../package.json";
import type { DefaultSeoProps } from "next-seo"; import type { DefaultSeoProps } from "next-seo";
const name = process.env.NEXT_PUBLIC_APP_NAME;
const SEO: DefaultSeoProps = { const SEO: DefaultSeoProps = {
titleTemplate: `%s | ${packageInfo.displayName}`, titleTemplate: `%s | ${name}`,
defaultTitle: packageInfo.displayName, defaultTitle: name,
description: packageInfo.description, description: packageInfo.description,
openGraph: { openGraph: {
description: packageInfo.displayName, description: name,
site_name: packageInfo.displayName site_name: name
} }
}; };

2
src/pages/index.tsx
Unescape View File

@ -25,7 +25,7 @@ const Index: NextPage = () => (
> >
<PlayCircleOutline sx={{ mt: 2, fontSize: 100 }} /> <PlayCircleOutline sx={{ mt: 2, fontSize: 100 }} />
<Typography variant="h2" sx={{ my: 1 }}> <Typography variant="h2" sx={{ my: 1 }}>
{packageInfo.displayName} {process.env.NEXT_PUBLIC_APP_NAME}
</Typography> </Typography>
<Typography variant="h4" sx={{ my: 1 }}> <Typography variant="h4" sx={{ my: 1 }}>
{packageInfo.description} {packageInfo.description}

161
src/pages/settings.tsx
Unescape View File

@ -1,6 +1,7 @@
import axios from "axios"; import axios from "axios";
import { NextPage } from "next"; import { NextPage } from "next";
import { NextSeo } from "next-seo";
import { FC, useState } from "react"; import { FC, useState } from "react";
@ -163,94 +164,102 @@ const Settings: NextPage = () => {
}; };
return ( return (
<Layout> <>
<Container> <NextSeo
<Typography sx={{ my: 2 }} variant="h2"> title="Settings"
Settings description={`Update your ${process.env.NEXT_PUBLIC_APP_NAME} settings`}
</Typography> />
<Layout>
<Container>
<Typography sx={{ my: 2 }} variant="h2">
Settings
</Typography>
<Divider sx={{ mb: 4 }} /> <Divider sx={{ mb: 4 }} />
<Typography variant="h4">Theme</Typography> <Typography variant="h4">Theme</Typography>
<Box sx={{ my: 3, display: "flex" }}> <Box sx={{ my: 3, display: "flex" }}>
<Typography variant="h5" sx={{ flexGrow: 1 }}> <Typography variant="h5" sx={{ flexGrow: 1 }}>
General theme General theme
</Typography> </Typography>
<ButtonGroup <ButtonGroup
variant="contained" variant="contained"
color="primary" color="primary"
aria-label="outlined default button group" aria-label="outlined default button group"
> >
<Button onClick={() => setSetting("theme", "light")}>Light</Button> <Button onClick={() => setSetting("theme", "light")}>
<Button onClick={() => setSetting("theme")}>System</Button> Light
<Button onClick={() => setSetting("theme", "dark")}>Dark</Button> </Button>
</ButtonGroup> <Button onClick={() => setSetting("theme")}>System</Button>
</Box> <Button onClick={() => setSetting("theme", "dark")}>Dark</Button>
</ButtonGroup>
</Box>
<ColorSetting type="Primary Color" /> <ColorSetting type="Primary Color" />
<ColorSetting type="Accent Color" /> <ColorSetting type="Accent Color" />
<Divider sx={{ my: 4 }} /> <Divider sx={{ my: 4 }} />
<Typography variant="h4">Player</Typography> <Typography variant="h4">Player</Typography>
<Divider sx={{ my: 4 }} /> <Divider sx={{ my: 4 }} />
<Typography variant="h4">Miscellaneous</Typography> <Typography variant="h4">Miscellaneous</Typography>
<Box sx={{ my: 3, display: "flex", alignItems: "center" }}> <Box sx={{ my: 3, display: "flex", alignItems: "center" }}>
<Typography variant="h5" sx={{ flexGrow: 1 }}> <Typography variant="h5" sx={{ flexGrow: 1 }}>
Invidious Server Invidious Server
</Typography> </Typography>
<Box sx={{ mr: 2 }}> <Box sx={{ mr: 2 }}>
{invidiousServerResponse.data && {invidiousServerResponse.data &&
!invidiousServerResponse.isLoading && ( !invidiousServerResponse.isLoading && (
<> <>
<Done <Done
onClick={() => setModalState(true)} onClick={() => setModalState(true)}
sx={{ color: green[800], cursor: "pointer" }} sx={{ color: green[800], cursor: "pointer" }}
/> />
<InfoModal /> <InfoModal />
</> </>
)}
{invidiousServerResponse.error && (
<Error sx={{ color: red[800] }} />
)} )}
{invidiousServerResponse.error && ( {invidiousServerResponse.isLoading && <CircularProgress />}
<Error sx={{ color: red[800] }} /> </Box>
)} <FormControl sx={{ minWidth: 200 }}>
{invidiousServerResponse.isLoading && <CircularProgress />} <InputLabel id="server-select-label">Server</InputLabel>
<Select
labelId="server-select-label"
id="server-select"
value={settings.invidiousServer}
label="Server"
onChange={(e) => {
const server = e.target.value;
setSetting("invidiousServer", server);
}}
MenuProps={{ sx: { maxHeight: 300 } }}
>
{instances.data &&
instances.data
.filter(
([, server]) =>
server.type != ServerInstanceType.Onion &&
server.api == true
)
.map(([uri, server]) => (
<MenuItem key={uri} value={uri}>
{server.flag} {uri}
</MenuItem>
))}
</Select>
</FormControl>
</Box> </Box>
<FormControl sx={{ minWidth: 200 }}> </Container>
<InputLabel id="server-select-label">Server</InputLabel> </Layout>
<Select </>
labelId="server-select-label"
id="server-select"
value={settings.invidiousServer}
label="Server"
onChange={(e) => {
const server = e.target.value;
setSetting("invidiousServer", server);
}}
MenuProps={{ sx: { maxHeight: 300 } }}
>
{instances.data &&
instances.data
.filter(
([, server]) =>
server.type != ServerInstanceType.Onion &&
server.api == true
)
.map(([uri, server]) => (
<MenuItem key={uri} value={uri}>
{server.flag} {uri}
</MenuItem>
))}
</Select>
</FormControl>
</Box>
</Container>
</Layout>
); );
}; };

4
src/pages/trending.tsx
Unescape View File

@ -26,10 +26,10 @@ const Trending: NextPage = () => {
const [settings] = useSettings(); const [settings] = useSettings();
const { isLoading, error, data } = useQuery< const { isLoading, error, data, refetch } = useQuery<
TrendingModel[], TrendingModel[],
AxiosError<Error> AxiosError<Error>
>("trendingData", () => >("trendingData", (context) =>
axios axios
.get(`https://${settings.invidiousServer}/api/v1/trending`, { .get(`https://${settings.invidiousServer}/api/v1/trending`, {
params: { params: {

2
src/utils/hooks.ts
Unescape View File

@ -9,7 +9,7 @@ import Settings from "@interfaces/settings";
const defaultSettings: Settings = { const defaultSettings: Settings = {
primaryColor: red[800], primaryColor: red[800],
accentColor: red[800], accentColor: red[800],
invidiousServer: "vid.puffyan.us" invidiousServer: process.env.NEXT_PUBLIC_DEFAULT_SERVER as string
}; };
export const useSettings = (): [ export const useSettings = (): [

Write Preview
Loading…
Cancel
Save