diff --git a/content/pages/about.md b/content/pages/about.md
index f1e010d..1fe8dda 100644
--- a/content/pages/about.md
+++ b/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.
diff --git a/content/pages/contacts.md b/content/pages/contacts.md
index 9c665bc..76f04b7 100644
--- a/content/pages/contacts.md
+++ b/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.
diff --git a/content/posts/2016-01-09---Perfecting-the-Art-of-Perfection.md b/content/posts/2016-01-09---Perfecting-the-Art-of-Perfection.md
index ecd31c9..99fe877 100644
--- a/content/posts/2016-01-09---Perfecting-the-Art-of-Perfection.md
+++ b/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.
diff --git a/content/posts/2016-01-12---The-Origins-of-Social-Stationery-Lettering.md b/content/posts/2016-01-12---The-Origins-of-Social-Stationery-Lettering.md
index dd7aaa0..868fdd3 100644
--- a/content/posts/2016-01-12---The-Origins-of-Social-Stationery-Lettering.md
+++ b/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.
diff --git a/content/posts/2016-02-02---A-Brief-History-of-Typography.md b/content/posts/2016-02-02---A-Brief-History-of-Typography.md
index 2fae234..4e4e5fc 100644
--- a/content/posts/2016-02-02---A-Brief-History-of-Typography.md
+++ b/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.
diff --git a/content/posts/2017-18-08---The-Birth-of-Movable-Type.md b/content/posts/2017-18-08---The-Birth-of-Movable-Type.md
index 37c9d24..fa6f86d 100644
--- a/content/posts/2017-18-08---The-Birth-of-Movable-Type.md
+++ b/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.
diff --git a/content/posts/2017-19-08---Humane-Typography-in-the-Digital-Age.md b/content/posts/2017-19-08---Humane-Typography-in-the-Digital-Age.md
index 603ee95..952a4c1 100644
--- a/content/posts/2017-19-08---Humane-Typography-in-the-Digital-Age.md
+++ b/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)
diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js
index b9d5651..eab3d9d 100644
--- a/src/components/Layout/Layout.js
+++ b/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) => (
-
-
-
-
{title}
-
-
-
-
-
- {children}
-
-);
+const Layout = ({
+ children,
+ title,
+ description,
+ socialImage
+}: Props) => {
+ const { author, url } = useSiteMetadata();
+ const metaImage = socialImage != null ? socialImage : author.photo;
+ const metaImageUrl = url + withPrefix(metaImage);
+
+ return (
+
+
+
+
{title}
+
+
+
+
+
+
+
+
+ {children}
+
+ );
+};
export default Layout;
diff --git a/src/components/Layout/Layout.test.js b/src/components/Layout/Layout.test.js
index a0ca1c9..71d53eb 100644
--- a/src/components/Layout/Layout.test.js
+++ b/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().toJSON();
expect(tree).toMatchSnapshot();
diff --git a/src/templates/page-template.js b/src/templates/page-template.js
index abeaefd..ce6f2ce 100644
--- a/src/templates/page-template.js
+++ b/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 (
-
+
@@ -38,6 +39,7 @@ export const query = graphql`
title
date
description
+ socialImage
}
}
}
diff --git a/src/templates/post-template.js b/src/templates/post-template.js
index 593e64d..801bc1f 100644
--- a/src/templates/post-template.js
+++ b/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 (
-
+
);
@@ -38,6 +39,7 @@ export const query = graphql`
description
tags
title
+ socialImage
}
}
}
diff --git a/src/types/index.js b/src/types/index.js
index c8835a1..d5a2836 100644
--- a/src/types/index.js
+++ b/src/types/index.js
@@ -34,6 +34,7 @@ export type Node = {
category?: string,
tags?: string[],
title: string,
+ socialImage?: string
},
html: string,
id: string