custom post header

src/components/Post/Content/Content.test.tsx

@@ -1,10 +1,17 @@
+import { Content } from "@/components/Post/Content";
+import * as mocks from "@/mocks";
+import { StaticQuery, useStaticQuery } from "gatsby";
 import React from "react";
 import renderer from "react-test-renderer";
 
-import { Content } from "@/components/Post/Content";
-import * as mocks from "@/mocks";
+const mockedStaticQuery = StaticQuery as jest.Mock;
+const mockedUseStaticQuery = useStaticQuery as jest.Mock;
 
 describe("Content", () => {
+  beforeEach(() => {
+    mockedStaticQuery.mockImplementationOnce(({ render }) => render(mocks.siteMetadata));
+    mockedUseStaticQuery.mockReturnValue(mocks.siteMetadata);
+  });
   it("renders correctly", () => {
     const props = {
       title: mocks.markdownRemark.frontmatter.title,

src/components/Post/Content/Content.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-
+import { useSiteMetadata } from "../../../hooks";
+import { PostHeader } from "../../PostHeader/PostHeader";
 import * as styles from "./Content.module.scss";
 
 interface Props {
@@ -7,11 +8,17 @@ interface Props {
   body: string;
 }
 
-const Content: React.FC<Props> = ({ body, title }: Props) => (
-  <div className={styles.content}>
-    <h1 className={styles.title}>{title}</h1>
-    <div className={styles.body} dangerouslySetInnerHTML={{ __html: body }} />
-  </div>
-);
+const Content: React.FC<Props> = ({ body, title }: Props) => {
+  const { author } = useSiteMetadata();
+  return (
+    <>
+      <PostHeader author={author} />
+      <div className={styles.content}>
+        <h1 className={styles.title}>{title}</h1>
+        <div className={styles.body} dangerouslySetInnerHTML={{ __html: body }} />
+      </div>
+    </>
+  );
+};
 
 export default Content;

src/components/Post/Content/__snapshots__/Content.test.tsx.snap

@@ -1,16 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Content renders correctly 1`] = `
-<div>
-  <h1>
-    Perfecting the Art of Perfection
-  </h1>
-  <div
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "<p>An Essay on Typography by Eric Gill takes the reader back to the year 1930. The year when a conflict between two worlds came to its term. The machines of the industrial world finally took over the handicrafts.</p>",
+Array [
+  <div>
+    <span>
+      <span>
+        <a
+          href="/"
+        >
+          Rick 
+          <span>
+            van Lieshout
+          </span>
+        </a>
+      </span>
+    </span>
+    <span>
+      <a
+        href="/"
+        style={
+          Object {
+            "lineHeight": "50px",
+            "marginRight": "10px",
+          }
+        }
+      >
+        ↩ All articles
+      </a>
+    </span>
+  </div>,
+  <div>
+    <h1>
+      Perfecting the Art of Perfection
+    </h1>
+    <div
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "<p>An Essay on Typography by Eric Gill takes the reader back to the year 1930. The year when a conflict between two worlds came to its term. The machines of the industrial world finally took over the handicrafts.</p>",
+        }
       }
-    }
-  />
-</div>
+    />
+  </div>,
+]
 `;

src/components/Post/Post.tsx

@@ -1,16 +1,11 @@
+import type { Node } from "@/types";
 import React from "react";
-
-import { Link } from "gatsby";
-
-
 import { Author } from "./Author";
 import { Comments } from "./Comments";
 import { Content } from "./Content";
 import { Meta } from "./Meta";
-import { Tags } from "./Tags";
-
 import * as styles from "./Post.module.scss";
-import type { Node } from "@/types";
+import { Tags } from "./Tags";
 
 interface Props {
   post: Node;
@@ -23,10 +18,6 @@ const Post: React.FC<Props> = ({ post }: Props) => {
 
   return (
     <div className={styles.post}>
-      <Link className={styles.button} to="/">
-        All Articles
-      </Link>
-
       <div className={styles.content}>
         <Content body={html} title={title} />
       </div>

src/components/Post/__snapshots__/Post.test.tsx.snap

@@ -2,12 +2,34 @@
 
 exports[`Post renders correctly 1`] = `
 <div>
-  <a
-    href="/"
-  >
-    All Articles
-  </a>
   <div>
+    <div>
+      <span>
+        <span>
+          <a
+            href="/"
+          >
+            Rick 
+            <span>
+              van Lieshout
+            </span>
+          </a>
+        </span>
+      </span>
+      <span>
+        <a
+          href="/"
+          style={
+            Object {
+              "lineHeight": "50px",
+              "marginRight": "10px",
+            }
+          }
+        >
+          ↩ All articles
+        </a>
+      </span>
+    </div>
     <div>
       <h1>
         Perfecting the Art of Perfection