From c68130e3844214aa2ac12ad8062a89d78d2aa8f5 Mon Sep 17 00:00:00 2001
From: Kateryna Bugaieva <kateryna.bugaieva@satellytes.com>
Date: Wed, 5 Aug 2020 20:55:06 +0200
Subject: [PATCH 1/6] feat: add author and date after the post

---
 README.md                                     |  4 +-
 .../angular-advanced-workshop-skipbo.md       |  5 +-
 ...-com-with-gatsby-contentful-and-netlify.md |  5 +-
 data/blog-posts/how-to-do-a-blog-post.md      |  3 +-
 ...ght-sky-with-shooting-stars-made-in-svg.md |  3 +-
 src/components/signature/signature.test.tsx   | 53 +++++++++++++++++++
 src/components/signature/signature.tsx        | 45 ++++++++++++++++
 src/templates/blog-post.tsx                   | 11 ++++
 8 files changed, 122 insertions(+), 7 deletions(-)
 create mode 100644 src/components/signature/signature.test.tsx
 create mode 100644 src/components/signature/signature.tsx

diff --git a/README.md b/README.md
index cc0ccae84..fabba0bb4 100644
--- a/README.md
+++ b/README.md
@@ -27,8 +27,9 @@ metadata in the frontmatter header. The blog post files live in [/data/blog-post
 The metadata contains:
 - `path`: The URL Path to the blog post. It should start with `/blog/`
 - `date`: The date of the blog post
-- `title`: The title of the blog post'
+- `title`: The title of the blog post
 - `previewImage`: Set to true if you want to display a placeholder image in the blog post preview
+-  `author`: The author of the blog post
 
 The preview text on the blog overview page will be generated automatically by the first few sentences. You can also
 manually set a breakpoint with `<!-- end -->` to create a preview text from the blog posts start until this marker.
@@ -45,6 +46,7 @@ An example of a markdown file:
 path: "/blog/your_blog_post_url"
 date: "YYYY-MM-DD"
 title: "Your title"
+author: "Your author"
 ---
 
 This is a demo post.
diff --git a/data/blog-posts/angular-advanced-workshop-skipbo.md b/data/blog-posts/angular-advanced-workshop-skipbo.md
index 402a0524e..66002796f 100644
--- a/data/blog-posts/angular-advanced-workshop-skipbo.md
+++ b/data/blog-posts/angular-advanced-workshop-skipbo.md
@@ -1,8 +1,9 @@
 ---
 path: "/blog/angular-advanced-workshop-skipbo"
-date: "2018-12-08"
+date: "2020-08-05"
 title: "Angular Advanced Workshop"
 previewImage: true
+author: "Max Mustermann"
 ---
 
 This week an intense month of planning, preparing & developing an Advanced Angular Workshop ended with the workshop itself. Over the course of three days, 15 developers listened to six chapters each with a theory and a challenge part. Every theory part (~1h) is accompanied by a challenge (~2h ) with the goal to implement a full card game application. I chose Skip-Bo as it's a well known game and the rules are easy to grasp.
@@ -11,4 +12,4 @@ The workshop was a huge success. I'm so proud of every single participant. They
 
 You can play with the final project online. https://skipbo-angular-workshop.netlify.com
 
-Here a quick video of the gameplay part.
\ No newline at end of file
+Here a quick video of the gameplay part.
diff --git a/data/blog-posts/building-www-satellytes-com-with-gatsby-contentful-and-netlify.md b/data/blog-posts/building-www-satellytes-com-with-gatsby-contentful-and-netlify.md
index 897ca935a..49a7c0f23 100644
--- a/data/blog-posts/building-www-satellytes-com-with-gatsby-contentful-and-netlify.md
+++ b/data/blog-posts/building-www-satellytes-com-with-gatsby-contentful-and-netlify.md
@@ -1,8 +1,9 @@
 ---
 path: "/blog/building-www-satellytes-com-with-gatsby-contentful-and-netlify"
-date: "2018-10-10"
+date: "2020-08-01"
 title: "Building satellytes.com with Gatsby, Contentful & Netlify"
 previewImage: true
+author: "F. Scott Fitzgerald"
 ---
 
 This page's sources are hosted on GitHub if you want to look into the sources. We are using Gatsby 2 already.
@@ -37,4 +38,4 @@ allContentfulEvents(sort: {fields: [date], order: ASC}) {
   }
 ```
 
-That query returns JSON and the data structure will be exactly as you see it. Gatsby and its plugins are doing the necessary work that you are only left writing GraphQL queries. It's really amazing!
\ No newline at end of file
+That query returns JSON and the data structure will be exactly as you see it. Gatsby and its plugins are doing the necessary work that you are only left writing GraphQL queries. It's really amazing!
diff --git a/data/blog-posts/how-to-do-a-blog-post.md b/data/blog-posts/how-to-do-a-blog-post.md
index fa40fa583..b123997f1 100644
--- a/data/blog-posts/how-to-do-a-blog-post.md
+++ b/data/blog-posts/how-to-do-a-blog-post.md
@@ -4,6 +4,7 @@ date: "2020-05-04"
 title: "How to do a blog post"
 previewImage: true
 image: https://res.cloudinary.com/satellytes/image/upload/v1594992283/satellytes-website/blog-how-to-do-a-blogpost_h5txir.jpg
+author: "John Doe"
 ---
 
 Dear colleagues,
@@ -63,4 +64,4 @@ Text before the blockquote.
 
 > Block scope stuff
 
-Text after the blockquote.
\ No newline at end of file
+Text after the blockquote.
diff --git a/data/blog-posts/twinkling-night-sky-with-shooting-stars-made-in-svg.md b/data/blog-posts/twinkling-night-sky-with-shooting-stars-made-in-svg.md
index 01e27da17..d085b0cff 100644
--- a/data/blog-posts/twinkling-night-sky-with-shooting-stars-made-in-svg.md
+++ b/data/blog-posts/twinkling-night-sky-with-shooting-stars-made-in-svg.md
@@ -2,6 +2,7 @@
 path: "/blog/twinkling-night-sky-with-shooting-stars-made-in-svg"
 date: "2018-10-27"
 title: "Twinkling night sky with shooting stars made in SVG"
+author: "Georgios Kaleadis"
 ---
 
 Have you seen the stars background effect on our start page? Here a quick post how we built it.
@@ -28,4 +29,4 @@ const STAR_COORDS = [
 ]
 ```
 
-To create the actuals stars, iterate of this list, create a group (to hold the translation) and your actual circle element inside. Assign the CSS class .star so we can modify it later with CSS. To create any SVG element with JS you need to use document.createElementNS which looks pretty long combined with the involved namespace. This always looks uncomfortable to me — so you're not alone.
\ No newline at end of file
+To create the actuals stars, iterate of this list, create a group (to hold the translation) and your actual circle element inside. Assign the CSS class .star so we can modify it later with CSS. To create any SVG element with JS you need to use document.createElementNS which looks pretty long combined with the involved namespace. This always looks uncomfortable to me — so you're not alone.
diff --git a/src/components/signature/signature.test.tsx b/src/components/signature/signature.test.tsx
new file mode 100644
index 000000000..bb00f76b8
--- /dev/null
+++ b/src/components/signature/signature.test.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import Signature from './signature';
+import { render } from '@testing-library/react';
+
+const testData = [
+  {
+    author: 'John Doe',
+    date: '2020-05-05',
+  },
+  {
+    author: 'John Doe',
+    date: new Date().toString(),
+  },
+];
+
+describe(Signature.name, () => {
+  it('should render', () => {
+    const signature = render(
+      <Signature author={testData[0].author} date={testData[0].date} />,
+    );
+    expect(signature).toBeTruthy();
+  });
+
+  it('should contain author', () => {
+    const { getByText } = render(
+      <Signature author={testData[0].author} date={testData[0].date} />,
+    );
+    const author = getByText('von John Doe');
+    expect(author).toBeTruthy();
+  });
+
+  describe('days label', () => {
+    it('should render label "vor Tag" if date today', () => {
+      const { findByText } = render(
+        <Signature author={testData[1].author} date={testData[1].date} />,
+      );
+      const date = findByText('Tag');
+      expect(date).toBeTruthy();
+    });
+
+    it('should render label "Tagen" if date earlier than today', () => {
+      const { findByText } = render(
+        <Signature author={testData[0].author} date={testData[0].date} />,
+      );
+      const date = findByText('Tagen');
+      expect(date).toBeTruthy();
+    });
+
+    it('should render correct number of days', () => {
+      pending('waiting for implementation');
+    });
+  });
+});
diff --git a/src/components/signature/signature.tsx b/src/components/signature/signature.tsx
new file mode 100644
index 000000000..e247fd031
--- /dev/null
+++ b/src/components/signature/signature.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export interface SignatureProps {
+  author: string;
+  date: string;
+}
+
+const SignatureContainer = styled.div`
+  color: #668cff;
+  margin-top: 80px;
+`;
+
+const SignatureDivider = styled.div`
+  border-bottom: 2px solid #668cff;
+  margin-bottom: 32px;
+  width: 60px;
+`;
+
+const SignatureAuthor = styled.p`
+  font-weight: bold;
+`;
+
+const SignatureDaysPassed = styled.p`
+  font-weight: normal;
+`;
+
+const Signature: React.FC<SignatureProps> = ({ author, date }) => {
+  const currentDate = Date.parse(new Date().toString());
+  const incomingDate = Date.parse(new Date(date).toString());
+  const daysPassed = Math.round((currentDate - incomingDate) / 86400000);
+  const daysText = daysPassed > 2 ? 'Tagen' : 'Tag';
+
+  return (
+    <SignatureContainer>
+      <SignatureDivider />
+      <SignatureAuthor>von {author}</SignatureAuthor>
+      <SignatureDaysPassed>
+        vor {daysPassed} {daysText}
+      </SignatureDaysPassed>
+    </SignatureContainer>
+  );
+};
+
+export default Signature;
diff --git a/src/templates/blog-post.tsx b/src/templates/blog-post.tsx
index 9500d5e39..aa3005ebd 100644
--- a/src/templates/blog-post.tsx
+++ b/src/templates/blog-post.tsx
@@ -8,6 +8,7 @@ import { Markdown } from '../components/markdown/markdown';
 import { SectionTitle } from '../components/typography/typography';
 import styled from 'styled-components';
 import { up } from '../components/breakpoint/breakpoint';
+import Signature from '../components/signature/signature';
 
 interface BlogArticleTemplateProps {
   data: {
@@ -16,6 +17,7 @@ interface BlogArticleTemplateProps {
         date: string;
         title: string;
         image?: string;
+        author: string;
       };
       rawMarkdownBody: string;
     };
@@ -44,6 +46,14 @@ const BlogArticleTemplate: React.FC<BlogArticleTemplateProps> = ({ data }) => {
             {data.markdownRemark.frontmatter.title}
           </BlogPostTitle>
           <Markdown data={data.markdownRemark.rawMarkdownBody} />
+          {data.markdownRemark.frontmatter.author && (
+            <Signature
+              author={data.markdownRemark.frontmatter.author}
+              date={data.markdownRemark.frontmatter.date}
+            />
+          )}
+
+          {!data.markdownRemark.frontmatter.author && 'TODO: no author error'}
         </GridItem>
       </Grid>
     </Layout>
@@ -58,6 +68,7 @@ export const BLOG_POST_PAGE_QUERY = graphql`
         path
         title
         image
+        author
       }
       rawMarkdownBody
     }

From 724fde77aa01747a6dc932f2a5d2de3977fa2214 Mon Sep 17 00:00:00 2001
From: katerynabugaieva <kateryna.bugaieva@satellytes.com>
Date: Thu, 6 Aug 2020 12:40:28 +0200
Subject: [PATCH 2/6] chore: update date formating

---
 src/components/signature/signature.test.tsx | 25 ++++++++++++---------
 src/components/signature/signature.tsx      |  5 ++---
 src/templates/blog-post.tsx                 |  2 --
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/components/signature/signature.test.tsx b/src/components/signature/signature.test.tsx
index bb00f76b8..f1947d1d8 100644
--- a/src/components/signature/signature.test.tsx
+++ b/src/components/signature/signature.test.tsx
@@ -1,16 +1,20 @@
+import { render } from '@testing-library/react';
 import React from 'react';
 import Signature from './signature';
-import { render } from '@testing-library/react';
 
 const testData = [
   {
     author: 'John Doe',
-    date: '2020-05-05',
+    date: '2020-07-01',
   },
   {
     author: 'John Doe',
     date: new Date().toString(),
   },
+  {
+    author: 'John Doe',
+    date: '2020-08-01',
+  },
 ];
 
 describe(Signature.name, () => {
@@ -25,29 +29,30 @@ describe(Signature.name, () => {
     const { getByText } = render(
       <Signature author={testData[0].author} date={testData[0].date} />,
     );
-    const author = getByText('von John Doe');
-    expect(author).toBeTruthy();
+    expect(getByText('von John Doe')).toBeTruthy();
   });
 
   describe('days label', () => {
-    it('should render label "vor Tag" if date today', () => {
+    it('should render label "Tag" if date today', () => {
       const { findByText } = render(
         <Signature author={testData[1].author} date={testData[1].date} />,
       );
-      const date = findByText('Tag');
-      expect(date).toBeTruthy();
+      expect(findByText('Tag')).toBeTruthy();
     });
 
     it('should render label "Tagen" if date earlier than today', () => {
       const { findByText } = render(
         <Signature author={testData[0].author} date={testData[0].date} />,
       );
-      const date = findByText('Tagen');
-      expect(date).toBeTruthy();
+      expect(findByText('Tagen')).toBeTruthy();
     });
 
     it('should render correct number of days', () => {
-      pending('waiting for implementation');
+      const { getByText } = render(
+        <Signature author={testData[2].author} date={testData[2].date} />,
+      );
+      const date = getByText('vor 5 Tagen');
+      expect(date).toBeTruthy();
     });
   });
 });
diff --git a/src/components/signature/signature.tsx b/src/components/signature/signature.tsx
index e247fd031..2ce7e8b49 100644
--- a/src/components/signature/signature.tsx
+++ b/src/components/signature/signature.tsx
@@ -1,3 +1,4 @@
+import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
 import React from 'react';
 import styled from 'styled-components';
 
@@ -26,9 +27,7 @@ const SignatureDaysPassed = styled.p`
 `;
 
 const Signature: React.FC<SignatureProps> = ({ author, date }) => {
-  const currentDate = Date.parse(new Date().toString());
-  const incomingDate = Date.parse(new Date(date).toString());
-  const daysPassed = Math.round((currentDate - incomingDate) / 86400000);
+  const daysPassed = differenceInCalendarDays(new Date(), new Date(date));
   const daysText = daysPassed > 2 ? 'Tagen' : 'Tag';
 
   return (
diff --git a/src/templates/blog-post.tsx b/src/templates/blog-post.tsx
index aa3005ebd..839410f56 100644
--- a/src/templates/blog-post.tsx
+++ b/src/templates/blog-post.tsx
@@ -52,8 +52,6 @@ const BlogArticleTemplate: React.FC<BlogArticleTemplateProps> = ({ data }) => {
               date={data.markdownRemark.frontmatter.date}
             />
           )}
-
-          {!data.markdownRemark.frontmatter.author && 'TODO: no author error'}
         </GridItem>
       </Grid>
     </Layout>

From f55b43dd8ef725a3ac409bf7ca0a9331c2512a92 Mon Sep 17 00:00:00 2001
From: katerynabugaieva <sonnensmile@gmail.com>
Date: Fri, 7 Aug 2020 12:12:31 +0200
Subject: [PATCH 3/6] chore: pr fixes

---
 .../angular-advanced-workshop-skipbo.md       |  1 +
 ...-com-with-gatsby-contentful-and-netlify.md |  1 +
 data/blog-posts/how-to-do-a-blog-post.md      |  3 +-
 src/components/byline/byline.test.tsx         | 48 +++++++++++++++
 src/components/byline/byline.tsx              | 51 ++++++++++++++++
 src/components/signature/signature.test.tsx   | 58 -------------------
 src/components/signature/signature.tsx        | 44 --------------
 src/templates/blog-post.tsx                   |  9 ++-
 8 files changed, 109 insertions(+), 106 deletions(-)
 create mode 100644 src/components/byline/byline.test.tsx
 create mode 100644 src/components/byline/byline.tsx
 delete mode 100644 src/components/signature/signature.test.tsx
 delete mode 100644 src/components/signature/signature.tsx

diff --git a/data/blog-posts/angular-advanced-workshop-skipbo.md b/data/blog-posts/angular-advanced-workshop-skipbo.md
index 66002796f..4a3d4f6d6 100644
--- a/data/blog-posts/angular-advanced-workshop-skipbo.md
+++ b/data/blog-posts/angular-advanced-workshop-skipbo.md
@@ -4,6 +4,7 @@ date: "2020-08-05"
 title: "Angular Advanced Workshop"
 previewImage: true
 author: "Max Mustermann"
+authorSummary: "Frontend developer" 
 ---
 
 This week an intense month of planning, preparing & developing an Advanced Angular Workshop ended with the workshop itself. Over the course of three days, 15 developers listened to six chapters each with a theory and a challenge part. Every theory part (~1h) is accompanied by a challenge (~2h ) with the goal to implement a full card game application. I chose Skip-Bo as it's a well known game and the rules are easy to grasp.
diff --git a/data/blog-posts/building-www-satellytes-com-with-gatsby-contentful-and-netlify.md b/data/blog-posts/building-www-satellytes-com-with-gatsby-contentful-and-netlify.md
index 49a7c0f23..f63b987ec 100644
--- a/data/blog-posts/building-www-satellytes-com-with-gatsby-contentful-and-netlify.md
+++ b/data/blog-posts/building-www-satellytes-com-with-gatsby-contentful-and-netlify.md
@@ -4,6 +4,7 @@ date: "2020-08-01"
 title: "Building satellytes.com with Gatsby, Contentful & Netlify"
 previewImage: true
 author: "F. Scott Fitzgerald"
+authorSummary: "Writer" 
 ---
 
 This page's sources are hosted on GitHub if you want to look into the sources. We are using Gatsby 2 already.
diff --git a/data/blog-posts/how-to-do-a-blog-post.md b/data/blog-posts/how-to-do-a-blog-post.md
index b123997f1..a32de5db0 100644
--- a/data/blog-posts/how-to-do-a-blog-post.md
+++ b/data/blog-posts/how-to-do-a-blog-post.md
@@ -1,10 +1,11 @@
 ---
 path: "/blog/how-to-do-a-blog-post"
-date: "2020-05-04"
+date: "2020-08-06"
 title: "How to do a blog post"
 previewImage: true
 image: https://res.cloudinary.com/satellytes/image/upload/v1594992283/satellytes-website/blog-how-to-do-a-blogpost_h5txir.jpg
 author: "John Doe"
+authorSummary: "Developer" 
 ---
 
 Dear colleagues,
diff --git a/src/components/byline/byline.test.tsx b/src/components/byline/byline.test.tsx
new file mode 100644
index 000000000..2b6dba3d7
--- /dev/null
+++ b/src/components/byline/byline.test.tsx
@@ -0,0 +1,48 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import Byline from './byline';
+
+const testData = [
+  {
+    author: 'John Doe',
+    date: new Date(Date.UTC(2020, 1, 21)),
+    authorSummary: 'Frontend developer',
+  },
+];
+
+describe('Byline', () => {
+  let byline: any;
+
+  beforeAll(() => {
+    Date.now = jest.fn(() => new Date(Date.UTC(2020, 1, 31)).valueOf());
+  });
+
+  beforeEach(() => {
+    byline = render(
+      <Byline
+        author={testData[0].author}
+        date={testData[0].date}
+        authorSummary={testData[0].authorSummary}
+      />,
+    );
+  });
+
+  it('should render', () => {
+    expect(byline).toBeTruthy();
+  });
+
+  it('should contain author', () => {
+    const author = byline.findByText('von John Done');
+    expect(author).toBeTruthy();
+  });
+
+  it('should contain author summary', () => {
+    const summary = byline.getByText('Frontend developer');
+    expect(summary).toBeTruthy();
+  });
+
+  it('should contain date', () => {
+    const date = byline.getByText('vor 10 Tagen');
+    expect(date).toBeTruthy();
+  });
+});
diff --git a/src/components/byline/byline.tsx b/src/components/byline/byline.tsx
new file mode 100644
index 000000000..4f9eb450b
--- /dev/null
+++ b/src/components/byline/byline.tsx
@@ -0,0 +1,51 @@
+import { formatDistanceToNow } from 'date-fns';
+import { de } from 'date-fns/locale';
+import React from 'react';
+import styled from 'styled-components';
+
+export interface BylineProps {
+  author: string;
+  authorSummary: string;
+  date: Date;
+}
+
+const BylineContainer = styled.div`
+  color: #668cff;
+  margin-top: 80px;
+`;
+
+const BylineDivider = styled.div`
+  border-bottom: 2px solid #668cff;
+  margin-bottom: 32px;
+  width: 60px;
+`;
+
+const BylineAuthor = styled.p`
+  font-weight: bold;
+`;
+
+const BylineAuthorSummary = styled.p`
+  font-weight: normal;
+`;
+
+const BylineTimeFromPosted = styled.p`
+  font-weight: normal;
+`;
+
+const Byline: React.FC<BylineProps> = ({ author, date, authorSummary }) => {
+  const timeFromPosted = formatDistanceToNow(new Date(date), {
+    locale: de,
+    addSuffix: true,
+  });
+
+  return (
+    <BylineContainer>
+      <BylineDivider />
+      <BylineAuthor>von {author}</BylineAuthor>
+      <BylineAuthorSummary>{authorSummary}</BylineAuthorSummary>
+      <BylineTimeFromPosted>{timeFromPosted}</BylineTimeFromPosted>
+    </BylineContainer>
+  );
+};
+
+export default Byline;
diff --git a/src/components/signature/signature.test.tsx b/src/components/signature/signature.test.tsx
deleted file mode 100644
index f1947d1d8..000000000
--- a/src/components/signature/signature.test.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { render } from '@testing-library/react';
-import React from 'react';
-import Signature from './signature';
-
-const testData = [
-  {
-    author: 'John Doe',
-    date: '2020-07-01',
-  },
-  {
-    author: 'John Doe',
-    date: new Date().toString(),
-  },
-  {
-    author: 'John Doe',
-    date: '2020-08-01',
-  },
-];
-
-describe(Signature.name, () => {
-  it('should render', () => {
-    const signature = render(
-      <Signature author={testData[0].author} date={testData[0].date} />,
-    );
-    expect(signature).toBeTruthy();
-  });
-
-  it('should contain author', () => {
-    const { getByText } = render(
-      <Signature author={testData[0].author} date={testData[0].date} />,
-    );
-    expect(getByText('von John Doe')).toBeTruthy();
-  });
-
-  describe('days label', () => {
-    it('should render label "Tag" if date today', () => {
-      const { findByText } = render(
-        <Signature author={testData[1].author} date={testData[1].date} />,
-      );
-      expect(findByText('Tag')).toBeTruthy();
-    });
-
-    it('should render label "Tagen" if date earlier than today', () => {
-      const { findByText } = render(
-        <Signature author={testData[0].author} date={testData[0].date} />,
-      );
-      expect(findByText('Tagen')).toBeTruthy();
-    });
-
-    it('should render correct number of days', () => {
-      const { getByText } = render(
-        <Signature author={testData[2].author} date={testData[2].date} />,
-      );
-      const date = getByText('vor 5 Tagen');
-      expect(date).toBeTruthy();
-    });
-  });
-});
diff --git a/src/components/signature/signature.tsx b/src/components/signature/signature.tsx
deleted file mode 100644
index 2ce7e8b49..000000000
--- a/src/components/signature/signature.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
-import React from 'react';
-import styled from 'styled-components';
-
-export interface SignatureProps {
-  author: string;
-  date: string;
-}
-
-const SignatureContainer = styled.div`
-  color: #668cff;
-  margin-top: 80px;
-`;
-
-const SignatureDivider = styled.div`
-  border-bottom: 2px solid #668cff;
-  margin-bottom: 32px;
-  width: 60px;
-`;
-
-const SignatureAuthor = styled.p`
-  font-weight: bold;
-`;
-
-const SignatureDaysPassed = styled.p`
-  font-weight: normal;
-`;
-
-const Signature: React.FC<SignatureProps> = ({ author, date }) => {
-  const daysPassed = differenceInCalendarDays(new Date(), new Date(date));
-  const daysText = daysPassed > 2 ? 'Tagen' : 'Tag';
-
-  return (
-    <SignatureContainer>
-      <SignatureDivider />
-      <SignatureAuthor>von {author}</SignatureAuthor>
-      <SignatureDaysPassed>
-        vor {daysPassed} {daysText}
-      </SignatureDaysPassed>
-    </SignatureContainer>
-  );
-};
-
-export default Signature;
diff --git a/src/templates/blog-post.tsx b/src/templates/blog-post.tsx
index 839410f56..8d44b78df 100644
--- a/src/templates/blog-post.tsx
+++ b/src/templates/blog-post.tsx
@@ -8,7 +8,7 @@ import { Markdown } from '../components/markdown/markdown';
 import { SectionTitle } from '../components/typography/typography';
 import styled from 'styled-components';
 import { up } from '../components/breakpoint/breakpoint';
-import Signature from '../components/signature/signature';
+import Byline from '../components/byline/byline';
 
 interface BlogArticleTemplateProps {
   data: {
@@ -18,6 +18,7 @@ interface BlogArticleTemplateProps {
         title: string;
         image?: string;
         author: string;
+        authorSummary: string;
       };
       rawMarkdownBody: string;
     };
@@ -47,9 +48,10 @@ const BlogArticleTemplate: React.FC<BlogArticleTemplateProps> = ({ data }) => {
           </BlogPostTitle>
           <Markdown data={data.markdownRemark.rawMarkdownBody} />
           {data.markdownRemark.frontmatter.author && (
-            <Signature
+            <Byline
               author={data.markdownRemark.frontmatter.author}
-              date={data.markdownRemark.frontmatter.date}
+              date={new Date(data.markdownRemark.frontmatter.date)}
+              authorSummary={data.markdownRemark.frontmatter.authorSummary}
             />
           )}
         </GridItem>
@@ -67,6 +69,7 @@ export const BLOG_POST_PAGE_QUERY = graphql`
         title
         image
         author
+        authorSummary
       }
       rawMarkdownBody
     }

From b0f106d7a4f1d0501bd8afafc5c91455390da8c9 Mon Sep 17 00:00:00 2001
From: katerynabugaieva <sonnensmile@gmail.com>
Date: Fri, 7 Aug 2020 12:19:32 +0200
Subject: [PATCH 4/6] :arrow_up: :heavy_plus_sign: upgrade dependencies

---
 package.json | 1 +
 yarn.lock    | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 78d1c6c16..ca578c368 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
   "dependencies": {
     "@reach/tabs": "^0.10.5",
     "babel-plugin-styled-components": "^1.11.1",
+    "date-fns": "^2.15.0",
     "gatsby": "2.24.26",
     "gatsby-background-image": "^1.1.1",
     "gatsby-image": "2.4.14",
diff --git a/yarn.lock b/yarn.lock
index 29f8d8375..e418055b8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5139,7 +5139,7 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
-date-fns@^2.0.1, date-fns@^2.14.0, date-fns@^2.8.1:
+date-fns@^2.0.1, date-fns@^2.14.0, date-fns@^2.15.0, date-fns@^2.8.1:
   version "2.15.0"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.15.0.tgz#424de6b3778e4e69d3ff27046ec136af58ae5d5f"
   integrity sha512-ZCPzAMJZn3rNUvvQIMlXhDr4A+Ar07eLeGsGREoWU19a3Pqf5oYa+ccd+B3F6XVtQY6HANMFdOQ8A+ipFnvJdQ==

From 29789a517fe8cdf988ba2032040ff6186f0e9039 Mon Sep 17 00:00:00 2001
From: katerynabugaieva <sonnensmile@gmail.com>
Date: Mon, 10 Aug 2020 15:14:34 +0200
Subject: [PATCH 5/6] chore: :wastebasket: after review fixes

---
 src/templates/blog-post.tsx | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/templates/blog-post.tsx b/src/templates/blog-post.tsx
index 8d44b78df..59faccbc8 100644
--- a/src/templates/blog-post.tsx
+++ b/src/templates/blog-post.tsx
@@ -9,6 +9,7 @@ import { SectionTitle } from '../components/typography/typography';
 import styled from 'styled-components';
 import { up } from '../components/breakpoint/breakpoint';
 import Byline from '../components/byline/byline';
+import parseISO from 'date-fns/parseISO';
 
 interface BlogArticleTemplateProps {
   data: {
@@ -17,8 +18,8 @@ interface BlogArticleTemplateProps {
         date: string;
         title: string;
         image?: string;
-        author: string;
-        authorSummary: string;
+        author?: string;
+        authorSummary?: string | undefined;
       };
       rawMarkdownBody: string;
     };
@@ -47,13 +48,14 @@ const BlogArticleTemplate: React.FC<BlogArticleTemplateProps> = ({ data }) => {
             {data.markdownRemark.frontmatter.title}
           </BlogPostTitle>
           <Markdown data={data.markdownRemark.rawMarkdownBody} />
-          {data.markdownRemark.frontmatter.author && (
-            <Byline
-              author={data.markdownRemark.frontmatter.author}
-              date={new Date(data.markdownRemark.frontmatter.date)}
-              authorSummary={data.markdownRemark.frontmatter.authorSummary}
-            />
-          )}
+          {data.markdownRemark.frontmatter.authorSummary &&
+            data.markdownRemark.frontmatter.author && (
+              <Byline
+                author={data.markdownRemark.frontmatter.author}
+                date={parseISO(data.markdownRemark.frontmatter.date)}
+                authorSummary={data.markdownRemark.frontmatter.authorSummary}
+              />
+            )}
         </GridItem>
       </Grid>
     </Layout>
@@ -64,7 +66,7 @@ export const BLOG_POST_PAGE_QUERY = graphql`
   query($path: String!) {
     markdownRemark(frontmatter: { path: { eq: $path } }) {
       frontmatter {
-        date(formatString: "MMMM DD, YYYY")
+        date
         path
         title
         image

From 786612d9f2a263315f8329cb1b3f0ae8a1a5e4ea Mon Sep 17 00:00:00 2001
From: katerynabugaieva <sonnensmile@gmail.com>
Date: Mon, 10 Aug 2020 16:00:51 +0200
Subject: [PATCH 6/6] chore: :wastebasket: remove obsolete code

---
 src/templates/blog-post.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/templates/blog-post.tsx b/src/templates/blog-post.tsx
index 59faccbc8..20b601380 100644
--- a/src/templates/blog-post.tsx
+++ b/src/templates/blog-post.tsx
@@ -19,7 +19,7 @@ interface BlogArticleTemplateProps {
         title: string;
         image?: string;
         author?: string;
-        authorSummary?: string | undefined;
+        authorSummary?: string;
       };
       rawMarkdownBody: string;
     };