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

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")

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",

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>

src/components/Navbar/index.tsx

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

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}`,
+	titleTemplate: `%s | ${name}`,
-	defaultTitle: packageInfo.displayName,
+	defaultTitle: name,
 	description: packageInfo.description,
 	openGraph: {
-		description: packageInfo.displayName,
+		description: name,
-		site_name: packageInfo.displayName
+		site_name: name
 	}
 };
 

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}

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,6 +164,11 @@ const Settings: NextPage = () => {
 	};
 
 	return (
+		<>
+			<NextSeo
+				title="Settings"
+				description={`Update your ${process.env.NEXT_PUBLIC_APP_NAME} settings`}
+			/>
 			<Layout>
 				<Container>
 					<Typography sx={{ my: 2 }} variant="h2">
@@ -182,7 +188,9 @@ const Settings: NextPage = () => {
 							color="primary"
 							aria-label="outlined default button group"
 						>
-						<Button onClick={() => setSetting("theme", "light")}>Light</Button>
+							<Button onClick={() => setSetting("theme", "light")}>
+								Light
+							</Button>
 							<Button onClick={() => setSetting("theme")}>System</Button>
 							<Button onClick={() => setSetting("theme", "dark")}>Dark</Button>
 						</ButtonGroup>
@@ -251,6 +259,7 @@ const Settings: NextPage = () => {
 					</Box>
 				</Container>
 			</Layout>
+		</>
 	);
 };
 

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: {

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 = (): [