{"version":3,"file":"component---src-templates-platform-js-6f02423e27d70d2092a5.js","mappings":"8MAqBA,MAAMA,GAAiBC,EAAAA,EAAAA,SAAOC,EAAAA,IAASC,WAAA,CAAAC,YAAA,2BAAAC,YAAA,eAAhBJ,CAAgB,iYA4BjCK,EAAU,CACdC,MAAO,CAAC,QACRC,OAAQ,CAAC,OAAQ,QACjBC,MAAO,CAAC,OAAQ,OAAQ,OAAQ,QAChCC,OAAQ,CAAC,OAAQ,OAAQ,OAAQ,SAE7BC,EAAO,CACXJ,MAAO,CAAC,OAAQ,OAAQ,QACxBC,OAAQ,CAAC,OAAQ,QACjBC,MAAO,CAAC,QACRC,OAAQ,CAAC,SA+IX,UA5IA,SAAyBE,GAAY,IAAX,KAAEC,GAAMD,EAChC,MAAME,EAAOD,EAAKE,gBACVC,MAAOC,GAAUJ,EAAKI,OACtBD,MAAOE,GAAWL,EAAKK,OAEzBC,GADeC,EAAAA,EAAAA,KACUC,OACzB,gBAAEC,EAAe,QAAEC,GAAYT,GAC/B,MAAEO,EAAK,YAAEG,EAAW,KAAEC,GAASX,EAAKY,YAC1C,OACEC,EAAAA,cAACC,EAAAA,GAAM,CAACP,MAAOF,GACbQ,EAAAA,cAACE,EAAAA,GAAG,CAACR,MAAOA,EAAOG,YAAaA,GAAeD,IAC/CI,EAAAA,cAACG,EAAAA,EAAG,CAACC,MAAI,EAACC,SAAS,OAAOC,IAAI,SAASC,IAAI,SACzCP,EAAAA,cAACG,EAAAA,EAAG,CAACC,MAAM,EAAOI,UAAU,kBAC1BR,EAAAA,cAACG,EAAAA,EAAG,CAACI,IAAK,CAAEE,SAAU,QAASC,WAAY,YAQ3CV,EAAAA,cAACW,EAAAA,GAAO,CAACL,IAAI,SAASM,OAAQ,CAAEH,SAAU,UACxCT,EAAAA,cAACa,EAAAA,EAAO,CAACD,OAAO,QAAQlB,GACxBM,EAAAA,cAAC3B,EAAc,KAAEsB,GAChBL,EAAMwB,OAAS,GAAKhB,GACnBE,EAAAA,cAACe,EAAAA,GAAa,CAACrB,MAAM,gBAAgBsB,MAAM,UACzChB,EAAAA,cAACiB,EAAAA,GAAc,CAACX,IAAI,QAAQtB,KAAMA,EAAML,QAASA,GAC9CW,EAAM4B,KAAI,CAAAC,EAAWC,KAAO,IAAjB,KAAEC,GAAMF,EAClB,OAAOE,IACJA,EAAKtB,YAAYuB,aAChBD,EAAKtB,YAAYwB,QACnBvB,EAAAA,cAACwB,EAAAA,GAAQ,CAACH,KAAMA,EAAMI,IAAKL,EAAGR,OAAO,cACnCc,CAAS,MAKpBnC,EAAOuB,OAAS,GAAKhB,GACpBE,EAAAA,cAACe,EAAAA,GAAa,CAACrB,MAAM,iBAAiBsB,MAAM,UACzCzB,EAAO2B,KAAIS,IAAe,IAAd,KAAEN,GAAMM,EACnB,OACEN,GACErB,EAAAA,cAAC4B,EAAAA,GAAI,CACHH,IAAKJ,EAAKQ,GACVC,SAAUT,EAAKtB,YAAY+B,SAC3BC,MAAOV,EAAKtB,YAAYgC,MACxBC,QAASX,EAAK1B,gBACdsC,KAAMZ,EAAKtB,YAAYkC,KACvBC,MAAOb,EAAKtB,YAAYmC,MACxBC,MAAM,QAET,OAObnC,EAAAA,cAACG,EAAAA,EAAG,CAACiC,UAAU,SACbpC,EAAAA,cAACqC,EAAAA,GAAU,CACTC,KAAMtC,EAAAA,cAACuC,EAAAA,EAAgB,MACvBC,MAAM,uBACNC,GAAG,iBAMf,C","sources":["webpack://hpe-dev-portal/./src/templates/platform.js"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport { graphql } from 'gatsby';\nimport { Box, Heading } from 'grommet';\nimport { FormPreviousLink } from 'grommet-icons';\nimport {\n  BlogCard,\n  Content,\n  Layout,\n  Markdown,\n  SEO,\n  SectionHeader,\n  ResponsiveGrid,\n  ButtonLink,\n  Card,\n} from '../components';\nimport { useSiteMetadata } from '../hooks/use-site-metadata';\n\n// Remove padding or margin from first markdown element.\n// This allows the heading and content to have the same gap.\nconst MarkdownLayout = styled(Markdown)`\n  max-width: 988px;\n  & > *:first-child {\n    margin-top: 0;\n    padding-top: 0;\n  }\n\n  .button {\n    background-color: rgba(23, 235, 160, 1);\n    box-sizing: border-box;\n    color: #000000;\n    font-size: 18px;\n    display: inline-block;\n    padding: 6px 12px;\n    vertical-align: middle;\n    overflow: hidden;\n    text-decoration: none;\n    text-align: center;\n    cursor: pointer;\n    white-space: nowrap;\n    border-radius: 4px;\n    border: none;\n    margin: 0;\n    line-height: 24px;\n    font-weight: 700;\n  }\n`;\n\nconst columns = {\n  small: ['auto'],\n  medium: ['auto', 'auto'],\n  large: ['auto', 'auto', 'auto', 'auto'],\n  xlarge: ['auto', 'auto', 'auto', 'auto'],\n};\nconst rows = {\n  small: ['auto', 'auto', 'auto'],\n  medium: ['auto', 'auto'],\n  large: ['auto'],\n  xlarge: ['auto'],\n};\n\nfunction PlatformTemplate({ data }) {\n  const post = data.markdownRemark;\n  const { edges: blogs } = data.blogs;\n  const { edges: events } = data.events;\n  const siteMetadata = useSiteMetadata();\n  const siteTitle = siteMetadata.title;\n  const { rawMarkdownBody, excerpt } = post;\n  const { title, description, tags } = post.frontmatter;\n  return (\n    <Layout title={siteTitle}>\n      <SEO title={title} description={description || excerpt} />\n      <Box flex overflow=\"auto\" gap=\"medium\" pad=\"small\">\n        <Box flex={false} direction=\"row-responsive\">\n          <Box pad={{ vertical: 'large', horizontal: 'xlarge' }}>\n            {/* <Image\n                width=\"216px\"\n                height=\"216px\"\n                src={image}\n                alt=\"platform logo\"\n              /> */}\n          </Box>\n          <Content gap=\"medium\" margin={{ vertical: 'large' }}>\n            <Heading margin=\"none\">{title}</Heading>\n            <MarkdownLayout>{rawMarkdownBody}</MarkdownLayout>\n            {blogs.length > 0 && tags && (\n              <SectionHeader title=\"Related Blogs\" color=\"border\">\n                <ResponsiveGrid gap=\"large\" rows={rows} columns={columns}>\n                  {blogs.map(({ node }, i) => {\n                    return node &&\n                      (node.frontmatter.authorimage ||\n                        node.frontmatter.author) ? (\n                      <BlogCard node={node} key={i} margin=\"none\" />\n                    ) : undefined;\n                  })}\n                </ResponsiveGrid>\n              </SectionHeader>\n            )}\n            {events.length > 0 && tags && (\n              <SectionHeader title=\"Related Events\" color=\"border\">\n                {events.map(({ node }) => {\n                  return (\n                    node && (\n                      <Card\n                        key={node.id}\n                        category={node.frontmatter.category}\n                        width={node.frontmatter.width}\n                        content={node.rawMarkdownBody}\n                        link={node.frontmatter.link}\n                        image={node.frontmatter.image}\n                        basis=\"auto\"\n                      />\n                    )\n                  );\n                })}\n              </SectionHeader>\n            )}\n          </Content>\n        </Box>\n        <Box alignSelf=\"start\">\n          <ButtonLink\n            icon={<FormPreviousLink />}\n            label=\"Go to Platforms Page\"\n            to=\"/platforms\"\n          />\n        </Box>\n      </Box>\n    </Layout>\n  );\n}\n\nPlatformTemplate.propTypes = {\n  data: PropTypes.shape({\n    site: PropTypes.shape({\n      siteMetadata: PropTypes.shape({\n        title: PropTypes.string.isRequired,\n      }).isRequired,\n    }).isRequired,\n    markdownRemark: PropTypes.shape({\n      rawMarkdownBody: PropTypes.string.isRequired,\n      excerpt: PropTypes.string,\n      frontmatter: PropTypes.shape({\n        title: PropTypes.string,\n        version: PropTypes.string,\n        description: PropTypes.string,\n        image: PropTypes.string,\n        tags: PropTypes.arrayOf(PropTypes.string),\n      }).isRequired,\n      fields: PropTypes.shape({\n        slug: PropTypes.string.isRequired,\n      }),\n    }).isRequired,\n    blogs: PropTypes.shape({\n      edges: PropTypes.arrayOf(\n        PropTypes.shape({\n          node: PropTypes.shape({\n            frontmatter: PropTypes.shape({\n              title: PropTypes.string.isRequired,\n              author: PropTypes.string,\n              date: PropTypes.string,\n              authorimage: PropTypes.string,\n              externalLink: PropTypes.string,\n            }).isRequired,\n            excerpt: PropTypes.string.isRequired,\n            fields: PropTypes.shape({\n              slug: PropTypes.string.isRequired,\n              sourceInstanceName: PropTypes.string.isRequired,\n            }),\n          }).isRequired,\n        }),\n      ),\n    }),\n    events: PropTypes.shape({\n      edges: PropTypes.arrayOf(\n        PropTypes.shape({\n          node: PropTypes.shape({\n            frontmatter: PropTypes.shape({\n              title: PropTypes.string.isRequired,\n              link: PropTypes.string.isRequired,\n              image: PropTypes.string,\n              category: PropTypes.string,\n            }).isRequired,\n            excerpt: PropTypes.string.isRequired,\n            fields: PropTypes.shape({\n              slug: PropTypes.string.isRequired,\n              sourceInstanceName: PropTypes.string.isRequired,\n            }),\n          }).isRequired,\n        }).isRequired,\n      ).isRequired,\n    }).isRequired,\n    aside: PropTypes.shape({\n      rawMarkdownBody: PropTypes.string.isRequired,\n      excerpt: PropTypes.string,\n      frontmatter: PropTypes.shape({\n        isAside: PropTypes.bool,\n      }),\n    }),\n  }).isRequired,\n};\n\nexport default PlatformTemplate;\n\nexport const pageQuery = graphql`\n  query PlatformBySlug($slug: String!, $tagRE: String!) {\n    site {\n      siteMetadata {\n        title\n        author\n      }\n    }\n    markdownRemark(fields: { slug: { eq: $slug } }) {\n      id\n      excerpt(pruneLength: 160)\n      rawMarkdownBody\n      frontmatter {\n        title\n        version\n        description\n        image\n        tags\n      }\n      fields {\n        slug\n      }\n    }\n    blogs: allMarkdownRemark(\n      limit: 2000\n      sort: { frontmatter: { date: DESC } }\n      filter: {\n        frontmatter: { tags: { regex: $tagRE }, disable: { eq: false } }\n        fields: { sourceInstanceName: { eq: \"blog\" } }\n      }\n    ) {\n      totalCount\n      edges {\n        node {\n          fields {\n            slug\n            sourceInstanceName\n          }\n          frontmatter {\n            title\n            author\n            date\n            authorimage\n            externalLink\n          }\n          excerpt(format: MARKDOWN)\n        }\n      }\n    }\n    events: allMarkdownRemark(\n      limit: 2000\n      sort: { frontmatter: { date: DESC } }\n      filter: {\n        frontmatter: { tags: { regex: $tagRE } }\n        fields: { sourceInstanceName: { eq: \"event\" } }\n        isUpcoming: { eq: true }\n      }\n    ) {\n      totalCount\n      edges {\n        node {\n          id\n          rawMarkdownBody\n          fields {\n            slug\n            sourceInstanceName\n          }\n          excerpt\n          frontmatter {\n            title\n            image\n            category\n            dateEnd\n            link\n            width\n          }\n        }\n      }\n    }\n    aside: markdownRemark(\n      frontmatter: { tags: { regex: $tagRE }, isAside: { eq: true } }\n    ) {\n      id\n      excerpt\n      rawMarkdownBody\n    }\n  }\n`;\n"],"names":["MarkdownLayout","styled","Markdown","withConfig","displayName","componentId","columns","small","medium","large","xlarge","rows","_ref","data","post","markdownRemark","edges","blogs","events","siteTitle","useSiteMetadata","title","rawMarkdownBody","excerpt","description","tags","frontmatter","React","Layout","SEO","Box","flex","overflow","gap","pad","direction","vertical","horizontal","Content","margin","Heading","length","SectionHeader","color","ResponsiveGrid","map","_ref2","i","node","authorimage","author","BlogCard","key","undefined","_ref3","Card","id","category","width","content","link","image","basis","alignSelf","ButtonLink","icon","FormPreviousLink","label","to"],"sourceRoot":""}