gatsby-plugin-image#getImage JavaScript Examples

FeaturedProduct = ({ feature }) => {
  const { gatsbyPath, headerImage, title, introduction } = feature
  const image = getImage(headerImage)

  return (
    <FeaturedProductStyles>
      <Link to={gatsbyPath}>
        <GatsbyImage
          className="features__item--img"
          image={image}
          alt="Product Image"
        />
        {title && introduction && (
          <div className="features__item--content">
            {title && <h4>{title}</h4>}
            {introduction && <p>{introduction}</p>}
            <Button text="Read More" as="span" arrow={true} />
          </div>
        )}
      </Link>
    </FeaturedProductStyles>
  )
}

options = {
    renderMark: {
        [MARKS.UNDERLINE]: (text) => <span className="underline">{text}</span>,
        [MARKS.ITALIC]: (text) => <em>{text}</em>,
        [MARKS.BOLD]: (text) => <strong>{text}</strong>,
        [MARKS.CODE]: (text) => <code>{text}</code>
    },
    renderNode: {
        [BLOCKS.EMBEDDED_ASSET]: (node) => {
            const {gatsbyImageData, description} = node.data.target;

            return (
                <div className="contentimg">
                    <GatsbyImage image={getImage(gatsbyImageData)} alt={description ? description : null} />
                    {description && (
                        <div className="contentdescription">{description}</div>
                    )}
                </div>
            )
        },
        [INLINES.HYPERLINK]: (node, children ) => {
            if(node.data.uri.includes("player.vimeo.com/video")) {
                return <iframe title="Vimeo content" loading="lazy" src={node.data.uri} frameBorder="0" allowFullScreen></iframe>
            } else if (node.data.uri.includes("youtube.com/embed")) {
                <iframe title="YouTube content" loading="lazy" frameborder="0" src={node.data.uri} allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
            } else if (node.data.uri.includes("giphy.com/embed")) {
                return <iframe title="Giphy content" loading="lazy" src={node.data.uri} frameborder="0" allowFullScreen></iframe>
            }
            else {
                return <a href={node.data.uri}>{children}</a>
            }
        }
    }
}

DefaultTemplate = contentfulPage => {
  const headerImage = getImage(contentfulPage.headerImage)
  return (
    <>
      <Seo title={contentfulPage.title} />
      <Layout>
        <SimpleBanner title={contentfulPage.title}>
          <GatsbyImage className="banner__image" image={headerImage} />
        </SimpleBanner>
        <div className="section">
          <div className="container container__tight">
            <RichText richText={contentfulPage.mainContent} />
          </div>
        </div>
      </Layout>
    </>
  )
}

FeedTemplate = (contentfulPage) => {
  const headerImage = getImage(contentfulPage.headerImage)
  return (
    <>
      <Seo title={contentfulPage.title} />
      <Layout>
        <SimpleBanner title={contentfulPage.title}>
          <GatsbyImage
            className="banner__image"
            image={headerImage}
            alt={`${contentfulPage.title} feed`}
          />
        </SimpleBanner>
        <div className="section">
          <div className="feed">{getTemplate(contentfulPage)}</div>
        </div>
      </Layout>
    </>
  )
}

HeroContainer = ({
  ...props
}) => {
  const query = useStaticQuery(
    graphql`
      query {
        hero: file(relativePath: { eq: "hero.png" }) {
          childImageSharp {
            gatsbyImageData(
              quality: 70,
              placeholder: BLURRED,
              width: 1920,
            )
          }
        }
      }
    `,
  );

  const image = getImage(query.hero);

  return (
    <Hero
      image={image}
      {...props}
    />
  );
}

AboutTemplate = ({ data }) => {
  const { html, frontmatter } = data.markdownRemark;
  const profileImage = getImage(frontmatter.profile_image);

  return (
    <Layout title={frontmatter.title}>
      <AboutWrapper>
        <AboutImageWrapper image={profileImage} alt="" />

        <AboutCopy dangerouslySetInnerHTML={{ __html: html }} />
      </AboutWrapper>
    </Layout>
  );
}

