{"version":3,"sources":["webpack://robertistok-personal-website/./src/components/Layout/Author/Author.tsx","webpack://robertistok-personal-website/./src/components/Blog/PostCard/PostCard.tsx","webpack://robertistok-personal-website/./src/components/Blog/Blog.tsx","webpack://robertistok-personal-website/./src/pages/blog.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","Title","ContentInfo","Content","title","slug","description","date","timeToRead","location","Link","aria-label","to","state","prevPath","pathname","dangerouslySetInnerHTML","__html","posts","useStaticQuery","allMarkdownRemark","edges","Author","map","node","frontmatter","fields","key","excerpt","siteTitle","comingBack","Boolean","match","transitions","usePageTransitions","translateX","Layout","props","style"],"mappings":"8OA2CMA,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,4ICqBAxB,EAAOC,wBAAH,yDAAGA,CAAH,2CACSC,QAAO,IAOpBuB,EAAQxB,mBAAH,0DAAGA,CAAH,qBACCC,QAAO,IAGbwB,EAAczB,qBAAH,gEAAGA,CAAH,sCAEFC,QAAO,KAGhByB,EAAU1B,kBAAH,4DAAGA,CAAH,mBACDC,QAAO,EAAI,IAGvB,EAlDyD,SAAC,GAAD,IACvD0B,EADuD,EACvDA,MACAC,EAFuD,EAEvDA,KACAC,EAHuD,EAGvDA,YACAC,EAJuD,EAIvDA,KACAC,EALuD,EAKvDA,WACAC,EANuD,EAMvDA,SANuD,OAQvD,gBAACjC,EAAD,KACE,gBAACyB,EAAD,KACE,gBAAC,EAAAS,KAAD,CACEC,aAAA,qBAAiCP,EACjCQ,GAAE,QAAUP,EACZQ,MAAO,CAAEC,SAAUL,EAASM,WAE3BX,IAGL,gBAACF,EAAD,KACGK,EADH,MACYC,EADZ,aAGA,gBAACL,EAAD,CACEa,wBAAyB,CACvBC,OAAQX,O,UC2BV9B,EAAOC,wBAAH,kDAAGA,CAAH,mEAIKC,QAAO,KAGtB,EA3DiD,SAAC,GAAiB,IAAf+B,EAAe,EAAfA,SA2B5CS,GAxBFC,oBAAe,aAwBAC,kBAAkBC,MAErC,OACE,gBAAC,EAAD,KACE,gBAACC,EAAA,EAAD,MACCJ,EAAMK,KACL,YAAkC,IAA/BC,EAA+B,EAA/BA,KACKpB,EAAQoB,EAAKC,YAAYrB,OAASoB,EAAKE,OAAOrB,KACpD,OACE,gBAAC,EAAD,CACEsB,IAAKH,EAAKE,OAAOrB,KACjBD,MAAOA,EACPC,KAAMmB,EAAKE,OAAOrB,KAClBC,YAAakB,EAAKC,YAAYnB,aAAekB,EAAKI,QAClDrB,KAAMiB,EAAKC,YAAYlB,KACvBC,WAAYgB,EAAKhB,WACjBC,SAAUA,S,oBCdxB,EA9B2D,SAAC,GAElC,IADxBA,EACwB,EADxBA,SAEeoB,GAAc9C,UAArBqB,MAEF0B,KACJrB,EAASI,QAASJ,EAASI,MAAMC,WAC7BiB,QAAQtB,EAASI,MAAMC,SAASkB,MAAM,cAGtCC,GAAcC,QAAmB,CACrCC,WAAYL,GAAc,IAAM,IAChCrB,aAGF,OACE,gBAAC2B,EAAA,EAAD,CAAQ3B,SAAUA,EAAUL,MAAOyB,GACjC,gBAAC,IAAD,CACEvB,YAAY,uEACZF,MAAM,SAEP6B,EAAYV,KAAI,gBAAGc,EAAH,EAAGA,MAAOV,EAAV,EAAUA,IAAV,OACf,gBAAC,QAAD,CAAcA,IAAKA,EAAKW,MAAOD,GAC7B,gBAAC,EAAD,CAAM5B,SAAUA","file":"component---src-pages-blog-tsx-cdfb66f8b1d427307a33.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 { Link } from \"gatsby\";\nimport { GatsbyLocation } from \"local-types\";\n\nimport { rhythm } from \"../../../utils/typography\";\n\ninterface PostCardProps {\n  title: string;\n  slug: string;\n  description: string;\n  date: string;\n  timeToRead: number;\n  location: GatsbyLocation;\n}\n\nconst PostCard: React.FunctionComponent<PostCardProps> = ({\n  title,\n  slug,\n  description,\n  date,\n  timeToRead,\n  location,\n}) => (\n  <Root>\n    <Title>\n      <Link\n        aria-label={`Continue reading: ${title}`}\n        to={`/blog${slug}`}\n        state={{ prevPath: location.pathname }}\n      >\n        {title}\n      </Link>\n    </Title>\n    <ContentInfo>\n      {date} · {timeToRead} min read\n    </ContentInfo>\n    <Content\n      dangerouslySetInnerHTML={{\n        __html: description,\n      }}\n    />\n  </Root>\n);\n\nconst Root = styled.section`\n  margin-bottom: ${rhythm(1)};\n\n  a {\n    box-shadow: none;\n  }\n`;\n\nconst Title = styled.h3`\n  margin: ${rhythm(1)} 0 0;\n`;\n\nconst ContentInfo = styled.span`\n  font-style: italic;\n  font-size: ${rhythm(0.6)};\n`;\n\nconst Content = styled.p`\n  margin: ${rhythm(2 / 6)} 0;\n`;\n\nexport default PostCard;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { graphql, useStaticQuery } from \"gatsby\";\nimport { GatsbyLocation } from \"local-types\";\nimport { MarkdownRemarkConnection } from \"graphql-types\";\n\nimport PostCard from \"./PostCard\";\nimport Author from \"../Layout/Author\";\nimport { rhythm } from \"../../utils/typography\";\n\ninterface BlogProps {\n  location: GatsbyLocation;\n}\n\nconst Blog: React.FunctionComponent<BlogProps> = ({ location }) => {\n  const data: {\n    allMarkdownRemark: MarkdownRemarkConnection;\n  } = useStaticQuery(graphql`\n    query {\n      allMarkdownRemark(\n        filter: { frontmatter: { draft: { eq: false } } }\n        sort: { fields: [frontmatter___date], order: DESC }\n      ) {\n        edges {\n          node {\n            excerpt\n            fields {\n              slug\n            }\n            frontmatter {\n              date(formatString: \"MMMM DD, YYYY\")\n              title\n              description\n            }\n            timeToRead\n          }\n        }\n      }\n    }\n  `);\n\n  const posts = data.allMarkdownRemark.edges;\n\n  return (\n    <Root>\n      <Author />\n      {posts.map(\n        ({ node }): React.ReactElement => {\n          const title = node.frontmatter.title || node.fields.slug;\n          return (\n            <PostCard\n              key={node.fields.slug}\n              title={title}\n              slug={node.fields.slug}\n              description={node.frontmatter.description || node.excerpt}\n              date={node.frontmatter.date}\n              timeToRead={node.timeToRead}\n              location={location}\n            />\n          );\n        }\n      )}\n    </Root>\n  );\n};\n\nconst Root = styled.section`\n  display: flex;\n  flex-direction: column;\n  margin: auto;\n  max-width: ${rhythm(24)};\n`;\n\nexport default Blog;\n","import React from \"react\";\nimport { animated } from \"react-spring\";\nimport { GatsbyLocation } from \"local-types\";\n\nimport Layout from \"../components/Layout\";\nimport Blog from \"../components/Blog\";\nimport SEO from \"../components/Seo\";\nimport { useSiteMetadata, usePageTransitions } from \"../hooks\";\n\ninterface BlogIndexProps {\n  location: GatsbyLocation;\n}\n\nconst BlogIndex: React.FunctionComponent<BlogIndexProps> = ({\n  location,\n}): React.ReactElement => {\n  const { title: siteTitle } = useSiteMetadata();\n\n  const comingBack =\n    location.state && location.state.prevPath\n      ? Boolean(location.state.prevPath.match(/\\/blog\\/*/))\n      : false;\n\n  const transitions = usePageTransitions({\n    translateX: comingBack ? -100 : 100,\n    location,\n  });\n\n  return (\n    <Layout location={location} title={siteTitle}>\n      <SEO\n        description=\"Personal blog about coding, traveling, habit building, and much more\"\n        title=\"Blog\"\n      />\n      {transitions.map(({ props, key }) => (\n        <animated.div key={key} style={props}>\n          <Blog location={location} />\n        </animated.div>\n      ))}\n    </Layout>\n  );\n};\n\nexport default BlogIndex;\n"],"sourceRoot":""}