{"version":3,"sources":["webpack:///./src/components/bio.tsx","webpack:///./src/templates/blogPost.tsx"],"names":["BioContainer","styled","div","rhythm","AvatorContainer","Bio","data","useStaticQuery","bioQuery","author","site","siteMetadata","fixed","avatar","childImageSharp","alt","name","imgStyle","borderRadius","Title","PageNavigator","ContentContainer","pageQuery","BlogTemplate","pageContext","post","markdownRemark","previous","next","isTablet","useTablet","title","frontmatter","description","excerpt","icon","faCalendarDay","date","faStopwatch","timeToRead","dangerouslySetInnerHTML","__html","html","tableOfContents","className","to","fields","slug","rel"],"mappings":"+QASMA,EAAeC,IAAOC,IAAV,oEAAGD,CAAH,mHAENE,YAAO,GAEJA,YAAO,KAQhBC,EAAkBH,IAAOC,IAAV,uEAAGD,CAAH,sEACHE,YAAO,KA6BVE,EAvBO,WACpB,IAAMC,EAAOC,yBAAyBC,GAE9BC,EAAWH,EAAKI,KAAKC,aAArBF,OACR,OACE,kBAACT,EAAD,KACE,kBAACI,EAAD,KACE,kBAAC,IAAD,CACEQ,MAAON,EAAKO,OAAOC,gBAAgBF,MACnCG,IAAKN,EAAOO,KACZC,SAAU,CACRC,aAAc,UAIpB,yCACa,gCAAST,EAAOO,MAD7B,IAEE,kBAAC,IAAD,SAQFR,EAAW,a,YCvCXW,EAAQlB,IAAOC,IAAV,kEAAGD,CAAH,mEACEE,YAAO,IAMHA,YAAO,KAIlBiB,EAAgBnB,IAAOC,IAAV,0EAAGD,CAAH,sHAcboB,EAAmBpB,IAAOC,IAAV,6EAAGD,CAAH,iNAULE,YAAO,IAKbA,YAAO,GAEDA,YAAO,KAoDXmB,GAFEC,UA9CuD,SAAC,GAA0B,IAAxBjB,EAAwB,EAAxBA,KAAMkB,EAAkB,EAAlBA,YACvEC,EAAOnB,EAAKoB,eACVC,EAAmBH,EAAnBG,SAAUC,EAASJ,EAATI,KACZC,EAAWC,cAEjB,OACE,kBAAC,IAAD,CAAYC,MAAON,EAAKO,YAAYD,MAAOE,YAAaR,EAAKO,YAAYC,aAAeR,EAAKS,SAC3F,kBAACf,EAAD,KACE,4BACE,gCAASM,EAAKO,YAAYD,QAE5B,2BACE,kBAAC,IAAD,CAAiBI,KAAMC,MADzB,IAC4CX,EAAKO,YAAYK,KAD7D,IAGE,kBAAC,IAAD,CAAiBF,KAAMG,MAHzB,IAG0Cb,EAAKc,WAH/C,cAMF,kBAAClB,EAAD,KACE,iCACE,yBAAKmB,wBAAyB,CAAEC,OAAQhB,EAAKiB,UAE7Cb,GAAYJ,EAAKkB,iBACjB,6BACE,yBAAKC,UAAU,UAAUJ,wBAAyB,CAAEC,OAAQhB,EAAKkB,qBAIvE,6BACA,kBAAC,EAAD,MACA,kBAACvB,EAAD,KACGO,GACC,kBAAC,OAAD,CAAMkB,GAAIlB,EAASmB,OAAOC,KAAMC,IAAI,QAApC,KACKrB,EAASK,YAAYD,OAG5B,8BACCH,GACC,kBAAC,OAAD,CAAMiB,GAAIjB,EAAKkB,OAAOC,KAAMC,IAAI,QAC7BpB,EAAKI,YAAYD,MADpB,SAWe","file":"component---src-templates-blog-post-tsx-2aea15d738fa8d76bca2.js","sourcesContent":["import React from 'react';\nimport { useStaticQuery, graphql } from 'gatsby';\nimport Image from 'gatsby-image';\nimport styled from 'styled-components';\n\nimport { rhythm } from '../utils/typography';\nimport { BioQuery } from '../../types/graphql-types';\nimport Social from './social';\n\nconst BioContainer = styled.div`\n  display: flex;\n  margin: ${rhythm(1)};\n  text-align: center;\n  font-size: ${rhythm(1 / 2)};\n  justify-content: center;\n  align-items: center;\n  p {\n    margin: 0;\n  }\n`;\n\nconst AvatorContainer = styled.div`\n  margin-right: ${rhythm(1 / 2)};\n  margin-bottom: 0;\n  min-width: 50;\n  border-radius: 100%;\n`;\n\nconst Bio: React.FC = () => {\n  const data = useStaticQuery<BioQuery>(bioQuery);\n\n  const { author } = data.site.siteMetadata;\n  return (\n    <BioContainer>\n      <AvatorContainer>\n        <Image\n          fixed={data.avatar.childImageSharp.fixed}\n          alt={author.name}\n          imgStyle={{\n            borderRadius: '50%',\n          }}\n        />\n      </AvatorContainer>\n      <p>\n        Written by <strong>{author.name}</strong>.\n        <Social />\n      </p>\n    </BioContainer>\n  );\n};\n\nexport default Bio;\n\nconst bioQuery = graphql`\n  query Bio {\n    avatar: file(relativePath: { eq: \"images/profile.jpg\" }) {\n      childImageSharp {\n        fixed(width: 50, height: 50) {\n          ...GatsbyImageSharpFixed\n        }\n      }\n    }\n    site {\n      siteMetadata {\n        author {\n          name\n        }\n      }\n    }\n  }\n`;\n","import React from 'react';\nimport { graphql, PageProps, Link } from 'gatsby';\nimport styled from 'styled-components';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faCalendarDay, faStopwatch } from '@fortawesome/free-solid-svg-icons';\n\nimport { BlogQuery } from '../../types/graphql-types';\nimport BaseLayout from '../layouts/base';\nimport { BlogPostContext } from '../lib/createPages';\nimport { rhythm } from '../utils/typography';\nimport Bio from '../components/bio';\nimport { useTablet } from '../utils/useMediaQuery';\n\nconst Title = styled.div`\n  padding: ${rhythm(1 / 2)};\n  * {\n    margin: 0;\n  }\n  p {\n    diaplay: inline-block;\n    font-size: ${rhythm(1 / 2)};\n  }\n`;\n\nconst PageNavigator = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  padding: 0;\n\n  a {\n    flex-grow: 1;\n  }\n  a:last-child {\n    text-align: end;\n  }\n`;\n\nconst ContentContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  article {\n    display: flex;\n    min-width: 0;\n    flex-basis: 100%;\n    flex-grow: 1;\n    flex-direction: column;\n    padding: 0 ${rhythm(1 / 2)};\n  }\n  div.sidebar {\n    flex-grow: 0;\n    position: sticky;\n    top: ${rhythm(1)};\n    width: 100%;\n    padding: 0 ${rhythm(1 / 2)};\n  }\n`;\n\nconst BlogTemplate: React.FC<PageProps<BlogQuery, BlogPostContext>> = ({ data, pageContext }) => {\n  const post = data.markdownRemark;\n  const { previous, next } = pageContext;\n  const isTablet = useTablet();\n\n  return (\n    <BaseLayout title={post.frontmatter.title} description={post.frontmatter.description || post.excerpt}>\n      <Title>\n        <h1>\n          <strong>{post.frontmatter.title}</strong>\n        </h1>\n        <p>\n          <FontAwesomeIcon icon={faCalendarDay} /> {post.frontmatter.date}\n          ・\n          <FontAwesomeIcon icon={faStopwatch} /> {post.timeToRead} min read\n        </p>\n      </Title>\n      <ContentContainer>\n        <article>\n          <div dangerouslySetInnerHTML={{ __html: post.html }} />\n        </article>\n        {!isTablet && post.tableOfContents && (\n          <div>\n            <div className=\"sidebar\" dangerouslySetInnerHTML={{ __html: post.tableOfContents }} />\n          </div>\n        )}\n      </ContentContainer>\n      <hr />\n      <Bio />\n      <PageNavigator>\n        {previous && (\n          <Link to={previous.fields.slug} rel=\"prev\">\n            ← {previous.frontmatter.title}\n          </Link>\n        )}\n        <div />\n        {next && (\n          <Link to={next.fields.slug} rel=\"next\">\n            {next.frontmatter.title} →\n          </Link>\n        )}\n      </PageNavigator>\n    </BaseLayout>\n  );\n};\n\nexport default BlogTemplate;\n\nexport const pageQuery = graphql`\n  query Blog($slug: String!) {\n    markdownRemark(fields: { slug: { eq: $slug } }) {\n      id\n      excerpt(pruneLength: 160)\n      html\n      tableOfContents\n      timeToRead\n      frontmatter {\n        title\n        date(formatString: \"MMMM DD, YYYY\")\n        description\n      }\n    }\n  }\n`;\n"],"sourceRoot":""}