Producttemplate = (contentfulProduct) => {
  const {
    headerImage,
    title,
    price,
    introduction,
    description,
    faqs,
    gallery,
  } = contentfulProduct
  const productHeaderImage = getImage(headerImage)
  return (
    <>
      <Seo title={title} />
      <BannerModule
        title={title}
        price={price}
        subTitle={introduction}
        enquire={true}
      >
        <GatsbyImage
          className="banner__image"
          image={productHeaderImage}
          alt={title}
        />
      </BannerModule>
      <ProductTemplateStyles className="section">
        <div className="container container__tight">
          {description && (
            <div className="column">
              <RichText richText={description} />
            </div>
          )}
          {faqs && (
            <div className="column">
              {faqs.map((item, index) => {
                return (
                  <Faq
                    key={index}
                    title={item.question}
                    description={item.answer}
                  />
                )
              })}
            </div>
          )}
        </div>
      </ProductTemplateStyles>
      {gallery && (
        <ProductGallery className="section">
          <div className="container container__tight">
            {gallery.map((item, index) => {
              let galleyImage = getImage(item)
              return <GatsbyImage key={index} image={galleyImage} />
            })}
          </div>
        </ProductGallery>
      )}
      <Features
        title="Featured Products from Barcadia."
        introduction="Vivamus quam mauris, pulvinar vel mauris id, interdum semper neque. Proin malesuada libero eget tellus scelerisque, id egestas tortor egestas."
      />
    </>
  )
}

PostCard = ({ post, showDescription, additionalClass }) => (

    <div
        className={`post-card pb-4 ${additionalClass}`}
    >
        <div>
            <Link to={`/${post.slug}`} className="post-card-link">
                {
                // eslint-disable-next-line no-nested-ternary
                    post.headerImage ? (
                        post.headerImage[0].extension !== 'svg'
                        && post.headerImage[0].localFile
                        && post.headerImage[0].localFile.childImageSharp
                            ? (
                                <GatsbyImage
                                    image={getImage(post.headerImage[0].localFile)}
                                    alt={post.title}
                                    className="post-card-image"
                                />
                            )
                            : (
                                <img
                                    src={`https://api.flotiq.com${post.headerImage[0].url}`}
                                    alt={post.title}
                                    className="post-card-image"
                                />
                            )) : null
                }
            </Link>
            <div className="mt-3">
                {post.tags && post.tags.map((tag) => (
                    <TagPill tag={tag} key={tag.id} />))}
            </div>
            <Link to={`/${post.slug}`} className="post-card-link">
                <h2 className="mt-3">{post.title}</h2>
                {showDescription && <div className="mt-3 post-card-description">{post.excerpt}</div>}
            </Link>
        </div>
        {post.content && typeof post.content === 'object' && (
            <Link to={`/${post.slug}`} className="post-card-link">
                <p className="mt-3 mb-3 reading-time">{getReadingTime(post.content.blocks)}</p>
            </Link>
        )}
    </div>
)

