Post signature

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.

data/blog-posts/angular-advanced-workshop-skipbo.md

@@ -1,8 +1,10 @@
 ---
 path: "/blog/angular-advanced-workshop-skipbo"
-date: "2018-12-08"
+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.
@@ -11,4 +13,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.
+Here a quick video of the gameplay part.

data/blog-posts/building-www-satellytes-com-with-gatsby-contentful-and-netlify.md

@@ -1,8 +1,10 @@
 ---
 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"
+authorSummary: "Writer" 
 ---
 
 This page's sources are hosted on GitHub if you want to look into the sources. We are using Gatsby 2 already.
@@ -37,4 +39,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!
+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!

data/blog-posts/how-to-do-a-blog-post.md

@@ -1,9 +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,
@@ -63,4 +65,4 @@ Text before the blockquote.
 
 > Block scope stuff
 
-Text after the blockquote.
+Text after the blockquote.

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.
+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.

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",

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();
+  });
+});

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;

src/templates/blog-post.tsx

@@ -8,6 +8,8 @@ import { Markdown } from '../components/markdown/markdown';
 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: {
@@ -16,6 +18,8 @@ interface BlogArticleTemplateProps {
         date: string;
         title: string;
         image?: string;
+        author?: string;
+        authorSummary?: string;
       };
       rawMarkdownBody: string;
     };
@@ -44,6 +48,14 @@ const BlogArticleTemplate: React.FC<BlogArticleTemplateProps> = ({ data }) => {
             {data.markdownRemark.frontmatter.title}
           </BlogPostTitle>
           <Markdown data={data.markdownRemark.rawMarkdownBody} />
+          {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>
@@ -54,10 +66,12 @@ 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
+        author
+        authorSummary
       }
       rawMarkdownBody
     }

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==