add jsconfig.json and a new component - Layout, rename one of the directories (components -> common)

.babelrc

@@ -6,7 +6,7 @@
       {
         "@": ["./src"],
         "alias": {
-          "@components": "./src/components",
+          "@common": "./src/common",
           "@config": "./src/config",
           "@features": "./src/features",
           "@images": "./src/images",

gatsby-config.js

@@ -9,7 +9,8 @@ module.exports = {
     dcbotUrl: 'https://dcbot.' + baseUrl,
     apiUrl,
     author: 'Dawid Wysokiński',
-    contactUrl: 'http://dwysokinski.me/#contact',
+    authorEmail: 'contact@dwysokinski.me',
+    contactUrl: 'https://dwysokinski.me/#contact',
     scriptsUrl: 'https://github.com/tribalwarshelp/scripts',
     siteUrl,
     baseUrl,

jsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "@common/*": ["src/common/*"],
+      "@config/*": ["src/config/*"],
+      "@features/*": ["src/features/*"],
+      "@images/*": ["src/images/*"]
+    }
+  },
+  "exclude": ["node_modules"]
+}

src/common/Layout.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Box } from '@material-ui/core';
+
+const Layout = ({ children }) => {
+  return (
+    <Box
+      display="flex"
+      minHeight="100vh"
+      alignItems="center"
+      justifyContent="center"
+      paddingY={3}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export default Layout;

src/common/Seo.js

@@ -67,7 +67,7 @@ function Seo({ description, lang, meta, title, pathname }) {
         },
         {
           property: `og:locale`,
-          content: `pl`,
+          content: `en`,
         },
         {
           name: `twitter:card`,

src/config/routing.js

@@ -0,0 +1,4 @@
+export const Route = {
+  IndexPage: '/',
+  SupportedVersions: '/supported-versions/',
+};

src/pages/404.js

@@ -1,28 +1,22 @@
 import React from 'react';
-
-import { Typography, Box, Container } from '@material-ui/core';
+import { Route } from '@config/routing';
+import { Typography, Container } from '@material-ui/core';
 import { Link } from 'gatsby-theme-material-ui';
-import Seo from '../components/Seo';
+import Seo from '@common/Seo';
+import Layout from '@common/Layout';
 
 const NotFoundPage = ({ location }) => (
-  <Box
-    display="flex"
-    minHeight="100vh"
-    alignItems="center"
-    justifyContent="center"
-    textAlign="center"
-    paddingY={3}
-  >
+  <Layout>
     <Seo title="404" pathname={location.pathname} />
     <Container>
-      <Typography variant="h1" gutterBottom>
+      <Typography variant="h1" gutterBottom align="center">
         Page not found
       </Typography>
-      <Typography variant="h2">
-        <Link to="/">Back to our site</Link>
+      <Typography variant="h2" align="center">
+        <Link to={Route.IndexPage}>Back to our site</Link>
       </Typography>
     </Container>
-  </Box>
+  </Layout>
 );
 
 export default NotFoundPage;

src/pages/index.js

@@ -1,10 +1,12 @@
 import React from 'react';
-import { useStaticQuery, graphql } from 'gatsby';
+import { graphql, useStaticQuery } from 'gatsby';
+import { Route } from '@config/routing';
 
 import { makeStyles } from '@material-ui/core/styles';
-import { Typography, Button, Box, Container } from '@material-ui/core';
-import Seo from '../components/Seo';
-import Link from '../components/Link';
+import { Button, Container, Typography } from '@material-ui/core';
+import Seo from '@common/Seo';
+import Link from '@common/Link';
+import Layout from '@common/Layout';
 
 const LinkButton = ({ children, href, to }) => {
   return (
@@ -31,6 +33,9 @@ const useStyles = makeStyles(theme => ({
       flexDirection: 'column',
     },
   },
+  container: {
+    textAlign: 'center',
+  },
 }));
 
 const IndexPage = ({ location }) => {
@@ -46,6 +51,7 @@ const IndexPage = ({ location }) => {
             dcbotUrl
             apiUrl
             author
+            authorEmail
             contactUrl
             scriptsUrl
           }
@@ -55,17 +61,9 @@ const IndexPage = ({ location }) => {
   );
 
   return (
-    <Box
-      display="flex"
-      minHeight="100vh"
-      alignItems="center"
-      justifyContent="center"
-      textAlign="center"
-      flexDirection="column"
-      paddingY={3}
-    >
+    <Layout>
       <Seo title="Home" pathname={location.pathname} />
-      <Container component="main">
+      <Container component="main" className={classes.container}>
         <header>
           <Typography gutterBottom variant="h1">
             TWHelp
@@ -79,7 +77,7 @@ const IndexPage = ({ location }) => {
             <LinkButton href={siteMetadata.dcbotUrl}>Discord Bot</LinkButton>
           </div>
           <div>
-            <LinkButton to={'/supported-versions'}>
+            <LinkButton to={Route.SupportedVersions}>
               Stat tracking website
             </LinkButton>
           </div>
@@ -89,17 +87,17 @@ const IndexPage = ({ location }) => {
           <div>
             <LinkButton href={siteMetadata.contactUrl}>Contact</LinkButton>
           </div>
-          <Box width="100%">
-            <Typography variant="h4">More coming soon...</Typography>
-          </Box>
         </nav>
         <footer>
           <Typography>
-            &copy; {new Date().getFullYear()} {siteMetadata.author}
+            &copy; {new Date().getFullYear()}{' '}
+            <Link href={`mailto:${siteMetadata.authorEmail}`}>
+              {siteMetadata.author}
+            </Link>
           </Typography>
         </footer>
       </Container>
-    </Box>
+    </Layout>
   );
 };
 

src/pages/supported-versions.js

@@ -1,16 +1,17 @@
 import React from 'react';
-import { useStaticQuery, graphql } from 'gatsby';
+import { graphql, useStaticQuery } from 'gatsby';
+import { Route } from '@config/routing';
 
 import {
-  Box,
   Card,
   CardHeader,
-  Grid,
   Container,
+  Grid,
   Typography,
 } from '@material-ui/core';
-import Link from '../components/Link';
-import Seo from '../components/Seo';
+import Link from '@common/Link';
+import Seo from '@common/Seo';
+import Layout from '@common/Layout';
 
 const buildURLToVersionPage = (baseUrl, code) => {
   return `https://${code}.${baseUrl}`;
@@ -43,19 +44,12 @@ function SupportedVersionsPage({ location }) {
   `);
 
   return (
-    <Box
-      display="flex"
-      minHeight="100vh"
-      alignItems="center"
-      justifyContent="center"
-      flexDirection="column"
-      paddingY={3}
-    >
+    <Layout>
       <Seo pathname={location.pathname} title="Supported versions" />
       <Container>
         <header>
           <Typography variant="h1" align="center">
-            <Link to="/">TWHelp</Link>
+            <Link to={Route.IndexPage}>TWHelp</Link>
           </Typography>
           <Typography variant="h2" align="center" gutterBottom>
             Supported versions
@@ -77,7 +71,7 @@ function SupportedVersionsPage({ location }) {
           ))}
         </Grid>
       </Container>
-    </Box>
+    </Layout>
   );
 }