From 0973689fb719b50c88d63ba9e331b05b0955cf44 Mon Sep 17 00:00:00 2001
From: Guusvanmeerveld <mail@guusvanmeerveld.dev>
Date: Fri, 25 Mar 2022 23:50:35 +0100
Subject: [PATCH] Added Seo to settings page, added a few optional env
 variables

---
 next.config.js                   |   6 +-
 package.json                     |   3 +
 src/components/Navbar/Drawer.tsx |   4 +-
 src/components/Navbar/index.tsx  |  23 +++--
 src/next-seo.config.ts           |  10 +-
 src/pages/index.tsx              |   2 +-
 src/pages/settings.tsx           | 161 ++++++++++++++++---------------
 src/pages/trending.tsx           |   4 +-
 src/utils/hooks.ts               |   2 +-
 9 files changed, 121 insertions(+), 94 deletions(-)

diff --git a/next.config.js b/next.config.js
index 1c42837..0a302cd 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,3 +1,5 @@
+const packageInfo = require("./package.json");
+
 // @ts-check
 /**
  * @type {import('next').NextConfig}
@@ -8,7 +10,9 @@ module.exports = {
 		ignoreDuringBuilds: true
 	},
 	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 ?? "",
 	trailingSlash: !(process.env.CI == "true")
diff --git a/package.json b/package.json
index afd9db0..8165bcb 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,9 @@
 	"displayName": "MaterialTube",
 	"description": "MaterialTube is a beautiful and elegant web client for Invidious servers, built using Next.js and MUI.",
 	"license": "MIT",
+	"repository": {
+		"url": "https://github.com/Guusvanmeerveld/MaterialTube"
+	},
 	"scripts": {
 		"dev": "next dev",
 		"build": "next build",
diff --git a/src/components/Navbar/Drawer.tsx b/src/components/Navbar/Drawer.tsx
index e4889f0..9fc3a84 100644
--- a/src/components/Navbar/Drawer.tsx
+++ b/src/components/Navbar/Drawer.tsx
@@ -36,7 +36,9 @@ const AppDrawer: FC<{
 				onKeyDown={toggleDrawer(false)}
 			>
 				<Box padding={2}>
-					<Typography variant="h4">{packageInfo.displayName}</Typography>
+					<Typography variant="h4">
+						{process.env.NEXT_PUBLIC_APP_NAME}
+					</Typography>
 				</Box>
 				<Divider />
 				<List>
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 565d11a..5bdf2c1 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -91,14 +91,21 @@ const Navbar: FC = () => {
 							<Menu />
 						</IconButton>
 
-						<Typography
-							variant="h6"
-							component="div"
-							sx={{ mr: 2, display: "flex", alignItems: "center" }}
-						>
-							<PlayCircleOutline sx={{ mr: 1 }} />
-							{packageInfo.displayName}
-						</Typography>
+						<Link href="/" passHref>
+							<Typography
+								variant="h6"
+								component="div"
+								sx={{
+									mr: 2,
+									display: "flex",
+									alignItems: "center",
+									cursor: "pointer"
+								}}
+							>
+								<PlayCircleOutline sx={{ mr: 1 }} />
+								{process.env.NEXT_PUBLIC_APP_NAME}
+							</Typography>
+						</Link>
 
 						<Box
 							sx={{
diff --git a/src/next-seo.config.ts b/src/next-seo.config.ts
index 2d2a3da..7fa9b25 100644
--- a/src/next-seo.config.ts
+++ b/src/next-seo.config.ts
@@ -2,13 +2,15 @@ import packageInfo from "../package.json";
 
 import type { DefaultSeoProps } from "next-seo";
 
+const name = process.env.NEXT_PUBLIC_APP_NAME;
+
 const SEO: DefaultSeoProps = {
-	titleTemplate: `%s | ${packageInfo.displayName}`,
-	defaultTitle: packageInfo.displayName,
+	titleTemplate: `%s | ${name}`,
+	defaultTitle: name,
 	description: packageInfo.description,
 	openGraph: {
-		description: packageInfo.displayName,
-		site_name: packageInfo.displayName
+		description: name,
+		site_name: name
 	}
 };
 
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index d5f39f2..59c03c1 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -25,7 +25,7 @@ const Index: NextPage = () => (
 			>
 				<PlayCircleOutline sx={{ mt: 2, fontSize: 100 }} />
 				<Typography variant="h2" sx={{ my: 1 }}>
-					{packageInfo.displayName}
+					{process.env.NEXT_PUBLIC_APP_NAME}
 				</Typography>
 				<Typography variant="h4" sx={{ my: 1 }}>
 					{packageInfo.description}
diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
index ec77b02..fbc8a66 100644
--- a/src/pages/settings.tsx
+++ b/src/pages/settings.tsx
@@ -1,6 +1,7 @@
 import axios from "axios";
 
 import { NextPage } from "next";
+import { NextSeo } from "next-seo";
 
 import { FC, useState } from "react";
 
@@ -163,94 +164,102 @@ const Settings: NextPage = () => {
 	};
 
 	return (
-		<Layout>
-			<Container>
-				<Typography sx={{ my: 2 }} variant="h2">
-					Settings
-				</Typography>
+		<>
+			<NextSeo
+				title="Settings"
+				description={`Update your ${process.env.NEXT_PUBLIC_APP_NAME} settings`}
+			/>
+			<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" }}>
-					<Typography variant="h5" sx={{ flexGrow: 1 }}>
-						General theme
-					</Typography>
-					<ButtonGroup
-						variant="contained"
-						color="primary"
-						aria-label="outlined default button group"
-					>
-						<Button onClick={() => setSetting("theme", "light")}>Light</Button>
-						<Button onClick={() => setSetting("theme")}>System</Button>
-						<Button onClick={() => setSetting("theme", "dark")}>Dark</Button>
-					</ButtonGroup>
-				</Box>
+					<Box sx={{ my: 3, display: "flex" }}>
+						<Typography variant="h5" sx={{ flexGrow: 1 }}>
+							General theme
+						</Typography>
+						<ButtonGroup
+							variant="contained"
+							color="primary"
+							aria-label="outlined default button group"
+						>
+							<Button onClick={() => setSetting("theme", "light")}>
+								Light
+							</Button>
+							<Button onClick={() => setSetting("theme")}>System</Button>
+							<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" }}>
-					<Typography variant="h5" sx={{ flexGrow: 1 }}>
-						Invidious Server
-					</Typography>
-					<Box sx={{ mr: 2 }}>
-						{invidiousServerResponse.data &&
-							!invidiousServerResponse.isLoading && (
-								<>
-									<Done
-										onClick={() => setModalState(true)}
-										sx={{ color: green[800], cursor: "pointer" }}
-									/>
-									<InfoModal />
-								</>
+					<Box sx={{ my: 3, display: "flex", alignItems: "center" }}>
+						<Typography variant="h5" sx={{ flexGrow: 1 }}>
+							Invidious Server
+						</Typography>
+						<Box sx={{ mr: 2 }}>
+							{invidiousServerResponse.data &&
+								!invidiousServerResponse.isLoading && (
+									<>
+										<Done
+											onClick={() => setModalState(true)}
+											sx={{ color: green[800], cursor: "pointer" }}
+										/>
+										<InfoModal />
+									</>
+								)}
+							{invidiousServerResponse.error && (
+								<Error sx={{ color: red[800] }} />
 							)}
-						{invidiousServerResponse.error && (
-							<Error sx={{ color: red[800] }} />
-						)}
-						{invidiousServerResponse.isLoading && <CircularProgress />}
+							{invidiousServerResponse.isLoading && <CircularProgress />}
+						</Box>
+						<FormControl sx={{ minWidth: 200 }}>
+							<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>
-					<FormControl sx={{ minWidth: 200 }}>
-						<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>
-			</Container>
-		</Layout>
+				</Container>
+			</Layout>
+		</>
 	);
 };
 
diff --git a/src/pages/trending.tsx b/src/pages/trending.tsx
index 1e88da9..eff3c64 100644
--- a/src/pages/trending.tsx
+++ b/src/pages/trending.tsx
@@ -26,10 +26,10 @@ const Trending: NextPage = () => {
 
 	const [settings] = useSettings();
 
-	const { isLoading, error, data } = useQuery<
+	const { isLoading, error, data, refetch } = useQuery<
 		TrendingModel[],
 		AxiosError<Error>
-	>("trendingData", () =>
+	>("trendingData", (context) =>
 		axios
 			.get(`https://${settings.invidiousServer}/api/v1/trending`, {
 				params: {
diff --git a/src/utils/hooks.ts b/src/utils/hooks.ts
index 6bf9c70..b1e4c15 100644
--- a/src/utils/hooks.ts
+++ b/src/utils/hooks.ts
@@ -9,7 +9,7 @@ import Settings from "@interfaces/settings";
 const defaultSettings: Settings = {
 	primaryColor: red[800],
 	accentColor: red[800],
-	invidiousServer: "vid.puffyan.us"
+	invidiousServer: process.env.NEXT_PUBLIC_DEFAULT_SERVER as string
 };
 
 export const useSettings = (): [