Add thumbnail image to Twitter cards.

content/pages/about.md

@@ -1,6 +1,7 @@
 ---
 title: "About me"
 template: "page"
+socialImage: "/media/image-2.jpg"
 ---
 
 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

content/pages/contacts.md

@@ -1,6 +1,7 @@
 ---
 title: "Contact me"
 template: "page"
+socialImage: "/media/image-4.jpg"
 ---
 
 Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

content/posts/2016-01-09---Perfecting-the-Art-of-Perfection.md

@@ -9,6 +9,7 @@ tags:
   - "Handwriting"
   - "Learning to write"
 description: "Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum."
+socialImage: "/media/image-2.jpg"
 ---
 
 Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum.

content/posts/2016-01-12---The-Origins-of-Social-Stationery-Lettering.md

@@ -6,6 +6,7 @@ draft: false
 slug: "/posts/the-origins-of-social-stationery-lettering"
 category: "Design Culture"
 description: "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante."
+socialImage: "/media/image-3.jpg"
 ---
 
 **Pellentesque habitant morbi tristique** senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. *Aenean ultricies mi vitae est.* Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. 

content/posts/2016-02-02---A-Brief-History-of-Typography.md

@@ -11,6 +11,7 @@ tags:
   - "History of typography"
   - "Helvetica"
 description: "Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat."
+socialImage: "/media/image-0.jpg"
 ---
 
 **Pellentesque habitant morbi tristique** senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. *Aenean ultricies mi vitae est.* Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. 

content/posts/2017-18-08---The-Birth-of-Movable-Type.md

@@ -10,6 +10,7 @@ tags:
   - "Gatsby"
   - "Typography"
 description: "German inventor Johannes Gutenberg developed a method of movable type and used it to create one of the western world’s first major printed books, the “Forty–Two–Line” Bible."
+socialImage: "/media/gutenberg.jpg"
 ---
 
 German inventor Johannes Gutenberg developed a method of movable type and used it to create one of the western world’s first major printed books, the “Forty–Two–Line” Bible.

content/posts/2017-19-08---Humane-Typography-in-the-Digital-Age.md

@@ -10,6 +10,7 @@ tags:
   - "Typography"
   - "Web Development"
 description: "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."
+socialImage: "/media/42-line-bible.jpg"
 ---
 
 - [The first transition](#the-first-transition)

src/components/Layout/Layout.js

@@ -1,7 +1,9 @@
 // @flow strict
 import React from 'react';
 import Helmet from 'react-helmet';
+import { withPrefix } from 'gatsby';
 import type { Node as ReactNode } from 'react';
+import { useSiteMetadata } from '../../hooks';
 import styles from './Layout.module.scss';
 
 type Props = {
@@ -10,19 +12,26 @@ type Props = {
   description?: string
 };
 
-const Layout = ({ children, title, description }: Props) => (
+const Layout = ({ children, title, description, socialImage }: Props) => {
-  <div className={styles.layout}>
+  const { author, url } = useSiteMetadata();
-    <Helmet>
+  const metaImage = socialImage != null ? socialImage : author.photo;
-      <html lang="en" />
+  const metaImageUrl = url + withPrefix(metaImage);
-      <title>{title}</title>
+
-      <meta name="description" content={description} />
+  return (
-      <meta property="og:site_name" content={title} />
+    <div className={styles.layout}>
-      <meta name="twitter:card" content="summary" />
+      <Helmet>
-      <meta name="twitter:title" content={title} />
+        <html lang="en" />
-      <meta name="twitter:description" content={description} />
+        <title>{title}</title>
-    </Helmet>
+        <meta name="description" content={description} />
-    {children}
+        <meta property="og:site_name" content={title} />
-  </div>
+        <meta name="twitter:card" content="summary" />
-);
+        <meta name="twitter:title" content={title} />
+        <meta name="twitter:description" content={description} />
+        <meta name="twitter:image" content={metaImageUrl} />
+      </Helmet>
+      {children}
+    </div>
+  )
+};
 
 export default Layout;

src/templates/page-template.js

@@ -16,11 +16,11 @@ type Props = {
 const PageTemplate = ({ data }: Props) => {
   const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata();
   const { html: pageBody } = data.markdownRemark;
-  const { title: pageTitle, description: pageDescription } = data.markdownRemark.frontmatter;
+  const { title: pageTitle, description: pageDescription, socialImage } = data.markdownRemark.frontmatter;
   const metaDescription = pageDescription !== null ? pageDescription : siteSubtitle;
 
   return (
-    <Layout title={`${pageTitle} - ${siteTitle}`} description={metaDescription}>
+    <Layout title={`${pageTitle} - ${siteTitle}`} description={metaDescription} socialImage={socialImage} >
       <Sidebar />
       <Page title={pageTitle}>
         <div dangerouslySetInnerHTML={{ __html: pageBody }} />
@@ -38,6 +38,7 @@ export const query = graphql`
         title
         date
         description
+        socialImage
       }
     }
   }

src/templates/post-template.js

@@ -14,11 +14,11 @@ type Props = {
 
 const PostTemplate = ({ data }: Props) => {
   const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata();
-  const { title: postTitle, description: postDescription } = data.markdownRemark.frontmatter;
+  const { title: postTitle, description: postDescription, socialImage } = data.markdownRemark.frontmatter;
   const metaDescription = postDescription !== null ? postDescription : siteSubtitle;
 
   return (
-    <Layout title={`${postTitle} - ${siteTitle}`} description={metaDescription}>
+    <Layout title={`${postTitle} - ${siteTitle}`} description={metaDescription} socialImage={socialImage} >
       <Post post={data.markdownRemark} />
     </Layout>
   );
@@ -38,6 +38,7 @@ export const query = graphql`
         description
         tags
         title
+        socialImage
       }
     }
   }