Merge pull request #375 from alehel/twitter-cards

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,27 +1,44 @@
 // @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 = {
   children: ReactNode,
   title: string,
-  description?: string
+  description?: string,
+  socialImage? :string
 };
 
-const Layout = ({ children, title, description }: Props) => (
+const Layout = ({
-  <div className={styles.layout}>
+  children,
-    <Helmet>
+  title,
-      <html lang="en" />
+  description,
-      <title>{title}</title>
+  socialImage
-      <meta name="description" content={description} />
+}: Props) => {
-      <meta property="og:site_name" content={title} />
+  const { author, url } = useSiteMetadata();
-      <meta name="twitter:card" content="summary" />
+  const metaImage = socialImage != null ? socialImage : author.photo;
-      <meta name="twitter:title" content={title} />
+  const metaImageUrl = url + withPrefix(metaImage);
-    </Helmet>
+
-    {children}
+  return (
-  </div>
+    <div className={styles.layout}>
-);
+      <Helmet>
+        <html lang="en" />
+        <title>{title}</title>
+        <meta name="description" content={description} />
+        <meta property="og:site_name" content={title} />
+        <meta property="og:image" content={metaImageUrl} />
+        <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/components/Layout/Layout.test.js

@@ -1,15 +1,28 @@
 // @flow strict
 import React from 'react';
 import renderer from 'react-test-renderer';
+import { useStaticQuery, StaticQuery } from 'gatsby';
+import siteMetadata from '../../../jest/__fixtures__/site-metadata';
 import Layout from './Layout';
+import type { RenderCallback } from '../../types';
 
 describe('Layout', () => {
   const props = {
+    ...siteMetadata,
     children: 'test',
     description: 'test',
     title: 'test'
   };
 
+  beforeEach(() => {
+    StaticQuery.mockImplementationOnce(
+      ({ render }: RenderCallback) => (
+        render(props)
+      ),
+      useStaticQuery.mockReturnValue(props)
+    );
+  });
+
   it('renders correctly', () => {
     const tree = renderer.create(<Layout {...props} />).toJSON();
     expect(tree).toMatchSnapshot();

src/templates/page-template.js

@@ -16,11 +16,12 @@ 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 { frontmatter } = data.markdownRemark;
+  const { title: pageTitle, description: pageDescription, socialImage } = 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 +39,7 @@ export const query = graphql`
         title
         date
         description
+        socialImage
       }
     }
   }

src/templates/post-template.js

@@ -14,11 +14,12 @@ type Props = {
 
 const PostTemplate = ({ data }: Props) => {
   const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata();
-  const { title: postTitle, description: postDescription } = data.markdownRemark.frontmatter;
+  const { frontmatter } = data.markdownRemark;
+  const { title: postTitle, description: postDescription, socialImage } = 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 +39,7 @@ export const query = graphql`
         description
         tags
         title
+        socialImage
       }
     }
   }

src/types/index.js

@@ -34,6 +34,7 @@ export type Node = {
     category?: string,
     tags?: string[],
     title: string,
+    socialImage?: string
   },
   html: string,
   id: string