github-profile-readme-generator/src/templates/blogTemplate.js

import React from 'react';
import { graphql } from 'gatsby';
// import Header from '../components/header'
// import Footer from '../components/footer'
import { Helmet } from 'react-helmet';
import Layout from '../components/layout';

export default function Template({
  data, // this prop will be injected by the GraphQL query below.
}) {
  const { markdownRemark } = data; // data.markdownRemark holds your post data
  const { frontmatter, html } = markdownRemark;
  return (
    <Layout>
      <Helmet>
        <meta charSet="utf-8" />
        <title>{frontmatter.title}</title>
        <link rel="canonical" href={`https://rahuldkjain.github.io/gh-profile-readme-generator`} />
      </Helmet>
      <div className="m-4 sm:p-10">
        <div className="blog-post">
          <h1 className="text-4xl font-bold">{frontmatter.title}</h1>
          <div className="markdown" dangerouslySetInnerHTML={{ __html: html }} />
        </div>
      </div>
    </Layout>
  );
}

export const pageQuery = graphql`
  query($slug: String!) {
    markdownRemark(frontmatter: { slug: { eq: $slug } }) {
      html
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        slug
        title
      }
    }
  }
`;