component---src-pages-pensieve-index-js-6736eb9628b697f1457a.js.map

{"version":3,"sources":["webpack:///./src/pages/pensieve/index.js"],"names":["colors","theme","fontSizes","fonts","StyledMainContainer","styled","Main","mixins","flexBetween","StyledGrid","div","media","desktop","StyledPostInner","boxShadow","borderRadius","transition","lightNavy","StyledPost","StyledPostHeader","StyledFolder","green","StyledPostName","h5","xxl","lightestSlate","StyledPostDescription","lightSlate","StyledDate","span","SFMono","xs","StyledTags","ul","inlineLink","PensievePage","location","posts","data","allMarkdownRemark","edges","rel","href","className","target","length","map","i","frontmatter","node","title","description","slug","date","tags","d","Date","key","tabIndex","to","toLocaleDateString","tag","kebabCase","pageQuery"],"mappings":"8aASQA,EAA6BC,IAA7BD,OAAQE,EAAqBD,IAArBC,UAAWC,EAAUF,IAAVE,MAErBC,EAAsBC,YAAOC,KAAV,gFAAGD,CAAH,0TAgBnBE,IAAOC,aAKPC,EAAaJ,IAAOK,IAAV,uEAAGL,CAAH,wIAQVM,IAAMC,QARI,MAWVC,EAAkBR,IAAOK,IAAV,4EAAGL,CAAH,wLACjBE,IAAOO,UACPP,IAAOC,YAMQP,IAAMc,aACTd,IAAMe,WACAhB,EAAOiB,WAMvBC,EAAab,IAAOK,IAAV,uEAAGL,CAAH,8FACAJ,IAAMe,WAKhBH,GAKAM,EAAmBd,IAAOK,IAAV,6EAAGL,CAAH,4BAClBE,IAAOC,aAGLY,EAAef,IAAOK,IAAV,yEAAGL,CAAH,2CACPL,EAAOqB,OAMZC,EAAiBjB,IAAOkB,GAAV,2EAAGlB,CAAH,6CAELH,EAAUsB,IACdxB,EAAOyB,eAEZC,EAAwBrB,IAAOK,IAAV,kFAAGL,CAAH,8BAEhBL,EAAO2B,YAEZC,EAAavB,IAAOwB,KAAV,uEAAGxB,CAAH,sEAECF,EAAM2B,OACR5B,EAAU6B,GACd/B,EAAO2B,YAEZK,EAAa3B,IAAO4B,GAAV,uEAAG5B,CAAH,8MASGF,EAAM2B,OACR5B,EAAU6B,GACd/B,EAAOqB,MAOZd,IAAO2B,YA4EAC,UAvEM,SAAC,GAAwB,IAAtBC,EAAqB,EAArBA,SAChBC,EADqC,EAAXC,KACbC,kBAAkBC,MAErC,OACE,kBAAC,IAAD,CAAQJ,SAAUA,GAChB,kBAAC,SAAD,KACE,0DACA,0BAAMK,IAAI,YAAYC,KAAK,6CAG7B,kBAACtC,EAAD,KACE,gCACE,wBAAIuC,UAAU,aAAd,YACA,uBAAGA,UAAU,YACX,uBACED,KAAK,gEACLE,OAAO,SACPH,IAAI,uBAHN,8BASJ,kBAAChC,EAAD,KACE,yBAAKkC,UAAU,SACZN,EAAMQ,OAAS,GACdR,EAAMS,KAAI,WAAWC,GAAO,IAClBC,EADiB,EAAdC,KACHD,YACAE,EAAyCF,EAAzCE,MAAOC,EAAkCH,EAAlCG,YAAaC,EAAqBJ,EAArBI,KAAMC,EAAeL,EAAfK,KAAMC,EAASN,EAATM,KAClCC,EAAI,IAAIC,KAAKH,GAEnB,OACE,kBAACnC,EAAD,CAAYuC,IAAKV,EAAGW,SAAS,KAC3B,kBAAC7C,EAAD,KACE,gCACE,kBAAC,OAAD,CAAM8C,GAAIP,GACR,kBAACjC,EAAD,KACE,kBAACC,EAAD,KACE,kBAAC,IAAD,QAGJ,kBAACE,EAAD,KAAiB4B,GACjB,kBAACxB,EAAD,KAAwByB,KAG5B,gCACE,kBAACvB,EAAD,QAAgB2B,EAAEK,sBAClB,kBAAC5B,EAAD,KACGsB,EAAKR,KAAI,SAACe,EAAKd,GAAN,OACR,wBAAIU,IAAKV,GACP,kBAAC,OAAD,CAAMY,GAAE,kBAAoBG,IAAUD,GAA9B,KAAR,IAAiDA,mBAuBxE,IAAME,EAAS","file":"component---src-pages-pensieve-index-js-6736eb9628b697f1457a.js","sourcesContent":["import React from 'react';\nimport { graphql, Link } from 'gatsby';\nimport { Helmet } from 'react-helmet';\nimport kebabCase from 'lodash/kebabCase';\nimport PropTypes from 'prop-types';\nimport { Layout } from '@components';\nimport { IconZap } from '@components/icons';\nimport styled from 'styled-components';\nimport { theme, mixins, media, Main } from '@styles';\nconst { colors, fontSizes, fonts } = theme;\n\nconst StyledMainContainer = styled(Main)`\n  & > header {\n    text-align: center;\n    margin-bottom: 100px;\n\n    a {\n      &:hover,\n      &:focus {\n        cursor: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>⚡</text></svg>\")\n            20 0,\n          auto;\n      }\n    }\n  }\n\n  footer {\n    ${mixins.flexBetween};\n    margin-top: 20px;\n    width: 100%;\n  }\n`;\nconst StyledGrid = styled.div`\n  margin-top: 50px;\n\n  .posts {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n    grid-gap: 15px;\n    position: relative;\n    ${media.desktop`grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));`};\n  }\n`;\nconst StyledPostInner = styled.div`\n  ${mixins.boxShadow};\n  ${mixins.flexBetween};\n  flex-direction: column;\n  align-items: flex-start;\n  position: relative;\n  padding: 2rem 1.75rem;\n  height: 100%;\n  border-radius: ${theme.borderRadius};\n  transition: ${theme.transition};\n  background-color: ${colors.lightNavy};\n  header,\n  a {\n    width: 100%;\n  }\n`;\nconst StyledPost = styled.div`\n  transition: ${theme.transition};\n  cursor: default;\n  &:hover,\n  &:focus {\n    outline: 0;\n    ${StyledPostInner} {\n      transform: translateY(-5px);\n    }\n  }\n`;\nconst StyledPostHeader = styled.div`\n  ${mixins.flexBetween};\n  margin-bottom: 30px;\n`;\nconst StyledFolder = styled.div`\n  color: ${colors.green};\n  svg {\n    width: 40px;\n    height: 40px;\n  }\n`;\nconst StyledPostName = styled.h5`\n  margin: 0 0 10px;\n  font-size: ${fontSizes.xxl};\n  color: ${colors.lightestSlate};\n`;\nconst StyledPostDescription = styled.div`\n  font-size: 17px;\n  color: ${colors.lightSlate};\n`;\nconst StyledDate = styled.span`\n  text-transform: uppercase;\n  font-family: ${fonts.SFMono};\n  font-size: ${fontSizes.xs};\n  color: ${colors.lightSlate};\n`;\nconst StyledTags = styled.ul`\n  display: flex;\n  align-items: flex-end;\n  flex-wrap: wrap;\n  padding: 0;\n  margin: 0;\n  list-style: none;\n\n  li {\n    font-family: ${fonts.SFMono};\n    font-size: ${fontSizes.xs};\n    color: ${colors.green};\n    line-height: 1.75;\n    margin-right: 15px;\n    &:last-of-type {\n      margin-right: 0;\n    }\n    a {\n      ${mixins.inlineLink};\n    }\n  }\n`;\n\nconst PensievePage = ({ location, data }) => {\n  const posts = data.allMarkdownRemark.edges;\n\n  return (\n    <Layout location={location}>\n      <Helmet>\n        <title>Pensieve | Akash Suresh</title>\n        <link rel=\"canonical\" href=\"https://akash-suresh.github.io/pensieve\" />\n      </Helmet>\n\n      <StyledMainContainer>\n        <header>\n          <h1 className=\"big-title\">Pensieve</h1>\n          <p className=\"subtitle\">\n            <a\n              href=\"https://www.wizardingworld.com/writing-by-jk-rowling/pensieve\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\">\n              a collection of memories\n            </a>\n          </p>\n        </header>\n\n        <StyledGrid>\n          <div className=\"posts\">\n            {posts.length > 0 &&\n              posts.map(({ node }, i) => {\n                const { frontmatter } = node;\n                const { title, description, slug, date, tags } = frontmatter;\n                const d = new Date(date);\n\n                return (\n                  <StyledPost key={i} tabIndex=\"0\">\n                    <StyledPostInner>\n                      <header>\n                        <Link to={slug}>\n                          <StyledPostHeader>\n                            <StyledFolder>\n                              <IconZap />\n                            </StyledFolder>\n                          </StyledPostHeader>\n                          <StyledPostName>{title}</StyledPostName>\n                          <StyledPostDescription>{description}</StyledPostDescription>\n                        </Link>\n                      </header>\n                      <footer>\n                        <StyledDate>{`${d.toLocaleDateString()}`}</StyledDate>\n                        <StyledTags>\n                          {tags.map((tag, i) => (\n                            <li key={i}>\n                              <Link to={`/pensieve/tags/${kebabCase(tag)}/`}>#{tag}</Link>\n                            </li>\n                          ))}\n                        </StyledTags>\n                      </footer>\n                    </StyledPostInner>\n                  </StyledPost>\n                );\n              })}\n          </div>\n        </StyledGrid>\n      </StyledMainContainer>\n    </Layout>\n  );\n};\n\nPensievePage.propTypes = {\n  location: PropTypes.object.isRequired,\n  data: PropTypes.object.isRequired,\n};\n\nexport default PensievePage;\n\nexport const pageQuery = graphql`\n  {\n    allMarkdownRemark(\n      filter: { fileAbsolutePath: { regex: \"/posts/\" }, frontmatter: { draft: { ne: true } } }\n      sort: { fields: [frontmatter___date], order: DESC }\n    ) {\n      edges {\n        node {\n          frontmatter {\n            title\n            description\n            slug\n            date\n            tags\n            draft\n          }\n          html\n        }\n      }\n    }\n  }\n`;\n"],"sourceRoot":""}