{"version":3,"sources":["webpack:///./src/pages/archive.js"],"names":["StyledTableContainer","styled","div","theme","mixins","flexCenter","ArchivePage","location","projects","data","allMarkdownRemark","edges","revealTitle","useRef","revealTable","revealProjects","useEffect","sr","reveal","current","srConfig","forEach","ref","i","title","className","length","map","node","frontmatter","date","github","external","ios","android","tech","company","key","el","Date","getFullYear","item","href","aria-label","name"],"mappings":"2FAAA,wGAUMA,EAAuBC,IAAOC,IAAV,mFAAGD,CAAH,grCA2GZ,qBAAGE,MAAkBC,OAAOC,cAuH3BC,UA1GK,SAAC,GAAwB,IAAtBC,EAAqB,EAArBA,SACfC,EADoC,EAAXC,KACTC,kBAAkBC,MAClCC,EAAcC,iBAAO,MACrBC,EAAcD,iBAAO,MACrBE,EAAiBF,iBAAO,IAQ9B,OANAG,qBAAU,WACRC,IAAGC,OAAON,EAAYO,QAASC,sBAC/BH,IAAGC,OAAOJ,EAAYK,QAASC,mBAAS,IAAK,IAC7CL,EAAeI,QAAQE,SAAQ,SAACC,EAAKC,GAAN,OAAYN,IAAGC,OAAOI,EAAKF,mBAAa,GAAJG,SAClE,IAGD,kBAAC,IAAD,CAAQhB,SAAUA,GAChB,kBAAC,IAAD,CAAQiB,MAAM,YAEd,8BACE,4BAAQF,IAAKV,GACX,wBAAIa,UAAU,eAAd,WACA,uBAAGA,UAAU,YAAb,wCAGF,kBAACzB,EAAD,CAAsBsB,IAAKR,GACzB,+BACE,+BACE,4BACE,oCACA,qCACA,wBAAIW,UAAU,kBAAd,WACA,wBAAIA,UAAU,kBAAd,cACA,sCAGJ,+BACGjB,EAASkB,OAAS,GACjBlB,EAASmB,KAAI,WAAWJ,GAAO,IAC7B,EAD4B,EAAdK,KAULC,YARPC,EADF,EACEA,KACAC,EAFF,EAEEA,OACAC,EAHF,EAGEA,SACAC,EAJF,EAIEA,IACAC,EALF,EAKEA,QACAV,EANF,EAMEA,MACAW,EAPF,EAOEA,KACAC,EARF,EAQEA,QAEF,OACE,wBAAIC,IAAKd,EAAGD,IAAK,SAAAgB,GAAE,OAAKvB,EAAeI,QAAQI,GAAKe,IAClD,wBAAIb,UAAU,iBAAd,GAAkC,IAAIc,KAAKT,GAAMU,eAEjD,wBAAIf,UAAU,SAASD,GAEvB,wBAAIC,UAAU,0BACXW,EAAU,8BAAOA,GAAkB,oCAGtC,wBAAIX,UAAU,uBACXU,EAAKT,OAAS,GACbS,EAAKR,KAAI,SAACc,EAAMlB,GAAP,OACP,0BAAMc,IAAKd,GACRkB,EACA,GACAlB,IAAMY,EAAKT,OAAS,GAAK,0BAAMD,UAAU,aAAhB,UAKlC,wBAAIA,UAAU,SACZ,6BACGO,GACC,uBAAGU,KAAMV,EAAUW,aAAW,iBAC5B,kBAAC,IAAD,CAAMC,KAAK,cAGdb,GACC,uBAAGW,KAAMX,EAAQY,aAAW,eAC1B,kBAAC,IAAD,CAAMC,KAAK,YAGdX,GACC,uBAAGS,KAAMT,EAAKU,aAAW,wBACvB,kBAAC,IAAD,CAAMC,KAAK,cAGdV,GACC,uBAAGQ,KAAMR,EAASS,aAAW,0BAC3B,kBAAC,IAAD,CAAMC,KAAK","file":"component---src-pages-archive-js-780e4638ee4a0b3aaa6c.js","sourcesContent":["import React, { useRef, useEffect } from 'react';\nimport { graphql } from 'gatsby';\nimport PropTypes from 'prop-types';\nimport { Helmet } from 'react-helmet';\nimport styled from 'styled-components';\nimport { srConfig } from '@config';\nimport sr from '@utils/sr';\nimport { Layout } from '@components';\nimport { Icon } from '@components/icons';\n\nconst StyledTableContainer = styled.div`\n  margin: 100px -20px;\n\n  @media (max-width: 768px) {\n    margin: 50px -10px;\n  }\n\n  table {\n    width: 100%;\n    border-collapse: collapse;\n\n    .hide-on-mobile {\n      @media (max-width: 768px) {\n        display: none;\n      }\n    }\n\n    tbody tr {\n      &:hover,\n      &:focus {\n        background-color: var(--light-navy);\n      }\n    }\n\n    th,\n    td {\n      padding: 10px;\n      text-align: left;\n\n      &:first-child {\n        padding-left: 20px;\n\n        @media (max-width: 768px) {\n          padding-left: 10px;\n        }\n      }\n      &:last-child {\n        padding-right: 20px;\n\n        @media (max-width: 768px) {\n          padding-right: 10px;\n        }\n      }\n\n      svg {\n        width: 20px;\n        height: 20px;\n      }\n    }\n\n    tr {\n      cursor: default;\n\n      td:first-child {\n        border-top-left-radius: var(--border-radius);\n        border-bottom-left-radius: var(--border-radius);\n      }\n      td:last-child {\n        border-top-right-radius: var(--border-radius);\n        border-bottom-right-radius: var(--border-radius);\n      }\n    }\n\n    td {\n      &.year {\n        padding-right: 20px;\n\n        @media (max-width: 768px) {\n          padding-right: 10px;\n          font-size: var(--fz-sm);\n        }\n      }\n\n      &.title {\n        padding-top: 15px;\n        padding-right: 20px;\n        color: var(--lightest-slate);\n        font-size: var(--fz-xl);\n        font-weight: 600;\n        line-height: 1.25;\n      }\n\n      &.company {\n        font-size: var(--fz-lg);\n        white-space: nowrap;\n      }\n\n      &.tech {\n        font-size: var(--fz-xxs);\n        font-family: var(--font-mono);\n        line-height: 1.5;\n        .separator {\n          margin: 0 5px;\n        }\n        span {\n          display: inline-block;\n        }\n      }\n\n      &.links {\n        min-width: 100px;\n\n        div {\n          display: flex;\n          align-items: center;\n\n          a {\n            ${({ theme }) => theme.mixins.flexCenter};\n            flex-shrink: 0;\n          }\n\n          a + a {\n            margin-left: 10px;\n          }\n        }\n      }\n    }\n  }\n`;\n\nconst ArchivePage = ({ location, data }) => {\n  const projects = data.allMarkdownRemark.edges;\n  const revealTitle = useRef(null);\n  const revealTable = useRef(null);\n  const revealProjects = useRef([]);\n\n  useEffect(() => {\n    sr.reveal(revealTitle.current, srConfig());\n    sr.reveal(revealTable.current, srConfig(200, 0));\n    revealProjects.current.forEach((ref, i) => sr.reveal(ref, srConfig(i * 10)));\n  }, []);\n\n  return (\n    <Layout location={location}>\n      <Helmet title=\"Archive\" />\n\n      <main>\n        <header ref={revealTitle}>\n          <h1 className=\"big-heading\">Archive</h1>\n          <p className=\"subtitle\">A big list of things I’ve worked on</p>\n        </header>\n\n        <StyledTableContainer ref={revealTable}>\n          <table>\n            <thead>\n              <tr>\n                <th>Year</th>\n                <th>Title</th>\n                <th className=\"hide-on-mobile\">Made at</th>\n                <th className=\"hide-on-mobile\">Built with</th>\n                <th>Link</th>\n              </tr>\n            </thead>\n            <tbody>\n              {projects.length > 0 &&\n                projects.map(({ node }, i) => {\n                  const {\n                    date,\n                    github,\n                    external,\n                    ios,\n                    android,\n                    title,\n                    tech,\n                    company,\n                  } = node.frontmatter;\n                  return (\n                    <tr key={i} ref={el => (revealProjects.current[i] = el)}>\n                      <td className=\"overline year\">{`${new Date(date).getFullYear()}`}</td>\n\n                      <td className=\"title\">{title}</td>\n\n                      <td className=\"company hide-on-mobile\">\n                        {company ? <span>{company}</span> : <span>—</span>}\n                      </td>\n\n                      <td className=\"tech hide-on-mobile\">\n                        {tech.length > 0 &&\n                          tech.map((item, i) => (\n                            <span key={i}>\n                              {item}\n                              {''}\n                              {i !== tech.length - 1 && <span className=\"separator\">&middot;</span>}\n                            </span>\n                          ))}\n                      </td>\n\n                      <td className=\"links\">\n                        <div>\n                          {external && (\n                            <a href={external} aria-label=\"External Link\">\n                              <Icon name=\"External\" />\n                            </a>\n                          )}\n                          {github && (\n                            <a href={github} aria-label=\"GitHub Link\">\n                              <Icon name=\"GitHub\" />\n                            </a>\n                          )}\n                          {ios && (\n                            <a href={ios} aria-label=\"Apple App Store Link\">\n                              <Icon name=\"AppStore\" />\n                            </a>\n                          )}\n                          {android && (\n                            <a href={android} aria-label=\"Google Play Store Link\">\n                              <Icon name=\"PlayStore\" />\n                            </a>\n                          )}\n                        </div>\n                      </td>\n                    </tr>\n                  );\n                })}\n            </tbody>\n          </table>\n        </StyledTableContainer>\n      </main>\n    </Layout>\n  );\n};\nArchivePage.propTypes = {\n  location: PropTypes.object.isRequired,\n  data: PropTypes.object.isRequired,\n};\n\nexport default ArchivePage;\n\nexport const pageQuery = graphql`\n  {\n    allMarkdownRemark(\n      filter: { fileAbsolutePath: { regex: \"/projects/\" } }\n      sort: { fields: [frontmatter___date], order: DESC }\n    ) {\n      edges {\n        node {\n          frontmatter {\n            date\n            title\n            tech\n            github\n            external\n            company\n          }\n          html\n        }\n      }\n    }\n  }\n`;\n"],"sourceRoot":""}