refactor(starter): upgrade to new version of gatsby

src/templates/PostTemplate/PostTemplate.test.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import renderer from "react-test-renderer";
+
+import { StaticQuery, useStaticQuery } from "gatsby";
+
+import * as mocks from "@/mocks";
+
+import PostTemplate from "./PostTemplate";
+
+const mockedStaticQuery = StaticQuery as jest.Mock;
+const mockedUseStaticQuery = useStaticQuery as jest.Mock;
+
+describe("PostTemplate", () => {
+  const props = {
+    data: {
+      markdownRemark: mocks.markdownRemark,
+    },
+  };
+
+  beforeEach(() => {
+    mockedStaticQuery.mockImplementationOnce(({ render }) => render(mocks.siteMetadata));
+    mockedUseStaticQuery.mockReturnValue(mocks.siteMetadata);
+  });
+
+  it("renders correctly", () => {
+    const tree = renderer.create(<PostTemplate {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/templates/PostTemplate/PostTemplate.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+
+import { graphql } from "gatsby";
+
+import { Layout } from "@/components/Layout";
+import { Post } from "@/components/Post";
+import { useSiteMetadata } from "@/hooks";
+import { Node } from "@/types";
+
+interface Props {
+  data: {
+    markdownRemark: Node;
+  };
+}
+
+const PostTemplate: React.FC<Props> = ({ data }: Props) => {
+  const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata();
+  const { frontmatter } = data.markdownRemark;
+  const { title, description = "", socialImage } = frontmatter;
+  const metaDescription = description || siteSubtitle;
+
+  return (
+    <Layout
+      title={`${title} - ${siteTitle}`}
+      description={metaDescription}
+      socialImage={socialImage?.publicURL}
+    >
+      <Post post={data.markdownRemark} />
+    </Layout>
+  );
+};
+
+export const query = graphql`
+  query PostBySlug($slug: String!) {
+    markdownRemark(fields: { slug: { eq: $slug } }) {
+      id
+      html
+      fields {
+        slug
+        tagSlugs
+      }
+      frontmatter {
+        date
+        description
+        tags
+        title
+        socialImage {
+          publicURL
+        }
+      }
+    }
+  }
+`;
+
+export default PostTemplate;

src/templates/PostTemplate/__snapshots__/PostTemplate.test.tsx.snap

@@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PostTemplate renders correctly 1`] = `
+<div
+  className="layout"
+>
+  <div
+    className="post"
+  >
+    <a
+      className="post__home-button"
+      href="/"
+    >
+      All Articles
+    </a>
+    <div
+      className="post__content"
+    >
+      <div
+        className="content"
+      >
+        <h1
+          className="content__title"
+        >
+          Perfecting the Art of Perfection
+        </h1>
+        <div
+          className="content__body"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "",
+            }
+          }
+        />
+      </div>
+    </div>
+    <div
+      className="post__footer"
+    >
+      <div
+        className="meta"
+      >
+        <p
+          className="meta__date"
+        >
+          Published
+           
+          Sep 1, 2016
+        </p>
+      </div>
+      <div
+        className="author"
+      >
+        <p
+          className="author__bio"
+        >
+          Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
+          <a
+            className="author__bio-twitter"
+            href="https://www.twitter.com/#"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <strong>
+              John Doe
+            </strong>
+             on Twitter
+          </a>
+        </p>
+      </div>
+    </div>
+    <div
+      className="post__comments"
+    />
+  </div>
+</div>
+`;

src/templates/PostTemplate/index.ts

@@ -0,0 +1 @@
+export { default as PostTemplate } from "./PostTemplate";