mastermindzh/rickvanlieshout.com
1
0
Fork 0
mirror of https://github.com/mastermindzh/rickvanlieshout.com synced 2025-07-26 04:04:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add thumbnail image to Twitter cards.

Browse Source
This commit is contained in:
Aleksander Helgaker
2019-08-25 12:29:51 +02:00
parent fcedb2194a
commit ebc6134453
10 changed files with 36 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/Layout/Layout.js
View File

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

5
src/templates/page-template.js
View File

@@ -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
}
}
}

5
src/templates/post-template.js
View File

@@ -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
}
}
}