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 212a829..ead80aa 100644 --- a/src/components/Layout/Layout.js +++ b/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) => ( -
- - - {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/templates/page-template.js b/src/templates/page-template.js index abeaefd..d959a15 100644 --- a/src/templates/page-template.js +++ b/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 ( - +
@@ -38,6 +38,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..16a6ec9 100644 --- a/src/templates/post-template.js +++ b/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 ( - + ); @@ -38,6 +38,7 @@ export const query = graphql` description tags title + socialImage } } }