text: import React, { useEffect } from "react";
  import { Link, graphql } from "gatsby";
  
  import Bio from "../components/bio";
  import Layout from "../components/layout";
  import Seo from "../components/seo";
  
  const BlogPostTemplate = ({ data, pageContext, location }) => {
    const post = data.markdownRemark;
    const siteTitle = data.site.siteMetadata.title;
    const { previous, next } = pageContext;
  
    useEffect(() => {
      const utterancesScript = document.createElement("script");
  
      utterancesScript.setAttribute("src", "https://utteranc.es/client.js");
      utterancesScript.setAttribute("repo", "maddhruv/maddhruv.github.io");
      utterancesScript.setAttribute("issue-term", "title");
      utterancesScript.setAttribute("async", true);
      utterancesScript.setAttribute("theme", "preferred-color-scheme");
  
      document.getElementsByTagName("main")[0].appendChild(utterancesScript);
  
      return () => {
        document.getElementsByTagName("main")[0].removeChild(utterancesScript);
      };
    }, []);
  
    return (
      <Layout location={location} title={siteTitle}>
        <Seo
          title={post.frontmatter.title}
          description={post.frontmatter.description || post.excerpt}
        />
        <article>
          <header>
            <h1>{post.frontmatter.title}</h1>
            <h5>{post.frontmatter.description}</h5>
            <p>{post.frontmatter.date}</p>
          </header>
          <section dangerouslySetInnerHTML={{ __html: post.html }} />
          <hr />
          <footer>
            <Bio />
          </footer>
        </article>
  
        <nav>
          <ul id="🔗">
            <li>
              {previous && (
                <Link to={previous.fields.slug} rel="prev">
                  ← {previous.frontmatter.title}
                </Link>
              )}
            </li>
            <li>
              {next && (
                <Link to={next.fields.slug} rel="next">
                  {next.frontmatter.title} →
                </Link>
              )}
            </li>
          </ul>
        </nav>
      </Layout>
    );
  };
  
  export default BlogPostTemplate;
  
  export const pageQuery = graphql`
    query BlogPostBySlug($slug: String!) {
      site {
        siteMetadata {
          title
        }
      }
      markdownRemark(fields: { slug: { eq: $slug } }) {
        id
        excerpt(pruneLength: 160)
        html
        frontmatter {
          title
          date(formatString: "MMMM DD, YYYY")
          description
        }
      }
    }
  `;
  