-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcomponent---src-pages-archive-js-48a4037b1ab1f46fbe43.js.map
1 lines (1 loc) · 8.31 KB
/
component---src-pages-archive-js-48a4037b1ab1f46fbe43.js.map
1
{"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","tech","slug","company","key","el","Date","getFullYear","to","item","href","aria-label","name"],"mappings":"2FAAA,oHAUMA,EAAuBC,IAAOC,IAAV,mFAAGD,CAAH,grCA2GZ,qBAAGE,MAAkBC,OAAOC,cA2G3BC,UA9FK,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,KACsDC,YAA5DC,EAAR,EAAQA,KAAMC,EAAd,EAAcA,OAAQC,EAAtB,EAAsBA,SAAUR,EAAhC,EAAgCA,MAAOS,EAAvC,EAAuCA,KAAMC,EAA7C,EAA6CA,KAAMC,EAAnD,EAAmDA,QACnD,OACE,wBAAIC,IAAKb,EAAGD,IAAK,SAAAe,GAAE,OAAKtB,EAAeI,QAAQI,GAAKc,IAClD,wBAAIZ,UAAU,iBAAd,GAAkC,IAAIa,KAAKR,GAAMS,eAEjD,kBAAC,OAAD,CAAMC,GAAE,YAAcN,GACpB,wBAAIT,UAAU,SAASD,IAGzB,wBAAIC,UAAU,0BACXU,EAAU,8BAAOA,GAAkB,oCAGtC,wBAAIV,UAAU,uBACXQ,EAAKP,OAAS,GACbO,EAAKN,KAAI,SAACc,EAAMlB,GAAP,OACP,0BAAMa,IAAKb,GACRkB,EACA,GACAlB,IAAMU,EAAKP,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,qBAWjC,gCACE,kBAAC,OAAD,CAAMJ,GAAG,YACP,wBAAIf,UAAU,YAAd","file":"component---src-pages-archive-js-48a4037b1ab1f46fbe43.js","sourcesContent":["import React, { useRef, useEffect } from 'react';\nimport { graphql, Link } 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 { date, github, external, title, tech, slug, company } = 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 <Link to={`/project/${slug}`}>\n <td className=\"title\">{title}</td>\n </Link>\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\">·</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 </div>\n </td>\n </tr>\n );\n })}\n </tbody>\n </table>\n </StyledTableContainer>\n <center>\n <Link to=\"/project\">\n <h1 className=\"subtitle\">All Projects</h1>\n </Link>\n </center>\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 slug\n }\n html\n }\n }\n }\n }\n`;\n"],"sourceRoot":""}