{"version":3,"sources":["webpack://redriverdesigns.ca/./src/components/Head/Head.jsx","webpack://redriverdesigns.ca/./src/components/Heading/Heading.jsx","webpack://redriverdesigns.ca/./src/page-components/products.js","webpack://redriverdesigns.ca/./src/pages/products.js"],"names":["Head","props","pageContent","sitewideContent","pageTitle","title","name","href","canonicalURL","rel","content","description","property","logo","file","url","StaticQuery","query","render","data","contentfulSitewideMetadataSeo","Heading1","styled","margin","fontSize","textAlign","textTransform","StyledProductsPageDescription","marginBottom","a","color","colors","backgroundColor","StyledProductsSection","maxWidth","ul","display","flexWrap","justifyContent","listStyleType","li","height","width","StyledProductFigure","backgroundImage","backgroundImageURL","backgroundPosition","backgroundRepeat","backgroundSize","StyledProductFigcaption","alignItems","padding","Products","Page","metadataSEO","Heading","dangerouslySetInnerHTML","__html","contactCTA","childMarkdownRemark","html","products","map","product","key","photo","contentfulPageProducts"],"mappings":"+JAMaA,G,OAAO,SAACC,GACnB,IAAOC,EAAgCD,EAAhCC,YAAaC,EAAmBF,EAAnBE,gBAGdC,EAAkC,SAAtBF,EAAYG,MAC1BF,EAAgBG,KACbJ,EAAYG,MAFD,MAEYF,EAAgBG,KAE9C,OACE,gBAAC,IAAD,KACE,wBAAMC,KAAML,EAAYM,aAAcC,IAAI,cAC1C,wBAAMC,QAASR,EAAYS,YAAaL,KAAK,gBAC7C,6BAAQF,GAGR,wBAAMM,QAASN,EAAWQ,SAAS,aACnC,wBAAMF,QAASR,EAAYS,YAAaC,SAAS,mBACjD,wBAAMF,QAAO,SAAWP,EAAgBU,KAAKC,KAAKC,IAAOH,SAAS,aAClE,wBAAMF,QAASR,EAAYM,aAAcI,SAAS,WAClD,wBAAMF,QAAO,SAAWP,EAAgBU,KAAKC,KAAKC,IAAOT,KAAK,iBAE9D,wBAAMI,QAASP,EAAgBG,KAAMM,SAAS,iBAC9C,wBAAMF,QAAO,SAAWP,EAAgBU,KAAKF,YAAeL,KAAK,yBAsCvE,IAzBwB,SAACL,GAAD,OACtB,gBAAC,EAAAe,YAAD,CAEEC,MAAK,aAaLC,OAAQ,SAAAC,GAAI,OACV,gBAACnB,EAAD,CACEE,YAAaD,EAAMC,YACnBC,gBAAiBgB,EAAKC,qC,sEC1DjBC,E,KAAWC,iBAAH,4DAAGA,CAAU,CAChCC,OAAQ,gBACRC,SAAU,SACVC,UAAW,SACXC,cAAe,e,qJCHJC,EAAgCL,oBAAH,kFAAGA,CAAW,CACtDG,UAAW,SAGX,MAAO,CACLG,aAAc,UAGhBC,EAAG,CACDC,MAAOC,kBACP,UAAW,CACTC,gBAAiBD,kBACjBD,MAAOC,sBAKAE,EAAwBX,wBAAH,0EAAGA,CAAe,CAClDY,SAAU,SACVX,OAAQ,YAERY,GAAI,CACFC,QAAS,OACTC,SAAU,OACVC,eAAgB,SAChBC,cAAe,QAGjBC,GAAI,CACFC,OAAQ,QACRC,MAAO,WAIEC,EAAsBrB,uBAAH,wEAAGA,EAAc,SAAArB,GAAK,MAAK,CACvDwC,OAAQ,OACRC,MAAO,OACPE,gBAAgB,aAAc3C,EAAM4C,mBAArB,IACfC,mBAAoB,SACpBC,iBAAkB,YAClBC,eAAgB,YAGPC,EAA0B3B,2BAAH,4EAAGA,CAAkB,CACvDc,QAAS,OACTc,WAAY,SACZZ,eAAgB,SAChBG,OAAQ,OACRU,QAAS,OACTrB,MAAOC,gBACPN,UAAW,SACX,UAAW,CACTO,gBAAiBD,8BACjBD,MAAOC,qBC/CLqB,G,OAAW,SAACnD,GAChB,IAAOS,EAAWT,EAAXS,QAEP,OACE,gBAAC2C,EAAA,EAAD,KACE,gBAACrD,EAAA,EAAD,CAAME,YAAaQ,EAAQ4C,cAC3B,gBAACC,EAAA,EAAD,KAAW7C,EAAQ4C,YAAYjD,OAC/B,gBAACsB,EAAD,KACE,yBAAIjB,EAAQ4C,YAAY3C,aACxB,uBAAK6C,wBAAyB,CAACC,OAAQ/C,EAAQgD,WAAWC,oBAAoBC,SAEhF,gBAAC3B,EAAD,KACE,0BACGvB,EAAQmD,SAASC,KAAI,SAACC,GAAD,OACpB,sBAAIC,IAAKD,EAAQpD,aACf,gBAACgC,EAAD,CAAqBE,mBAAoBkB,EAAQE,MAAMnD,KAAKC,KAC1D,gBAACkC,EAAD,KAA0Bc,EAAQpD,uBAsDlD,EA/B4B,kBAC1B,gBAAC,EAAAK,YAAD,CAEEC,MAAK,aAwBLC,OAAQ,SAAAC,GAAI,OAAI,gBAACiC,EAAD,CAAU1C,QAASS,EAAK+C","file":"component---src-pages-products-js-92a70388befcccb1112b.js","sourcesContent":["import {graphql, StaticQuery} from 'gatsby'\nimport PropTypes from 'prop-types'\nimport React from 'react'\nimport {Helmet as ReactHelmet} from 'react-helmet'\nimport {contentfulImagePropTypes, contentfulMetadataSeoPropTypes} from '../../shared-prop-types.js'\n\nexport const Head = (props) => {\n  const {pageContent, sitewideContent} = props\n\n  // if it's the homepage, simplify the page title to just the business/website name\n  const pageTitle = pageContent.title === 'Home'\n    ? sitewideContent.name\n    : `${pageContent.title} | ${sitewideContent.name}`\n\n  return (\n    <ReactHelmet>\n      <link href={pageContent.canonicalURL} rel=\"canonical\"/>\n      <meta content={pageContent.description} name=\"description\"/>\n      <title>{pageTitle}</title>\n      {/* https://css-tricks.com/essential-meta-tags-social-media/ */}\n      {/* essential meta tags */}\n      <meta content={pageTitle} property=\"og:title\"/>\n      <meta content={pageContent.description} property=\"og:description\"/>\n      <meta content={`https:${sitewideContent.logo.file.url}`} property=\"og:image\"/>\n      <meta content={pageContent.canonicalURL} property=\"og:url\"/>\n      <meta content={`https:${sitewideContent.logo.file.url}`} name=\"twitter:card\"/>\n      {/* non-essential (but still recommended) meta tags */}\n      <meta content={sitewideContent.name} property=\"og:site_name\"/>\n      <meta content={`https:${sitewideContent.logo.description}`} name=\"twitter:image:alt\"/>\n    </ReactHelmet>\n  )\n}\n\nHead.propTypes = {\n  pageContent: PropTypes.shape(contentfulMetadataSeoPropTypes).isRequired,\n  sitewideContent: PropTypes.shape({\n    logo: PropTypes.shape(contentfulImagePropTypes).isRequired,\n    name: PropTypes.string.isRequired,\n  }).isRequired,\n}\n\nconst HeadWithContent = (props) => (\n  <StaticQuery\n    // to test queries, refer to the dev server terminal output for the GraphQL URL\n    query={graphql`\n      query ContentfulComponentHeadQuery {\n        contentfulSitewideMetadataSeo {\n          logo {\n            description\n            file {\n              url\n            }\n          }\n          name\n        }\n      }\n    `}\n    render={data => (\n      <Head\n        pageContent={props.pageContent}\n        sitewideContent={data.contentfulSitewideMetadataSeo}\n      />\n    )}\n  />\n)\n\nexport default HeadWithContent\n","import styled from 'styled-components'\n\nexport const Heading1 = styled.h1({\n  margin: '4rem 0 2rem 0',\n  fontSize: '2.4rem',\n  textAlign: 'center',\n  textTransform: 'uppercase',\n})\n","import styled from 'styled-components'\nimport {colors} from '../config/colors.js'\n\nexport const StyledProductsPageDescription = styled.div({\n  textAlign: 'center',\n\n  // set margin-bottom on direct <p> child only\n  '> p': {\n    marginBottom: '1.5rem',\n  },\n\n  a: {\n    color: colors['black-#000'],\n    '&:hover': {\n      backgroundColor: colors['black-#000'],\n      color: colors['white-#ddd'],\n    },\n  },\n})\n\nexport const StyledProductsSection = styled.section({\n  maxWidth: '100rem',\n  margin: '4rem auto',\n\n  ul: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    justifyContent: 'center',\n    listStyleType: 'none',\n  },\n\n  li: {\n    height: '25rem',\n    width: '25rem',\n  },\n})\n\nexport const StyledProductFigure = styled.figure(props => ({\n    height: '100%',\n    width: '100%',\n    backgroundImage: `url(https:${props.backgroundImageURL})`,\n    backgroundPosition: 'center',\n    backgroundRepeat: 'no-repeat',\n    backgroundSize: 'cover',\n}))\n\nexport const StyledProductFigcaption = styled.figcaption({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  height: '100%',\n  padding: '2rem',\n  color: colors['transparent'],\n  textAlign: 'center',\n  '&:hover': {\n    backgroundColor: colors['black-#000-with-shadow'],\n    color: colors['white-#ddd'],\n  },\n})\n","import {graphql, StaticQuery} from 'gatsby'\nimport PropTypes from 'prop-types'\nimport React from 'react'\nimport Head from '../components/Head/Head.jsx'\nimport {Heading1} from '../components/Heading/Heading.jsx'\nimport Page from '../components/Page/Page.jsx'\nimport {StyledProductFigcaption, StyledProductFigure, StyledProductsPageDescription, StyledProductsSection} from '../page-components/products.js'\nimport {contentfulImagePropTypes, contentfulMarkdownRemarkPropTypes, contentfulMetadataSeoPropTypes} from '../shared-prop-types.js'\n\nconst Products = (props) => {\n  const {content} = props\n\n  return (\n    <Page>\n      <Head pageContent={content.metadataSEO}/>\n      <Heading1>{content.metadataSEO.title}</Heading1>\n      <StyledProductsPageDescription>\n        <p>{content.metadataSEO.description}</p>\n        <div dangerouslySetInnerHTML={{__html: content.contactCTA.childMarkdownRemark.html}}/>\n      </StyledProductsPageDescription>\n      <StyledProductsSection>\n        <ul>\n          {content.products.map((product) => (\n            <li key={product.description}>\n              <StyledProductFigure backgroundImageURL={product.photo.file.url}>\n                <StyledProductFigcaption>{product.description}</StyledProductFigcaption>\n              </StyledProductFigure>\n            </li>\n          ))}\n        </ul>\n      </StyledProductsSection>\n    </Page>\n  )\n}\n\nProducts.propTypes = {\n  content: PropTypes.shape({\n    contactCTA: PropTypes.shape(contentfulMarkdownRemarkPropTypes).isRequired,\n    metadataSEO: PropTypes.shape(contentfulMetadataSeoPropTypes).isRequired,\n    products: PropTypes.arrayOf(\n      PropTypes.shape({\n        description: PropTypes.string.isRequired,\n        photo: PropTypes.shape(contentfulImagePropTypes).isRequired,\n      }).isRequired,\n    ).isRequired,\n  }).isRequired,\n}\n\nconst ProductsWithContent = () => (\n  <StaticQuery\n    // to test queries, refer to the dev server terminal output for the GraphQL URL\n    query={graphql`\n      query contentfulPageProductsQuery {\n        contentfulPageProducts {\n          contactCTA {\n            childMarkdownRemark {\n              html\n            }\n          }\n          metadataSEO {\n            canonicalURL\n            description\n            title\n          }\n          products {\n            description\n            photo {\n              file {\n                url\n              }\n            }\n          }\n        }\n      }\n    `}\n    render={data => <Products content={data.contentfulPageProducts}/>}\n  />\n)\n\nexport default ProductsWithContent\n"],"sourceRoot":""}