{"version":3,"file":"component---src-pages-hackshack-index-js-74754890df7fa6c0102d.js","mappings":"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","sources":["webpack://hpe-dev-portal/./src/components/hackshack/Grommet/GrommetThemeWrapper.js","webpack://hpe-dev-portal/./src/pages/hackshack/index.js"],"sourcesContent":["import React from 'react';\nimport { Grommet } from 'grommet';\nimport { hpe } from 'grommet-theme-hpe';\nimport { deepMerge } from 'grommet/utils';\nimport PropTypes from 'prop-types';\n\nconst customHpe = deepMerge(hpe, {\n  global: {\n    breakpoints: {\n      small: {\n        value: 900,\n      },\n    },\n  },\n});\n\nconst GrommetThemeWrapper = ({ children }) => {\n  return (\n    <Grommet\n      className=\"Test-abc-123\"\n      theme={customHpe}\n      themeMode=\"dark\"\n      background=\"#151d29\"\n      style={{ overflowX: 'hidden' }}\n    >\n      {children}\n    </Grommet>\n  );\n};\n\nGrommetThemeWrapper.propTypes = {\n  children: PropTypes.node.isRequired,\n};\n\nexport default GrommetThemeWrapper;\n","/* eslint-disable max-len */\nimport React, { useContext, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { graphql } from 'gatsby';\nimport {\n  Box,\n  Text,\n  Image,\n  ResponsiveContext,\n  Anchor,\n  Button,\n  Stack,\n  Layer,\n} from 'grommet';\nimport ReactPlayer from 'react-player';\nimport { Close } from 'grommet-icons';\nimport styled, { keyframes } from 'styled-components';\nimport Helmet from 'react-helmet';\nimport { SEO } from '../../components';\nimport { Layout, Card } from '../../components/hackshack';\nimport GrommetThemeWrapper from '../../components/hackshack/Grommet/GrommetThemeWrapper';\n\nconst slideUp = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateY(-10px) scale(1.1);\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateY(0px) scale(1);\n  }\n`;\n\nconst slideIn = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateX(10px);\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateX(0px);\n  }\n`;\n\nconst MainWrapper = styled(Box)`\n  margin-top: 0px;\n  transform: rotate(-10deg);\n  @media (min-width: 900px) {\n    margin-top: -200px;\n  }\n`;\n\nconst LogoWrapper = styled(Box)`\n  width: 100%;\n  max-width: 981px;\n  opacity: 0;\n  animation: ${slideUp} 0.5s ease-out;\n  animation-fill-mode: forwards;\n  animation-delay: 0.25s;\n  @media (min-width: 900px) {\n    min-width: 600px;\n  }\n`;\n\nconst TextWrapper = styled(Box)`\n  padding-left: 0%;\n  opacity: 0;\n  white-space: nowrap;\n  animation: ${slideIn} 0.6s ease-out;\n  animation-fill-mode: forwards;\n  animation-delay: 0.5s;\n  @media (min-width: 900px) {\n    padding-left: 30%;\n  }\n`;\n\n// const ButtonWrapper = styled(Box)`\n//   padding-top: 31px;\n//   margin-left: 0px;\n//   opacity: 0;\n//   animation: ${slideIn} 0.3s ease-out;\n//   animation-fill-mode: forwards;\n//   animation-delay: 0.7s;\n//   @media (min-width: 900px) {\n//     margin-left: -170px;\n//   }\n// `;\n\nconst StyledLayer = styled(Layer)`\n  background-color: rgba(38, 48, 64, 0.8);\n  backdrop-filter: blur(15px);\n`;\n\nconst StyledStack = styled(Box)`\n  margin-left: 0px;\n  margin-top: -80px;\n  @media (min-width: 900px) {\n    margin-left: -330px;\n    margin-bottom: -300px;\n  }\n  @media (min-width: 1500px) {\n    margin-top: -200px;\n    margin-bottom: 0px;\n  }\n`;\n\nconst StyledGremlin = styled(Box)`\n  width: 200px;\n  margin-top: 100px;\n  visibility: hidden;\n  @media (min-width: 900px) {\n    visibility: visible;\n    height: 100%;\n    width: 100%;\n  }\n`;\n\nconst StyledBubble = styled(Box)`\n  margin-left: 290px;\n  margin-bottom: 140px;\n  visibility: hidden;\n  @media (min-width: 900px) {\n    visibility: visible;\n    margin-left: 540px;\n    margin-bottom: 120px;\n    width: 420px;\n  }\n`;\n\nconst StyledTextBox = styled(Box)`\n  margin-left: 470px;\n  margin-bottom: 260px;\n  @media (min-width: 600px) {\n    margin-left: 730px;\n    margin-bottom: 270px;\n  }\n`;\n\nconst StyledPlayButton = styled(Box)`\n  margin-left: 290px;\n  margin-bottom: 280px;\n  visibility: hidden;\n  @media (min-width: 900px) {\n    visibility: visible;\n    margin-bottom: 230px;\n    margin-left: 660px;\n  }\n`;\n\nconst StyledBoxText = styled(Box)`\n  visibility: hidden;\n  @media (min-width: 800px) {\n    visibility: visible;\n  }\n`;\n\nconst CardWrapper = styled(Box)`\n  flex-direction: column;\n  align-self: center;\n  margin-bottom: 48px;\n  margin-top: 50px;\n  @media (min-width: 900px) {\n    align-self: center;\n    flex-direction: column;\n  }\n  @media (min-width: 1500px) {\n    margin-top: -220px;\n    transform: rotate(-10deg);\n    align-self: flex-end;\n    flex-direction: row;\n  }\n`;\n\nconst Content = () => {\n  const size = useContext(ResponsiveContext);\n  const fontSize = size === 'small' ? '4vw' : '2.2vw';\n  return (\n    <TextWrapper>\n      <Text size={fontSize} color=\"#FFFFFF\">\n        Welcome to the Hack Shack. We offer many\n      </Text>\n      <Text size={fontSize} color=\"#FFFFFF\">\n        ways to collaborate and expand your skills.\n      </Text>\n      <Text size={fontSize} color=\"#FFFFFF\">\n        Try our technology Workshops-on-Demand,\n      </Text>\n      <Text size={fontSize} color=\"#FFFFFF\">\n        for a unique, hands-on learning experience.\n      </Text>\n    </TextWrapper>\n    // <TextWrapper>\n    //   <Text size={fontSize} color=\"#FFFFFF\">\n    //     Welcome to the Hack Shack, a place to collaborate\n    //   </Text>\n    //   <Text size={fontSize} color=\"#FFFFFF\">\n    //     and expand technology skills. Try our unique on-demand\n    //   </Text>\n    //   <Text size={fontSize} color=\"#FFFFFF\">\n    //     workshops or go on a virtual treasure hunt to discover\n    //   </Text>\n    //   <Text size={fontSize} color=\"#FFFFFF\">\n    //     a wealth of other resources and perhaps win a prize.\n    //   </Text>\n    // </TextWrapper>\n  );\n};\nconst GrommetMascot = ({ setOpen }) => (\n  <StyledStack>\n    <Stack anchor=\"bottom\" alignSelf=\"start\">\n      <StyledGremlin>\n        <Image alt=\"gremlinInBubble\" src=\"/img/hackshack/gremlinInBubble.png\" />\n      </StyledGremlin>\n      <StyledBubble>\n        <Image alt=\"quotebubble\" src=\"/img/hackshack/quotebubble.png\" />\n      </StyledBubble>\n      <StyledTextBox gap=\"small\">\n        <StyledBoxText width=\"medium\">\n          <Text size=\"large\" color=\"#000000\">\n            Take a tour of\n          </Text>\n          <Text size=\"large\" color=\"#000000\">\n            the Hack Shack!\n          </Text>\n        </StyledBoxText>\n      </StyledTextBox>\n      <StyledPlayButton\n        gap=\"small\"\n        alignSelf=\"end\"\n        direction=\"row\"\n        onClick={() => setOpen(true)}\n      >\n        <Anchor\n          alignSelf=\"center\"\n          color=\"#000000\"\n          size=\"large\"\n          label={\n            <Box gap=\"xsmall\" direction=\"row\">\n              <Text style={{ whiteSpace: 'nowrap' }} size=\"large\">\n                Watch video\n              </Text>\n            </Box>\n          }\n        />\n        <Image\n          alt=\"play-button\"\n          style={{ width: '38px', height: '38px' }}\n          src=\"/img/hackshack/play-button.png\"\n          margin={{ bottom: '4px' }}\n        />\n      </StyledPlayButton>\n    </Stack>\n  </StyledStack>\n);\n\nGrommetMascot.propTypes = {\n  setOpen: PropTypes.func,\n};\n\nconst Cards = ({ size, data }) => {\n  const homeCards = data?.allMarkdownRemark?.edges;\n  return (\n    <>\n      <CardWrapper gap=\"large\">\n        {size === 'small' && (\n          <Card\n            logo=\"/img/hackshack/StickerPage/gremlin.png\"\n            title=\"New to the Hack Shack?\"\n            desc=\"Watch this video!\"\n            background=\"rgba(0, 86, 122, 0.8);\"\n            label=\"Watch Now\"\n            link=\"https://youtu.be/ggjmLM6Ozmw\"\n            margin={\n              size === 'small' ? { bottom: 'none' } : { bottom: 'xlarge' }\n            }\n          />\n        )}\n        {homeCards &&\n          homeCards.map(({ node }) => (\n            <Card\n              key={node.id}\n              image={node.frontmatter.image}\n              title={node.frontmatter.title}\n              desc={node.frontmatter.description}\n              link={node.frontmatter.link}\n              path={node.frontmatter.path}\n              background={node.frontmatter.background}\n              label={node.frontmatter.label}\n              alt={node.frontmatter.alt}\n              fit={node.frontmatter.fit}\n              imageBackground={node.frontmatter.imageBackground}\n              margin={\n                size === 'small'\n                  ? { top: '0px', right: '0px' }\n                  : { top: 'xlarge', right: 'large' }\n              }\n            />\n          ))}\n      </CardWrapper>\n    </>\n  );\n};\n\nCards.propTypes = {\n  size: PropTypes.string,\n  data: PropTypes.shape({\n    allMarkdownRemark: PropTypes.shape({\n      edges: PropTypes.arrayOf(\n        PropTypes.shape({\n          node: PropTypes.shape({\n            id: PropTypes.string,\n            frontmatter: PropTypes.shape({\n              width: PropTypes.string,\n              category: PropTypes.string,\n              image: PropTypes.string,\n              link: PropTypes.string,\n              priority: PropTypes.number,\n              alt: PropTypes.string,\n              fit: PropTypes.string,\n              imageBackground: PropTypes.string,\n            }),\n          }),\n          rawMarkdownBody: PropTypes.string,\n        }),\n      ),\n    }),\n  }).isRequired,\n};\n\nconst ResponsiveContextWrapper = ({ children, setOpen, data }) => {\n  const size = useContext(ResponsiveContext);\n  return (\n    <Box\n      height=\"100%\"\n      width=\"100%\"\n      margin={size === 'small' ? null : { top: '50px' }}\n    >\n      {children}\n      {size !== 'small' && <GrommetMascot setOpen={setOpen} />}\n      <Cards size={size} data={data} />\n    </Box>\n  );\n};\n\nResponsiveContextWrapper.propTypes = {\n  children: PropTypes.node.isRequired,\n  setOpen: PropTypes.func.isRequired,\n  data: PropTypes.shape({\n    allMarkdownRemark: PropTypes.shape({\n      edges: PropTypes.arrayOf(\n        PropTypes.shape({\n          node: PropTypes.shape({\n            id: PropTypes.string,\n            frontmatter: PropTypes.shape({\n              width: PropTypes.string,\n              category: PropTypes.string,\n              image: PropTypes.string,\n              link: PropTypes.string,\n              priority: PropTypes.number,\n              alt: PropTypes.string,\n              fit: PropTypes.string,\n              imageBackground: PropTypes.string,\n            }),\n          }),\n          rawMarkdownBody: PropTypes.string,\n        }),\n      ),\n    }),\n  }).isRequired,\n};\n\nconst Home = ({ data }) => {\n  const [open, setOpen] = useState();\n  const onClose = () => setOpen(undefined);\n  return (\n    <GrommetThemeWrapper>\n      <Layout background=\"/img/hackshack/BackgroundImages/hack-shack-home-background-min.png\">\n        <SEO title=\"Hack Shack\" />\n        <Helmet>\n          <body margin=\"0\" />\n        </Helmet>\n        <ResponsiveContextWrapper setOpen={setOpen} data={data}>\n          {open && (\n            <StyledLayer\n              full\n              animation=\"fadeIn\"\n              onClickOutside={onClose}\n              onEsc={onClose}\n            >\n              <Box alignSelf=\"end\" pad={{ top: 'large', bottom: 'xsmall' }}>\n                <Button\n                  alignSelf=\"end\"\n                  label={\n                    <Text weight=\"normal\" color=\"white\" size=\"xlarge\">\n                      Close\n                    </Text>\n                  }\n                  reverse\n                  icon={<Close size=\"medium\" />}\n                  onClick={onClose}\n                />\n              </Box>\n              <Box alignSelf=\"center\">\n                <ReactPlayer\n                  url=\"https://youtu.be/ggjmLM6Ozmw\"\n                  controls\n                  width=\"932px\"\n                  height=\"528px\"\n                  playing\n                />\n              </Box>\n            </StyledLayer>\n          )}\n          <MainWrapper align=\"center\">\n            <LogoWrapper>\n              <Image\n                width=\"100%\"\n                fit=\"cover\"\n                src=\"/img/hackshack/hack-shack-logo.png\"\n                alt=\"Hack Shack\"\n              />\n            </LogoWrapper>\n            <Content />\n            {/* <ButtonWrapper>\n              <ButtonSplit to=\"https://developer.hpe.com\">\n                Visit HPE Developer Community Portal\n              </ButtonSplit>\n            </ButtonWrapper> */}\n          </MainWrapper>\n        </ResponsiveContextWrapper>\n      </Layout>\n    </GrommetThemeWrapper>\n  );\n};\n\nHome.propTypes = {\n  data: PropTypes.shape({\n    allMarkdownRemark: PropTypes.shape({\n      edges: PropTypes.arrayOf(\n        PropTypes.shape({\n          node: PropTypes.shape({\n            id: PropTypes.string,\n            frontmatter: PropTypes.shape({\n              width: PropTypes.string,\n              category: PropTypes.string,\n              image: PropTypes.string,\n              link: PropTypes.string,\n              priority: PropTypes.number,\n              alt: PropTypes.string,\n            }),\n          }),\n          rawMarkdownBody: PropTypes.string,\n        }),\n      ),\n    }),\n  }).isRequired,\n};\n\nexport const pageQuery = graphql`\n  query {\n    allMarkdownRemark(\n      filter: {\n        fields: { sourceInstanceName: { eq: \"hackshackhome\" } }\n        frontmatter: { active: { eq: true } }\n      }\n      sort: {frontmatter: {priority: ASC}}\n    ) {\n      edges {\n        node {\n          id\n          frontmatter {\n            title\n            link\n            path\n            description\n            image\n            background\n            label\n            priority\n            active\n            alt\n            fit\n            imageBackground\n          }\n          rawMarkdownBody\n        }\n      }\n    }\n  }\n`;\n\nexport default Home;\n"],"names":["customHpe","deepMerge","hpe","global","breakpoints","small","value","_ref","children","React","Grommet","className","theme","themeMode","background","style","overflowX","slideUp","keyframes","slideIn","MainWrapper","styled","Box","withConfig","displayName","componentId","LogoWrapper","TextWrapper","StyledLayer","Layer","StyledStack","StyledGremlin","StyledBubble","StyledTextBox","StyledPlayButton","StyledBoxText","CardWrapper","Content","fontSize","useContext","ResponsiveContext","Text","size","color","GrommetMascot","setOpen","Stack","anchor","alignSelf","Image","alt","src","gap","width","direction","onClick","Anchor","label","whiteSpace","height","margin","bottom","Cards","_ref2","_data$allMarkdownRema","data","homeCards","allMarkdownRemark","edges","Card","logo","title","desc","link","map","_ref3","node","key","id","image","frontmatter","description","path","fit","imageBackground","top","right","ResponsiveContextWrapper","_ref4","_ref5","open","useState","onClose","undefined","GrommetThemeWrapper","Layout","SEO","Helmet","full","animation","onClickOutside","onEsc","pad","Button","weight","reverse","icon","Close","ReactPlayer","url","controls","playing","align"],"sourceRoot":""}