import React, { ReactElement } from "react"; import { ThemeProvider } from "@material-ui/styles"; import { createMuiTheme } from "@material-ui/core/styles"; import { orange, teal } from "@material-ui/core/colors"; 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"; import { MDXProvider, ComponentDictionary } from "@mdx-js/react"; import Head from "next/head"; import Link from "next/link"; import TopAppBar from "./TopAppBar"; const isValidURL = (url: string) => { try { new URL(url); } catch { return false; } return true; }; export const theme = createMuiTheme({ palette: { primary: { main: orange[900], }, secondary: { main: teal[400], }, }, typography: { fontFamily: "sans-serif", }, }); export const components: ComponentDictionary = { h1: (props) => ( <> <Head> <title>{props.children}</title> </Head> <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} />, h6: (props) => <Typography variant="h6" {...props} />, a: ({ href, ...props }: { href: string }) => { const url = [process.env.NEXT_PUBLIC_BASE_PATH, href].join(""); return isValidURL(href) ? ( <MuiLink variant="body1" color="secondary" href={href} {...props} /> ) : ( <Link href={href}> <MuiLink variant="body1" color="secondary" href={url} {...props} /> </Link> ); }, p: (props) => <Typography component="p" variant="body1" {...props} />, }; const MainTheme = (props: { children: ReactElement }) => ( <ThemeProvider theme={theme}> <MDXProvider components={components}> <TopAppBar /> <Box paddingTop={6}> <Container>{props.children}</Container> </Box> </MDXProvider> </ThemeProvider> ); export default MainTheme;