docs: add twitter metadata tags (#1732)

website/content/blog/netlify-cms-2-1-0-adds-external-media-support-with-uploadcare.md

@@ -5,6 +5,7 @@ description: >-
   Netlify CMS 2.1.0 adds external media support with Uploadcare, allowing files
   like images and videos to be stored outside of your Git repository.
 date: 2018-09-05T20:52:30.334Z
+twitter_image: /img/netlify-cms-external-media-library.png
 ---
 Storing large files in Git works great if you only have a few, and uploading plain images is fine if that's all your site needs. For everything else, great services like Cloudinary, Filestack, and Uploadcare exist to help you optimize and store images and other media files separately from the rest of your site. Our users have long been asking for a way to work with these kinds of services from within Netlify CMS, and we're happy to say that our latest release makes it possible!
 

website/package.json

@@ -28,6 +28,7 @@
     "gatsby-transformer-json": "next",
     "gatsby-transformer-remark": "next",
     "gatsby-transformer-yaml": "next",
+    "lodash": "^4.17.10",
     "netlify-cms": "^2.0.11",
     "postcss-at2x": "^2.0.0",
     "postcss-cssnext": "^2.7.0",

website/src/components/twitter-meta.js

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

website/src/templates/blog-post.js

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

website/static/admin/config.yml

@@ -29,6 +29,7 @@ collections: # A list of collections the CMS should be able to edit
       - {label: "Author", name: "author", widget: "string"}
       - {label: "Description (for blog list)", name: "description", widget: "text"}
       - {label: "Meta Description (defaults to Description)", name: "meta_description", widget: "text", required: false}
+      - {label: "Twitter Image", name: "twitter_image", widget: "image"}
       - {label: "Date", name: "date", widget: "date"}
       - {label: "Body", name: "body", widget: "markdown"}
   - name: updates