From 0973689fb719b50c88d63ba9e331b05b0955cf44 Mon Sep 17 00:00:00 2001 From: Guusvanmeerveld 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)} > - {packageInfo.displayName} + + {process.env.NEXT_PUBLIC_APP_NAME} + 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 = () => { - - - {packageInfo.displayName} - + + + + {process.env.NEXT_PUBLIC_APP_NAME} + + ( > - {packageInfo.displayName} + {process.env.NEXT_PUBLIC_APP_NAME} {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 ( - - - - Settings - + <> + + + + + Settings + - + - Theme + Theme - - - General theme - - - - - - - + + + General theme + + + + + + + - + - + - + - Player + Player - + - Miscellaneous + Miscellaneous - - - Invidious Server - - - {invidiousServerResponse.data && - !invidiousServerResponse.isLoading && ( - <> - setModalState(true)} - sx={{ color: green[800], cursor: "pointer" }} - /> - - + + + Invidious Server + + + {invidiousServerResponse.data && + !invidiousServerResponse.isLoading && ( + <> + setModalState(true)} + sx={{ color: green[800], cursor: "pointer" }} + /> + + + )} + {invidiousServerResponse.error && ( + )} - {invidiousServerResponse.error && ( - - )} - {invidiousServerResponse.isLoading && } + {invidiousServerResponse.isLoading && } + + + Server + + - - Server - - - - - + + + ); }; 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 - >("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 = (): [