AuthorPage = ({ data, pageContext }) => {
    const author = data.flotiqBlogAuthor;
    const [url, setUrl] = useState('');
    useEffect(() => {
        setUrl(window.location.href.split('/?')[0]);
    }, []);
    return (
        <Layout>
            <Helmet>
                <html lang="en" />
                <title>
                    {author.name}
                    {' - '}
                    {data.allFlotiqMainSettings.nodes[0].title}
                </title>
                <meta name="description" content={author.bio} />
                <meta property="og:site_name" content={data.allFlotiqMainSettings.nodes[0].title} />
                <meta property="og:type" content="profile" />
                <meta property="og:title" content={`${author.name} - ${data.allFlotiqMainSettings.nodes[0].title}`} />
                <meta property="og:url" content={url} />
                {data.allFlotiqMainSettings.nodes[0].facebook_url && (
                    <meta property="article:publisher" content={data.allFlotiqMainSettings.nodes[0].facebook_url} />)}
                {data.allFlotiqMainSettings.nodes[0].facebook_url && (
                    <meta property="article:author" content={data.allFlotiqMainSettings.nodes[0].facebook_url} />)}
                <meta name="twitter:card" content="summary" />
                <meta name="twitter:title" content={`${author.name} - ${data.allFlotiqMainSettings.nodes[0].title}`} />
                <meta name="twitter:url" content={url} />
                {data.allFlotiqMainSettings.nodes[0].twitter_url
                && (
                    <meta
                        name="twitter:site"
                        content={`@${data.allFlotiqMainSettings.nodes[0].twitter_url.split('https://twitter.com/')[1]}`}
                    />
                )}
                {data.allFlotiqMainSettings.nodes[0].twitter_url && (
                    <meta
                        name="twitter:creator"
                        content={`@${data.allFlotiqMainSettings.nodes[0].twitter_url.split('https://twitter.com/')[1]}`}
                    />
                )}
            </Helmet>
            <Container>
                <h1 className="text-center pt-4 pb-4">
                    <GatsbyImage alt={author.name} image={getImage(author.avatar[0].localFile)} className="mr-4" />
                    {author.name}
                </h1>
                <h4 className="text-center pb-4">
                    {author.bio}
                </h4>
            </Container>
            <Container fluid className="container-fluid__bigger-padding">
                <Row xs={1} sm={1} md={3} lg={3}>
                    {data.allFlotiqBlogPost.nodes.map((post) => (
                        <Col key={post.id}><PostCard post={post} /></Col>
                    ))}
                </Row>
                <DiscoverMoreTopics
                    tags={pageContext.tags}
                    primaryTag={{}}
                />
            </Container>
        </Layout>
    );
}

ProductLogos = (props) => {
  const nodes = useLogoItems();

  const { logoData, toggleToast } = props;

  return logoData.map((elt) => {
    const filteredGatsbyImage = nodes.filter((img) => {
      if (img.fluid.src.includes(elt.imgName)) {
        return elt;
      }
    });

    let image;
    if (filteredGatsbyImage.length) {
      image = getImage(
        filteredGatsbyImage[0].gatsbyImageData
      );
    }

    return (
      <Column size='4'>
        <Card className='mr-7 mt-7' shadow='none'>
          <div className='px-6'>
            <div className='mt-6 px-8 py-8 container w-auto'>
              <GatsbyImage
                image={image}
                alt={elt.name}
                className='image'
              />
            </div>
            <div className='d-flex align-items-center'>
              <p className='imgName mr-auto'>{elt.name} </p>
              <Link
                href={image.images.fallback.src}
                download
              >
                <Icon
                  size={16}
                  name='download'
                  className='mr-3 imgName'
                  onClick={() => props.toggleToast(`Downloading ${elt.name}`)}
                />
              </Link>
            </div>
          </div>
        </Card>
      </Column>
    );
  });
}

