{"version":3,"sources":["webpack://robertistok-personal-website/./src/components/Layout/Author/Author.tsx","webpack://robertistok-personal-website/./src/components/Post/Post.tsx","webpack://robertistok-personal-website/./src/templates/blog-post.tsx"],"names":["Root","styled","rhythm","StyledImage","Image","device","author","useSiteMetadata","avatar","useAvatar","width","height","avatarFixedImage","childImageSharp","fixed","src","srcSet","alt","name","href","social","linkedin","newsletterUrl","target","rel","scale","Title","Info","Content","post","frontmatter","title","date","timeToRead","dangerouslySetInnerHTML","__html","html","className","Author","data","location","markdownRemark","siteTitle","siteUrl","transitions","usePageTransitions","Layout","headerProps","showBackNav","description","image","cover","undefined","imageAlt","type","url","slug","meta","property","content","category","tags","map","t","props","key","style"],"mappings":"4OA2CMA,EAAOC,wBAAH,wDAAGA,CAAH,kIAGIC,QAAO,IAEFA,QAAO,IAQpBC,GAAcF,QAAOG,KAAV,0EAAGH,CAAH,kIAONI,aAMX,EA7De,WAA0B,IAC/BC,GAAWC,UAAXD,OACFE,GAASC,QAAU,CAAEC,MAAO,GAAIC,OAAQ,KAExCC,EAAgC,OAAH,UAC9BJ,EAAOK,gBAAgBC,MADO,CAGjCC,IAAKP,EAAOK,gBAAgBC,MAAMC,IAClCC,OAAQR,EAAOK,gBAAgBC,MAAME,OACrCN,MAAO,GACPC,OAAQ,KAGV,OACE,gBAACX,EAAD,KACE,gBAACG,EAAD,CAAaW,MAAOF,EAAkBK,IAAKX,EAAOY,OAClD,+CACqB,IACnB,qBAAGC,KAAI,+BAAiCb,EAAOc,OAAOC,UACnDf,EAAOY,MACL,IAJP,0DAK0D,IACxD,qBAAGC,KAAMb,EAAOgB,cAAeC,OAAO,SAASC,IAAI,cAAnD,aAEK,IARP,0D,0KCEAxB,EAAOC,wBAAH,sDAAGA,CAAH,2MAEKC,QAAO,KAClBuB,QAAM,KAMOvB,QAAO,IAYlBwB,EAAQzB,mBAAH,uDAAGA,CAAH,qCACKC,QAAO,IAIjByB,EAAO1B,kBAAH,sDAAGA,CAAH,sEACKC,QAAO,KAGHA,QAAO,IAGpB0B,EAAU3B,wBAAH,yDAAGA,CAAH,uNAIPwB,SAAO,KAKQvB,QAAO,KAMZA,QAAO,KAMvB,EApEiD,SAAC,GAAD,IAC/C2B,EAD+C,EAC/CA,KAD+C,OAG/C,gBAAC7B,EAAD,KACE,gBAAC0B,EAAD,KAAQG,EAAKC,YAAYC,OACzB,gBAACJ,EAAD,KACGE,EAAKC,YAAYE,KADpB,MAC6BH,EAAKI,WADlC,aAGA,gBAACL,EAAD,CAASM,wBAAyB,CAAEC,OAAQN,EAAKO,QACjD,uBAAKC,UAAU,cACf,gBAACC,EAAA,EAAD,Q,UCwCJ,EA5CyE,SAAC,GAGhD,IAFxBC,EAEwB,EAFxBA,KACAC,EACwB,EADxBA,SACwB,EACSD,EAAKE,eAA9BX,EADgB,EAChBA,YAAgBD,GADA,6BAEctB,UAAvBmC,EAFS,EAEhBX,MAAkBY,EAFF,EAEEA,QAEpBC,GAAcC,QAAmB,CAAEL,aAEzC,OACE,gBAACM,EAAA,EAAD,CACEN,SAAUA,EACVT,MAAOW,EACPK,YAAa,CAAEC,aAAa,IAE5B,gBAAC,IAAD,CACEjB,MAAOD,EAAYC,MACnBkB,YAAgBpB,EAAKI,WAAV,eAAmCH,EAAYmB,YAC1DC,MACEpB,EAAYqB,MACRrB,EAAYqB,MAAMtC,gBAAgBC,MAAMC,SACxCqC,EAENC,SAAQ,mBAAqBvB,EAAYC,MACzCuB,KAAK,UACLC,IAAQZ,EAAL,SAAqBb,EAAY0B,KACpCC,KAAI,CACF,CAAEC,SAAU,yBAA0BC,QAAS7B,EAAYE,MAC3D,CAAE0B,SAAU,kBAAmBC,QAAS7B,EAAY8B,WAFlD,gBAGE9B,EAAY+B,MAAQ,IAAIC,KAAI,SAAAC,GAAC,MAAK,CACpCL,SAAU,cACVC,QAASI,UAIdnB,EAAYkB,KAAI,gBAAGE,EAAH,EAAGA,MAAOC,EAAV,EAAUA,IAAV,OACf,gBAAC,QAAD,CAAcA,IAAKA,EAAKC,MAAOF,GAC7B,gBAAC,EAAD,CAAMnC,KAAI,eAAIC,eAAgBD","file":"component---src-templates-blog-post-tsx-00c2e2849e271cfaadda.js","sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport Image, { FixedObject } from \"gatsby-image\";\n\nimport { rhythm } from \"../../../utils/typography\";\nimport { device } from \"../../../styles/constants\";\nimport { useSiteMetadata, useAvatar } from \"../../../hooks\";\n\nconst Author = (): React.ReactElement => {\n  const { author } = useSiteMetadata();\n  const avatar = useAvatar({ width: 50, height: 50 });\n\n  const avatarFixedImage: FixedObject = {\n    ...avatar.childImageSharp.fixed,\n    // need to set src and srcSet explicitly, otherwise there is a type conflict\n    src: avatar.childImageSharp.fixed.src,\n    srcSet: avatar.childImageSharp.fixed.srcSet,\n    width: 50,\n    height: 50,\n  };\n\n  return (\n    <Root>\n      <StyledImage fixed={avatarFixedImage} alt={author.name} />\n      <h5>\n        A personal blog by{\" \"}\n        <a href={`https://www.linkedin.com/in/${author.social.linkedin}`}>\n          {author.name}\n        </a>{\" \"}\n        about coding, traveling, habit building, and much more.{\" \"}\n        <a href={author.newsletterUrl} target=\"_blank\" rel=\"noreferrer\">\n          Subscribe\n        </a>{\" \"}\n        to my newsletter and never miss any of my writings.\n        {/* (Psst... I am{\" \"}\n        <em>\n          <Link to=\"/resume\">open to opportunities</Link>.)\n        </em> */}\n      </h5>\n    </Root>\n  );\n};\n\nconst Root = styled.section`\n  display: grid;\n  grid-template-columns: 50px auto;\n  grid-gap: ${rhythm(1)};\n  align-items: center;\n  margin-bottom: ${rhythm(1)};\n\n  h5 {\n    margin: 0;\n    line-height: 1.5;\n  }\n`;\n\nconst StyledImage = styled(Image)<{fixed: FixedObject }>`\n  margin-bottom: 0;\n  justify-self: center;\n  width: 50px;\n  height: 50px;\n  border-radius: 50%;\n\n  @media ${device.tablet} {\n    grid-row: auto;\n    justify-self: flex-end;\n  }\n`;\n\nexport default Author;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { MarkdownRemark } from \"graphql-types\";\n\nimport Author from \"../Layout/Author\";\n\nimport { rhythm, scale } from \"../../utils/typography\";\n\ninterface PostProps {\n  post: MarkdownRemark;\n}\n\nconst Post: React.FunctionComponent<PostProps> = ({\n  post,\n}): React.ReactElement => (\n  <Root>\n    <Title>{post.frontmatter.title}</Title>\n    <Info>\n      {post.frontmatter.date} · {post.timeToRead} min read\n    </Info>\n    <Content dangerouslySetInnerHTML={{ __html: post.html }} />\n    <div className=\"separator\" />\n    <Author />\n  </Root>\n);\n\nconst Root = styled.section`\n  margin: auto;\n  max-width: ${rhythm(28)};\n  ${scale(0.1)}\n\n  .separator {\n    margin: 20px 0px;\n    border: none;\n    text-align: center;\n    font-size: ${rhythm(1)};\n    font-weight: 300;\n\n    &:before {\n      line-height: 1.4;\n      text-indent: 0.6em;\n      letter-spacing: 0.6em;\n      content: \"···\";\n    }\n  }\n`;\n\nconst Title = styled.h1`\n  margin-top: ${rhythm(1)};\n  margin-bottom: 0;\n`;\n\nconst Info = styled.p`\n  font-size: ${rhythm(0.6)};\n  font-style: italic;\n  display: block;\n  margin-bottom: ${rhythm(1)};\n`;\n\nconst Content = styled.article`\n  .md-figure-caption,\n  .gatsby-resp-image-figcaption {\n    text-align: center;\n    ${scale(-0.2)};\n    font-style: italic;\n  }\n\n  .gatsby-resp-image-background-image {\n    margin-bottom: ${rhythm(0.1)};\n  }\n\n  .video_container {\n    iframe {\n      width: 100%;\n      height: ${rhythm(20)};\n      margin-bottom: 0;\n    }\n  }\n`;\n\nexport default Post;\n","import React from \"react\";\nimport { graphql } from \"gatsby\";\nimport { animated } from \"react-spring\";\nimport { GatsbyLocation } from \"local-types\";\nimport { MarkdownRemark } from \"graphql-types\";\n\nimport Layout from \"../components/Layout\";\nimport SEO from \"../components/Seo\";\nimport Post from \"../components/Post\";\nimport { useSiteMetadata, usePageTransitions } from \"../hooks\";\n\ninterface BlogPostTemplateProps {\n  location: GatsbyLocation;\n  data: {\n    markdownRemark: MarkdownRemark;\n  };\n}\n\nconst BlogPostTemplate: React.FunctionComponent<BlogPostTemplateProps> = ({\n  data,\n  location,\n}): React.ReactElement => {\n  const { frontmatter, ...post } = data.markdownRemark;\n  const { title: siteTitle, siteUrl } = useSiteMetadata();\n\n  const transitions = usePageTransitions({ location });\n\n  return (\n    <Layout\n      location={location}\n      title={siteTitle}\n      headerProps={{ showBackNav: true }}\n    >\n      <SEO\n        title={frontmatter.title}\n        description={`${post.timeToRead} min read · ${frontmatter.description}`}\n        image={\n          frontmatter.cover\n            ? frontmatter.cover.childImageSharp.fixed.src\n            : undefined\n        }\n        imageAlt={`Cover photo for ${frontmatter.title}`}\n        type=\"article\"\n        url={`${siteUrl}/blog/${frontmatter.slug}`}\n        meta={[\n          { property: \"article:published_time\", content: frontmatter.date },\n          { property: \"article:section\", content: frontmatter.category },\n          ...(frontmatter.tags || []).map(t => ({\n            property: \"article:tag\",\n            content: t,\n          })),\n        ]}\n      />\n      {transitions.map(({ props, key }) => (\n        <animated.div key={key} style={props}>\n          <Post post={{ frontmatter, ...post }} />\n        </animated.div>\n      ))}\n    </Layout>\n  );\n};\n\nexport default BlogPostTemplate;\n\nexport const pageQuery = graphql`\n  query BlogPostBySlug($slug: String!) {\n    markdownRemark(fields: { slug: { eq: $slug } }) {\n      id\n      excerpt(pruneLength: 160)\n      html\n      frontmatter {\n        title\n        date(formatString: \"MMMM DD, YYYY\")\n        cover {\n          childImageSharp {\n            fixed {\n              src\n            }\n          }\n        }\n        slug\n        description\n        category\n        tags\n      }\n      timeToRead\n    }\n  }\n`;\n"],"sourceRoot":""}