{"version":3,"sources":["webpack://stylesheets-dev-website/./src/components/blog/BlogHeader.jsx","webpack://stylesheets-dev-website/./src/components/blog/AuthorWidget.jsx","webpack://stylesheets-dev-website/./src/templates/post.jsx","webpack://stylesheets-dev-website/./src/components/blog/TagsWidget.jsx","webpack://stylesheets-dev-website/./src/images/inline-svgs/globe.svg"],"names":["title","publishedAt","publishedAtFormatted","Wrapper","topBottom","to","Title","Time","dateTime","styled","props","theme","color","grey","lighter","text","lightest","breakpoints","lg","Link","p","secondary","base","post","data","ghostPost","htmlAst","childHtmlRehype","transformedHtml","html","published_at_machine_readable","published_at_pretty","React","Globe","createElement","defaultProps","module","exports","default"],"mappings":"+NAsBA,EAhBmB,SAAC,GAAgD,IAA/CA,EAA8C,EAA9CA,MAAOC,EAAuC,EAAvCA,YAAaC,EAA0B,EAA1BA,qBACvC,OACE,gBAACC,EAAD,KACE,gBAAC,KAAD,KACE,gBAAC,KAAD,CAASC,WAAS,GAChB,gBAAC,KAAD,CAAkBC,GAAG,UAArB,QACA,gBAACC,EAAD,KAAQN,GACR,gBAACO,EAAD,CAAMC,SAAUP,GAAhB,gBACgBC,OAgBpBC,EAAUM,uBAAH,+DAAGA,CAAH,qBACG,SAAAC,GAAK,OAAIA,EAAMC,MAAMC,MAAMC,KAAKC,WAG1CR,EAAQG,mBAAH,6DAAGA,CAAH,4CAKLF,EAAOE,qBAAH,4DAAGA,CAAH,0EACC,SAAAC,GAAK,OAAIA,EAAMC,MAAMC,MAAMG,KAAKC,YAGpB,SAAAN,GAAK,OAAIA,EAAMC,MAAMM,YAAYC,M,8BC4BxCT,wBAAH,6DAAGA,CAAH,qGACUE,oBAQPF,oBAAH,6DAAGA,CAAH,MAEAA,mBAAH,0DAAGA,CAAH,uBAIEA,kBAAH,yDAAGA,CAAH,gDAEE,SAAAC,GAAK,OAAIA,EAAMC,MAAMC,MAAMG,KAAKC,YAI7BP,oBAAH,2DAAGA,CAAH,2I,SCrDX,GChBgBA,wBAAH,2DAAGA,CAAH,uBAIEA,mBAAH,0DAAGA,CAAH,sEAED,SAAAC,GAAK,OAAIA,EAAMC,MAAMC,MAAMG,KAAKC,YAK9BP,mBAAH,wDAAGA,CAAH,kDAMEA,mBAAH,uDAAGA,CAAH,wBAIUA,QAAOU,QAAV,yEAAGV,CAAH,iCAEL,SAAAW,GAAC,OAAIA,EAAET,MAAMC,MAAMS,UAAUC,QDvC3B,SAAC,GAAY,IAClBC,EADiB,EAAVC,KACKC,UACZC,EAAUH,EAAKI,iBAAmBJ,EAAKI,gBAAgBD,QACvDE,EAAkBL,EAAKI,iBAAmBJ,EAAKI,gBAAgBE,KAErE,OACE,gBAAC,KAAD,KACE,gBAAC,KAAD,CAAUL,KAAMD,IAChB,+BACE,gBAAC,EAAD,CACEvB,MAAOuB,EAAKvB,MACZC,YAAasB,EAAKO,8BAClB5B,qBAAsBqB,EAAKQ,sBAG7B,gBAAC,KAAD,CAAS3B,WAAS,GAChB,gBAAC,KAAD,CACEsB,QAASA,EACTG,KAAMD,GAAmBL,EAAKM,a,oBEzB1C,IAAIG,EAAQ,EAAQ,MAEpB,SAASC,EAAOvB,GACZ,OAAOsB,EAAME,cAAc,MAAMxB,EAAM,CAACsB,EAAME,cAAc,SAAS,CAAC,GAAK,KAAK,GAAK,KAAK,EAAI,KAAK,IAAM,IAAIF,EAAME,cAAc,OAAO,CAAC,GAAK,IAAI,GAAK,KAAK,GAAK,KAAK,GAAK,KAAK,IAAM,IAAIF,EAAME,cAAc,OAAO,CAAC,EAAI,6FAA6F,IAAM,MAGjUD,EAAME,aAAe,CAAC,MAAQ,KAAK,OAAS,KAAK,QAAU,YAAY,KAAO,OAAO,OAAS,eAAe,YAAc,IAAI,cAAgB,QAAQ,eAAiB,QAAQ,UAAY,yBAE5LC,EAAOC,QAAUJ,EAEjBA,EAAMK,QAAUL","file":"component---src-templates-post-jsx-fa183e6932dd28ed73e6.js","sourcesContent":["import React from 'react'\nimport styled from 'styled-components'\nimport PropTypes from 'prop-types'\n\nimport {BoxedContainer, Padding, ReverseArrowLink} from '../../elements'\n\nconst BlogHeader = ({title, publishedAt, publishedAtFormatted}) => {\n  return (\n    <Wrapper>\n      <BoxedContainer>\n        <Padding topBottom>\n          <ReverseArrowLink to=\"/blog/\">Blog</ReverseArrowLink>\n          <Title>{title}</Title>\n          <Time dateTime={publishedAt}>\n            Published on {publishedAtFormatted}\n          </Time>\n        </Padding>\n      </BoxedContainer>\n    </Wrapper>\n  )\n}\n\nexport default BlogHeader\n\nBlogHeader.propTypes = {\n  title: PropTypes.string,\n  publishedAt: PropTypes.string,\n  publishedAtFormatted: PropTypes.string,\n}\n\nconst Wrapper = styled.header`\n  background: ${props => props.theme.color.grey.lighter};\n`\n\nconst Title = styled.h1`\n  margin: 0.3em 0 0.45em;\n  max-width: 750px;\n`\n\nconst Time = styled.time`\n  color: ${props => props.theme.color.text.lightest};\n  font-size: 1.6rem;\n\n  @media (min-width: ${props => props.theme.breakpoints.lg}) {\n    font-size: 1.8rem;\n  }\n`\n","import React from 'react'\nimport styled from 'styled-components'\nimport {GatsbyImage, getImage} from 'gatsby-plugin-image'\nimport PropTypes from 'prop-types'\n\nimport Twitter from '../../images/inline-svgs/twitter.svg'\nimport Globe from '../../images/inline-svgs/globe.svg'\n\nimport {Padding} from '../../elements'\nimport theme from '../../styles/theme'\n\nconst AuthorWidget = ({data}) => {\n  const twitterUrl =\n    data.twitter && `https://twitter.com/${data.twitter.replace(/^@/, ``)}`\n\n  return (\n    <Padding bottom small>\n      <Wrapper>\n        <GatsbyImage\n          image={getImage(data.profileImageSharp)}\n          alt={`${data.name}'s picture`}\n          style={{\n            borderRadius: '100%',\n            marginBottom: '10px',\n          }}\n        />\n        <Content>\n          <Name>{data.name}</Name>\n          {data.bio && <Bio>{data.bio}</Bio>}\n          <Links>\n            {data.twitter && (\n              <a\n                href={twitterUrl}\n                title=\"Twitter\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n              >\n                <Twitter fill={theme.color.secondary.base} />\n              </a>\n            )}\n            {data.website && (\n              <a\n                href={data.website}\n                title=\"Website\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n              >\n                <Globe color={theme.color.secondary.base} />\n              </a>\n            )}\n          </Links>\n        </Content>\n      </Wrapper>\n    </Padding>\n  )\n}\n\nexport default AuthorWidget\n\nAuthorWidget.propTypes = {\n  data: PropTypes.shape({\n    slug: PropTypes.string,\n    name: PropTypes.string.isRequired,\n    bio: PropTypes.string,\n    website: PropTypes.string,\n    twitter: PropTypes.string,\n    profile_image: PropTypes.string,\n    profileImageSharp: PropTypes.object,\n  }),\n}\n\nconst Wrapper = styled.section`\n  @media (min-width: ${theme.breakpoints.md}) {\n    display: grid;\n    align-items: start;\n    grid-template-columns: 80px auto;\n    gap: 20px;\n  }\n`\n\nconst Content = styled.div``\n\nconst Name = styled.h3`\n  font-size: 1.8rem;\n`\n\nconst Bio = styled.p`\n  font-size: 1.6rem;\n  color: ${props => props.theme.color.text.lightest};\n  margin: 6px 0 0;\n`\n\nconst Links = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 12px 0 0;\n\n  a {\n    width: 23px;\n    height: 23px;\n    margin: 0 4px 0 0;\n    display: block;\n  }\n\n  svg {\n    width: 100%;\n    height: 100%;\n  }\n`\n","import React from 'react'\nimport {graphql} from 'gatsby'\n\nimport {Layout, MetaData, RenderContent} from '../components'\nimport {BlogHeader, AuthorWidget, TagsWidget} from '../components/blog'\nimport {BoxedContainer, Padding} from '../elements'\n\nconst Post = ({data}) => {\n  const post = data.ghostPost\n  const htmlAst = post.childHtmlRehype && post.childHtmlRehype.htmlAst\n  const transformedHtml = post.childHtmlRehype && post.childHtmlRehype.html\n\n  return (\n    <Layout>\n      <MetaData data={post} />\n      <article>\n        <BlogHeader\n          title={post.title}\n          publishedAt={post.published_at_machine_readable}\n          publishedAtFormatted={post.published_at_pretty}\n        />\n\n        <Padding topBottom>\n          <RenderContent\n            htmlAst={htmlAst}\n            html={transformedHtml || post.html}\n          />\n        </Padding>\n\n        {/* <aside>\n          <AuthorWidget data={post.primary_author} />\n          <hr />\n          {post.tags.length > 1 && <TagsWidget data={post.tags} />}\n        </aside> */}\n      </article>\n    </Layout>\n  )\n}\n\nexport default Post\n\nexport const query = graphql`\n  query ($slug: String!) {\n    ghostPost(slug: {eq: $slug}) {\n      ...GhostPostFields\n    }\n  }\n`\n","import React from 'react'\nimport styled from 'styled-components'\nimport {Link} from 'gatsby'\n\nconst TagsWidget = ({data}) => {\n  return (\n    <Wrapper>\n      <Header>Tagged with</Header>\n      <Tags>\n        {data.slice(1).map(tag => (\n          <Tag key={tag.slug}>\n            <StyledLink to={`/blog/category/${tag.slug}/`}>\n              # {tag.name}\n            </StyledLink>\n          </Tag>\n        ))}\n      </Tags>\n    </Wrapper>\n  )\n}\n\nexport default TagsWidget\n\nconst Wrapper = styled.section`\n  padding: 40px 0 0;\n`\n\nconst Header = styled.h3`\n  font-size: 1.6rem;\n  color: ${props => props.theme.color.text.lightest};\n  letter-spacing: normal;\n  margin: 0 0 8px;\n`\n\nconst Tags = styled.ul`\n  display: flex;\n  list-style: none;\n  flex-wrap: wrap;\n`\n\nconst Tag = styled.li`\n  margin: 0 8px 0 0;\n`\n\nconst StyledLink = styled(Link)`\n  font-size: 1.8rem;\n  color: ${p => p.theme.color.secondary.base};\n`\n","var React = require('react');\n\nfunction Globe (props) {\n    return React.createElement(\"svg\",props,[React.createElement(\"circle\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\",\"key\":0}),React.createElement(\"line\",{\"x1\":\"2\",\"y1\":\"12\",\"x2\":\"22\",\"y2\":\"12\",\"key\":1}),React.createElement(\"path\",{\"d\":\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\",\"key\":2})]);\n}\n\nGlobe.defaultProps = {\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"feather feather-globe\"};\n\nmodule.exports = Globe;\n\nGlobe.default = Globe;\n"],"sourceRoot":""}