docs: add twitter metadata tags (#1732)

This commit is contained in:
Shawn Erquhart
2018-09-07 16:05:16 -04:00
committed by GitHub
parent 9af77fe2bb
commit afe13b1bab
5 changed files with 31 additions and 1 deletions

View File

@ -0,0 +1,15 @@
import React from 'react';
import Helmet from 'react-helmet';
const TwitterMeta = ({ title, description, image, imageAlt }) => (
<Helmet>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@netlifycms" />
{title && <meta name="twitter:title" content={title} />}
{description && <meta name="twitter:description" content={description} />}
{image && <meta name="twitter:image" content={image} />}
{image && imageAlt && <meta name="twitter:image:alt" content={imageAlt} />}
</Helmet>
);
export default TwitterMeta;

View File

@ -1,7 +1,9 @@
import React from 'react';
import Helmet from 'react-helmet';
import { graphql } from 'gatsby';
import { trimStart, trimEnd } from 'lodash';
import TwitterMeta from '../components/twitter-meta';
import Layout from '../components/layout';
export const BlogPostTemplate = ({ title, author, date, body, html }) => (
@ -22,7 +24,10 @@ export const BlogPostTemplate = ({ title, author, date, body, html }) => (
const BlogPost = ({ data }) => {
const { html, frontmatter } = data.markdownRemark;
const { author, title, date, description, meta_description } = frontmatter;
const { author, title, date, description, meta_description, twitter_image } = frontmatter;
const { siteUrl } = data.site.siteMetadata;
const twitterImageUrl =
twitter_image && `${trimEnd(siteUrl, '/')}/${trimStart(twitter_image, '/')}`;
const desc = meta_description || description;
@ -32,6 +37,7 @@ const BlogPost = ({ data }) => {
<title>{title}</title>
{desc && <meta name="description" content={desc} />}
</Helmet>
<TwitterMeta title={title} description={desc} image={twitterImageUrl} />
<BlogPostTemplate title={title} author={author} date={date} html={html} />
</Layout>
);
@ -41,6 +47,11 @@ export default BlogPost;
export const pageQuery = graphql`
query blogPost($slug: String!) {
site {
siteMetadata {
siteUrl
}
}
markdownRemark(fields: { slug: { eq: $slug } }) {
frontmatter {
title
@ -48,6 +59,7 @@ export const pageQuery = graphql`
# meta_description
date(formatString: "MMMM D, YYYY")
author
twitter_image
}
html
}