export default function Post(props) {
  const { data, pageContext } = props
  const post = data.mdx
  const { previous, next, ogImage } = pageContext
  const { imageTop, imageBottom } = post.frontmatter
  const isDraft = post.frontmatter.draft
  const distance = formatDistance(new Date(post.frontmatter.date), new Date(), {
    addSuffix: true,
  })

  return (
    <>
      <Layout imageTop={imageTop} imageBottom={imageBottom}>
        <LayoutContent mx="auto" width="100%">
          <SEO
            canonical={post.slug}
            title={post.frontmatter.title}
            description={post.frontmatter.description || post.excerpt}
            image={ogImage}
          />
          <Grid gap={24}>
            <CenteredGrid
              gridRowGap={3}
              as="header"
              mx="auto"
              width="100%"
              mt={[8, 12, 18]}
            >
              <Text color="text.300">
                <Box
                  as="span"
                  fontWeight="semibold"
                  color="brand.100"
                  textTransform="uppercase"
                >
                  {isDraft && "Draft"} Article
                </Box>
                <Box mx={3} as="span">
                  —
                </Box>
                {post.fields.readingTime.text}
              </Text>
              <Heading
                as="h1"
                mb={2}
                color="text.200"
                fontSize={["3xl", "4xl", "7xl"]}
                lineHeight="110%"
                fontWeight="black"
              >
                {post.frontmatter.title}
              </Heading>
              <Text
                as="h2"
                fontSize={["lg", "xl"]}
                fontWeight="normal"
                color="text.300"
                mb={4}
              >
                {post.frontmatter.description}
              </Text>
              {isDraft && <DraftDisclaimer />}
              <Hr />
              <Flex
                alignItems="flex-start"
                color="text.400"
                justify="space-between"
                flexDirection={{ base: "column", md: "row" }}
              >
                <HStack
                  mb={{ base: 2, md: 0 }}
                  justify="center"
                  textTransform="capitalize"
                  // fontSize="sm"
                  spacing={{ base: 4, md: 6 }}
                  fontWeight="medium"
                >
                  {post.frontmatter.tags.map((tag, i) => (
                    <Text color="brand.100" key={tag}>
                      {tag}
                    </Text>
                  ))}
                </HStack>
                <Flex
                  alignItems={{ base: "flex-start", md: "flex-end" }}
                  flexDirection="column"
                >
                  <Text
                    as="time"
                    dateTime={post.frontmatter.date}
                    color="text.100"
                  >
                    {post.frontmatter.date}
                  </Text>
                  <Text fontSize="sm">{distance}</Text>
                </Flex>
              </Flex>
            </CenteredGrid>
            <CenteredGrid
              className="blog-post centered-grid"
              fontSize="lg"
              lineHeight={{ base: "180%", md: "200%" }}
            >
              <ExContextWrapper>
                <MDXProvider
                  components={{
                    T,
                    ...Chatbox,
                    ...MarkdownComponents,
                    ...MarkdownOverrides,
                    ...postData,
                    Link,
                    Box,
                    Flex,
                    Grid,
                    Button,
                    getImage,
                    Constrain,
                    ImageWrapper,
                    WideMedia,
                    GatsbyImage,
                    StaticImage,
                    maxWidth,
                    Text,
                    Heading,
                    Skeleton,
                    Tag,
                    ChakraImage: Image,
                    Image,
                    Toastable,
                    Hr,
                    a: ({ children, ...props }) => (
                      <Link color="brandSecondary" {...props}>
                        {children}
                      </Link>
                    ),
                    RoughNotation,
                    h6: makeHeader("h6"),
                    h5: makeHeader("h5"),
                    h4: makeHeader("h4", { fonts: ["md", "lg", "xl"] }),
                    h3: makeHeader("h3", { fonts: ["md", "lg", "2xl"] }),
                    h2: makeHeader("h2", { fonts: ["md", "lg", "2xl"], mt: 6 }),
                    h1: makeHeader("h1", {
                      fonts: ["lg", "xl", "4xl"],
                      mt: 8,
                      mb: 8,
                    }),
                    table: ({ children, ...props }) => (
                      <Box overflowX="auto" mb={8}>
                        <Table {...props}>{children}</Table>
                      </Box>
                    ),
                    th: Th,
                    tr: Tr,
                    td: ({ children, ...props }) => (
                      <Td
                        fontSize={["sm", "md", "lg"]}
                        verticalAlign="initial"
                        {...props}
                      >
                        {children}
                      </Td>
                    ),
                    ul: ({ children, ...props }) => (
                      <Box
                        as="ul"
                        listStyleType={sample([
                          "katakana",
                          "hiragana",
                          "simp-chinese-formal",
                          "korean-hanja-formal",
                          "korean-hangul-formal",
                        ])}
                        fontSize={["md", null, "lg"]}
                        mb={8}
                        {...props}
                      >
                        {children}
                      </Box>
                    ),
                    blockquote: ({ children, ...props }) => (
                      <Box
                        as="blockquote"
                        textAlign="center"
                        borderColor="borderSubtle"
                        fontSize={{ base: "lg", lg: "2xl" }}
                        color="text.200"
                        mt={4}
                        mb={8}
                        px={{ base: 8, lg: 24 }}
                        {...props}
                      >
                        {children}
                      </Box>
                    ),
                    p: ({ children, ...props }) => (
                      <Text
                        as="p"
                        fontSize={["md", null, "lg"]}
                        mb={8}
                        {...props}
                      >
                        {children}
                      </Text>
                    ),
                  }}
                >
                  <MDXRenderer>{post.body}</MDXRenderer>
                </MDXProvider>
              </ExContextWrapper>
            </CenteredGrid>
            {!isDraft && (
              <CenteredGrid>
                <Box as="footer">
                  <Grid
                    as="section"
                    gridAutoFlow="row"
                    alignItems="center"
                    justifyContent="center"
                    gridTemplateColumns={["1fr", null, null, "1fr 1fr"]}
                    flexDirection={["row", "column"]}
                    gap={4}
                    m={0}
                    p={0}
                    className="justify-center flex flex-row p-0 m-0 text-sm w-fullgap-4"
                  >
                    <Navigator pos="left" link={previous} />
                    <Navigator pos="right" link={next} />
                  </Grid>
                </Box>
              </CenteredGrid>
            )}
          </Grid>
          <PopupPortal>
            <Popup />
          </PopupPortal>
        </LayoutContent>
      </Layout>
    </>
  )
}

