custom post header

README.md

@@ -5,10 +5,11 @@ This is the repository for my personal blog/website [rickvanlieshout.com](https:
 ## Todo
 
 - Add a dark mode
-- custom blog header
+
 - migrate resume
 - migrate projects
 - migrate some example blogs
+
 - release to sftp or gh-pages
 - "time to read"
 - Maybe improve the cookie page with actual cookie data?

content/pages/legal/cookies/index.md

@@ -23,9 +23,19 @@ include:
 Cookies like these are stored for pretty much every website you
 visit and they make the World Wide Web what it is today.
 
+## The EU cookie law
+
 Since mid 2015 every website which is either hosted in Europe or
 targets the European market is required to inform and get consent from
 users about using cookies. This is usually done with a bar at the
 bottom of the page which can be dismissed with a simple button. More
 information about the legislation around the cookie law can be found
 [here](https://wikis.ec.europa.eu/display/WEBGUIDE/04.+Cookies+and+similar+technologies).
+
+## Revoking cookie access
+
+All well known browser offer a way for you to revoke any cookie. Explore the links below to learn more.
+
+- [Deleting cookies in Chrome](https://support.google.com/chrome/answer/95647?co=GENIE.Platform%3DDesktop&hl=en)
+- [Deleting cookies in Firefox](https://support.mozilla.org/en-US/kb/delete-cookies-remove-info-websites-stored)
+- [Deleting cookies in Edge](https://privacy.microsoft.com/en-us/windows-10-microsoft-edge-and-privacy)

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) => (
+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,6 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Content renders correctly 1`] = `
+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
@@ -12,5 +40,6 @@ exports[`Content renders correctly 1`] = `
         }
       }
     />
-</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>
+  <div>
+    <div>
+      <span>
+        <span>
           <a
             href="/"
           >
-    All Articles
+            Rick 
+            <span>
+              van Lieshout
+            </span>
           </a>
-  <div>
+        </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>
+    <div>
+      <div>
+        <span>
+          <span>
             <a
               href="/"
             >
-      All Articles
+              Rick 
+              <span>
+                van Lieshout
+              </span>
             </a>
-    <div>
+          </span>
+        </span>
+        <span>
+          <a
+            href="/"
+            style={
+              Object {
+                "lineHeight": "50px",
+                "marginRight": "10px",
+              }
+            }
+          >
+            ↩ All articles
+          </a>
+        </span>
+      </div>
       <div>
         <h1>
           Perfecting the Art of Perfection