{"version":3,"sources":["webpack:///./src/templates/extra-page.js","webpack:///./src/components/Content.js"],"names":["useStyles","createUseStyles","theme","root","width","maxWidth","margin","spacing","fontFamily","font","fontSize","lineHeight","date","color","palette","ExtraPageTemplate","_ref","title","content","contentComponent","classes","PostContent","Content","React","createElement","className","ExtraPage","_ref2","path","post","data","markdownRemark","Layout","html","HTMLContent","frontmatter","appearance","border","borderColor","borderRadius","radius1","padding","textDecoration","whiteSpace","paddingLeft","paddingRight","marginBottom","marginTop","backgroundColor","dangerouslySetInnerHTML","__html","defaultProps"],"mappings":"6FAAA,gKAOaA,EAAYC,2BAAgB,SAAAC,GAAK,MAAK,CAC/CC,KAAM,CACFC,MAAO,MACPC,SAAU,QACVC,OAAWJ,EAAMK,QAAQ,IAAK,QAC9BC,WAAYN,EAAMO,KAAKD,WACvBE,SAAUR,EAAMO,KAAKC,SACrBC,WAAYT,EAAMO,KAAKE,YAE3BC,KAAM,CACFC,MAAOX,EAAMY,QAAQ,oBAIhBC,EAAoB,SAAHC,GAA4C,IAAvCC,EAAKD,EAALC,MAAOC,EAAOF,EAAPE,QAASC,EAAgBH,EAAhBG,iBACzCC,EAAUpB,IACVqB,EAAcF,GAAoBG,IAExC,OACIC,IAAAC,cAAA,OAAKC,UAAWL,EAAQjB,MACpBoB,IAAAC,cAAA,UAAKP,GACLM,IAAAC,cAACH,EAAW,CAACH,QAASA,MA8BnBQ,UAnBG,SAAHC,GAAsB,IAAjBC,EAAID,EAAJC,KACOC,EADGF,EAAJG,KACfC,eAEP,OACIR,IAAAC,cAACQ,IAAM,CAACJ,KAAMA,GACVL,IAAAC,cAACT,EAAiB,CACdG,QAASW,EAAKI,KACdd,iBAAkBe,IAClBjB,MAAOY,EAAKM,YAAYlB,W,kCC/CxC,uEAIajB,EAAYC,2BAAgB,SAAAC,GAAK,MAAK,CAC/CgB,QAAS,CACLd,MAAO,OACP,eAAgB,CACZS,MAAOX,EAAMY,QAAQ,gBAEzB,MAAO,CACHD,MAAOX,EAAMY,QAAQ,gBAEzB,qBAAsB,CAClBsB,WAAY,OACZC,OAAQ,YACRC,YAAapC,EAAMY,QAAQ,eAC3ByB,aAAcrC,EAAMqC,aAAaC,QACjC3B,MAAOX,EAAMY,QAAQ,eACrB2B,QAAQ,KAAMvC,EAAMK,QAAQ,IAC5BH,MAAO,cACPsC,eAAgB,OAChBC,WAAY,UAEhB,UAAW,CACPtC,SAAU,QACV,4BAA6B,CACzBK,SAAU,MACV,OAAQ,CACJkC,YAAa,MACbC,aAAc,SAI1B,OAAQ,CACJC,aAAc,IACd,MAAO,CACHA,aAAc,MAGtB,OAAQ,CACJC,UAAW,KAEf,QAAS,CACLN,QAAYvC,EAAMK,QAAQ,GAAI,IAAIL,EAAMK,QAAQ,IAChDyC,gBAAiB9C,EAAMY,QAAQ,qBAK9BoB,EAAc,SAAHlB,GAA8B,IAAzBE,EAAOF,EAAPE,QAASO,EAAST,EAATS,UAC5BL,EAAUpB,IAChB,OACIuB,IAAAC,cAAA,OACIC,UAAcL,EAAQF,QAAO,IAAIO,EACjCwB,wBAAyB,CAACC,OAAQhC,MAKxCI,EAAU,SAAHK,GAA8B,IAAzBT,EAAOS,EAAPT,QAASO,EAASE,EAATF,UACjBL,EAAUpB,IAChB,OAAOuB,IAAAC,cAAA,OAAKC,UAAcL,EAAQF,QAAO,IAAIO,GAAcP,IAG/DI,EAAQ6B,aAAe,CACnB1B,UAAW,IAUAH","file":"component---src-templates-extra-page-js-2d41b9ee5a9adf919402.js","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport {graphql} from \"gatsby\";\nimport {createUseStyles} from \"react-jss\";\nimport Layout from \"../components/Layout\";\nimport Content, {HTMLContent} from \"../components/Content\";\n\nexport const useStyles = createUseStyles(theme => ({\n    root: {\n        width: \"90%\",\n        maxWidth: \"720px\",\n        margin: `${theme.spacing[\"64\"]} auto`,\n        fontFamily: theme.font.fontFamily,\n        fontSize: theme.font.fontSize,\n        lineHeight: theme.font.lineHeight\n    },\n    date: {\n        color: theme.palette[\"neutral-400\"]\n    }\n}));\n\nexport const ExtraPageTemplate = ({title, content, contentComponent}) => {\n    const classes = useStyles();\n    const PostContent = contentComponent || Content;\n\n    return (\n        <div className={classes.root}>\n            <h1>{title}</h1>\n            <PostContent content={content} />\n        </div>\n    );\n};\n\nExtraPageTemplate.propTypes = {\n    content: PropTypes.string.isRequired,\n    contentComponent: PropTypes.func.isRequired,\n    title: PropTypes.string.isRequired\n};\n\nconst ExtraPage = ({path, data}) => {\n    const {markdownRemark: post} = data;\n\n    return (\n        <Layout path={path}>\n            <ExtraPageTemplate\n                content={post.html}\n                contentComponent={HTMLContent}\n                title={post.frontmatter.title}\n            />\n        </Layout>\n    );\n};\n\nExtraPage.propTypes = {\n    path: PropTypes.string.isRequired,\n    data: PropTypes.objectOf(PropTypes.object).isRequired\n}\n\nexport default ExtraPage;\n\nexport const pageQuery = graphql`\n    query ExtraPageByID($id: String!) {\n        markdownRemark(id: {eq: $id}) {\n            id\n            html\n            frontmatter {\n                title\n            }\n        }\n    }\n`;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport {createUseStyles} from \"react-jss\";\n\nexport const useStyles = createUseStyles(theme => ({\n    content: {\n        width: \"100%\",\n        \"& h1, h2, h3\": {\n            color: theme.palette[\"neutral-800\"]\n        },\n        \"& a\": {\n            color: theme.palette[\"primary-500\"]\n        },\n        \"& a[type='button']\": {\n            appearance: \"none\",\n            border: \"1px solid\",\n            borderColor: theme.palette[\"primary-500\"],\n            borderRadius: theme.borderRadius.radius1,\n            color: theme.palette[\"primary-500\"],\n            padding: `0 ${theme.spacing[16]}`,\n            width: \"fit-content\",\n            textDecoration: \"none\",\n            whiteSpace: \"nowrap\"\n        },\n        \"& table\": {\n            maxWidth: \"100vw\",\n            \"@media (max-width: 600px)\": {\n                fontSize: \"3vw\",\n                \"& td\": {\n                    paddingLeft: \"2vw\",\n                    paddingRight: \"2vw\"\n                }\n            }\n        },\n        \"& li\": {\n            marginBottom: \"0\",\n            \"& p\": {\n                marginBottom: \"0\"\n            }\n        },\n        \"& ul\": {\n            marginTop: \"0\"\n        },\n        \"& pre\": {\n            padding: `${theme.spacing[\"4\"]} ${theme.spacing[\"12\"]}`,\n            backgroundColor: theme.palette[\"neutral-050\"]\n        }\n    }\n}));\n\nexport const HTMLContent = ({content, className}) => {\n    const classes = useStyles();\n    return (\n        <div\n            className={`${classes.content} ${className}`}\n            dangerouslySetInnerHTML={{__html: content}} /* eslint-disable-line */\n        />\n    );\n};\n\nconst Content = ({content, className}) => {\n    const classes = useStyles();\n    return <div className={`${classes.content} ${className}`}>{content}</div>;\n};\n\nContent.defaultProps = {\n    className: \"\"\n};\n\nContent.propTypes = {\n    content: PropTypes.node.isRequired,\n    className: PropTypes.string\n};\n\nHTMLContent.propTypes = Content.propTypes;\n\nexport default Content;\n"],"sourceRoot":""}