{"version":3,"sources":["webpack:///./src/templates/section.js","webpack:///./src/components/project-item.tsx","webpack:///./src/components/seo.js"],"names":["query","IndexPage","data","console","log","sx","display","gridTemplateColumns","width","strapiSection","articles","map","document","node","section","title","id","ProjectItem","style","React","bgColor","setBgColor","image","getAverageRGBFromImgsrc","childImageSharp","fluid","src","then","rgbToHex","r","g","b","div","position","content","paddingTop","left","height","top","a","color","opacity","padding","zIndex","transition","textDecoration","to","strapiId","aria-label","alt","tracedSVG","right","bottom","filter","objectFit","backgroundColor","fontSize","fontWeight","description","SEO","lang","meta","site","metaDescription","siteMetadata","htmlAttributes","titleTemplate","name","property","author","concat","defaultProps"],"mappings":"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","file":"component---src-templates-section-js-fbbcf89965de0f785ba7.js","sourcesContent":["/** @jsx jsx */\nimport { jsx, Container, Styled } from \"theme-ui\"\nimport React from \"react\"\nimport { Link } from \"gatsby\"\nimport { Helmet } from \"react-helmet\";\nimport Layout from \"../components/layout\"\nimport Image from \"gatsby-image\"\nimport SEO from \"../components/seo\"\nimport ReactMarkdown from \"react-markdown\"\nimport Page from '../components/page';\nimport ProjectItem from '../components/project-item'\nimport NewLayout from '../components/new-layout';\nimport \"../styles/global.css\"\nconst IndexPage = ({ data }) => {\n  console.log(data)\n  return (\n    // <Layout>\n    //   <h1>Hi people</h1>\n    //   <p>Welcome to your new Gatsby site.</p>\n    //   <p>Now go build something great.</p>\n    //   <ul>\n    <NewLayout\n    >\n      {/* <Helmet>\n          <meta charSet=\"utf-8\" />\n          <title>{data.strapiSection.title}</title>\n        </Helmet> */}\n      <div sx={{\n        display: `grid`,\n        gridTemplateColumns: `repeat(auto-fit, minmax(280px, 1fr))`,\n        width: `100%`,\n        // height: '100vh'\n      }}>\n\n        {data.strapiSection.articles.map(document => (\n          <ProjectItem node={{ ...document, section: { title: data.strapiSection.title, id: data.strapiSection.id } }} />\n        ))}\n      </div>\n    </NewLayout>\n    //   </ul>\n    //   <Link to=\"/page-2/\">Go to page 2</Link>\n    // </Layout>\n  )\n}\n\nexport const query = graphql`  \nquery IndexSectionQuery($id: String!) {\n  strapiSection(id: {eq: $id}) {\n    id\n    title\n    description\n    articles {\n      id\n      image {\n        childImageSharp {\n          fluid(maxWidth: 960) {\n            ...GatsbyImageSharpFluid\n          }\n        }\n      }\n      title\n      content\n    }\n  }\n}\n`\n\nexport default IndexPage","/** @jsx jsx */\r\nimport { jsx } from \"theme-ui\"\r\nimport Img from \"gatsby-image\"\r\nimport { Link } from \"gatsby\"\r\nimport { animated } from \"react-spring\"\r\nimport { ChildImageSharp } from \"../types\"\r\nimport * as React from 'react';\r\nimport { getAverageRGBFromImgsrc, rgbToHex } from '../utils';\r\ntype Props = {\r\n  node: {\r\n    color: string\r\n    title: string\r\n    slug: string\r\n    service: string\r\n    client: string\r\n    cover: ChildImageSharp\r\n  }\r\n  style?: any\r\n}\r\n\r\nconst ProjectItem = ({ node, style }: Props) => {\r\n  // console.log(node.image && node.image.childImageSharp.fluid)\r\n  const [bgColor, setBgColor] = React.useState(null);\r\n  React.useEffect(() => {\r\n    if (node.image) {\r\n      getAverageRGBFromImgsrc(node.image.childImageSharp.fluid.src).then(data => { setBgColor(`#${rgbToHex(data.r)}${rgbToHex(data.g)}${rgbToHex(data.b)}`) })\r\n    }\r\n  }, [])\r\n\r\n  return (\r\n    <animated.div\r\n      sx={{\r\n        position: `relative`,\r\n        \"&:before\": {\r\n          content: `\"\"`,\r\n          display: `block`,\r\n          paddingTop: `100%`,\r\n        },\r\n      }}\r\n      style={style}\r\n    >\r\n      <div\r\n        sx={{\r\n          left: 0,\r\n          height: `100%`,\r\n          position: `absolute`,\r\n          top: 0,\r\n          width: `100%`,\r\n          a: {\r\n            color: `white`,\r\n            height: `100%`,\r\n            left: 0,\r\n            opacity: 0,\r\n            padding: 4,\r\n            position: `absolute`,\r\n            top: 0,\r\n            width: `100%`,\r\n            zIndex: 10,\r\n            transition: `all 0.3s ease-in-out`,\r\n            textDecoration: `none`,\r\n            \"&:hover\": {\r\n              color: `white`,\r\n              opacity: 1,\r\n              textDecoration: `none`,\r\n            },\r\n          },\r\n        }}\r\n      >\r\n        <div\r\n          sx={{\r\n            \"> div\": {\r\n              height: `100%`,\r\n              left: 0,\r\n              position: `absolute !important`,\r\n              top: 0,\r\n              width: `100%`,\r\n              \"> div\": {\r\n                position: `static !important`,\r\n              },\r\n            },\r\n          }}\r\n        >\r\n          {node.image && <Img fluid={node.image.childImageSharp.fluid} />}\r\n        </div>\r\n        <Link to={`/${node.section.title}/${10000 + (node.strapiId || node.id)}`} aria-label={`View detail page of ${node.title}`}>\r\n          <img\r\n            alt=\"\"\r\n            src={node.image && node.image.childImageSharp.fluid.tracedSVG}\r\n            sx={{\r\n              position: `absolute`,\r\n              top: 0,\r\n              left: 0,\r\n              right: 0,\r\n              bottom: 0,\r\n              width: `100%`,\r\n              height: `100%`,\r\n              filter: `invert(100%)`,\r\n              zIndex: -1,\r\n              opacity: 0.08,\r\n              objectFit: `cover`,\r\n            }}\r\n          />\r\n          <div\r\n            sx={{\r\n              backgroundColor: bgColor || '#bdeefe',\r\n              height: `100%`,\r\n              left: 0,\r\n              position: `absolute`,\r\n              top: 0,\r\n              width: `100%`,\r\n              zIndex: -2,\r\n            }}\r\n          />\r\n          <div sx={{ fontSize: 3, fontWeight: `bold` }}>{node.title}</div>\r\n          <div sx={{ fontSize: 1 }}>{node.description}</div>\r\n          {/* <div sx={{ fontSize: 2 }}>{node.content}</div> */}\r\n        </Link>\r\n      </div>\r\n    </animated.div>)\r\n}\r\n\r\nexport default ProjectItem\r\n","/**\n * SEO component that queries for data with\n *  Gatsby's useStaticQuery React hook\n *\n * See: https://www.gatsbyjs.org/docs/use-static-query/\n */\n\nimport React from \"react\"\nimport PropTypes from \"prop-types\"\nimport Helmet from \"react-helmet\"\nimport { useStaticQuery, graphql } from \"gatsby\"\n\nfunction SEO({ description, lang, meta, title }) {\n  const { site } = useStaticQuery(\n    graphql`\n      query {\n        site {\n          siteMetadata {\n            title\n            description\n            author\n          }\n        }\n      }\n    `\n  )\n\n  const metaDescription = description || site.siteMetadata.description\n\n  return (\n    <Helmet\n      htmlAttributes={{\n        lang,\n      }}\n      title={title}\n      titleTemplate={`%s | ${site.siteMetadata.title}`}\n      meta={[\n        {\n          name: `description`,\n          content: metaDescription,\n        },\n        {\n          property: `og:title`,\n          content: title,\n        },\n        {\n          property: `og:description`,\n          content: metaDescription,\n        },\n        {\n          property: `og:type`,\n          content: `website`,\n        },\n        {\n          name: `twitter:card`,\n          content: `summary`,\n        },\n        {\n          name: `twitter:creator`,\n          content: site.siteMetadata.author,\n        },\n        {\n          name: `twitter:title`,\n          content: title,\n        },\n        {\n          name: `twitter:description`,\n          content: metaDescription,\n        },\n      ].concat(meta)}\n    />\n  )\n}\n\nSEO.defaultProps = {\n  lang: `en`,\n  meta: [],\n  description: ``,\n}\n\nSEO.propTypes = {\n  description: PropTypes.string,\n  lang: PropTypes.string,\n  meta: PropTypes.arrayOf(PropTypes.object),\n  title: PropTypes.string.isRequired,\n}\n\nexport default SEO\n"],"sourceRoot":""}