add jsconfig.json and a new component - Layout, rename one of the directories (components -> common)
This commit is contained in:
parent
5567f31ee4
commit
29fc155323
2
.babelrc
2
.babelrc
|
@ -6,7 +6,7 @@
|
||||||
{
|
{
|
||||||
"@": ["./src"],
|
"@": ["./src"],
|
||||||
"alias": {
|
"alias": {
|
||||||
"@components": "./src/components",
|
"@common": "./src/common",
|
||||||
"@config": "./src/config",
|
"@config": "./src/config",
|
||||||
"@features": "./src/features",
|
"@features": "./src/features",
|
||||||
"@images": "./src/images",
|
"@images": "./src/images",
|
||||||
|
|
|
@ -9,7 +9,8 @@ module.exports = {
|
||||||
dcbotUrl: 'https://dcbot.' + baseUrl,
|
dcbotUrl: 'https://dcbot.' + baseUrl,
|
||||||
apiUrl,
|
apiUrl,
|
||||||
author: 'Dawid Wysokiński',
|
author: 'Dawid Wysokiński',
|
||||||
contactUrl: 'http://dwysokinski.me/#contact',
|
authorEmail: 'contact@dwysokinski.me',
|
||||||
|
contactUrl: 'https://dwysokinski.me/#contact',
|
||||||
scriptsUrl: 'https://github.com/tribalwarshelp/scripts',
|
scriptsUrl: 'https://github.com/tribalwarshelp/scripts',
|
||||||
siteUrl,
|
siteUrl,
|
||||||
baseUrl,
|
baseUrl,
|
||||||
|
|
|
@ -0,0 +1,13 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["src/*"],
|
||||||
|
"@common/*": ["src/common/*"],
|
||||||
|
"@config/*": ["src/config/*"],
|
||||||
|
"@features/*": ["src/features/*"],
|
||||||
|
"@images/*": ["src/images/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"exclude": ["node_modules"]
|
||||||
|
}
|
|
@ -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;
|
|
@ -67,7 +67,7 @@ function Seo({ description, lang, meta, title, pathname }) {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
property: `og:locale`,
|
property: `og:locale`,
|
||||||
content: `pl`,
|
content: `en`,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: `twitter:card`,
|
name: `twitter:card`,
|
|
@ -0,0 +1,4 @@
|
||||||
|
export const Route = {
|
||||||
|
IndexPage: '/',
|
||||||
|
SupportedVersions: '/supported-versions/',
|
||||||
|
};
|
|
@ -1,28 +1,22 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { Route } from '@config/routing';
|
||||||
import { Typography, Box, Container } from '@material-ui/core';
|
import { Typography, Container } from '@material-ui/core';
|
||||||
import { Link } from 'gatsby-theme-material-ui';
|
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 }) => (
|
const NotFoundPage = ({ location }) => (
|
||||||
<Box
|
<Layout>
|
||||||
display="flex"
|
|
||||||
minHeight="100vh"
|
|
||||||
alignItems="center"
|
|
||||||
justifyContent="center"
|
|
||||||
textAlign="center"
|
|
||||||
paddingY={3}
|
|
||||||
>
|
|
||||||
<Seo title="404" pathname={location.pathname} />
|
<Seo title="404" pathname={location.pathname} />
|
||||||
<Container>
|
<Container>
|
||||||
<Typography variant="h1" gutterBottom>
|
<Typography variant="h1" gutterBottom align="center">
|
||||||
Page not found
|
Page not found
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography variant="h2">
|
<Typography variant="h2" align="center">
|
||||||
<Link to="/">Back to our site</Link>
|
<Link to={Route.IndexPage}>Back to our site</Link>
|
||||||
</Typography>
|
</Typography>
|
||||||
</Container>
|
</Container>
|
||||||
</Box>
|
</Layout>
|
||||||
);
|
);
|
||||||
|
|
||||||
export default NotFoundPage;
|
export default NotFoundPage;
|
||||||
|
|
|
@ -1,10 +1,12 @@
|
||||||
import React from 'react';
|
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 { makeStyles } from '@material-ui/core/styles';
|
||||||
import { Typography, Button, Box, Container } from '@material-ui/core';
|
import { Button, Container, Typography } from '@material-ui/core';
|
||||||
import Seo from '../components/Seo';
|
import Seo from '@common/Seo';
|
||||||
import Link from '../components/Link';
|
import Link from '@common/Link';
|
||||||
|
import Layout from '@common/Layout';
|
||||||
|
|
||||||
const LinkButton = ({ children, href, to }) => {
|
const LinkButton = ({ children, href, to }) => {
|
||||||
return (
|
return (
|
||||||
|
@ -31,6 +33,9 @@ const useStyles = makeStyles(theme => ({
|
||||||
flexDirection: 'column',
|
flexDirection: 'column',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
container: {
|
||||||
|
textAlign: 'center',
|
||||||
|
},
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const IndexPage = ({ location }) => {
|
const IndexPage = ({ location }) => {
|
||||||
|
@ -46,6 +51,7 @@ const IndexPage = ({ location }) => {
|
||||||
dcbotUrl
|
dcbotUrl
|
||||||
apiUrl
|
apiUrl
|
||||||
author
|
author
|
||||||
|
authorEmail
|
||||||
contactUrl
|
contactUrl
|
||||||
scriptsUrl
|
scriptsUrl
|
||||||
}
|
}
|
||||||
|
@ -55,17 +61,9 @@ const IndexPage = ({ location }) => {
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Layout>
|
||||||
display="flex"
|
|
||||||
minHeight="100vh"
|
|
||||||
alignItems="center"
|
|
||||||
justifyContent="center"
|
|
||||||
textAlign="center"
|
|
||||||
flexDirection="column"
|
|
||||||
paddingY={3}
|
|
||||||
>
|
|
||||||
<Seo title="Home" pathname={location.pathname} />
|
<Seo title="Home" pathname={location.pathname} />
|
||||||
<Container component="main">
|
<Container component="main" className={classes.container}>
|
||||||
<header>
|
<header>
|
||||||
<Typography gutterBottom variant="h1">
|
<Typography gutterBottom variant="h1">
|
||||||
TWHelp
|
TWHelp
|
||||||
|
@ -79,7 +77,7 @@ const IndexPage = ({ location }) => {
|
||||||
<LinkButton href={siteMetadata.dcbotUrl}>Discord Bot</LinkButton>
|
<LinkButton href={siteMetadata.dcbotUrl}>Discord Bot</LinkButton>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<LinkButton to={'/supported-versions'}>
|
<LinkButton to={Route.SupportedVersions}>
|
||||||
Stat tracking website
|
Stat tracking website
|
||||||
</LinkButton>
|
</LinkButton>
|
||||||
</div>
|
</div>
|
||||||
|
@ -89,17 +87,17 @@ const IndexPage = ({ location }) => {
|
||||||
<div>
|
<div>
|
||||||
<LinkButton href={siteMetadata.contactUrl}>Contact</LinkButton>
|
<LinkButton href={siteMetadata.contactUrl}>Contact</LinkButton>
|
||||||
</div>
|
</div>
|
||||||
<Box width="100%">
|
|
||||||
<Typography variant="h4">More coming soon...</Typography>
|
|
||||||
</Box>
|
|
||||||
</nav>
|
</nav>
|
||||||
<footer>
|
<footer>
|
||||||
<Typography>
|
<Typography>
|
||||||
© {new Date().getFullYear()} {siteMetadata.author}
|
© {new Date().getFullYear()}{' '}
|
||||||
|
<Link href={`mailto:${siteMetadata.authorEmail}`}>
|
||||||
|
{siteMetadata.author}
|
||||||
|
</Link>
|
||||||
</Typography>
|
</Typography>
|
||||||
</footer>
|
</footer>
|
||||||
</Container>
|
</Container>
|
||||||
</Box>
|
</Layout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,16 +1,17 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useStaticQuery, graphql } from 'gatsby';
|
import { graphql, useStaticQuery } from 'gatsby';
|
||||||
|
import { Route } from '@config/routing';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
Box,
|
|
||||||
Card,
|
Card,
|
||||||
CardHeader,
|
CardHeader,
|
||||||
Grid,
|
|
||||||
Container,
|
Container,
|
||||||
|
Grid,
|
||||||
Typography,
|
Typography,
|
||||||
} from '@material-ui/core';
|
} from '@material-ui/core';
|
||||||
import Link from '../components/Link';
|
import Link from '@common/Link';
|
||||||
import Seo from '../components/Seo';
|
import Seo from '@common/Seo';
|
||||||
|
import Layout from '@common/Layout';
|
||||||
|
|
||||||
const buildURLToVersionPage = (baseUrl, code) => {
|
const buildURLToVersionPage = (baseUrl, code) => {
|
||||||
return `https://${code}.${baseUrl}`;
|
return `https://${code}.${baseUrl}`;
|
||||||
|
@ -43,19 +44,12 @@ function SupportedVersionsPage({ location }) {
|
||||||
`);
|
`);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Layout>
|
||||||
display="flex"
|
|
||||||
minHeight="100vh"
|
|
||||||
alignItems="center"
|
|
||||||
justifyContent="center"
|
|
||||||
flexDirection="column"
|
|
||||||
paddingY={3}
|
|
||||||
>
|
|
||||||
<Seo pathname={location.pathname} title="Supported versions" />
|
<Seo pathname={location.pathname} title="Supported versions" />
|
||||||
<Container>
|
<Container>
|
||||||
<header>
|
<header>
|
||||||
<Typography variant="h1" align="center">
|
<Typography variant="h1" align="center">
|
||||||
<Link to="/">TWHelp</Link>
|
<Link to={Route.IndexPage}>TWHelp</Link>
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography variant="h2" align="center" gutterBottom>
|
<Typography variant="h2" align="center" gutterBottom>
|
||||||
Supported versions
|
Supported versions
|
||||||
|
@ -77,7 +71,7 @@ function SupportedVersionsPage({ location }) {
|
||||||
))}
|
))}
|
||||||
</Grid>
|
</Grid>
|
||||||
</Container>
|
</Container>
|
||||||
</Box>
|
</Layout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Reference in New Issue