From 69731dc780b46792453a47a645c396a2c72956b1 Mon Sep 17 00:00:00 2001 From: Petr Vecera Date: Mon, 26 Jun 2023 18:29:28 +0200 Subject: [PATCH] SEO and perf optimizations (#216) --- components/Header/Header.tsx | 2 +- components/icon-button/icon-button.tsx | 1 + components/icon/discord.tsx | 7 ++++++- components/icon/donate.tsx | 7 ++++++- components/icon/github.tsx | 7 ++++++- components/screens/home/twitch-panel/channel-list.tsx | 11 ++++++++--- components/screens/home/twitch-panel/twitch-panel.tsx | 8 ++++---- .../components/standings/player-standings-table.tsx | 2 ++ next.config.js | 4 ++++ src/utils.ts | 4 ++-- 10 files changed, 40 insertions(+), 13 deletions(-) diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx index 95e212a5..bde4594f 100644 --- a/components/Header/Header.tsx +++ b/components/Header/Header.tsx @@ -185,7 +185,7 @@ export const Header: React.FC = () => { {"COH3 = ({ radius="md" className={className} sx={sx} + aria-label={label?.toString()} > {children} diff --git a/components/icon/discord.tsx b/components/icon/discord.tsx index 806c398d..cede4aa5 100644 --- a/components/icon/discord.tsx +++ b/components/icon/discord.tsx @@ -17,7 +17,12 @@ const useStyles = createStyles(() => ({ export const Discord: React.FC = () => { const { classes } = useStyles(); return ( - + ( - + ( <> - + { onChangeChannel(idx); setSelected(idx); } + const isMobile = isMobileCheck(); + return ( { h="100%" > {twitchStreams.slice(0, 3).map((stream: TwitchStream, idx: number) => { + const streamThumbnail = isMobile + ? stream.thumbnail_url.replace("{width}", "200").replace("{height}", "109") + : stream.thumbnail_url.replace("{width}", "640").replace("{height}", "380"); + return ( { aspectRatio: 16 / 9, width: "100%", }} - src={`${stream.thumbnail_url - .replace("{width}", "1280") - .replace("{height}", "720")}`} + src={`${streamThumbnail}`} > diff --git a/components/screens/home/twitch-panel/twitch-panel.tsx b/components/screens/home/twitch-panel/twitch-panel.tsx index 1b0cee34..9fa0914d 100644 --- a/components/screens/home/twitch-panel/twitch-panel.tsx +++ b/components/screens/home/twitch-panel/twitch-panel.tsx @@ -3,7 +3,7 @@ import { Grid, Group, MediaQuery, Stack, Text, useMantineColorScheme } from "@ma import { IconCircle } from "@tabler/icons-react"; import { TwitchStream } from "../../../../src/coh3/coh3-types"; import ChannelList from "./channel-list"; -import { mobileCheck } from "../../../../src/utils"; +import { isMobileCheck } from "../../../../src/utils"; import config from "../../../../config"; declare global { @@ -55,7 +55,7 @@ const TwitchPanel = ({ twitchStreams }: Props) => { const player = embed.getPlayer(); // maybe unneeded because of option above but can't hurt player.setMuted(true); - if (!mobileCheck() && !config.isDevEnv()) player.play(); + if (!isMobileCheck() && !config.isDevEnv()) player.play(); setPlayer(player); }); }); @@ -69,8 +69,8 @@ const TwitchPanel = ({ twitchStreams }: Props) => { function handleChangeChannel(channelIndex: number) { if (!twitchStreams) return; setCurrentChannelIndex(channelIndex); - player.setChannel(twitchStreams[channelIndex].user_login); - player.play(); + player?.setChannel(twitchStreams[channelIndex].user_login); + player?.play(); } return ( diff --git a/components/screens/players/components/standings/player-standings-table.tsx b/components/screens/players/components/standings/player-standings-table.tsx index 24289400..92ac4606 100644 --- a/components/screens/players/components/standings/player-standings-table.tsx +++ b/components/screens/players/components/standings/player-standings-table.tsx @@ -67,6 +67,8 @@ const PlayerStandingsTable = ({ startPosition, platform, )} + rel="nofollow" + title={"Link to Leaderboard with current player standings"} > {rank} diff --git a/next.config.js b/next.config.js index af200779..88290438 100644 --- a/next.config.js +++ b/next.config.js @@ -18,6 +18,10 @@ const nextConfig = { // All the images are served from the CF CDN, so we don't need to optimize them. unoptimized: true, }, + i18n: { + locales: ["en"], + defaultLocale: "en", + }, }; const withEdgioConfig = withEdgio( diff --git a/src/utils.ts b/src/utils.ts index 58cddd57..13359a3d 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -57,7 +57,7 @@ const getIconsPathOnCDN = ( // https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser/11381730#11381730 // prettier-ignore -const mobileCheck = () => { +const isMobileCheck = () => { let check = false; (function (a) { if ( @@ -79,5 +79,5 @@ export { isBrowserEnv, getIconsPathOnCDN, internalSlash, - mobileCheck, + isMobileCheck, };