SEO and perf optimizations (#216)

cohstats · Jun 26, 2023 · 69731dc · 69731dc
1 parent 1e5ec43
commit 69731dc
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 13 deletions.
diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
@@ -185,7 +185,7 @@ export const Header: React.FC<HeaderProps> = () => {
           <Anchor component={Link} href={"/"} className={cx(classes.link)}>
             <Group spacing="xs">
               <Image
-                src="/logo/android-icon-36x36.png"
+                src="/logo/android-icon-48x48.png"
                 width={30}
                 height={30}
                 alt={"COH3 Stats logo"}

diff --git a/components/icon-button/icon-button.tsx b/components/icon-button/icon-button.tsx
@@ -25,6 +25,7 @@ export const IconButton: React.FC<IconButtonProps> = ({
         radius="md"
         className={className}
         sx={sx}
+        aria-label={label?.toString()}
       >
         {children}
       </ActionIcon>

diff --git 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 (
-    <a href={config.DISCORD_INVITE_LINK} target="_blank" rel="noopener noreferrer">
+    <a
+      href={config.DISCORD_INVITE_LINK}
+      target="_blank"
+      rel="noopener noreferrer nofollow"
+      title={"Link to our discord channel"}
+    >
       <IconButton label="Discord channel" className={classes.root}>
         <svg
           xmlns="http://www.w3.org/2000/svg"

diff --git a/components/icon/donate.tsx b/components/icon/donate.tsx
@@ -4,7 +4,12 @@ import { IconButton } from "../icon-button/icon-button";
 import config from "../../config";
 
 export const Donate: React.FC = () => (
-  <a href={config.DONATION_LINK} target="_blank" rel="noopener noreferrer">
+  <a
+    href={config.DONATION_LINK}
+    target="_blank"
+    rel="noopener noreferrer"
+    title={"Link to our donation pages."}
+  >
     <IconButton label="Donate">
       <Image
         src="/kofi_s_logo_nolabel.webp"

diff --git a/components/icon/github.tsx b/components/icon/github.tsx
@@ -4,7 +4,12 @@ import { IconButton } from "../icon-button/icon-button";
 
 export const Github: React.FC = () => (
   <>
-    <a href={config.GITHUB_LINK} target="_blank" rel="noopener noreferrer">
+    <a
+      href={config.GITHUB_LINK}
+      target="_blank"
+      rel="noopener noreferrer"
+      title={"Link to our GitHub Repo"}
+    >
       <IconButton label="Github">
         <svg
           xmlns="http://www.w3.org/2000/svg"

diff --git a/components/screens/home/twitch-panel/channel-list.tsx b/components/screens/home/twitch-panel/channel-list.tsx
@@ -2,6 +2,7 @@ import { BackgroundImage, Text, Box, Flex } from "@mantine/core";
 import { IconCircle } from "@tabler/icons-react";
 import { useState } from "react";
 import { TwitchStream } from "../../../../src/coh3/coh3-types";
+import { isMobileCheck } from "../../../../src/utils";
 
 type Props = {
   twitchStreams: TwitchStream[];
@@ -13,6 +14,8 @@ const ChannelList = ({ onChangeChannel, twitchStreams }: Props) => {
     onChangeChannel(idx);
     setSelected(idx);
   }
+  const isMobile = isMobileCheck();
+
   return (
     <Flex
       style={{
@@ -23,6 +26,10 @@ const ChannelList = ({ onChangeChannel, twitchStreams }: Props) => {
       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 (
           <Box
             w={{
@@ -46,9 +53,7 @@ const ChannelList = ({ onChangeChannel, twitchStreams }: Props) => {
                 aspectRatio: 16 / 9,
                 width: "100%",
               }}
-              src={`${stream.thumbnail_url
-                .replace("{width}", "1280")
-                .replace("{height}", "720")}`}
+              src={`${streamThumbnail}`}
             >
               <Flex pos="absolute" bottom={5} left={0} w="100%" justify="space-between" px={10}>
                 <Flex align="center" gap={4}>

diff --git 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
@@ -67,6 +67,8 @@ const PlayerStandingsTable = ({
                     startPosition,
                     platform,
                   )}
+                  rel="nofollow"
+                  title={"Link to Leaderboard with current player standings"}
                 >
                   {rank}
                 </Anchor>

diff --git 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
@@ -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,
 };