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

src/components/PostHeader/PostHeader.module.scss

@@ -0,0 +1,54 @@
+@import "../../assets/scss/variables";
+@import "../../assets/scss/mixins";
+
+.header {
+  align-items: baseline;
+  background: #fff;
+  border-bottom: 1px solid #808080;
+  color: #000;
+  display: flex;
+  height: 50px;
+  justify-content: space-between;
+  margin:auto;
+  max-width: $layout-post-width;
+  position: sticky;
+  top:0;
+  z-index: 999;
+
+  .title {
+    font-size: $typographic-base-font-size * 1.125 !important;
+    font-weight: 600;
+    line-height: 50px !important;
+    @include line-height(1.125);
+    @include margin(0.5, 0, 0.5, 0);
+
+    .link {
+      color: $color-base;
+
+      &:hover,
+      &:focus {
+        color: $color-base;
+      }
+    }
+  }
+
+  .name {
+    color: #000;
+  }
+}
+
+@media only screen and (max-device-width: 350px){
+  .surname{
+    display: none;
+  }
+}
+
+.photo {
+  background-clip: padding-box;
+  border-radius: 50%;
+  display: inline-block;
+  height: 40px;
+  margin-top: 5px;
+  width: 40px;
+  @include margin-bottom(0);
+}

src/components/PostHeader/PostHeader.tsx

@@ -0,0 +1,27 @@
+import { Image } from "@/components/Image";
+import { Link } from "gatsby";
+import React, { FunctionComponent } from "react";
+import * as styles from "./PostHeader.module.scss";
+
+type Props = { author: { name: string; photo: string } };
+
+export const PostHeader: FunctionComponent<Props> = ({ author }) => {
+  return (
+    <div className={styles.header}>
+      <span>
+        <Image alt={author.name} path={author.photo} className={styles.photo} />
+        <span className={styles.title}>
+          <Link className={styles.name} to="/">
+            Rick <span className={styles.surname}>van Lieshout</span>
+          </Link>
+        </span>
+      </span>
+
+      <span>
+        <Link to="/" style={{ lineHeight: "50px", marginRight: "10px" }}>
+          ↩ All articles
+        </Link>
+      </span>
+    </div>
+  );
+};

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

@@ -3,12 +3,34 @@
 exports[`PostTemplate renders correctly 1`] = `
 <div>
   <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