{"version":3,"sources":["webpack:///./src/components/Blog/PostCard/PostCard.tsx","webpack:///./src/components/Blog/Blog.tsx","webpack:///./src/pages/blog.tsx","webpack:///./src/components/Layout/Author/Author.tsx"],"names":["Root","styled","section","withConfig","displayName","componentId","rhythm","Title","h3","ContentInfo","span","Content","p","PostCard","_ref","title","path","description","date","timeToRead","location","React","createElement","Link","aria-label","to","state","prevPath","pathname","dangerouslySetInnerHTML","__html","Blog","posts","useStaticQuery","allMarkdownRemark","edges","Author","map","_ref2","node","frontmatter","fields","slug","key","excerpt","BlogIndex","siteTitle","useSiteMetadata","comingBack","Boolean","match","transitions","usePageTransitions","translateX","Layout","SEO","props","animated","div","style","StyledImage","Image","device","tablet","author","avatar","useAvatar","width","height","avatarFixedImage","Object","assign","childImageSharp","fixed","src","srcSet","alt","name","href","social","linkedin"],"mappings":"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","file":"component---src-pages-blog-tsx-1ab5bcdc31562c6bc936.js","sourcesContent":["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  path: string;\n  description: string;\n  date: string;\n  timeToRead: number;\n  location: GatsbyLocation;\n}\n\nconst PostCard: React.FunctionComponent<PostCardProps> = ({\n  title,\n  path,\n  description,\n  date,\n  timeToRead,\n  location,\n}): React.ReactElement => (\n  <Root>\n    <Title>\n      <Link\n        aria-label={`Continue reading: ${title}`}\n        to={`${path}`}\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> = ({\n  location,\n}): React.ReactElement => {\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              path\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              path={node.frontmatter.path}\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 title=\"Blog\" />\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","import React from \"react\";\nimport styled from \"styled-components\";\nimport Image, { FixedObject } from \"gatsby-image\";\nimport { Link } from \"gatsby\";\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 software development, coding, leadership, and much more. Checkout\n        my{\" \"}\n        <em>\n          <Link to=\"/resume\">resume</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)`\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"],"sourceRoot":""}