git.iko.soy/rowtype-yoga/psfp
on c810fc0 help sign in
rowtype-yoga/psfp/blog/src/components/layout.js
48 lines 1.2 kB history raw
1import React from "react";
2import PropTypes from "prop-types";
3import { StaticQuery, graphql } from "gatsby";
4import { MDXProvider } from "@mdx-js/react";
5import { preToCodeBlock } from "mdx-utils";
6const yogaCard = require("./YogaCard.purs");
8import Header from "./header";
9import Code from "./code";
11const mdxProviderComponents = {
12 pre: preProps => {
13 const props = preToCodeBlock(preProps);
14 return props ? <Code {...props} /> : <pre {...preProps} />;
15 }
16};
18const ThemeProvider = yogaCard.makeThemeProvider();
20const Layout = ({ children }) => (
21 <ThemeProvider theme={yogaCard.dark}>
22 <MDXProvider components={mdxProviderComponents}>
23 <StaticQuery
24 query={graphql`
25 query SiteTitleQuery {
26 site {
27 siteMetadata {
28 title
29 }
30 }
31 }
32 `}
33 render={data => (
34 <div style={{backgroundColor: yogaCard.dark.backgroundColour}}>
35 <Header siteTitle={data.site.siteMetadata.title} />
36 <div>{children}</div>
37 </div>
38 )}
39 />
40 </MDXProvider>
41 </ThemeProvider>
42);
44Layout.propTypes = {
45 children: PropTypes.node.isRequired
46};
48export default Layout;