ProjectCard = ({ className = "", data }) => {
  const [hovering, setHovering] = useState(false);

  return (
    <article
      onMouseOver={() => setHovering(true)}
      onFocus={() => setHovering(true)}
      onMouseLeave={() => setHovering(false)}
      onBlur={() => setHovering(false)}
      className={cls("rounded-3xl max-w-md border", className)}
    >
      <Link
        target="_blank"
        rel="noreferrer"
        title="Go to live website"
        to={data.url}
      >
        <Tilt
          tiltMaxAngleX={12}
          tiltMaxAngleY={7}
          perspective={800}
          transitionSpeed={1500}
          tiltReverse
          className={cls(styles.imgWrapper, "rounded-t-md p-5 relative")}
        >
          <div
            style={{
              transform: hovering ? "translateZ(10px)" : "translateZ(0)",
            }}
            className={cls(
              "w-1/4 sm:w-2/4 absolute z-0 -right-2 sm:right-6 -top-4 transition-all duration-500 ease-out",
              { "sm:-right-2 -top-8": hovering }
            )}
          >
            <div className={cls(styles.imgBubble, "rounded-full")} />
          </div>
          <div
            style={{
              transform: hovering ? "translateZ(10px)" : "translateZ(0)",
            }}
            className="w-2/12 absolute z-0 -left-2 bottom-16 transition-transform duration-500 ease-out"
          >
            <div className={cls(styles.imgBubble, "rounded-full")} />
          </div>
          <div
            style={{
              transform: hovering ? "translateZ(20px)" : "translateZ(0)",
            }}
            className="w-5 absolute z-0 -left-6 bottom-11 transition-transform duration-500 ease-out"
          >
            <div className={cls(styles.imgBubble, "rounded-full")} />
          </div>

          <GatsbyImage
            alt={data.description}
            className="rounded-lg hover:shadow-2xl z-20 transition-all duration-500 ease-out"
            style={{
              transform: hovering ? "translateZ(20px)" : "translateZ(0)",
            }}
            image={getImage(data.img)}
          />
        </Tilt>
      </Link>

      <section className="p-6">
        <h3 className="font-bold text-sm tracking-tight text-purple-800">
          {data.scope}
        </h3>
        <h2 className="text-xl font-extrabold tracking-tight text-gray-900 mt-1 capitalize">
          {data.title}
        </h2>

        <LineClamp
          className="mt-3"
          text={data.description}
          component={
            <section className="my-6">
              {data.tags.map((tag, i) => (
                <Tag key={tag + i} className="mr-2 mt-2">
                  {tag}
                </Tag>
              ))}
            </section>
          }
        />

        <footer className="mt-8">
          <section className="flex items-center space-x-2 ">
            <a
              target="_blank"
              rel="noreferrer"
              href={data.github}
              className="hover:text-purple-400 py-1.5 px-3 bg-purple-50 rounded-md transition-colors font-bold text-purple-500 text-[13px]"
            >
              Github
            </a>
            <a
              target="_blank"
              rel="noreferrer"
              href={data.url}
              className="hover:text-purple-400 py-1.5 px-3 bg-purple-50 rounded-md transition-colors font-bold text-purple-500 text-[13px]"
            >
              Live link
            </a>
          </section>
        </footer>
      </section>
    </article>
  );
}

