66 lines
1.5 KiB
TypeScript
66 lines
1.5 KiB
TypeScript
import createCache from "@emotion/cache";
|
|
import { CacheProvider, Global, ThemeProvider, css } from "@emotion/react";
|
|
import styled from "@emotion/styled";
|
|
import normalizeCss from "normalize.css/normalize.css?inline";
|
|
import React from "react";
|
|
import { IntlProvider } from "react-intl";
|
|
|
|
import themeConfig from "./config/theme";
|
|
import { quickTransition } from "./utils/transitions";
|
|
import Router from "./views/Router";
|
|
|
|
const themeCache = createCache({
|
|
key: "cv",
|
|
});
|
|
|
|
const i = themeCache.insert;
|
|
themeCache.insert = (...args) => {
|
|
args[2].tags.forEach((t) => {
|
|
if (!t.getAttribute("media")) {
|
|
t.setAttribute("media", "all");
|
|
}
|
|
});
|
|
return i(...args);
|
|
};
|
|
|
|
const globalStyles = css`
|
|
body {
|
|
font-size: 16px;
|
|
line-height: 1.5;
|
|
font-family: "Noto Sans", sans-serif;
|
|
}
|
|
`;
|
|
|
|
const Styles = styled("div")(({ theme }) => ({
|
|
color: theme.palette.text.primary,
|
|
|
|
"*": {
|
|
boxSizing: "border-box",
|
|
},
|
|
a: {
|
|
color: theme.palette.link.main,
|
|
transition: `color 0.5s ${quickTransition}`,
|
|
},
|
|
"a:hover": {
|
|
color: theme.palette.link.hover,
|
|
},
|
|
}));
|
|
|
|
const App: React.FC = () => {
|
|
return (
|
|
<IntlProvider locale="en" defaultLocale="en">
|
|
<CacheProvider value={themeCache}>
|
|
<Global styles={normalizeCss} />
|
|
<Global styles={globalStyles} />
|
|
<ThemeProvider theme={themeConfig}>
|
|
<Styles>
|
|
<Router />
|
|
</Styles>
|
|
</ThemeProvider>
|
|
</CacheProvider>
|
|
</IntlProvider>
|
|
);
|
|
};
|
|
|
|
export default App;
|