2019-04-23 16:48:33 +09:00
|
|
|
import "./boot";
|
2019-04-23 22:31:38 +09:00
|
|
|
import { ThemeProvider, makeStyles } from "@material-ui/styles";
|
2019-04-23 18:52:12 +09:00
|
|
|
import {
|
|
|
|
|
CssBaseline,
|
|
|
|
|
createMuiTheme,
|
|
|
|
|
Typography,
|
|
|
|
|
Link as MuiLink,
|
|
|
|
|
Grid
|
|
|
|
|
} from "@material-ui/core";
|
2019-04-23 16:48:33 +09:00
|
|
|
import { orange, teal } from "@material-ui/core/colors";
|
2019-04-23 18:52:12 +09:00
|
|
|
import { MDXProvider } from "@mdx-js/tag";
|
2019-04-23 18:55:07 +09:00
|
|
|
import React from "react";
|
2019-04-23 16:48:33 +09:00
|
|
|
import Head from "next/head";
|
2019-04-23 18:52:12 +09:00
|
|
|
import Link from "next/link";
|
|
|
|
|
import TopAppBar from "./TopAppBar";
|
2019-04-23 16:48:33 +09:00
|
|
|
|
|
|
|
|
export const theme = createMuiTheme({
|
|
|
|
|
palette: {
|
|
|
|
|
primary: {
|
|
|
|
|
main: orange[900]
|
|
|
|
|
},
|
|
|
|
|
secondary: {
|
|
|
|
|
main: teal[400]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
typography: {
|
|
|
|
|
useNextVariants: true,
|
|
|
|
|
fontFamily: '"Noto Sans JP", "Helvetica", "Arial", sans-serif'
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
2019-04-23 18:52:12 +09:00
|
|
|
export const components = {
|
2019-04-23 22:31:38 +09:00
|
|
|
h1: (props: {}) => <Typography component="h1" variant="h3" {...props} />,
|
|
|
|
|
h2: (props: {}) => <Typography component="h2" variant="h4" {...props} />,
|
|
|
|
|
h3: (props: {}) => <Typography component="h3" variant="h5" {...props} />,
|
|
|
|
|
h4: (props: {}) => <Typography component="h4" variant="h6" {...props} />,
|
|
|
|
|
h5: (props: {}) => <Typography component="h5" variant="h6" {...props} />,
|
2019-04-23 18:52:12 +09:00
|
|
|
h6: (props: {}) => <Typography variant="h6" {...props} />,
|
|
|
|
|
a: ({ href, ...props }: { href: string }) => (
|
2019-04-23 18:55:07 +09:00
|
|
|
<Link prefetch href={href}>
|
2019-04-23 22:31:38 +09:00
|
|
|
<MuiLink variant="body1" color="secondary" href={href} {...props} />
|
2019-04-23 18:52:12 +09:00
|
|
|
</Link>
|
|
|
|
|
)
|
|
|
|
|
};
|
|
|
|
|
|
2019-04-23 22:47:07 +09:00
|
|
|
export const Container: React.FC<{}> = ({ children }) => {
|
|
|
|
|
const classes = makeStyles({
|
|
|
|
|
root: {
|
|
|
|
|
padding: [8, 3, 1].map(n => `${theme.spacing.unit * n}px`).join(" "),
|
|
|
|
|
[theme.breakpoints.up("sm")]: {
|
|
|
|
|
padding: [9, 4, 1].map(n => `${theme.spacing.unit * n}px`).join(" ")
|
|
|
|
|
}
|
2019-04-23 22:31:38 +09:00
|
|
|
}
|
2019-04-23 22:47:07 +09:00
|
|
|
})();
|
|
|
|
|
return (
|
|
|
|
|
<Grid className={classes.root} container>
|
|
|
|
|
{children}
|
|
|
|
|
</Grid>
|
|
|
|
|
);
|
|
|
|
|
};
|
2019-04-23 22:31:38 +09:00
|
|
|
|
|
|
|
|
const MainTheme: React.FC<{}> = ({ children }) => {
|
|
|
|
|
return (
|
|
|
|
|
<ThemeProvider theme={theme}>
|
|
|
|
|
<Head>
|
|
|
|
|
<meta
|
|
|
|
|
name="viewport"
|
|
|
|
|
content="width=device-width,minimum-scale=1,initial-scale=1"
|
|
|
|
|
/>
|
|
|
|
|
<meta name="theme-color" content={theme.palette.primary.main} />
|
|
|
|
|
<link
|
|
|
|
|
rel="stylesheet"
|
|
|
|
|
href="https://fonts.googleapis.com/css?family=Noto+Sans+JP"
|
|
|
|
|
/>
|
|
|
|
|
</Head>
|
|
|
|
|
<CssBaseline />
|
|
|
|
|
<MDXProvider components={components}>
|
|
|
|
|
<Typography component="div" variant="body1">
|
|
|
|
|
<TopAppBar />
|
2019-04-23 22:47:07 +09:00
|
|
|
<Container>{children}</Container>
|
2019-04-23 22:31:38 +09:00
|
|
|
</Typography>
|
|
|
|
|
</MDXProvider>
|
|
|
|
|
</ThemeProvider>
|
|
|
|
|
);
|
|
|
|
|
};
|
2019-04-23 16:48:33 +09:00
|
|
|
export default MainTheme;
|