PostPage = ({ data, pageContext }) => {
    const post = data.flotiqBlogPost;
    const [offset, setOffset] = useState(0);
    const [visible, setVisible] = useState(false);
    const [progressBar, setProgressBar] = useState(0);
    const [progressHeight, setProgressHeight] = useState(0);
    const progress = useRef(0);
    const [url, setUrl] = useState('');
    useEffect(() => {
        setUrl(window.location.href.split('/?')[0]);
    }, []);

    useEffect(() => {
        window.onscroll = () => {
            setOffset(window.pageYOffset);
        };
    }, []);

    useEffect(() => {
        const height = progress.current.clientHeight;
        if (offset > progress.current.offsetTop) {
            setVisible(true);
            setProgressHeight(progress.current.offsetTop);
        } else {
            setVisible(false);
            setProgressHeight(0);
        }
        const width = (offset / height) * 100;
        setProgressBar(width <= 100 ? width : 100);
    }, [offset]);
    if (!post) {
        return (<div>NO DATA</div>);
    }
    const disqusConfig = {
        url: `${data.site.siteMetadata.siteUrl}/${post.slug}`,
        identifier: post.slug,
        title: post.title,
    };
    return (
        <Layout>
            <Helmet>
                <html lang="en" />
                <title>
                    {post.title}
                    {' - '}
                    {data.allFlotiqMainSettings.nodes[0].title}
                </title>
                <meta name="description" content={post.metaDescription} />
                <meta property="og:site_name" content={data.allFlotiqMainSettings.nodes[0].title} />
                <meta property="og:type" content="article" />
                <meta property="og:title" content={`${post.title} - ${data.allFlotiqMainSettings.nodes[0].title}`} />
                <meta property="og:description" content={post.metaDescription} />
                <meta property="og:url" content={url} />
                {(post.headerImage) && (
                    <meta
                        property="og:image"
                        content={data.site.siteMetadata.siteUrl + post.headerImage[0].localFile.publicURL}
                    />
                )}
                <meta property="article:published_time" content={post.publish_date} />
                {post.tags && (
                    <meta property="article:tag" content={post.tags[0].tag_name} />
                )}

                {data.allFlotiqMainSettings.nodes[0].facebook_url && (
                    <meta property="article:publisher" content={data.allFlotiqMainSettings.nodes[0].facebook_url} />)}
                {data.allFlotiqMainSettings.nodes[0].facebook_url && (
                    <meta property="article:author" content={data.allFlotiqMainSettings.nodes[0].facebook_url} />)}
                <meta name="twitter:card" content="summary_large_image" />
                <meta name="twitter:title" content={`${post.title} - ${data.allFlotiqMainSettings.nodes[0].title}`} />
                <meta name="twitter:description" content={post.metaDescription} />
                <meta name="twitter:url" content={url} />
                {(post.headerImage) && (
                    <meta
                        name="twitter:image"
                        content={data.site.siteMetadata.siteUrl + post.headerImage[0].localFile.publicURL}
                    />
                )}
                <meta name="twitter:label1" content="Written by" />
                <meta name="twitter:data1" content={post.author[0].name} />
                <meta name="twitter:label2" content="Filed under" />
                {post.tags && <meta name="twitter:data2" content={post.tags[0].tag} />}
                {data.allFlotiqMainSettings.nodes[0].twitter_url
                && (
                    <meta
                        name="twitter:site"
                        content={`@${data.allFlotiqMainSettings.nodes[0].twitter_url.split('https://twitter.com/')[1]}`}
                    />
                )}
                {data.allFlotiqMainSettings.nodes[0].twitter_url && (
                    <meta
                        name="twitter:creator"
                        content={`@${data.allFlotiqMainSettings.nodes[0].twitter_url.split('https://twitter.com/')[1]}`}
                    />
                )}
                {post.headerImage[0] && <meta property="og:image:width" content={post.headerImage[0].width} />}
                {post.headerImage[0] && <meta property="og:image:height" content={post.headerImage[0].height} />}
            </Helmet>
            <div ref={progress}>
                <Container
                    fluid
                    className="post-reading"
                    style={{ opacity: visible ? 1 : 0, height: `${progressHeight}px` }}
                >
                    <div className="post-reading-content">
                        <Link to="/"><img src={Sygnet} alt="Flotiq" /></Link>
                        <div>
                            <p><strong>{post.title}</strong></p>
                            <span className="reading-time">{getReadingTime(post.content.blocks)}</span>
                        </div>
                    </div>
                    <div className="post-reading-progress" style={{ width: `${progressBar}%` }} />
                </Container>
                <Container>
                    <p className="text-center post-date pt-4 pb-4">
                        {moment(post.publish_date).format('DD MMM YYYY') }
                    </p>
                    <h1 className="text-center px-0 px-sm-3 px-md-5">{post.title}</h1>
                    <div className="text-center py-4">
                        {post.tags.map((tag) => (
                            <TagPill tag={tag} key={tag.id} />))}
                    </div>
                    <h4 className="text-center pb-4 pb-sm-5">{post.excerpt}</h4>
                    <div className="author-box pb-4 pb-sm-5">
                        <span className="reading-time">{getReadingTime(post.content.blocks)}</span>
                        <GatsbyImage
                            alt={post.author[0].name}
                            image={getImage(post.author[0].avatar[0].localFile)}
                            className="author-box-image"
                        />
                        <span>
                            By
                            {' '}
                            <Link to={`/author/${post.author[0].slug}`}>
                                {post.author[0].name}
                            </Link>
                        </span>
                    </div>
                    <div className="pt-3 pb-4 pb-sm-5">
                        <GatsbyImage
                            alt={post.title}
                            image={getImage(post.headerImage[0].localFile)}
                            className="post-image"
                        />
                    </div>
                    <Row>
                        <Col lg={1} md={1} sm={0} xs={0}>
                            <div className="floating-socials d-none d-md-block">
                                <SharePostButtons />
                            </div>
                        </Col>
                        <Col>
                            <Content
                                blocks={post.content.blocks}
                                quoteProps={{ variant: 'light' }}
                                tableProps={{ additionalClasses: ['custom-table'] }}
                                highlight={highlight}
                            />
                        </Col>
                        <Col lg={1} md={1} sm={0} xs={0} />
                    </Row>
                </Container>
            </div>
            <Container>
                <Row>
                    <Col lg={1} md={1} sm={0} xs={0} />
                    <Col>
                        <div className="mt-5 mb-3 text-center">
                            <p className="link-s bottom-socials-title">Share this article</p>
                            <div className="bottom-socials">
                                <SharePostButtons />
                            </div>
                        </div>
                        <div className="my-5 pb-5">
                            <CommentCount config={disqusConfig} placeholder="..." />
                            <Disqus config={disqusConfig} />
                        </div>
                    </Col>
                    <Col lg={1} md={1} sm={0} xs={0} />
                </Row>
            </Container>
            <Container fluid className="container-fluid__bigger-padding">
                {data.relatedPostsFromTags.nodes.length > 0 && (
                    <>
                        <h4 className="related mb-4">
                            <strong>
                                Posts related to
                                {' '}
                                <Link to={`/tags/${post.tags[0].tag}`}>
                                    {post.tags[0].tag_name}
                                </Link>
                            </strong>
                            <Link
                                to={`/tags/${post.tags[0].tag}`}
                                className="see-all"
                            >
                                See all
                            </Link>
                        </h4>
                        <div className="related-posts">
                            <Row xs={1} sm={1} md={3} lg={3}>
                                {data.relatedPostsFromTags.nodes.map((relatedPost) => (
                                    <Col key={relatedPost.id}>
                                        <PostCard post={relatedPost} pathPrefix={data.site.siteMetadata.pathPrefix} />
                                    </Col>
                                ))}
                            </Row>
                        </div>
                    </>
                )}
                <DiscoverMoreTopics
                    tags={pageContext.tags}
                    primaryTag={pageContext.primaryTag}
                />
            </Container>
            <div className="join-newsletter-floating">
                <JoinNewsletter />
            </div>
        </Layout>
    );
}