{"version":3,"sources":["webpack:///./src/components/Introduction/index.js","webpack:///./src/pages/index.js","webpack:///./src/components/PostListing/index.js","webpack:///./src/components/Posts/index.js"],"names":["IntroductionSection","styled","div","Introduction","href","to","IndexPage","Layout","Posts","numberOfPostsToShow","PostListingContainer","Link","PostTitle","PostDate","PostListing","slug","title","date","tags","map","tag","tagName","key","defaultProps","PostList","ul","SearchContainer","SearchInput","input","PostCount","span","searchable","posts","useStaticQuery","allMdx","edges","useState","searchInput","setSearchInput","filteredPosts","setFilteredPosts","postsToDisplay","slice","Fragment","onChange","event","target","value","toLowerCase","validPosts","filter","node","frontmatter","includes","join","placeholder","length","post","id","fields","Infinity"],"mappings":"mJAIMA,E,UAAsBC,EAAOC,IAAV,oFAAGD,CAAH,+GAuCVE,EAxBM,kBACnB,kBAACH,EAAD,KACE,wDAEA,sGAC2E,IACzE,uBAAGI,KAAK,6BAAR,gBAFF,sFAMA,iJAE6C,IAC3C,uBAAGA,KAAK,8BAAR,oBAHF,YAGqE,IACnE,kBAAC,IAAD,CAAMC,GAAG,wCAAT,oBAJF,+CAQA,kGAEA,gF,YCxBWC,UARG,kBAChB,kBAACC,EAAA,EAAD,KACE,kBAAC,EAAD,MACA,+CACA,kBAACC,EAAA,EAAD,CAAOC,oBAAqB,O,+FCJ1BC,EAAuBT,YAAOU,KAAV,oFAAGV,CAAH,4OAgBpBW,EAAYX,IAAOC,IAAV,yEAAGD,CAAH,sBAITY,EAAWZ,IAAOC,IAAV,wEAAGD,CAAH,qCAKRa,EAAc,SAAC,GAAD,IAAGC,EAAH,EAAGA,KAAMC,EAAT,EAASA,MAAOC,EAAhB,EAAgBA,KAAMC,EAAtB,EAAsBA,KAAtB,OAClB,kBAACR,EAAD,CAAsBL,GAAIU,GACxB,kBAACH,EAAD,KAAYI,GACZ,kBAACH,EAAD,KAAWI,GACVC,EAAKC,KAAI,SAAAC,GAAG,OACX,kBAAC,IAAD,CAAKC,QAASD,EAAKE,IAAKF,SAY9BN,EAAYS,aAAe,CACzBR,KAAM,YACNC,MAAO,gBACPC,KAAM,aACNC,KAAM,CAAC,QAGMJ,QCjDTU,EAAWvB,IAAOwB,GAAV,sEAAGxB,CAAH,+BAKRyB,EAAkBzB,IAAOC,IAAV,6EAAGD,CAAH,2FAQf0B,EAAc1B,IAAO2B,MAAV,yEAAG3B,CAAH,yLAaX4B,EAAY5B,IAAO6B,KAAV,uEAAG7B,CAAH,iDAMTO,EAAQ,SAAC,GAAyC,IAAvCC,EAAsC,EAAtCA,oBAAqBsB,EAAiB,EAAjBA,WAsB9BC,EArBOC,YAAe,cAqBTC,OAAOC,MAtB2B,EAuBfC,mBAAS,IAAxCC,EAvB8C,KAuBjCC,EAvBiC,OAwBXF,mBAASJ,GAA5CO,EAxB8C,KAwB/BC,EAxB+B,KAyB/CC,EAAiBF,EAAcG,MAAM,EAAGjC,GAkB9C,OACE,kBAAC,IAAMkC,SAAP,KACGZ,GACC,kBAACL,EAAD,KACE,kBAACC,EAAD,CACEiB,SArBgB,SAAAC,GACxB,IAAMR,EAAcQ,EAAMC,OAAOC,MAAMC,cAEjCC,EAAajB,EAAMkB,QAAO,YAAqB,IAAD,IAAjBC,KACJC,YAArBlC,EAD0C,EAC1CA,KAER,OAHkD,EACpCF,MAGNgC,cAAcK,SAAShB,IAC7BnB,EAAKoC,KAAK,KAAKD,SAAShB,MAI5BC,EAAeD,GACfG,EAAiBS,IASTM,YAAY,eACZR,MAAOV,IAET,kBAACR,EAAD,KAAYY,EAAee,SAG/B,kBAAChC,EAAD,KACGiB,EAAetB,KAAI,YAAqB,IAAZsC,EAAW,EAAjBN,KACrB,OACE,wBAAI7B,IAAKmC,EAAKC,IACZ,kBAAC,EAAD,CACE3C,KAAM0C,EAAKE,OAAO5C,KAClBC,MAAOyC,EAAKL,YAAYpC,MACxBC,KAAMwC,EAAKL,YAAYnC,KACvBC,KAAMuC,EAAKL,YAAYlC,cAevCV,EAAMe,aAAe,CACnBd,oBAAqBmD,IACrB7B,YAAY,GAGCvB","file":"component---src-pages-index-js-b1a70ed741612db2a76b.js","sourcesContent":["import React from 'react';\nimport { Link } from 'gatsby';\nimport styled from 'styled-components';\n\nconst IntroductionSection = styled.div`\n  margin-bottom: 3rem;\n\n  .svg {\n    box-shadow: none;\n    border-bottom: none;\n\n    :active,\n    :hover {\n      background: none;\n      fill: #0984e3;\n    }\n  }\n`;\n\nconst Introduction = () => (\n  <IntroductionSection>\n    <h1>👋 Hey there, I&#39;m David!</h1>\n\n    <p>\n      I am currently tackling interesting problems as a Senior Web Engineer at{' '}\n      <a href=\"https://tigerconnect.com/\">TigerConnect</a>, a company developing\n      secure communication platforms for the healthcare industry.\n    </p>\n\n    <p>\n      When I am not glued to a computer screen, you can find me enjoying food,\n      exercising, reading, and traveling. I am a{' '}\n      <a href=\"https://til.davidltran.com\">lifelong learner</a>, an avid{' '}\n      <Link to=\"/blog/podcasts-to-listen-to-in-2018/\">podcast listener</Link>,\n      and an enthusiast of books of all genres.\n    </p>\n\n    <p>My current weapons of choice include JavaScript, React, and Gatsby.</p>\n\n    <p>All thoughts and opinions expressed are my own.</p>\n  </IntroductionSection>\n);\n\nexport default Introduction;\n","import React from 'react';\n\nimport Layout from '../components/Layout';\n\nimport Introduction from '../components/Introduction';\nimport Posts from '../components/Posts';\n\nconst IndexPage = () => (\n  <Layout>\n    <Introduction />\n    <h2>Recent Writings</h2>\n    <Posts numberOfPostsToShow={5} />\n  </Layout>\n);\n\nexport default IndexPage;\n","import React from 'react';\nimport { Link } from 'gatsby';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\n\nimport { Tag } from '../';\n\nconst PostListingContainer = styled(Link)`\n  border-radius: 5px;\n  color: var(--color-text);\n  display: block;\n  margin-left: -10px;\n  padding: 10px;\n  text-decoration: none;\n  transition: background-color 0.2s linear;\n  width: 100%;\n\n  &:hover {\n    background-color: var(--color-item-hover);\n    text-decoration: none;\n  }\n`;\n\nconst PostTitle = styled.div`\n  font-weight: 500;\n`;\n\nconst PostDate = styled.div`\n  font-size: 0.8em;\n  margin-top: 5px;\n`;\n\nconst PostListing = ({ slug, title, date, tags }) => (\n  <PostListingContainer to={slug}>\n    <PostTitle>{title}</PostTitle>\n    <PostDate>{date}</PostDate>\n    {tags.map(tag => (\n      <Tag tagName={tag} key={tag} />\n    ))}\n  </PostListingContainer>\n);\n\nPostListing.propTypes = {\n  slug: PropTypes.string,\n  title: PropTypes.string,\n  date: PropTypes.string,\n  tags: PropTypes.arrayOf(PropTypes.string),\n};\n\nPostListing.defaultProps = {\n  slug: '/default/',\n  title: 'Default Title',\n  date: '1970-01-01',\n  tags: ['tag'],\n};\n\nexport default PostListing;\n","import React, { useState } from 'react';\nimport { graphql, useStaticQuery } from 'gatsby';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport PostListing from '../PostListing';\n\nconst PostList = styled.ul`\n  margin: 0;\n  list-style: none;\n`;\n\nconst SearchContainer = styled.div`\n  align-items: center;\n  display: flex;\n  margin-bottom: 2rem;\n  max-width: 500px;\n  position: relative;\n`;\n\nconst SearchInput = styled.input`\n  border-radius: 5px;\n  border: 1px solid #d3d3d3;\n  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);\n  outline: none;\n  padding: 5px 50px 5px 10px;\n  width: 100%;\n\n  &:focus {\n    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);\n  }\n`;\n\nconst PostCount = styled.span`\n  color: #d3d3d3;\n  position: absolute;\n  right: 10px;\n`;\n\nconst Posts = ({ numberOfPostsToShow, searchable }) => {\n  const data = useStaticQuery(\n    graphql`\n      query PostsQuery {\n        allMdx(sort: { fields: [frontmatter___date], order: DESC }) {\n          edges {\n            node {\n              id\n              fields {\n                slug\n              }\n              frontmatter {\n                title\n                date(formatString: \"MMMM DD, YYYY\")\n                tags\n              }\n            }\n          }\n        }\n      }\n    `\n  );\n  const posts = data.allMdx.edges;\n  const [searchInput, setSearchInput] = useState('');\n  const [filteredPosts, setFilteredPosts] = useState(posts);\n  const postsToDisplay = filteredPosts.slice(0, numberOfPostsToShow);\n\n  const handleInputChange = event => {\n    const searchInput = event.target.value.toLowerCase();\n\n    const validPosts = posts.filter(({ node: post }) => {\n      const { tags, title } = post.frontmatter;\n\n      return (\n        title.toLowerCase().includes(searchInput) ||\n        tags.join(' ').includes(searchInput)\n      );\n    });\n\n    setSearchInput(searchInput);\n    setFilteredPosts(validPosts);\n  };\n\n  return (\n    <React.Fragment>\n      {searchable && (\n        <SearchContainer>\n          <SearchInput\n            onChange={handleInputChange}\n            placeholder=\"Search posts\"\n            value={searchInput}\n          />\n          <PostCount>{postsToDisplay.length}</PostCount>\n        </SearchContainer>\n      )}\n      <PostList>\n        {postsToDisplay.map(({ node: post }) => {\n          return (\n            <li key={post.id}>\n              <PostListing\n                slug={post.fields.slug}\n                title={post.frontmatter.title}\n                date={post.frontmatter.date}\n                tags={post.frontmatter.tags}\n              />\n            </li>\n          );\n        })}\n      </PostList>\n    </React.Fragment>\n  );\n};\n\nPosts.propTypes = {\n  numberOfPostsToShow: PropTypes.number,\n  searchable: PropTypes.bool,\n};\n\nPosts.defaultProps = {\n  numberOfPostsToShow: Infinity,\n  searchable: false,\n};\n\nexport default Posts;\n"],"sourceRoot":""}