{"version":3,"file":"component---src-templates-role-js-358ccbce510002f08f86.js","mappings":"yNAoBA,MAAMA,GAAiBC,EAAAA,EAAAA,SAAOC,EAAAA,IAASC,WAAA,CAAAC,YAAA,uBAAAC,YAAA,gBAAhBJ,CAAgB,oEAQjCK,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,SA0FX,UAvFA,SAAqBE,GAAY,IAAX,KAAEC,GAAMD,EAC5B,MAAME,EAAOD,EAAKE,gBACVC,MAAOC,GAAUJ,EAAKI,MAExBC,GADeC,EAAAA,EAAAA,KACUC,OACzB,gBAAEC,GAAoBP,GACtB,MAAEM,EAAK,MAAEE,GAAUR,EAAKS,YAE9B,OACEC,EAAAA,cAACC,EAAAA,GAAM,CAACL,MAAOF,GACbM,EAAAA,cAACE,EAAAA,GAAG,CAACN,MAAOA,IACZI,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,UACzCV,EAAAA,cAACW,EAAAA,EAAK,CACJC,MAAM,QACNC,OAAO,QACPC,IAAKhB,EACLiB,IAAI,2BAGRf,EAAAA,cAACgB,EAAAA,GAAO,CAACV,IAAI,SAASW,OAAQ,CAAER,SAAU,UACxCT,EAAAA,cAACkB,EAAAA,EAAO,CAACD,OAAO,QAAQrB,GACxBI,EAAAA,cAACxB,EAAc,KAAEqB,GAChBJ,EAAM0B,OAAS,GACdnB,EAAAA,cAACoB,EAAAA,GAAa,CAACxB,MAAM,8BAA8ByB,MAAM,UACvDrB,EAAAA,cAACsB,EAAAA,GAAc,CAAChB,IAAI,QAAQnB,KAAMA,EAAML,QAASA,GAC9CW,EAAM8B,KAAI,CAAAC,EAAWC,KAAO,IAAjB,KAAEC,GAAMF,EAClB,OAAOE,IACJA,EAAK3B,YAAY4B,aAChBD,EAAK3B,YAAY6B,QACnB5B,EAAAA,cAAC6B,EAAAA,GAAQ,CAACH,KAAMA,EAAMI,IAAKL,EAAGR,OAAO,cACnCc,CAAS,QAOzB/B,EAAAA,cAACG,EAAAA,EAAG,CAAC6B,UAAU,SACbhC,EAAAA,cAACiC,EAAAA,GAAU,CACTC,KAAMlC,EAAAA,cAACmC,EAAAA,EAAgB,MACvBC,MAAM,iBACNC,GAAG,YAMf,C","sources":["webpack://hpe-dev-portal/./src/templates/role.js"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport { graphql } from 'gatsby';\nimport { Box, Heading, Image } from 'grommet';\nimport { FormPreviousLink } from 'grommet-icons';\nimport {\n  Content,\n  Layout,\n  Markdown,\n  SEO,\n  ButtonLink,\n  SectionHeader,\n  ResponsiveGrid,\n  BlogCard,\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\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 RoleTemplate({ data }) {\n  const post = data.markdownRemark;\n  const { edges: blogs } = data.blogs;\n  const siteMetadata = useSiteMetadata();\n  const siteTitle = siteMetadata.title;\n  const { rawMarkdownBody } = post;\n  const { title, image } = post.frontmatter;\n\n  return (\n    <Layout title={siteTitle}>\n      <SEO title={title} />\n      <Box flex overflow=\"auto\" gap=\"medium\" pad=\"small\">\n        <Box flex={false} direction=\"row-responsive\">\n          <Box pad={{ vertical: 'large', horizontal: 'large' }}>\n            <Image\n              width=\"216px\"\n              height=\"216px\"\n              src={image}\n              alt=\"what's your role 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 && (\n              <SectionHeader title=\"Blog articles and tutorials\" 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          </Content>\n        </Box>\n        <Box alignSelf=\"start\">\n          <ButtonLink\n            icon={<FormPreviousLink />}\n            label=\"Your Role Page\"\n            to=\"/role\"\n          />\n        </Box>\n      </Box>\n    </Layout>\n  );\n}\n\nRoleTemplate.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      frontmatter: PropTypes.shape({\n        title: PropTypes.string,\n        image: PropTypes.string,\n      }).isRequired,\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            }).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  }).isRequired,\n};\n\nexport default RoleTemplate;\n\nexport const pageQuery = graphql`\nquery RoleBySlug($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    }\n    fields {\n      slug\n    }\n  }\n  blogs: allMarkdownRemark(\n    limit: 2000\n    sort: {frontmatter: {date: DESC}}\n    filter: {frontmatter: {tags: {regex: $tagRE}}, fields: {sourceInstanceName: {eq: \"blog\"}}}\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        }\n        excerpt(format: MARKDOWN)\n      }\n    }\n  }\n  aside: markdownRemark(frontmatter: {tags: {regex: $tagRE}, isAside: {eq: true}}) {\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","siteTitle","useSiteMetadata","title","rawMarkdownBody","image","frontmatter","React","Layout","SEO","Box","flex","overflow","gap","pad","direction","vertical","horizontal","Image","width","height","src","alt","Content","margin","Heading","length","SectionHeader","color","ResponsiveGrid","map","_ref2","i","node","authorimage","author","BlogCard","key","undefined","alignSelf","ButtonLink","icon","FormPreviousLink","label","to"],"sourceRoot":""}