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 `` 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..4a3d4f6d6 100644 --- a/data/blog-posts/angular-advanced-workshop-skipbo.md +++ b/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. \ 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..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 @@ -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! \ 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..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,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. \ 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/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/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( + , + ); + }); + + 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 = ({ author, date, authorSummary }) => { + const timeFromPosted = formatDistanceToNow(new Date(date), { + locale: de, + addSuffix: true, + }); + + return ( + + + von {author} + {authorSummary} + {timeFromPosted} + + ); +}; + +export default Byline; diff --git a/src/templates/blog-post.tsx b/src/templates/blog-post.tsx index 9500d5e39..20b601380 100644 --- a/src/templates/blog-post.tsx +++ b/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 = ({ data }) => { {data.markdownRemark.frontmatter.title} + {data.markdownRemark.frontmatter.authorSummary && + data.markdownRemark.frontmatter.author && ( + + )} @@ -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 } 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==