component---src-pages-archive-js-3fe5000195a2c18ae2ea.js.map

{"version":3,"file":"component---src-pages-archive-js-3fe5000195a2c18ae2ea.js","mappings":"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","sources":["webpack://v2/./src/pages/archive.js"],"sourcesContent":["import React, { useRef, useEffect } from 'react';\r\nimport { graphql } from 'gatsby';\r\nimport PropTypes from 'prop-types';\r\nimport { Helmet } from 'react-helmet';\r\nimport styled from 'styled-components';\r\nimport { srConfig } from '@config';\r\nimport sr from '@utils/sr';\r\nimport { Layout } from '@components';\r\nimport { Icon } from '@components/icons';\r\nimport { usePrefersReducedMotion } from '@hooks';\r\n\r\nconst StyledTableContainer = styled.div`\r\n  margin: 100px -20px;\r\n\r\n  @media (max-width: 768px) {\r\n    margin: 50px -10px;\r\n  }\r\n\r\n  table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n\r\n    .hide-on-mobile {\r\n      @media (max-width: 768px) {\r\n        display: none;\r\n      }\r\n    }\r\n\r\n    tbody tr {\r\n      &:hover,\r\n      &:focus {\r\n        background-color: var(--light-navy);\r\n      }\r\n    }\r\n\r\n    th,\r\n    td {\r\n      padding: 10px;\r\n      text-align: left;\r\n\r\n      &:first-child {\r\n        padding-left: 20px;\r\n\r\n        @media (max-width: 768px) {\r\n          padding-left: 10px;\r\n        }\r\n      }\r\n      &:last-child {\r\n        padding-right: 20px;\r\n\r\n        @media (max-width: 768px) {\r\n          padding-right: 10px;\r\n        }\r\n      }\r\n\r\n      svg {\r\n        width: 20px;\r\n        height: 20px;\r\n      }\r\n    }\r\n\r\n    tr {\r\n      cursor: default;\r\n\r\n      td:first-child {\r\n        border-top-left-radius: var(--border-radius);\r\n        border-bottom-left-radius: var(--border-radius);\r\n      }\r\n      td:last-child {\r\n        border-top-right-radius: var(--border-radius);\r\n        border-bottom-right-radius: var(--border-radius);\r\n      }\r\n    }\r\n\r\n    td {\r\n      &.year {\r\n        padding-right: 20px;\r\n\r\n        @media (max-width: 768px) {\r\n          padding-right: 10px;\r\n          font-size: var(--fz-sm);\r\n        }\r\n      }\r\n\r\n      &.title {\r\n        padding-top: 15px;\r\n        padding-right: 20px;\r\n        color: var(--lightest-slate);\r\n        font-size: var(--fz-xl);\r\n        font-weight: 600;\r\n        line-height: 1.25;\r\n      }\r\n\r\n      &.company {\r\n        font-size: var(--fz-lg);\r\n        white-space: nowrap;\r\n      }\r\n\r\n      &.tech {\r\n        font-size: var(--fz-xxs);\r\n        font-family: var(--font-mono);\r\n        line-height: 1.5;\r\n        .separator {\r\n          margin: 0 5px;\r\n        }\r\n        span {\r\n          display: inline-block;\r\n        }\r\n      }\r\n\r\n      &.links {\r\n        min-width: 100px;\r\n\r\n        div {\r\n          display: flex;\r\n          align-items: center;\r\n\r\n          a {\r\n            ${({ theme }) => theme.mixins.flexCenter};\r\n            flex-shrink: 0;\r\n          }\r\n\r\n          a + a {\r\n            margin-left: 10px;\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst ArchivePage = ({ location, data }) => {\r\n  const projects = data.allMarkdownRemark.edges;\r\n  const revealTitle = useRef(null);\r\n  const revealTable = useRef(null);\r\n  const revealProjects = useRef([]);\r\n  const prefersReducedMotion = usePrefersReducedMotion();\r\n\r\n  useEffect(() => {\r\n    if (prefersReducedMotion) {\r\n      return;\r\n    }\r\n\r\n    sr.reveal(revealTitle.current, srConfig());\r\n    sr.reveal(revealTable.current, srConfig(200, 0));\r\n    revealProjects.current.forEach((ref, i) => sr.reveal(ref, srConfig(i * 10)));\r\n  }, []);\r\n\r\n  return (\r\n    <Layout location={location}>\r\n      <Helmet title=\"Archive\" />\r\n\r\n      <main>\r\n        <header ref={revealTitle}>\r\n          <h1 className=\"big-heading\">Archive</h1>\r\n          <p className=\"subtitle\">A big list of things I’ve worked on</p>\r\n        </header>\r\n\r\n        <StyledTableContainer ref={revealTable}>\r\n          <table>\r\n            <thead>\r\n              <tr>\r\n                <th>Year</th>\r\n                <th>Title</th>\r\n                <th className=\"hide-on-mobile\">Made at</th>\r\n                <th className=\"hide-on-mobile\">Built with</th>\r\n                <th>Link</th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              {projects.length > 0 &&\r\n                projects.map(({ node }, i) => {\r\n                  const {\r\n                    date,\r\n                    github,\r\n                    external,\r\n                    ios,\r\n                    android,\r\n                    title,\r\n                    tech,\r\n                    company,\r\n                  } = node.frontmatter;\r\n                  return (\r\n                    <tr key={i} ref={el => (revealProjects.current[i] = el)}>\r\n                      <td className=\"overline year\">{`${new Date(date).getFullYear()}`}</td>\r\n\r\n                      <td className=\"title\">{title}</td>\r\n\r\n                      <td className=\"company hide-on-mobile\">\r\n                        {company ? <span>{company}</span> : <span>—</span>}\r\n                      </td>\r\n\r\n                      <td className=\"tech hide-on-mobile\">\r\n                        {tech?.length > 0 &&\r\n                          tech.map((item, i) => (\r\n                            <span key={i}>\r\n                              {item}\r\n                              {''}\r\n                              {i !== tech.length - 1 && <span className=\"separator\">&middot;</span>}\r\n                            </span>\r\n                          ))}\r\n                      </td>\r\n\r\n                      <td className=\"links\">\r\n                        <div>\r\n                          {external && (\r\n                            <a href={external} aria-label=\"External Link\">\r\n                              <Icon name=\"External\" />\r\n                            </a>\r\n                          )}\r\n                          {github && (\r\n                            <a href={github} aria-label=\"GitHub Link\">\r\n                              <Icon name=\"GitHub\" />\r\n                            </a>\r\n                          )}\r\n                          {ios && (\r\n                            <a href={ios} aria-label=\"Apple App Store Link\">\r\n                              <Icon name=\"AppStore\" />\r\n                            </a>\r\n                          )}\r\n                          {android && (\r\n                            <a href={android} aria-label=\"Google Play Store Link\">\r\n                              <Icon name=\"PlayStore\" />\r\n                            </a>\r\n                          )}\r\n                        </div>\r\n                      </td>\r\n                    </tr>\r\n                  );\r\n                })}\r\n            </tbody>\r\n          </table>\r\n        </StyledTableContainer>\r\n      </main>\r\n    </Layout>\r\n  );\r\n};\r\nArchivePage.propTypes = {\r\n  location: PropTypes.object.isRequired,\r\n  data: PropTypes.object.isRequired,\r\n};\r\n\r\nexport default ArchivePage;\r\n\r\nexport const pageQuery = graphql`\r\n  {\r\n    allMarkdownRemark(\r\n      filter: { fileAbsolutePath: { regex: \"/content/projects/\" } }\r\n      sort: { fields: [frontmatter___date], order: DESC }\r\n    ) {\r\n      edges {\r\n        node {\r\n          frontmatter {\r\n            date\r\n            title\r\n            tech\r\n            github\r\n            external\r\n            ios\r\n            android\r\n            company\r\n          }\r\n          html\r\n        }\r\n      }\r\n    }\r\n  }\r\n`;\r\n"],"names":["StyledTableContainer","styled","div","withConfig","displayName","componentId","_ref","theme","mixins","flexCenter","_ref2","location","data","projects","allMarkdownRemark","edges","revealTitle","useRef","revealTable","revealProjects","prefersReducedMotion","usePrefersReducedMotion","useEffect","sr","reveal","current","srConfig","forEach","ref","i","React","Layout","Helmet","title","className","length","map","_ref3","node","date","github","external","ios","android","tech","company","frontmatter","key","el","Date","getFullYear","item","href","Icon","name"],"sourceRoot":""}