component---src-templates-post-tsx-18370c60157203c6352a.js.map

{"version":3,"sources":["webpack:///./src/components/AuthorCard.tsx","webpack:///./src/components/PostFullFooter.tsx","webpack:///./src/components/PostFullFooterRight.tsx","webpack:///./src/components/icons/infinity.tsx","webpack:///./src/components/ReadNextCard.tsx","webpack:///./src/templates/post.tsx","webpack:///./src/components/PostCard.tsx","webpack:///./src/components/PostContent.tsx","webpack:///./src/components/subscribe/Subscribe.tsx"],"names":["AuthorCardSection","Object","styled_base_browser_esm","target","name","styles","AuthorCardName","colors","darkgrey","AuthorCardContent","midgrey","AuthorCard","_ref","author","core_browser_esm","css","AuthorProfileImage","src","avatar","children","fixed","alt","id","gatsby_browser_entry","to","_","bio","PostFullFoot","PostFullFooter","props","PostFullFooterRightDiv","AuthorCardButton","lighten","blue","PostFullFooterRight","authorId","InfinityIcon","xmlns","viewBox","d","ReadNextCardStyles","coverImage","ReadNextCardHeader","ReadNextCardHeaderSitetitle","ReadNextCardHeaderTitle","ReadNextDivider","ReadNextCardContent","ReadNextCardFooter","ReadNextCard","query","render","header","childImageSharp","fluid","config","title","tags","infinity","relatedPosts","edges","map","n","key","node","frontmatter","fields","slug","totalCount","data","_1676377518","PostTemplate","PostFull","NoImage","PostFullHeader","PostFullMeta","PostFullMetaDate","PostFullTitle","setLightness","PostFullImage","lightgrey","DateDivider","ReadNextFeed","PageTemplate","post","markdownRemark","width","height","image","sizes","split","String","Number","aspectRatio","layouts","className","Helmet","lang","content","excerpt","property","siteUrl","pathContext","date","facebook","twitter","Wrapper","css_browser_esm","outer","SiteHeader","inner","SiteNav","SiteMain","dateTime","userDate","length","react","gatsby_image_default","a","style","PostContent","htmlAst","showSubscribe","Subscribe","components_PostFullFooter","components_AuthorCard","components_PostFullFooterRight","components_ReadNextCard","pageContext","prev","PostCard","next","Footer","PostCardStyles","PostCardImageLink","PostCardImage","_emotion_styled_base__WEBPACK_IMPORTED_MODULE_1__","PostCardContent","PostCardContentLink","PostCardTags","PostCardTitle","PostCardExcerpt","PostCardMeta","AuthorList","AuthorListItem","AuthorNameTooltip","StaticAvatar","ReadingTime","_emotion_core__WEBPACK_IMPORTED_MODULE_2__","gatsby__WEBPACK_IMPORTED_MODULE_3__","gatsby_image__WEBPACK_IMPORTED_MODULE_4___default","timeToRead","PostFullContent","darken","whitegrey","setSaturation","renderAst","RehypeReact","createElement","React","components","Compiler","Ast","ast","_babel_runtime_helpers_objectWithoutPropertiesLoose__WEBPACK_IMPORTED_MODULE_0___default","properties","_ref2","SubscribeFormSection","_emotion_styled_base__WEBPACK_IMPORTED_MODULE_0__","SubscribeFormTitle","_emotion_core__WEBPACK_IMPORTED_MODULE_1__","_SubscribeForm__WEBPACK_IMPORTED_MODULE_5__"],"mappings":"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","file":"component---src-templates-post-tsx-18370c60157203c6352a.js","sourcesContent":["import { Link } from 'gatsby';\nimport * as _ from 'lodash';\nimport * as React from 'react';\nimport styled from '@emotion/styled';\n\nimport { colors } from '../styles/colors';\nimport { AuthorProfileImage } from '../styles/shared';\n\nconst AuthorCardSection = styled.section`\n  display: flex;\n`;\n\nconst AuthorCardName = styled.h4`\n  margin: 8px 0 2px 0;\n  padding: 0;\n  font-size: 2rem;\n\n  a {\n    color: ${colors.darkgrey};\n    font-weight: 700;\n  }\n\n  a:hover {\n    text-decoration: none;\n  }\n`;\n\nconst AuthorCardContent = styled.section`\n  p {\n    margin: 0;\n    color: ${colors.midgrey};\n    line-height: 1.3em;\n  }\n`;\n\nexport interface AuthorCardProps {\n  author: any;\n}\n\nconst AuthorCard: React.FC<AuthorCardProps> = ({ author }) => {\n  return (\n    <AuthorCardSection>\n      {/* TODO: default avatar */}\n      {/* TODO: author page url */}\n      <img css={AuthorProfileImage} src={author.avatar.children[0].fixed.src} alt={author.id} />\n      <AuthorCardContent>\n        <AuthorCardName>\n          <Link to={`/author/${_.kebabCase(author.id)}/`}>{author.id}</Link>\n        </AuthorCardName>\n        {author.bio ? (\n          <p>{author.bio}</p>\n        ) : (\n          <p>\n            Read <Link to={`/author/${_.kebabCase(author.id)}/`}>more posts</Link> by this author.\n          </p>\n        )}\n      </AuthorCardContent>\n    </AuthorCardSection>\n  );\n};\n\nexport default AuthorCard;\n","import * as React from 'react';\nimport styled from '@emotion/styled';\n\nconst PostFullFoot = styled.footer`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin: 0 auto;\n  padding: 3vw 0 6vw 0;\n  max-width: 840px;\n`;\n\nconst PostFullFooter: React.FC = props => <PostFullFoot>{props.children}</PostFullFoot>;\n\nexport default PostFullFooter;\n","import { Link } from 'gatsby';\nimport * as _ from 'lodash';\nimport * as React from 'react';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/core';\nimport { lighten } from 'polished';\n\nimport { colors } from '../styles/colors';\n\nconst PostFullFooterRightDiv = styled.div`\n  flex-shrink: 0;\n  margin-left: 20px;\n`;\n\nconst AuthorCardButton = css`\n  display: block;\n  padding: 9px 16px;\n  /* border: color(var(--midgrey) l(+20%)) 1px solid; */\n  border: ${lighten('0.2', colors.midgrey)} 1px solid;\n  color: ${colors.midgrey};\n  font-size: 1.2rem;\n  line-height: 1;\n  font-weight: 500;\n  border-radius: 20px;\n  transition: all ease 0.2s;\n\n  :hover {\n    border-color: ${colors.blue};\n    color: ${colors.blue};\n    text-decoration: none;\n  }\n`;\n\nexport interface PostFullFooterRightProps {\n  authorId: string;\n}\n\nconst PostFullFooterRight: React.FC<PostFullFooterRightProps> = props => (\n  <PostFullFooterRightDiv>\n    <Link css={AuthorCardButton} to={`/author/${_.kebabCase(props.authorId)}/`}>\n      Read More\n    </Link>\n  </PostFullFooterRightDiv>\n);\n\nexport default PostFullFooterRight;\n","// tslint:disable:no-http-string\nimport * as React from 'react';\n\nconst InfinityIcon: React.FC = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n    <path d=\"M13 14.5s2 3 5 3 5.5-2.463 5.5-5.5S21 6.5 18 6.5c-5 0-7 11-12 11C2.962 17.5.5 15.037.5 12S3 6.5 6 6.5s4.5 3.5 4.5 3.5\" />\n  </svg>\n);\nexport default InfinityIcon;\n","import { Link, StaticQuery, graphql } from 'gatsby';\nimport * as React from 'react';\nimport styled from '@emotion/styled';\nimport * as _ from 'lodash';\n\nimport { colors } from '../styles/colors';\nimport InfinityIcon from './icons/infinity';\nimport config from '../website-config';\n\nexport interface ReadNextCardStylesProps {\n  coverImage: string;\n}\n\nconst ReadNextCardStyles = styled.article<ReadNextCardStylesProps>`\n  position: relative;\n  flex: 1 1 300px;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  margin: 0 20px 40px;\n  padding: 25px;\n  color: #fff;\n  background: ${colors.darkgrey} center center;\n  background-size: cover;\n  border-radius: 5px;\n  box-shadow: rgba(39, 44, 49, 0.06) 8px 14px 38px, rgba(39, 44, 49, 0.03) 1px 3px 8px;\n  background-image: url(${props => props.coverImage});\n\n  :before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    display: block;\n    background: linear-gradient(135deg, rgba(0,40,60,0.8) 0%,rgba(0,20,40,0.7) 100%);\n    border-radius: 5px;\n    backdrop-filter: blur(2px);\n  }\n`;\n\nconst ReadNextCardHeader = styled.header`\n  position: relative;\n  z-index: 50;\n  padding-top: 20px;\n  text-align: center;\n`;\n\nconst ReadNextCardHeaderSitetitle = styled.small`\n  display: block;\n  font-size: 1.3rem;\n  line-height: 1.3em;\n  opacity: 0.8;\n`;\n\nconst ReadNextCardHeaderTitle = styled.h3`\n  margin: 0;\n  padding: 0 20px;\n  color: #fff;\n  font-size: 3rem;\n  line-height: 1.2em;\n  letter-spacing: 1px;\n\n  a {\n    color: #fff;\n    font-weight: 300;\n    text-decoration: none;\n  }\n\n  a:hover {\n    text-decoration: none;\n  }\n`;\n\nconst ReadNextDivider = styled.div`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  height: 80px;\n\n  svg {\n    width: 40px;\n    fill: transparent;\n    stroke: #fff;\n\n    stroke-width: 0.5px;\n    stroke-opacity: 0.65;\n  }\n`;\n\nconst ReadNextCardContent = styled.div`\n  position: relative;\n  z-index: 50;\n  flex-grow: 1;\n  display: flex;\n  font-size: 1.7rem;\n\n  ul {\n    display: flex;\n    flex-direction: column;\n    margin: 0 auto;\n    padding: 0;\n    text-align: center;\n    list-style: none;\n  }\n\n  li {\n    margin: 0;\n    padding: 0;\n    font-size: 1.6rem;\n    line-height: 1.25em;\n    font-weight: 200;\n    letter-spacing: -0.5px;\n  }\n\n  li a {\n    display: block;\n    padding: 20px 0;\n    border-bottom: rgba(255, 255, 255, 0.3) 1px solid;\n    color: #fff;\n    font-weight: 500;\n    vertical-align: top;\n    transition: opacity 0.3s ease;\n  }\n\n  li:first-of-type a {\n    padding-top: 10px;\n  }\n\n  li a:hover {\n    opacity: 1;\n  }\n`;\n\nconst ReadNextCardFooter = styled.footer`\n  position: relative;\n  margin: 15px 0 3px 0;\n  text-align: center;\n\n  a {\n    color: #fff;\n  }\n`;\n\nexport interface ReadNextProps {\n  tags: string[];\n  relatedPosts: {\n    totalCount: number;\n    edges: Array<{\n      node: {\n        timeToRead: number;\n        frontmatter: {\n          title: string;\n        };\n        fields: {\n          slug: string;\n        };\n      };\n    }>;\n  };\n}\n\nexport interface ReadNextQuery {\n  header: {\n    childImageSharp: {\n      fluid: any;\n    };\n  };\n}\n\nconst ReadNextCard: React.FC<ReadNextProps> = props => {\n  return (\n    <StaticQuery\n      query={graphql`\n        query ReadNextQuery {\n          header: file(relativePath: { eq: \"img/blog-cover.jpg\" }) {\n            childImageSharp {\n              # Specify the image processing specifications right in the query.\n              # Makes it trivial to update as your page's design changes.\n              fluid(maxWidth: 2000) {\n                ...GatsbyImageSharpFluid\n              }\n            }\n          }\n        }\n      `}\n      // tslint:disable-next-line:react-this-binding-issue\n      render={({ header }: ReadNextQuery) => (\n        <ReadNextCardStyles coverImage={header.childImageSharp.fluid.src}>\n          <ReadNextCardHeader>\n            <ReadNextCardHeaderSitetitle>\n              &mdash; {config.title} &mdash;\n            </ReadNextCardHeaderSitetitle>\n            <ReadNextCardHeaderTitle>\n              <Link to={`/tags/${_.kebabCase(props.tags[0])}/`}>{props.tags[0]}</Link>\n            </ReadNextCardHeaderTitle>\n          </ReadNextCardHeader>\n          <ReadNextDivider>\n            <InfinityIcon />\n          </ReadNextDivider>\n          <ReadNextCardContent>\n            <ul>\n              {props.relatedPosts.edges.map(n => {\n                return (\n                  <li key={n.node.frontmatter.title}>\n                    <Link to={n.node.fields.slug}>{n.node.frontmatter.title}</Link>\n                  </li>\n                );\n              })}\n            </ul>\n          </ReadNextCardContent>\n          <ReadNextCardFooter>\n            <Link to={`/tags/${_.kebabCase(props.tags[0])}/`}>\n              {props.relatedPosts.totalCount > 1 &&\n                `See all ${props.relatedPosts.totalCount} posts`}\n              {props.relatedPosts.totalCount === 1 && '1 post'}\n              {props.relatedPosts.totalCount === 0 && 'No posts'} →\n            </Link>\n          </ReadNextCardFooter>\n        </ReadNextCardStyles>\n      )}\n    />\n  );\n};\n\nexport default ReadNextCard;\n","import { graphql, Link } from 'gatsby';\nimport Img from 'gatsby-image';\nimport * as _ from 'lodash';\nimport { setLightness } from 'polished';\nimport * as React from 'react';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/core';\nimport { Helmet } from 'react-helmet';\n\nimport AuthorCard from '../components/AuthorCard';\nimport Footer from '../components/Footer';\nimport SiteNav from '../components/header/SiteNav';\nimport PostCard from '../components/PostCard';\nimport PostContent from '../components/PostContent';\nimport PostFullFooter from '../components/PostFullFooter';\nimport PostFullFooterRight from '../components/PostFullFooterRight';\nimport ReadNextCard from '../components/ReadNextCard';\nimport Subscribe from '../components/subscribe/Subscribe';\nimport Wrapper from '../components/Wrapper';\nimport IndexLayout from '../layouts';\nimport { colors } from '../styles/colors';\nimport { inner, outer, SiteHeader, SiteMain } from '../styles/shared';\nimport config from '../website-config';\n\nconst PostTemplate = css`\n  .site-main {\n    background: #fff;\n    padding-bottom: 4vw;\n  }\n  .gatsby-resp-image-figcaption {\n    font-size: 65%;\n    background: #fec;\n    line-height: 120%;\n    padding: 5px;\n    font-family: sans-serif;\n  }\n  @media (min-width: 768px) {\n    .gatsby-resp-image-figcaption {\n      text-align: center;\n    }\n  }\n`;\n\nexport const PostFull = css`\n  position: relative;\n  z-index: 50;\n`;\n\nexport const NoImage = css`\n  .post-full-content {\n    padding-top: 0;\n  }\n\n  .post-full-content:before,\n  .post-full-content:after {\n    display: none;\n  }\n`;\n\nexport const PostFullHeader = styled.header`\n  margin: 0 auto;\n  padding: 3vw 3vw 3vw;\n  max-width: 1040px;\n  text-align: center;\n\n  @media (max-width: 500px) {\n    padding: 14vw 3vw 10vw;\n  }\n`;\n\nconst PostFullMeta = styled.section`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: ${colors.midgrey};\n  font-size: 1.4rem;\n  font-weight: 600;\n  text-transform: uppercase;\n\n  @media (max-width: 500px) {\n    font-size: 1.2rem;\n    line-height: 1.3em;\n  }\n`;\n\nconst PostFullMetaDate = styled.time`\n  color: ${colors.blue};\n`;\n\nexport const PostFullTitle = styled.h1`\n  margin: 0;\n  color: ${setLightness('0.05', colors.darkgrey)};\n  @media (max-width: 500px) {\n    font-size: 2.9rem;\n  }\n`;\n\nconst PostFullImage = styled.figure`\n  margin: 0 -10vw -165px;\n  height: 400px;\n  background: ${colors.lightgrey} center center;\n  background-size: cover;\n  border-radius: 5px;\n\n  @media (max-width: 1170px) {\n    margin: 0 -4vw -100px;\n    height: 600px;\n    border-radius: 0;\n  }\n\n  @media (max-width: 800px) {\n    height: 400px;\n  }\n  @media (max-width: 500px) {\n    margin-bottom: 4vw;\n    height: 350px;\n  }\n`;\n\nconst DateDivider = styled.span`\n  display: inline-block;\n  margin: 0 6px 1px;\n`;\n\nconst ReadNextFeed = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0 -20px;\n  padding: 40px 0 0 0;\n`;\n\ninterface PageTemplateProps {\n  pathContext: {\n    slug: string;\n  };\n  data: {\n    logo: {\n      childImageSharp: {\n        fixed: any;\n      };\n    };\n    markdownRemark: {\n      html: string;\n      htmlAst: any;\n      excerpt: string;\n      timeToRead: string;\n      frontmatter: {\n        title: string;\n        date: string;\n        userDate: string;\n        image: {\n          childImageSharp: {\n            fluid: any;\n          };\n        };\n        tags: string[];\n        author: {\n          id: string;\n          bio: string;\n          avatar: {\n            children: Array<{\n              fixed: {\n                src: string;\n              };\n            }>;\n          };\n        };\n      };\n    };\n    relatedPosts: {\n      totalCount: number;\n      edges: Array<{\n        node: {\n          timeToRead: number;\n          frontmatter: {\n            title: string;\n          };\n          fields: {\n            slug: string;\n          };\n        };\n      }>;\n    };\n  };\n  pageContext: {\n    prev: PageContext;\n    next: PageContext;\n  };\n}\n\nexport interface PageContext {\n  excerpt: string;\n  timeToRead: number;\n  fields: {\n    slug: string;\n  };\n  frontmatter: {\n    image: {\n      childImageSharp: {\n        fluid: any;\n      };\n    };\n    title: string;\n    date: string;\n    draft?: boolean;\n    tags: string[];\n    author: {\n      id: string;\n      bio: string;\n      avatar: {\n        children: Array<{\n          fixed: {\n            src: string;\n          };\n        }>;\n      };\n    };\n  };\n}\n\nconst PageTemplate: React.FC<PageTemplateProps> = props => {\n  const post = props.data.markdownRemark;\n  let width = '';\n  let height = '';\n  if (post.frontmatter.image && post.frontmatter.image.childImageSharp) {\n    width = post.frontmatter.image.childImageSharp.fluid.sizes.split(', ')[1].split('px')[0];\n    height = String(Number(width) / post.frontmatter.image.childImageSharp.fluid.aspectRatio);\n  }\n\n  return (\n    <IndexLayout className=\"post-template\">\n      <Helmet>\n        <html lang={config.lang} />\n        <title>{post.frontmatter.title}</title>\n\n        <meta name=\"description\" content={post.excerpt} />\n        <meta property=\"og:site_name\" content={config.title} />\n        <meta property=\"og:type\" content=\"article\" />\n        <meta property=\"og:title\" content={post.frontmatter.title} />\n        <meta property=\"og:description\" content={post.excerpt} />\n        <meta property=\"og:url\" content={config.siteUrl + props.pathContext.slug} />\n        {(post.frontmatter.image && post.frontmatter.image.childImageSharp) && (\n          <meta property=\"og:image\" content={`${config.siteUrl}${post.frontmatter.image.childImageSharp.fluid.src}`} />\n        )}\n        <meta property=\"article:published_time\" content={post.frontmatter.date} />\n        {/* not sure if modified time possible */}\n        {/* <meta property=\"article:modified_time\" content=\"2018-08-20T15:12:00.000Z\" /> */}\n        {post.frontmatter.tags && (\n          <meta property=\"article:tag\" content={post.frontmatter.tags[0]} />\n        )}\n\n        {config.facebook && <meta property=\"article:publisher\" content={config.facebook} />}\n        {config.facebook && <meta property=\"article:author\" content={config.facebook} />}\n        <meta name=\"twitter:card\" content=\"summary_large_image\" />\n        <meta name=\"twitter:title\" content={post.frontmatter.title} />\n        <meta name=\"twitter:description\" content={post.excerpt} />\n        <meta name=\"twitter:url\" content={config.siteUrl + props.pathContext.slug} />\n        {(post.frontmatter.image && post.frontmatter.image.childImageSharp) && (\n          <meta name=\"twitter:image\" content={`${config.siteUrl}${post.frontmatter.image.childImageSharp.fluid.src}`} />\n        )}\n        <meta name=\"twitter:label1\" content=\"Written by\" />\n        <meta name=\"twitter:data1\" content={post.frontmatter.author.id} />\n        <meta name=\"twitter:label2\" content=\"Filed under\" />\n        {post.frontmatter.tags && <meta name=\"twitter:data2\" content={post.frontmatter.tags[0]} />}\n        {config.twitter && <meta name=\"twitter:site\" content={`@${config.twitter.split('https://twitter.com/')[1]}`} />}\n        {config.twitter && <meta\n          name=\"twitter:creator\"\n          content={`@${config.twitter.split('https://twitter.com/')[1]}`}\n        />}\n        {width && <meta property=\"og:image:width\" content={width} />}\n        {height && <meta property=\"og:image:height\" content={height} />}\n      </Helmet>\n      <Wrapper css={PostTemplate}>\n        <header css={[outer, SiteHeader]}>\n          <div css={inner}>\n            <SiteNav />\n          </div>\n        </header>\n        <main id=\"site-main\" className=\"site-main\" css={[SiteMain, outer]}>\n          <div css={inner}>\n            {/* TODO: no-image css tag? */}\n            <article css={[PostFull, !post.frontmatter.image && NoImage]}>\n              <PostFullHeader>\n                <PostFullMeta>\n                  <PostFullMetaDate dateTime={post.frontmatter.date}>\n                    {post.frontmatter.userDate}\n                  </PostFullMetaDate>\n                  {post.frontmatter.tags &&\n                    post.frontmatter.tags.length > 0 && (\n                      <>\n                        <DateDivider>/</DateDivider>\n                        <Link to={`/tags/${_.kebabCase(post.frontmatter.tags[0])}/`}>\n                          {post.frontmatter.tags[0]}\n                        </Link>\n                      </>\n                  )}\n                </PostFullMeta>\n                <PostFullTitle>{post.frontmatter.title}</PostFullTitle>\n              </PostFullHeader>\n\n              {(post.frontmatter.image && post.frontmatter.image.childImageSharp) && (\n                <PostFullImage>\n                  <Img\n                    style={{ height: '100%' }}\n                    fluid={post.frontmatter.image.childImageSharp.fluid}\n                  />\n                </PostFullImage>\n              )}\n              <PostContent htmlAst={post.htmlAst} />\n\n              {/* The big email subscribe modal content */}\n              {config.showSubscribe && <Subscribe title={config.title} />}\n\n              <PostFullFooter>\n                <AuthorCard author={post.frontmatter.author} />\n                <PostFullFooterRight authorId={post.frontmatter.author.id} />\n              </PostFullFooter>\n            </article>\n          </div>\n        </main>\n\n        {/* Links to Previous/Next posts */}\n        <aside className=\"read-next\" css={outer}>\n          <div css={inner}>\n            <ReadNextFeed>\n              {props.data.relatedPosts && (\n                <ReadNextCard tags={post.frontmatter.tags} relatedPosts={props.data.relatedPosts} />\n              )}\n\n              {props.pageContext.prev && <PostCard post={props.pageContext.prev} />}\n              {props.pageContext.next && <PostCard post={props.pageContext.next} />}\n            </ReadNextFeed>\n          </div>\n        </aside>\n        <Footer />\n      </Wrapper>\n    </IndexLayout>\n  );\n};\n\nexport default PageTemplate;\n\nexport const query = graphql`\n  query($slug: String, $primaryTag: String) {\n    logo: file(relativePath: { eq: \"img/ghost-logo.png\" }) {\n      childImageSharp {\n        fixed {\n          ...GatsbyImageSharpFixed\n        }\n      }\n    }\n    markdownRemark(fields: { slug: { eq: $slug } }) {\n      html\n      htmlAst\n      excerpt\n      timeToRead\n      frontmatter {\n        title\n        userDate: date(formatString: \"D MMMM YYYY\")\n        date\n        tags\n        image {\n          childImageSharp {\n            fluid(maxWidth: 3720) {\n              ...GatsbyImageSharpFluid\n            }\n          }\n        }\n        author {\n          id\n          bio\n          avatar {\n            children {\n              ... on ImageSharp {\n                fixed(quality: 90) {\n                  ...GatsbyImageSharpFixed\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n    relatedPosts: allMarkdownRemark(\n      filter: { frontmatter: { tags: { in: [$primaryTag] }, draft: { ne: true } } }\n      limit: 3\n    ) {\n      totalCount\n      edges {\n        node {\n          id\n          timeToRead\n          excerpt\n          frontmatter {\n            title\n          }\n          fields {\n            slug\n          }\n        }\n      }\n    }\n  }\n`;\n","import { Link } from 'gatsby';\nimport Img from 'gatsby-image';\nimport * as _ from 'lodash';\nimport { lighten } from 'polished';\nimport * as React from 'react';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/core';\n\nimport { colors } from '../styles/colors';\nimport { PageContext } from '../templates/post';\n\nconst PostCardStyles = css`\n  flex: 1 1 300px;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  margin: 0 20px 40px;\n  min-height: 300px;\n  background: #fff center center;\n  background-size: cover;\n  border-radius: 5px;\n  box-shadow: rgba(39, 44, 49, 0.06) 8px 14px 38px, rgba(39, 44, 49, 0.03) 1px 3px 8px;\n  transition: all 0.5s ease;\n\n  :hover {\n    box-shadow: rgba(39, 44, 49, 0.07) 8px 28px 50px, rgba(39, 44, 49, 0.04) 1px 6px 12px;\n    transition: all 0.4s ease;\n    transform: translate3D(0, -1px, 0) scale(1.02);\n  }\n`;\n\nconst PostCardImageLink = css`\n  position: relative;\n  display: block;\n  overflow: hidden;\n  border-radius: 5px 5px 0 0;\n`;\n\nconst PostCardImage = styled.div`\n  width: auto;\n  height: 200px;\n  background: ${colors.lightgrey} no-repeat center center;\n  background-size: cover;\n`;\n\nconst PostCardContent = styled.div`\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n`;\n\nconst PostCardContentLink = css`\n  position: relative;\n  flex-grow: 1;\n  display: block;\n  padding: 25px 25px 0;\n  color: ${colors.darkgrey};\n\n  :hover {\n    text-decoration: none;\n  }\n`;\n\nconst PostCardTags = styled.span`\n  display: block;\n  margin-bottom: 4px;\n  color: ${colors.midgrey};\n  font-size: 1.2rem;\n  line-height: 1.15em;\n  font-weight: 500;\n  letter-spacing: 0.5px;\n  text-transform: uppercase;\n`;\n\nconst PostCardTitle = styled.h2`\n  margin-top: 0;\n`;\n\nconst PostCardExcerpt = styled.section`\n  font-family: Georgia, serif;\n`;\n\nconst PostCardMeta = styled.footer`\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-end;\n  padding: 0 25px 25px;\n`;\n\nconst AuthorList = styled.ul`\n  display: flex;\n  flex-wrap: wrap-reverse;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n`;\n\nconst AuthorListItem = styled.li`\n  position: relative;\n  flex-shrink: 0;\n  margin: 0;\n  padding: 0;\n\n  :nth-of-type(1) {\n    z-index: 10;\n  }\n  :nth-of-type(2) {\n    z-index: 9;\n  }\n  :nth-of-type(3) {\n    z-index: 8;\n  }\n  :nth-of-type(4) {\n    z-index: 7;\n  }\n  :nth-of-type(5) {\n    z-index: 6;\n  }\n  :nth-of-type(6) {\n    z-index: 5;\n  }\n  :nth-of-type(7) {\n    z-index: 4;\n  }\n  :nth-of-type(8) {\n    z-index: 3;\n  }\n  :nth-of-type(9) {\n    z-index: 2;\n  }\n  :nth-of-type(10) {\n    z-index: 1;\n  }\n  :hover .author-name-tooltip {\n    opacity: 1;\n    transform: translateY(0px);\n  }\n`;\n\nconst AuthorNameTooltip = styled.div`\n  position: absolute;\n  bottom: 105%;\n  z-index: 999;\n  display: block;\n  padding: 2px 8px;\n  color: white;\n  font-size: 1.2rem;\n  letter-spacing: 0.2px;\n  white-space: nowrap;\n  background: ${colors.darkgrey};\n  border-radius: 3px;\n  box-shadow: rgba(39, 44, 49, 0.08) 0 12px 26px, rgba(39, 44, 49, 0.03) 1px 3px 8px;\n  opacity: 0;\n  transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);\n  transform: translateY(6px);\n  pointer-events: none;\n\n  @media (max-width: 650px) {\n    display: none;\n  }\n`;\n\nconst StaticAvatar = css`\n  display: block;\n  overflow: hidden;\n  margin: 0 -5px;\n  width: 34px;\n  height: 34px;\n  border: #fff 2px solid;\n  border-radius: 100%;\n`;\n\nconst AuthorProfileImage = styled.img`\n  display: block;\n  width: 100%;\n  height: 100%;\n  /* background: color(var(--lightgrey) l(+10%)); */\n  background: ${lighten('0.1', colors.lightgrey)};\n  border-radius: 100%;\n  object-fit: cover;\n`;\n\nconst ReadingTime = styled.span`\n  flex-shrink: 0;\n  margin-left: 20px;\n  color: ${colors.midgrey};\n  font-size: 1.2rem;\n  line-height: 33px;\n  font-weight: 500;\n  letter-spacing: 0.5px;\n  text-transform: uppercase;\n`;\n\nexport interface PostCardProps {\n  post: PageContext;\n}\n\nconst PostCard: React.FC<PostCardProps> = ({ post }) => {\n  return (\n    <article\n      className={`post-card ${post.frontmatter.image ? '' : 'no-image'}`}\n      css={PostCardStyles}\n    >\n      {post.frontmatter.image && (\n        <Link className=\"post-card-image-link\" css={PostCardImageLink} to={post.fields.slug}>\n          <PostCardImage className=\"post-card-image\">\n            {post.frontmatter.image &&\n              post.frontmatter.image.childImageSharp &&\n              post.frontmatter.image.childImageSharp.fluid && (\n              <Img\n                alt={`${post.frontmatter.title} cover image`}\n                style={{ height: '100%' }}\n                fluid={post.frontmatter.image.childImageSharp.fluid}\n              />\n            )}\n          </PostCardImage>\n        </Link>\n      )}\n      <PostCardContent className=\"post-card-content\">\n        <Link className=\"post-card-content-link\" css={PostCardContentLink} to={post.fields.slug}>\n          <header className=\"post-card-header\">\n            {post.frontmatter.tags && <PostCardTags>{post.frontmatter.tags[0]}</PostCardTags>}\n            <PostCardTitle>{post.frontmatter.title}</PostCardTitle>\n          </header>\n          <PostCardExcerpt>\n            <p>{post.excerpt}</p>\n          </PostCardExcerpt>\n        </Link>\n        <PostCardMeta className=\"post-card-meta\">\n          <AuthorList>\n            <AuthorListItem>\n              <AuthorNameTooltip className=\"author-name-tooltip\">\n                {post.frontmatter.author.id}\n              </AuthorNameTooltip>\n              <Link css={StaticAvatar} to={`/author/${_.kebabCase(post.frontmatter.author.id)}/`}>\n                <AuthorProfileImage\n                  src={post.frontmatter.author.avatar.children[0].fixed.src}\n                  alt={post.frontmatter.author.id}\n                />\n              </Link>\n            </AuthorListItem>\n          </AuthorList>\n          <ReadingTime>{post.timeToRead} min read</ReadingTime>\n        </PostCardMeta>\n      </PostCardContent>\n    </article>\n  );\n};\n\nexport default PostCard;\n","import { lighten, setLightness, darken, setSaturation } from 'polished';\nimport * as React from 'react';\nimport styled from '@emotion/styled';\nimport RehypeReact from 'rehype-react';\n\nimport { colors } from '../styles/colors';\n\nexport const PostFullContent = styled.section`\n  position: relative;\n  margin: 0 auto;\n  padding: 70px 50px 0;\n  min-height: 230px;\n  font-family: Georgia, serif;\n  font-size: 2.0rem;\n  line-height: 1.6em;\n  background: #fff;\n\n  @media (max-width: 1170px) {\n    padding: 5vw 7vw 0;\n  }\n  @media (max-width: 800px) {\n    font-size: 1.9rem;\n  }\n\n  :before {\n    content: '';\n    position: absolute;\n    top: 15px;\n    left: -5px;\n    z-index: -1;\n    display: block;\n    width: 20px;\n    height: 200px;\n    background: rgba(39, 44, 49, 0.15);\n    filter: blur(5px);\n    transform: rotate(-5deg);\n  }\n\n  :after {\n    content: '';\n    position: absolute;\n    top: 15px;\n    right: -5px;\n    z-index: -1;\n    display: block;\n    width: 20px;\n    height: 200px;\n    background: rgba(39, 44, 49, 0.15);\n    filter: blur(5px);\n    transform: rotate(5deg);\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  p,\n  ul,\n  ol,\n  dl,\n  pre,\n  blockquote,\n  .post-full-comments,\n  .footnotes {\n    min-width: 100%;\n  }\n\n  li {\n    word-break: break-word;\n  }\n\n  li p {\n    margin: 0;\n  }\n\n  a {\n    color: #000;\n    word-break: break-word;\n    box-shadow: ${colors.blue} 0 -1px 0 inset;\n  }\n\n  a:hover {\n    color: ${colors.blue};\n    text-decoration: none;\n  }\n\n  strong,\n  em {\n    /* color: color(var(--darkgrey) l(-5%)); */\n    color: ${darken('0.05', colors.darkgrey)};\n  }\n\n  small {\n    display: inline-block;\n    line-height: 1.6em;\n  }\n\n  li:first-child {\n    margin-top: 0;\n  }\n\n  .gatsby-resp-image-link {\n    box-shadow: none;\n  }\n\n  img,\n  video {\n    display: block;\n    margin: 1.5em auto;\n    max-width: 1040px;\n    height: auto;\n  }\n\n  @media (max-width: 1040px) {\n    img,\n    video {\n      width: 100%;\n    }\n  }\n\n  img[src$='#full'] {\n    max-width: none;\n    width: 100vw;\n  }\n\n  img + br + small {\n    display: block;\n    margin-top: -3em;\n    margin-bottom: 1.5em;\n    text-align: center;\n  }\n\n  /* Override third party iframe styles */\n  iframe {\n    margin: 0 auto !important;\n  }\n\n  blockquote {\n    margin: 0 0 1.5em;\n    padding: 0 1.5em;\n    border-left: #3eb0ef 3px solid;\n  }\n\n  blockquote p {\n    margin: 0 0 1em 0;\n    color: inherit;\n    font-size: inherit;\n    line-height: inherit;\n    font-style: italic;\n  }\n\n  blockquote p:last-child {\n    margin-bottom: 0;\n  }\n\n  code {\n    padding: 0 5px 2px;\n    font-size: 0.8em;\n    line-height: 1em;\n    font-weight: 400 !important;\n    background: ${colors.whitegrey};\n    border-radius: 3px;\n  }\n\n  p code {\n    word-break: break-all;\n  }\n\n  pre {\n    overflow-x: auto;\n    /* margin: 1.5em 0 3em; */\n    padding: 20px;\n    max-width: 100%;\n    /* border: color(var(--darkgrey) l(-10%)) 1px solid; */\n    border: ${darken('0.01', colors.darkgrey)} 1px solid;\n    color: ${colors.whitegrey};\n    font-size: 1.4rem;\n    line-height: 1.5em;\n    /* background: color(var(--darkgrey) l(-3%)); */\n    background: ${darken('0.03', colors.darkgrey)};\n    border-radius: 5px;\n  }\n\n  pre code {\n    padding: 0;\n    font-size: inherit;\n    line-height: inherit;\n    background: transparent;\n  }\n\n  pre code :not(span) {\n    color: inherit;\n  }\n\n  /* .fluid-width-video-wrapper { */\n  .gatsby-resp-iframe-wrapper {\n    margin: 1.5em 0 3em;\n  }\n\n  hr {\n    margin: 4vw 0;\n  }\n\n  hr:after {\n    content: '';\n    position: absolute;\n    top: -15px;\n    left: 50%;\n    display: block;\n    margin-left: -10px;\n    width: 1px;\n    height: 30px;\n    /* background: color(var(--lightgrey) l(+10%)); */\n    background: ${lighten('0.1', colors.lightgrey)};\n    box-shadow: #fff 0 0 0 5px;\n    transform: rotate(45deg);\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    color: ${setLightness('0.05', colors.darkgrey)};\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,\n      'Open Sans', 'Helvetica Neue', sans-serif;\n  }\n\n  h1 {\n    margin: 0.5em 0 0.2em 0;\n    font-size: 4.6rem;\n    font-weight: 700;\n  }\n  @media (max-width: 500px) {\n    h1 {\n      font-size: 2.8rem;\n    }\n  }\n\n  h2 {\n    margin: 0.5em 0 0.2em 0;\n    font-size: 3.6rem;\n    font-weight: 700;\n  }\n  @media (max-width: 500px) {\n    h2 {\n      font-size: 2.6rem;\n    }\n  }\n\n  h3 {\n    margin: 0.5em 0 0.2em 0;\n    font-size: 2.8rem;\n    font-weight: 700;\n  }\n  @media (max-width: 500px) {\n    h3 {\n      font-size: 2.2rem;\n    }\n  }\n\n  h4 {\n    margin: 0.5em 0 0.2em 0;\n    font-size: 2.8rem;\n    font-weight: 700;\n  }\n  @media (max-width: 500px) {\n    h4 {\n      font-size: 2.2rem;\n    }\n  }\n\n  h5 {\n    display: block;\n    margin: 0.5em 0;\n    padding: 1em 0 1.5em;\n    border: 0;\n    color: ${colors.blue};\n    font-family: Georgia, serif;\n    font-size: 3.2rem;\n    line-height: 1.35em;\n    text-align: center;\n  }\n  @media (min-width: 1180px) {\n    h5 {\n      max-width: 1060px;\n    }\n  }\n  @media (max-width: 500px) {\n    h5 {\n      padding: 0 0 0.5em;\n      font-size: 2.2rem;\n    }\n  }\n\n  h6 {\n    margin: 0.5em 0 0.2em 0;\n    font-size: 2.3rem;\n    font-weight: 700;\n  }\n  @media (max-width: 500px) {\n    h6 {\n      font-size: 2rem;\n    }\n  }\n\n  /* Tables */\n  table {\n    display: inline-block;\n    overflow-x: auto;\n    margin: 0.5em 0 2.5em;\n    max-width: 100%;\n    width: auto;\n    border-spacing: 0;\n    border-collapse: collapse;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,\n      'Open Sans', 'Helvetica Neue', sans-serif;\n    font-size: 1.6rem;\n    white-space: nowrap;\n    vertical-align: top;\n  }\n\n  table {\n    -webkit-overflow-scrolling: touch;\n    background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0\n        center,\n      radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;\n    background-attachment: scroll, scroll;\n    background-size: 10px 100%, 10px 100%;\n    background-repeat: no-repeat;\n  }\n\n  table td:first-child {\n    background-image: linear-gradient(\n      to right,\n      rgba(255, 255, 255, 1) 50%,\n      rgba(255, 255, 255, 0) 100%\n    );\n    background-size: 20px 100%;\n    background-repeat: no-repeat;\n  }\n\n  table td:last-child {\n    background-image: linear-gradient(\n      to left,\n      rgba(255, 255, 255, 1) 50%,\n      rgba(255, 255, 255, 0) 100%\n    );\n    background-position: 100% 0;\n    background-size: 20px 100%;\n    background-repeat: no-repeat;\n  }\n\n  table th {\n    color: ${colors.darkgrey};\n    font-size: 1.2rem;\n    font-weight: 700;\n    letter-spacing: 0.2px;\n    text-align: left;\n    text-transform: uppercase;\n    /* background-color: color(var(--whitegrey) l(+4%)); */\n    background-color: ${lighten('0.04', colors.whitegrey)};\n  }\n\n  table th,\n  table td {\n    padding: 6px 12px;\n    /* border: color(var(--whitegrey) l(-1%) s(-5%)) 1px solid; */\n    border: ${setSaturation('0.05', darken('0.01', colors.whitegrey))} 1px solid;\n    text-align: left !important;\n  }\n\n  @media (max-width: 500px) {\n    padding: 0;\n    :before {\n      display: none;\n    }\n    :after {\n      display: none;\n    }\n  }\n\n  /* Start Syntax Highlighting */\n  /* Taken from overreacted https://github.com/gaearon/overreacted.io/blob/942b41555f5e5ccbb5f93f6c26142cd90b314236/src/utils/global.css#L68 */\n  code[class*='language-'],\n  pre[class*='language-'] {\n    background: none;\n    font-family: Consolas, Menlo, Monaco, source-code-pro, Courier New, monospace;\n    font-feature-settings: normal;\n    text-align: left;\n    white-space: pre;\n    word-spacing: normal;\n    word-break: normal;\n    word-wrap: normal;\n    line-height: 1.5;\n    margin-bottom: 0;\n\n    -moz-tab-size: 4;\n    -o-tab-size: 4;\n    tab-size: 4;\n\n    -webkit-hyphens: none;\n    -moz-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n  }\n\n  /* Code blocks */\n  pre[class*='language-'] {\n    overflow: auto;\n    padding: 1.3125rem;\n  }\n\n  pre[class*='language-']::-moz-selection {\n    /* Firefox */\n    background: hsl(207, 4%, 16%);\n  }\n\n  pre[class*='language-']::selection {\n    /* Safari */\n    background: hsl(207, 4%, 16%);\n  }\n\n  /* Text Selection colour */\n  pre[class*='language-']::-moz-selection,\n  pre[class*='language-'] ::-moz-selection {\n    text-shadow: none;\n    background: hsla(0, 0%, 100%, 0.15);\n  }\n\n  pre[class*='language-']::selection,\n  pre[class*='language-'] ::selection {\n    text-shadow: none;\n    background: hsla(0, 0%, 100%, 0.15);\n  }\n\n  /* Inline code */\n  :not(pre) > code[class*='language-'] {\n    border-radius: 0.3em;\n    background: var(--inlineCode-bg);\n    color: var(--inlineCode-text);\n    padding: 0.15em 0.2em 0.05em;\n    white-space: normal;\n  }\n\n  .token.attr-name {\n    color: rgb(173, 219, 103);\n    font-style: italic;\n  }\n\n  .token.comment {\n    color: rgb(128, 147, 147);\n  }\n\n  .token.string,\n  .token.url {\n    color: rgb(173, 219, 103);\n  }\n\n  .token.variable {\n    color: rgb(214, 222, 235);\n  }\n\n  .token.number {\n    color: rgb(247, 140, 108);\n  }\n\n  .token.builtin,\n  .token.char,\n  .token.constant,\n  .token.function {\n    color: rgb(130, 170, 255);\n  }\n\n  .token.punctuation {\n    color: rgb(199, 146, 234);\n  }\n\n  .token.selector,\n  .token.doctype {\n    color: rgb(199, 146, 234);\n    font-style: 'italic';\n  }\n\n  .token.class-name {\n    color: rgb(255, 203, 139);\n  }\n\n  .token.tag,\n  .token.operator,\n  .token.keyword {\n    color: #ffa7c4;\n  }\n\n  .token.boolean {\n    color: rgb(255, 88, 116);\n  }\n\n  .token.property {\n    color: rgb(128, 203, 196);\n  }\n\n  .token.namespace {\n    color: rgb(178, 204, 214);\n  }\n\n  pre[data-line] {\n    padding: 1em 0 1em 3em;\n    position: relative;\n  }\n\n  .gatsby-highlight-code-line {\n    background-color: hsla(207, 95%, 15%, 1);\n    display: block;\n    margin-right: -1.3125rem;\n    margin-left: -1.3125rem;\n    padding-right: 1em;\n    padding-left: 1.25em;\n    border-left: 0.25em solid #ffa7c4;\n  }\n\n  .gatsby-highlight {\n    margin-bottom: 1.75rem;\n    margin-left: -1.3125rem;\n    margin-right: -1.3125rem;\n    border-radius: 10px;\n    background: #011627;\n    -webkit-overflow-scrolling: touch;\n    overflow: auto;\n  }\n\n  @media (max-width: 672px) {\n    .gatsby-highlight {\n      border-radius: 0;\n    }\n  }\n\n  .gatsby-highlight pre[class*='language-'] {\n    float: left;\n    min-width: 100%;\n  }\n  /* End Syntax Highlighting */\n\n  p small {\n    display: block !important;\n    text-align: center;\n  }\n`;\n\nconst renderAst = new RehypeReact({\n  createElement: React.createElement,\n  // components: { 'interactive-counter': Counter },\n  components: {},\n}).Compiler;\n\nconst Ast = ({ ast, ...props }: any) => {\n  ast.properties = props;\n  return renderAst(ast);\n};\n\nexport interface PostContentProps {\n  htmlAst: any;\n}\n\nconst PostContent: React.FC<PostContentProps> = ({ htmlAst }) => {\n  return (\n    <PostFullContent className=\"post-full-content\">\n      {/* TODO: this will apply the class when rehype-react is published https://github.com/rhysd/rehype-react/pull/11 */}\n      <Ast className=\"post-content\" ast={htmlAst} />\n    </PostFullContent>\n  );\n};\n\nexport default PostContent;\n","import { lighten } from 'polished';\nimport * as React from 'react';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/core';\n\nimport { colors } from '../../styles/colors';\nimport SubscribeForm from './SubscribeForm';\n\n\nconst SubscribeFormSection = styled.section`\n  margin: 1.5em 0;\n  padding: 6.5vw 7vw 7vw;\n  /* border: color(var(--whitegrey) l(+2%)) 1px solid; */\n  border: ${lighten('0.02', colors.whitegrey)} 1px solid;\n  text-align: center;\n  /* background: color(var(--whitegrey) l(+4%)); */\n  background: ${lighten('0.04', colors.whitegrey)};\n  border-radius: 7px;\n\n  p {\n    margin-bottom: 1em;\n    color: ${colors.midgrey};\n    font-size: 2.2rem;\n    line-height: 1.55em;\n    letter-spacing: 0.2px;\n  }\n\n  form {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin: 0 auto;\n    max-width: 420px;\n  }\n\n  .form-group {\n    flex-grow: 1;\n  }\n  @media (max-width: 650px) {\n    p {\n      font-size: 1.6rem;\n    }\n  }\n`;\n\nconst SubscribeFormTitle = css`\n  margin: 0 0 3px 0;\n  padding: 0;\n  color: ${colors.darkgrey};\n  font-size: 3.5rem;\n  line-height: 1;\n  font-weight: 700;\n  @media (max-width: 650px) {\n    font-size: 2.4rem;\n  }\n`;\n\nexport interface SubscribeProps {\n  title: string;\n}\n\nconst Subscribe: React.FC<SubscribeProps> = props => {\n  return (\n    <SubscribeFormSection>\n      <h3 css={SubscribeFormTitle}>Subscribe to {props.title}</h3>\n      <p>Get the latest posts delivered right to your inbox</p>\n      <SubscribeForm />\n    </SubscribeFormSection>\n  );\n};\n\nexport default Subscribe;\n"],"sourceRoot":""}