{"version":3,"file":"component---src-templates-blog-post-js-cc3dce0921e928d98a84.js","mappings":"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","sources":["webpack://hpe-dev-portal/./src/templates/blog-post.js"],"sourcesContent":["/* eslint-disable max-len */\n/* eslint-disable react/jsx-no-comment-textnodes */\n/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { Location } from '@reach/router';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport { graphql } from 'gatsby';\nimport { Box, Heading, Text, Avatar } from 'grommet';\nimport { FormPreviousLink } from 'grommet-icons';\nimport {remark} from 'remark';\nimport strip from 'strip-markdown';\n\nimport {\n  Content,\n  Layout,\n  Markdown,\n  Link,\n  ButtonLink,\n  SEO,\n  Share,\n  BlogCard,\n  SectionHeader,\n  ResponsiveGrid,\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};\n\nconst rows = {\n  small: ['auto', 'auto', 'auto'],\n  medium: ['auto', 'auto'],\n  large: ['auto'],\n  xlarge: ['auto'],\n};\nconst findThumbnailImage = (thumbnailimage) => {\n  if (thumbnailimage) {\n    const imageURL = thumbnailimage.includes('https://')\n      ? thumbnailimage\n      : `https://developer.hpe.com${thumbnailimage}`;\n    return imageURL;\n  }\n  return null;\n};\n\nconst findFirstImgInBody = (body) => {\n  const foundImageByRegex =\n    /!\\[[^\\]]*\\]\\((?<filename>.*?)(?=\"|\\))(?<optionalpart>\".*\")?\\)/gi.exec(\n      body,\n    ) || /src\\s*=\\s*\"(.+?)\"/gi.exec(body);\n  if (foundImageByRegex) {\n    const imageURL = foundImageByRegex[1].includes('https://')\n      ? foundImageByRegex[1]\n      : `https://developer.hpe.com${foundImageByRegex[1]}`;\n    return imageURL;\n  }\n  return null;\n};\n\nconst stripDescription = (markdown) => {\n  let text = markdown;\n  remark()\n    .use(strip)\n    .process(markdown, (err, file) => {\n      text = file.contents;\n    });\n  return text?.trim();\n};\n\nfunction BlogPostTemplate({ data }) {\n  const { post } = data;\n  const blogsByTags = data.blogsByTags.edges;\n  const siteMetadata = useSiteMetadata();\n  const { siteTitle, siteUrl } = siteMetadata;\n  const dateFormat = Intl.DateTimeFormat('default', {\n    year: 'numeric',\n    month: 'long',\n    day: 'numeric',\n  });\n  const { rawMarkdownBody, excerpt } = post;\n  const {\n    description,\n    date,\n    title,\n    author,\n    tags,\n    authorimage,\n    thumbnailimage,\n  } = post.frontmatter;\n  const ids = [];\n  const node = [];\n  let count = 0;\n  tags?.forEach((tag) => {\n    blogsByTags?.forEach((n) => {\n      if (\n        n.node.frontmatter.tags.includes(tag) &&\n        count < 8 &&\n        !ids.includes(n.node.id) &&\n        post.id !== n.node.id &&\n        n.node.frontmatter.authorimage &&\n        n.node.frontmatter.author\n      ) {\n        count += 1;\n        ids.push(n.node.id);\n        node.push(n.node);\n      }\n    });\n  });\n  const blogCards = ids.map((item, i) => (\n    <BlogCard key={item} node={node[i]} />\n  ));\n\n  return (\n    <Layout title={siteTitle}>\n      <SEO\n        title={title}\n        description={stripDescription(description || excerpt)}\n        image={\n          findThumbnailImage(thumbnailimage) ||\n          findFirstImgInBody(rawMarkdownBody)\n        }\n      />\n      <Box flex overflow=\"auto\" gap=\"medium\" pad=\"small\">\n        <Box direction=\"row-responsive\">\n          <Box pad={{ vertical: 'large', horizontal: 'medium' }} align=\"center\">\n            <Box height=\"192px\" width=\"192px\">\n              <Avatar size=\"120px\" src={authorimage} alt=\"author logo\" />\n            </Box>\n          </Box>\n          <Content gap=\"large\" margin={{ vertical: 'large', right: '74px' }}>\n            <Box gap=\"small\">\n              <Text size=\"xlarge\" weight={500}>\n                {author}\n              </Text>\n              <Heading margin=\"none\">{title}</Heading>\n              <Text size=\"xlarge\">{dateFormat.format(new Date(date))}</Text>\n              <Location>\n                {({ location }) => {\n                  return (\n                    <Share\n                      url={`${siteUrl}${location.pathname}`}\n                      text={title}\n                    />\n                  );\n                }}\n              </Location>\n            </Box>\n            <MarkdownLayout>{rawMarkdownBody}</MarkdownLayout>\n            {tags && (\n              <Box align=\"baseline\" gap=\"small\">\n                <Heading level={2} margin={{ vertical: 'none' }}>\n                  Tags\n                </Heading>\n                <Box\n                  direction=\"row-responsive\"\n                  align=\"baseline\"\n                  style={{ display: 'inline-block' }}\n                >\n                  {tags.map((tag, index) => (\n                    <Link\n                      to={`/blog/tag/${tag.toLowerCase().trim()}`}\n                      key={tag}\n                      size=\"xxlarge\"\n                    >\n                      {tag + (index !== tags.length - 1 ? ',' : '')}\n                    </Link>\n                  ))}\n                </Box>\n              </Box>\n            )}\n            <SectionHeader title=\"Related\" color=\"border\">\n              <ResponsiveGrid gap=\"large\" rows={rows} columns={columns}>\n                {/* {blogsByTags.map((blogPost) =>\n                  blogPost.url !== '/' &&\n                  (blogPost.node.frontmatter.authorimage ||\n                    blogPost.node.frontmatter.author) ? (\n\n                    <BlogCard key={blogPost.node.id} node={blogPost.node} />\n                  ) : undefined,\n                )} */}\n                {blogCards}\n              </ResponsiveGrid>\n            </SectionHeader>\n          </Content>\n        </Box>\n        <Box alignSelf=\"start\">\n          <ButtonLink\n            icon={<FormPreviousLink />}\n            label=\"Go to Blog Page\"\n            to=\"/blog\"\n          />\n        </Box>\n      </Box>\n    </Layout>\n  );\n}\n\nBlogPostTemplate.propTypes = {\n  data: PropTypes.shape({\n    site: PropTypes.shape({\n      siteMetadata: PropTypes.shape({\n        title: PropTypes.string.isRequired,\n      }).isRequired,\n    }).isRequired,\n    post: PropTypes.shape({\n      rawMarkdownBody: PropTypes.string.isRequired,\n      excerpt: PropTypes.string,\n      html: PropTypes.string.isRequired,\n      frontmatter: PropTypes.shape({\n        title: PropTypes.string,\n        author: PropTypes.string,\n        date: PropTypes.string,\n        description: PropTypes.string,\n        tags: PropTypes.arrayOf(PropTypes.string),\n        authorimage: PropTypes.string.isRequired,\n        thumbnailimage: PropTypes.string,\n      }).isRequired,\n    }).isRequired,\n    blogsByTags: PropTypes.shape({\n      edges: PropTypes.arrayOf(\n        PropTypes.shape({\n          node: PropTypes.shape({\n            id: PropTypes.string.isRequired,\n            frontmatter: PropTypes.shape({\n              title: PropTypes.string.isRequired,\n              author: PropTypes.string.isRequired,\n              date: PropTypes.string,\n              tags: PropTypes.array,\n              authorimage: PropTypes.string.isRequired,\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  }).isRequired,\n};\n\nexport default BlogPostTemplate;\n\nexport const pageQuery = graphql`\n  query BlogPostBySlug($slug: String!, $tagRE: String!) {\n    site {\n      siteMetadata {\n        title\n        author\n      }\n    }\n    post: markdownRemark(fields: { slug: { eq: $slug } }) {\n      id\n      excerpt(format: MARKDOWN, pruneLength: 160)\n      html\n      rawMarkdownBody\n      frontmatter {\n        title\n        date(formatString: \"MMMM DD, YYYY\")\n        author\n        description\n        tags\n        authorimage\n        thumbnailimage\n      }\n    }\n\n    blogsByTags: allMarkdownRemark(\n      filter: {\n        fields: { sourceInstanceName: { eq: \"blog\" } }\n        frontmatter: { tags: { regex: $tagRE }, disable: { ne: true } }\n      }\n    ) {\n      edges {\n        node {\n          id\n          fields {\n            slug\n            sourceInstanceName\n          }\n          excerpt(format: MARKDOWN)\n          frontmatter {\n            title\n            date\n            author\n            tags\n            authorimage\n            thumbnailimage\n            disable\n            externalLink\n          }\n          rawMarkdownBody\n        }\n      }\n    }\n  }\n`;\n"],"names":["MarkdownLayout","styled","Markdown","withConfig","displayName","componentId","columns","small","medium","large","xlarge","rows","findThumbnailImage","thumbnailimage","includes","findFirstImgInBody","body","foundImageByRegex","exec","stripDescription","markdown","_text","text","remark","use","strip","process","err","file","contents","trim","_ref","data","post","blogsByTags","edges","siteMetadata","useSiteMetadata","siteTitle","siteUrl","dateFormat","Intl","DateTimeFormat","year","month","day","rawMarkdownBody","excerpt","description","date","title","author","tags","authorimage","frontmatter","ids","node","count","forEach","tag","n","id","push","blogCards","map","item","i","React","BlogCard","key","Layout","SEO","image","Box","flex","overflow","gap","pad","direction","vertical","horizontal","align","height","width","Avatar","size","src","alt","Content","margin","right","Text","weight","Heading","format","Date","Location","_ref2","location","Share","url","pathname","level","style","display","index","Link","to","toLowerCase","length","SectionHeader","color","ResponsiveGrid","alignSelf","ButtonLink","icon","FormPreviousLink","label"],"sourceRoot":""}