component---src-pages-archive-js-891feef0553024c56198.js.map

{"version":3,"sources":["webpack:///./src/pages/archive.js"],"names":["colors","theme","fonts","fontSizes","StyledMainContainer","styled","Main","StyledTableContainer","div","media","tablet","StyledTable","table","transition","lightNavy","sm","lightestSlate","xl","lg","xs","SFMono","mixins","flexBetween","ArchivePage","location","projects","data","allMarkdownRemark","edges","revealTitle","useRef","revealTable","revealProjects","useEffect","sr","reveal","current","srConfig","forEach","ref","i","rel","href","className","length","map","node","frontmatter","date","github","external","title","tech","company","key","el","Date","getFullYear","item","target","aria-label","pageQuery"],"mappings":"mpBAUQA,EAA6BC,IAA7BD,OAAQE,EAAqBD,IAArBC,MAAOC,EAAcF,IAAdE,UAEjBC,EAAsBC,YAAOC,KAAV,kFAAGD,CAAH,MACnBE,EAAuBF,IAAOG,IAAV,mFAAGH,CAAH,4BAEtBI,IAAMC,OAFgB,MAMpBC,EAAcN,IAAOO,MAAV,0EAAGP,CAAH,0cAKXI,IAAMC,OALK,KAWCT,IAAMY,WAIEb,EAAOc,UAQ3BL,IAAMC,OAvBK,KAiCTD,IAAMC,OAjCG,IAkCIP,EAAUY,IAKhBf,EAAOgB,cACHb,EAAUc,GAMVd,EAAUe,GAGVf,EAAUgB,GACRjB,EAAMkB,OAIjBC,IAAOC,aA+HFC,UAlHK,SAAC,GAAwB,IAAtBC,EAAqB,EAArBA,SACfC,EADoC,EAAXC,KACTC,kBAAkBC,MAElCC,EAAcC,iBAAO,MACrBC,EAAcD,iBAAO,MACrBE,EAAiBF,iBAAO,IAO9B,OANAG,qBAAU,WACRC,IAAGC,OAAON,EAAYO,QAASC,sBAC/BH,IAAGC,OAAOJ,EAAYK,QAASC,sBAC/BL,EAAeI,QAAQE,SAAQ,SAACC,EAAKC,GAAN,OAAYN,IAAGC,OAAOI,EAAKF,mBAAa,GAAJG,SAClE,IAGD,kBAAC,IAAD,CAAQhB,SAAUA,GAChB,kBAAC,SAAD,KACE,oEACA,0BAAMiB,IAAI,YAAYC,KAAK,0CAG7B,kBAACtC,EAAD,KACE,4BAAQmC,IAAKV,GACX,wBAAIc,UAAU,aAAd,WACA,uBAAGA,UAAU,YAAb,wCAGF,kBAACpC,EAAD,CAAsBgC,IAAKR,GACzB,kBAACpB,EAAD,KACE,+BACE,4BACE,oCACA,qCACA,wBAAIgC,UAAU,kBAAd,YACA,wBAAIA,UAAU,kBAAd,cACA,sCAGJ,+BACGlB,EAASmB,OAAS,GACjBnB,EAASoB,KAAI,WAAWL,GAAO,IAAD,IAAdM,KAQLC,YANPC,EAF0B,EAE1BA,KACAC,EAH0B,EAG1BA,OACAC,EAJ0B,EAI1BA,SACAC,EAL0B,EAK1BA,MACAC,EAN0B,EAM1BA,KACAC,EAP0B,EAO1BA,QAEF,OACE,wBAAIC,IAAKd,EAAGD,IAAK,SAAAgB,GAAE,OAAKvB,EAAeI,QAAQI,GAAKe,IAClD,wBAAIZ,UAAU,iBAAd,GAAkC,IAAIa,KACpCR,GACAS,eAEF,wBAAId,UAAU,SAASQ,GAEvB,wBAAIR,UAAU,0BACXU,EAAU,8BAAOA,GAAkB,oCAGtC,wBAAIV,UAAU,uBACXS,EAAKR,OAAS,GACbQ,EAAKP,KAAI,SAACa,EAAMlB,GAAP,OACP,0BAAMc,IAAKd,GACT,0BAAMc,IAAKd,GAAIkB,GACdlB,IAAMY,EAAKR,OAAS,GACnB,0CAMV,wBAAID,UAAU,SACZ,8BACGM,EACC,uBACEP,KAAMO,EACNU,OAAO,SACPlB,IAAI,+BACJmB,aAAW,eAEX,kBAAC,IAAD,OAGF,0BAAMA,aAAW,SAAjB,KAEDV,EACC,uBACER,KAAMQ,EACNS,OAAO,SACPlB,IAAI,+BACJmB,aAAW,iBAEX,kBAAC,IAAD,OAGF,0BAAMA,aAAW,SAAjB,iBAqBrB,IAAMC,EAAS","file":"component---src-pages-archive-js-891feef0553024c56198.js","sourcesContent":["import React, { useRef, useEffect } from \"react\"\nimport { graphql } from \"gatsby\"\nimport { Helmet } from \"react-helmet\"\nimport PropTypes from \"prop-types\"\nimport sr from \"@utils/sr\"\nimport { srConfig } from \"@config\"\nimport { Layout } from \"@components\"\nimport { IconGitHub, IconExternal } from \"@components/icons\"\nimport styled from \"styled-components\"\nimport { theme, mixins, media, Main } from \"@styles\"\nconst { colors, fonts, fontSizes } = theme\n\nconst StyledMainContainer = styled(Main)``\nconst StyledTableContainer = styled.div`\n  margin: 100px -20px;\n  ${media.tablet`\n    margin: 100px -10px;\n  `};\n`\nconst StyledTable = styled.table`\n  width: 100%;\n  border-collapse: collapse;\n\n  .hide-on-mobile {\n    ${media.tablet`\n      display: none;\n    `};\n  }\n\n  tbody tr {\n    transition: ${theme.transition};\n\n    &:hover,\n    &:focus {\n      background-color: ${colors.lightNavy};\n    }\n  }\n  th,\n  td {\n    cursor: default;\n    line-height: 1.5;\n    padding: 10px 20px;\n    ${media.tablet`\n      padding: 10px;\n    `};\n  }\n  th {\n    text-align: left;\n  }\n  td {\n    &.year {\n      width: 10%;\n      ${media.tablet`\n        font-size: ${fontSizes.sm};\n      `};\n    }\n    &.title {\n      padding-top: 15px;\n      color: ${colors.lightestSlate};\n      font-size: ${fontSizes.xl};\n      font-weight: 700;\n    }\n    &.company {\n      width: 15%;\n      padding-top: 15px;\n      font-size: ${fontSizes.lg};\n    }\n    &.tech {\n      font-size: ${fontSizes.xs};\n      font-family: ${fonts.SFMono};\n    }\n    &.links {\n      span {\n        ${mixins.flexBetween};\n        a + a {\n          margin-left: 10px;\n        }\n        svg {\n          width: 20px;\n          height: 20px;\n        }\n      }\n    }\n  }\n`\n\nconst ArchivePage = ({ location, data }) => {\n  const projects = data.allMarkdownRemark.edges\n\n  const revealTitle = useRef(null)\n  const revealTable = useRef(null)\n  const revealProjects = useRef([])\n  useEffect(() => {\n    sr.reveal(revealTitle.current, srConfig())\n    sr.reveal(revealTable.current, srConfig())\n    revealProjects.current.forEach((ref, i) => sr.reveal(ref, srConfig(i * 10)))\n  }, [])\n\n  return (\n    <Layout location={location}>\n      <Helmet>\n        <title>Archive | Rahmad Al Habib Khasary</title>\n        <link rel=\"canonical\" href=\"https://abewartech.github.io/archive\" />\n      </Helmet>\n\n      <StyledMainContainer>\n        <header ref={revealTitle}>\n          <h1 className=\"big-title\">Archive</h1>\n          <p className=\"subtitle\">A big list of things I’ve worked on</p>\n        </header>\n\n        <StyledTableContainer ref={revealTable}>\n          <StyledTable>\n            <thead>\n              <tr>\n                <th>Year</th>\n                <th>Title</th>\n                <th className=\"hide-on-mobile\">Made for</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                    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(\n                        date\n                      ).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                              <span key={i}>{item}</span>\n                              {i !== tech.length - 1 && (\n                                <span>&nbsp;&middot;&nbsp;</span>\n                              )}\n                            </span>\n                          ))}\n                      </td>\n\n                      <td className=\"links\">\n                        <span>\n                          {github ? (\n                            <a\n                              href={github}\n                              target=\"_blank\"\n                              rel=\"nofollow noopener noreferrer\"\n                              aria-label=\"GitHub Link\"\n                            >\n                              <IconGitHub />\n                            </a>\n                          ) : (\n                            <span aria-label=\"Empty\">—</span>\n                          )}\n                          {external ? (\n                            <a\n                              href={external}\n                              target=\"_blank\"\n                              rel=\"nofollow noopener noreferrer\"\n                              aria-label=\"External Link\"\n                            >\n                              <IconExternal />\n                            </a>\n                          ) : (\n                            <span aria-label=\"Empty\">—</span>\n                          )}\n                        </span>\n                      </td>\n                    </tr>\n                  )\n                })}\n            </tbody>\n          </StyledTable>\n        </StyledTableContainer>\n      </StyledMainContainer>\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: {\n        fileAbsolutePath: { regex: \"/projects/\" }\n        frontmatter: { showInProjects: { ne: false } }\n      }\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":""}