{"version":3,"file":"component---src-pages-journal-js-7c93f270e91b903e7a9b.js","mappings":"0PAUMA,GAAcC,EAAAA,EAAAA,SAAOC,EAAAA,MAAV,0EAAGD,CAAH,sEACNE,EAAAA,OAAAA,OAAAA,KAAAA,OAMI,SAASC,EAAT,GAA4B,IAATC,EAAQ,EAARA,KAChC,EAA4BC,EAAAA,SAAe,OAApCC,EAAP,KAAeC,EAAf,KAEIC,EAAWJ,EAAKK,OAAOC,MAE3B,OADAC,QAAQC,IAAIR,EAAKK,OAAOC,MAAM,GAAGG,MAE/B,gBAAC,IAAD,KACE,gBAAC,IAAD,CAAKC,MAAM,YACX,gBAAC,IAAD,CAAKC,MAAM,UACT,gBAAC,IAAD,CAAKC,IAAK,CAAEC,WAAY,UAAYC,OAAQ,CAAEC,OAAQ,WACpD,gBAAC,IAAD,CACED,OAAQ,CAAEE,SAAU,UACpBC,UAAU,MACVC,QAAQ,SACRC,IAAI,UAZK,CAAC,MAAO,UAAW,QAchBC,KAAI,SAACC,EAAUC,GAAX,OACd,gBAAC,IAAD,CACEC,QAAS,SAAAC,GAAC,OAAIrB,EAAUqB,EAAEC,OAAOC,QACjCC,MAAM,QACNC,MAAO1B,IAAWmB,EAAW,QAAU,UACvCQ,KAAK,SACLC,UAAS,aAAeT,EACxBU,MAAOV,EACPK,MAAOL,EACPW,IAAKV,QAIX,gBAAC,aAAD,MACG,SAAAO,GAAI,OACH,gBAAC,IAAD,CACEI,MAAM,SACNhB,UAAU,iBACVE,IAAI,QACJe,MAAI,IAES,QAAXhC,EACEE,EACAA,EAASF,QACP,SAAAiC,GAAO,OAAIA,EAAQC,YAAYC,OAASnC,MAE5CkB,KAAI,SAACe,EAASb,GACd,IAAIgB,EAAQH,EAAQC,YAAYE,OAC5BC,EAAAA,EAAAA,GACEJ,EAAQC,YAAYE,MAAME,gBACvBC,kBAELF,EAAAA,EAAAA,GACEvC,EAAK0C,QAAQC,MAAM,GAAGC,KAAKJ,gBACxBC,iBAET,OACE,gBAAC,IAAD,CAAKI,KAAK,OAAOC,MAAM,MAAMd,IAAKV,GAChC,gBAAC3B,EAAD,CAAaoD,GAAE,IAAMZ,EAAQ1B,KAAQuB,IAAKV,GACxC,gBAAC,IAAD,CAAKR,OAAQ,CAAEkC,IAAK,SAAUjC,OAAQ,WACpC,gBAAC,IAAD,CAAKkC,OAAO,SACV,gBAAC,EAAAC,EAAD,CACEC,IAAKhB,EAAQC,YAAY1B,MACzB4B,MAAOA,EACPc,UAAU,QACVC,MAAO,CAAEJ,OAAQ,YAGrB,gBAAC,IAAD,CACEK,MAAO,EACPzB,KAAK,SACLf,OAAQ,CAAEC,OAAQ,SAEjBoB,EAAQC,YAAY1B","sources":["webpack://po3/./src/pages/journal.js"],"sourcesContent":["import React from \"react\"\nimport { Link, graphql } from \"gatsby\"\nimport { GatsbyImage, getImage } from \"gatsby-plugin-image\"\nimport { Box, Button, Heading, ResponsiveContext } from \"grommet\"\nimport theme from \"../themes/po3Theme.json\"\n\nimport Seo from \"../components/seo\"\nimport styled from \"styled-components\"\nimport Layout from \"../components/layout\"\n\nconst JournalLink = styled(Link)`\n  color: ${theme.global.colors.text.light};\n  text-decoration: none;\n  :hover {\n    text-decoration: underline;\n  }\n`\nexport default function Journal({ data }) {\n  const [filter, setFilter] = React.useState(\"all\")\n  const categories = [\"all\", \"journal\", \"book\"]\n  let articles = data.allMdx.nodes\n  console.log(data.allMdx.nodes[0].slug)\n  return (\n    <Layout>\n      <Seo title=\"Journal\" />\n      <Box align=\"center\">\n        <Box pad={{ horizontal: \"medium\" }} margin={{ bottom: \"xlarge\" }}>\n          <Box\n            margin={{ vertical: \"medium\" }}\n            direction=\"row\"\n            justify=\"center\"\n            gap=\"medium\"\n          >\n            {categories.map((category, i) => (\n              <Button\n                onClick={e => setFilter(e.target.value)}\n                round=\"small\"\n                color={filter === category ? \"brand\" : \"light-3\"}\n                size=\"medium\"\n                a11yTitle={`Filter by ${category}`}\n                label={category}\n                value={category}\n                key={i}\n              />\n            ))}\n          </Box>\n          <ResponsiveContext.Consumer>\n            {size => (\n              <Box\n                width=\"xlarge\"\n                direction=\"row-responsive\"\n                gap=\"small\"\n                wrap\n              >\n                {(filter === \"all\"\n                  ? articles\n                  : articles.filter(\n                      article => article.frontmatter.type === filter\n                    )\n                ).map((article, i) => {\n                  let image = article.frontmatter.image\n                    ? getImage(\n                        article.frontmatter.image.childImageSharp\n                          .gatsbyImageData\n                      )\n                    : getImage(\n                        data.allFile.edges[0].node.childImageSharp\n                          .gatsbyImageData\n                      )\n                  return (\n                    <Box flex=\"grow\" basis=\"1/4\" key={i}>\n                      <JournalLink to={`/${article.slug}`} key={i}>\n                        <Box margin={{ top: \"medium\", bottom: \"medium\" }}>\n                          <Box height=\"small\">\n                            <GatsbyImage\n                              alt={article.frontmatter.title}\n                              image={image}\n                              objectFit=\"cover\"\n                              style={{ height: \"300px\" }}\n                            />\n                          </Box>\n                          <Heading\n                            level={3}\n                            size=\"xsmall\"\n                            margin={{ bottom: \"none\" }}\n                          >\n                            {article.frontmatter.title}\n                          </Heading>\n                        </Box>\n                      </JournalLink>\n                    </Box>\n                  )\n                })}\n              </Box>\n            )}\n          </ResponsiveContext.Consumer>\n        </Box>\n      </Box>\n    </Layout>\n  )\n}\nexport const query = graphql`\n  query MyQuery {\n    allMdx(\n      filter: { frontmatter: { type: { in: [\"book\", \"journal\"] } } }\n      sort: { fields: frontmatter___date, order: DESC }\n    ) {\n      nodes {\n        slug\n        frontmatter {\n          title\n          type\n          author\n          image {\n            childImageSharp {\n              gatsbyImageData(\n                layout: FULL_WIDTH\n                placeholder: BLURRED\n                formats: [AUTO, WEBP, AVIF]\n              )\n            }\n          }\n        }\n      }\n    }\n    allFile(\n      filter: { relativePath: { eq: \"static/images/northern-lights.jpg\" } }\n    ) {\n      edges {\n        node {\n          childImageSharp {\n            gatsbyImageData(\n              layout: FULL_WIDTH\n              placeholder: BLURRED\n              formats: [AUTO, WEBP, AVIF]\n            )\n          }\n        }\n      }\n    }\n  }\n`\n"],"names":["JournalLink","styled","Link","theme","Journal","data","React","filter","setFilter","articles","allMdx","nodes","console","log","slug","title","align","pad","horizontal","margin","bottom","vertical","direction","justify","gap","map","category","i","onClick","e","target","value","round","color","size","a11yTitle","label","key","width","wrap","article","frontmatter","type","image","getImage","childImageSharp","gatsbyImageData","allFile","edges","node","flex","basis","to","top","height","G","alt","objectFit","style","level"],"sourceRoot":""}