component---src-pages-blog-jsx-c77addc194d8c5cbadcc.js.map

{"version":3,"sources":["webpack://ocf-website/./src/components/Layout.jsx","webpack://ocf-website/./src/components/PostLink.jsx","webpack://ocf-website/./src/components/PostFilters.jsx","webpack://ocf-website/./src/components/PostList.jsx","webpack://ocf-website/./src/pages/blog.jsx"],"names":["children","siteTitle","useStaticQuery","site","siteMetadata","title","post","frontmatter","date","path","authorName","authorImage","coverImageUnsplashId","excerpt","readingTime","fields","className","Link","to","src","alt","text","options","selected","setSelected","undefined","map","option","onClick","posts","useState","projectFilter","setProjectFilter","projects","useMemo","reduce","acc","project","node","includes","filter","key","id","edges","data","allMarkdownRemark"],"mappings":"oKA6CA,IA5Be,SAAC,GAAkB,IAAhBA,EAAe,EAAfA,SAWVC,GAVOC,oBAAe,cAULC,KAAKC,aAAaC,MAEzC,OACE,gCACE,gBAAC,IAAD,CAAKA,MAAOJ,IAEZ,gBAAC,IAAD,MACA,4BAAOD,GACP,gBAAC,IAAD,S,kGC0BN,EA1DiB,SAAC,GAAD,QACfM,KADe,IAEbC,YACEC,EAHW,EAGXA,KACAC,EAJW,EAIXA,KACAJ,EALW,EAKXA,MACAK,EANW,EAMXA,WACAC,EAPW,EAOXA,YACAC,EARW,EAQXA,qBAEFC,EAVa,EAUbA,QACUC,EAXG,EAWbC,OAAUD,YAXG,OAcf,sBAAIE,UAAU,kBACZ,gBAAC,EAAAC,KAAD,CAAMC,GAAIT,GACR,uBAAKO,UAAU,yCACb,uBACEA,UAAU,yGACVG,IAAG,+BAAiCP,EAAjC,aAEL,uBAAKI,UAAU,8LACb,uBAAKA,UAAU,QACb,uBAAKA,UAAU,wCAAwCX,GACvD,qBAAGW,UAAU,2BAA2BH,IAE1C,uBAAKG,UAAU,qBACb,uBACEA,UAAU,8BACVG,IAAKR,EACLS,IAAG,oBAAsBV,IAE3B,uBAAKM,UAAU,WACb,qBAAGA,UAAU,8BAA8BN,GAC3C,qBAAGM,UAAU,iBACVR,EADH,MACYM,EAAYO,aCZtC,EAxBoB,SAAC,GAAD,IAAGC,EAAH,EAAGA,QAASC,EAAZ,EAAYA,SAAUC,EAAtB,EAAsBA,YAAtB,OAClB,uBAAKR,UAAU,QACZ,MAACS,GAAD,eAAeH,IAASI,KAAI,SAACC,GAAD,OAC3B,0BACEX,UAAS,4EAELO,IAAaI,EACT,+DACA,gEAERC,QAAS,kBAAMJ,EAAYG,KAEzBA,GAAS,kBCqCnB,EA9CiB,SAAC,GAAe,IAAbE,EAAY,EAAZA,MAAY,GACYC,gBAAnCC,EADuB,KACRC,EADQ,KAGxBC,GAAWC,cACf,kBACEL,EAAMM,QAAO,SAACC,EAAD,GAA0B,IAC7BC,EAD4B,EAAjBC,KACM/B,YAAjB8B,QACR,OAASA,IAAYD,EAAIG,SAASF,GAA3B,kBAA0CD,GAA1C,CAA+CC,IAAWD,IAChE,MACL,CAACP,IAGH,OACE,uBAAKb,UAAU,QACb,gBAAC,EAAD,CACEM,QAASW,EACTV,SAAUQ,EACVP,YAAaQ,IAEf,0BACGH,EACEW,QACC,gBAASlC,EAAT,EAAGgC,KAAH,OACGP,GAAiBA,IAAkBzB,EAAKC,YAAY8B,WAExDX,KAAI,gBAASpB,EAAT,EAAGgC,KAAH,OACH,gBAAC,EAAD,CAAUG,IAAKnC,EAAKoC,GAAIpC,KAAMA,W,qFCY1C,UApCiB,SAAC,GAAD,IAEQqC,EAFR,EACfC,KACEC,kBAAqBF,MAFR,OAKf,gBAAC,IAAD,KACE,gBAAC,IAAD,CAAKtC,MAAM,SACX,uBAAKW,UAAU,uEACb,kCACA,uQAMA,gBAAC,IAAD,CAAUa,MAAOc","file":"component---src-pages-blog-jsx-c77addc194d8c5cbadcc.js","sourcesContent":["/**\n * Layout component that queries for data\n * with Gatsby's useStaticQuery component\n *\n * See: https://www.gatsbyjs.org/docs/use-static-query/\n */\n\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { useStaticQuery, graphql } from 'gatsby';\nimport SEO from './seo';\n\nimport Header from './Header';\nimport Footer from './Footer';\nimport './layout.css';\n// import SpecialAnnouncement from './SpecialAnnouncement';\n\nconst Layout = ({ children }) => {\n  const data = useStaticQuery(graphql`\n    query SiteTitleQuery {\n      site {\n        siteMetadata {\n          title\n        }\n      }\n    }\n  `);\n\n  const siteTitle = data.site.siteMetadata.title;\n\n  return (\n    <>\n      <SEO title={siteTitle} />\n      {/* <SpecialAnnouncement /> */}\n      <Header />\n      <main>{children}</main>\n      <Footer />\n    </>\n  );\n};\n\nLayout.propTypes = {\n  children: PropTypes.node.isRequired,\n};\n\nexport default Layout;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Link } from 'gatsby';\n\nconst PostLink = ({\n  post: {\n    frontmatter: {\n      date,\n      path,\n      title,\n      authorName,\n      authorImage,\n      coverImageUnsplashId,\n    },\n    excerpt,\n    fields: { readingTime },\n  },\n}) => (\n  <li className=\"list-none mb-4\">\n    <Link to={path}>\n      <div className=\"max-w-md w-full sm:max-w-full sm:flex\">\n        <img\n          className=\"h-48 w-full sm:h-auto sm:w-48 flex-none bg-cover rounded-t sm:rounded-t-none sm:rounded-l object-cover\"\n          src={`https://source.unsplash.com/${coverImageUnsplashId}/400x250`}\n        />\n        <div className=\"border-r border-b border-l border-gray-400 sm:border-l-0 sm:border-t sm:border-gray-400 bg-white rounded-b sm:rounded-b-none sm:rounded-r p-4 flex flex-col justify-between leading-normal\">\n          <div className=\"mb-8\">\n            <div className=\"text-gray-900 font-bold text-xl mb-2\">{title}</div>\n            <p className=\"text-gray-700 text-base\">{excerpt}</p>\n          </div>\n          <div className=\"flex items-center\">\n            <img\n              className=\"w-10 h-10 rounded-full mr-4\"\n              src={authorImage}\n              alt={`Avatar of author ${authorName}`}\n            />\n            <div className=\"text-sm\">\n              <p className=\"text-gray-900 leading-none\">{authorName}</p>\n              <p className=\"text-gray-600\">\n                {date} · {readingTime.text}\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Link>\n  </li>\n);\n\nPostLink.propTypes = {\n  post: PropTypes.shape({\n    frontmatter: PropTypes.shape({\n      date: PropTypes.string.isRequired,\n      path: PropTypes.string.isRequired,\n      title: PropTypes.string.isRequired,\n      authorName: PropTypes.string.isRequired,\n      authorImage: PropTypes.string.isRequired,\n      coverImageUnsplashId: PropTypes.string.isRequired,\n    }).isRequired,\n  }).isRequired,\n};\n\nexport default PostLink;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst PostFilters = ({ options, selected, setSelected }) => (\n  <div className=\"mb-4\">\n    {[undefined, ...options].map((option) => (\n      <button\n        className={`mr-2 my-1 text-sm py-0 px-2 border border-black-500 rounded \n          ${\n            selected === option\n              ? 'bg-gray-500 text-white hover:text-black hover:bg-transparent'\n              : 'bg-transparent text-black hover:text-white hover:bg-gray-500'\n          }`}\n        onClick={() => setSelected(option)}\n      >\n        {!option ? 'all posts' : option}\n      </button>\n    ))}\n  </div>\n);\n\nPostFilters.propTypes = {\n  options: PropTypes.arrayOf(PropTypes.string).isRequired,\n  selected: PropTypes.string,\n  setSelected: PropTypes.func.isRequired,\n};\n\nexport default PostFilters;\n","import React, { useMemo, useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport PostLink from './PostLink';\nimport PostFilters from './PostFilters';\n\nconst PostList = ({ posts }) => {\n  const [projectFilter, setProjectFilter] = useState();\n\n  const projects = useMemo(\n    () =>\n      posts.reduce((acc, { node: post }) => {\n        const { project } = post.frontmatter;\n        return !!project && !acc.includes(project) ? [...acc, project] : acc;\n      }, []),\n    [posts]\n  );\n\n  return (\n    <div className=\"mt-6\">\n      <PostFilters\n        options={projects}\n        selected={projectFilter}\n        setSelected={setProjectFilter}\n      />\n      <ul>\n        {posts\n          .filter(\n            ({ node: post }) =>\n              !projectFilter || projectFilter === post.frontmatter.project\n          )\n          .map(({ node: post }) => (\n            <PostLink key={post.id} post={post} />\n          ))}\n      </ul>\n    </div>\n  );\n};\n\nPostList.propTypes = {\n  posts: PropTypes.arrayOf(\n    PropTypes.shape({\n      node: PropTypes.shape({\n        id: PropTypes.string.isRequired,\n        frontmatter: {\n          project: PropTypes.string,\n        },\n      }).isRequired,\n    }).isRequired\n  ).isRequired,\n};\n\nexport default PostList;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { graphql } from 'gatsby';\n\nimport SEO from '../components/seo';\nimport Layout from '../components/Layout';\nimport PostList from '../components/PostList';\n\nconst BlogPage = ({\n  data: {\n    allMarkdownRemark: { edges },\n  },\n}) => (\n  <Layout>\n    <SEO title=\"Blog\" />\n    <div className=\"px-6 container mx-auto md:max-w-2xl lg:max-w-2xl xl:max-w-2xl mb-16\">\n      <h1>Blog</h1>\n      <p>\n        One of our biggest goals at Open Climate Fix is transparency. We want to\n        let people take part in the work we do and we think that is only\n        possible by openly communicating about it. This blog is one part of how\n        we want to achieve that.\n      </p>\n      <PostList posts={edges} />\n    </div>\n  </Layout>\n);\n\nBlogPage.propTypes = {\n  data: PropTypes.shape({\n    allMarkdownRemark: PropTypes.shape({\n      edges: PropTypes.arrayOf(\n        PropTypes.shape({\n          node: PropTypes.shape({\n            frontmatter: PropTypes.shape({\n              date: PropTypes.string.isRequired,\n            }).isRequired,\n          }),\n        }).isRequired\n      ),\n    }),\n  }).isRequired,\n};\n\nexport default BlogPage;\nexport const pageQuery = graphql`\n  query {\n    allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {\n      edges {\n        node {\n          id\n          excerpt(pruneLength: 200)\n          frontmatter {\n            date(formatString: \"MMMM DD, YYYY\")\n            path\n            title\n            authorName\n            authorImage\n            coverImageUnsplashId\n            project\n          }\n          fields {\n            readingTime {\n              text\n            }\n          }\n        }\n      }\n    }\n  }\n`;\n"],"sourceRoot":""}