2019-07-09 15:46:11 +09:00
|
|
|
import { ThemeProvider } from "@material-ui/styles";
|
|
|
|
|
import { createMuiTheme } from "@material-ui/core/styles";
|
2019-04-23 16:48:33 +09:00
|
|
|
import { orange, teal } from "@material-ui/core/colors";
|
2019-07-09 15:46:11 +09:00
|
|
|
import Typography from "@material-ui/core/Typography";
|
|
|
|
|
import MuiLink from "@material-ui/core/Link";
|
|
|
|
|
import Box from "@material-ui/core/Box";
|
|
|
|
|
import Container from "@material-ui/core/Container";
|
2020-06-11 22:37:02 +09:00
|
|
|
import { MDXProvider, ComponentDictionary } from "@mdx-js/react";
|
2020-02-09 04:27:05 +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
|
|
|
|
2020-02-09 00:07:54 +09:00
|
|
|
const isValidURL = (url: string) => {
|
|
|
|
|
try {
|
|
|
|
|
new URL(url);
|
|
|
|
|
} catch {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
return true;
|
|
|
|
|
};
|
|
|
|
|
|
2019-04-23 16:48:33 +09:00
|
|
|
export const theme = createMuiTheme({
|
|
|
|
|
palette: {
|
|
|
|
|
primary: {
|
2020-06-11 20:59:34 +09:00
|
|
|
main: orange[900],
|
2019-04-23 16:48:33 +09:00
|
|
|
},
|
|
|
|
|
secondary: {
|
2020-06-11 20:59:34 +09:00
|
|
|
main: teal[400],
|
|
|
|
|
},
|
2019-04-23 16:48:33 +09:00
|
|
|
},
|
|
|
|
|
typography: {
|
2020-06-11 20:59:34 +09:00
|
|
|
fontFamily: "sans-serif",
|
|
|
|
|
},
|
2019-04-23 16:48:33 +09:00
|
|
|
});
|
|
|
|
|
|
2020-06-11 22:37:02 +09:00
|
|
|
export const components: ComponentDictionary = {
|
2020-06-11 20:59:34 +09:00
|
|
|
h1: (props) => (
|
2019-04-24 00:23:29 +09:00
|
|
|
<>
|
|
|
|
|
<Head>
|
|
|
|
|
<title>{props.children}</title>
|
|
|
|
|
</Head>
|
|
|
|
|
<Typography component="h1" variant="h3" {...props} />
|
|
|
|
|
</>
|
|
|
|
|
),
|
2020-06-11 20:59:34 +09:00
|
|
|
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} />,
|
|
|
|
|
h6: (props) => <Typography variant="h6" {...props} />,
|
2020-02-09 00:07:54 +09:00
|
|
|
a: ({ href, ...props }: { href: string }) => {
|
2020-06-11 22:10:26 +09:00
|
|
|
const url = [process.env.NEXT_PUBLIC_BASE_PATH, href].join("");
|
2020-02-09 03:15:26 +09:00
|
|
|
return isValidURL(href) ? (
|
|
|
|
|
<MuiLink variant="body1" color="secondary" href={href} {...props} />
|
|
|
|
|
) : (
|
2020-06-11 22:10:26 +09:00
|
|
|
<Link href={href}>
|
2020-02-09 00:07:54 +09:00
|
|
|
<MuiLink variant="body1" color="secondary" href={url} {...props} />
|
|
|
|
|
</Link>
|
|
|
|
|
);
|
2020-02-09 02:46:41 +09:00
|
|
|
},
|
2020-06-11 20:59:34 +09:00
|
|
|
p: (props) => <Typography component="p" variant="body1" {...props} />,
|
2019-04-23 18:52:12 +09:00
|
|
|
};
|
|
|
|
|
|
2019-07-09 15:46:11 +09:00
|
|
|
const MainTheme: React.FC = ({ children }) => (
|
|
|
|
|
<ThemeProvider theme={theme}>
|
|
|
|
|
<MDXProvider components={components}>
|
|
|
|
|
<TopAppBar />
|
|
|
|
|
<Box paddingTop={6}>
|
2020-02-09 02:46:41 +09:00
|
|
|
<Container>{children}</Container>
|
2019-07-09 15:46:11 +09:00
|
|
|
</Box>
|
|
|
|
|
</MDXProvider>
|
|
|
|
|
</ThemeProvider>
|
|
|
|
|
);
|
2019-04-23 16:48:33 +09:00
|
|
|
export default MainTheme;
|
