feat: create unique parameter for social image share (#99)

BREAKING CHANGE: in MD files imageTw and imageFb had been replaced by imageShare
doc: update documentation + related post

content/pages/how-to-install/how-to-install.md

@@ -187,13 +187,13 @@ language: en
 cover: ./cover-balloons.jpg
 
 # use generated Twitter/etc. cards
-imageTw: ./gatsby-starter-morning-dew-v1-1-tw.png
-imageFb: ./gatsby-starter-morning-dew-v1-1-fb.png
+imageShare: ./gatsby-starter-morning-dew-v1-1-share.png
 # ... or if you want to skip the generation
 generate-card: false
 
 # Tags
 tags:
-  - gatsby
+  - Gatsby
+  - JavaScript
 ---
 ```

content/posts/2018-11-13-social-media-card-generator/index.md

@@ -4,8 +4,7 @@ slug: social-media-card-generator
 date: 2018-11-13
 language: en
 cover: ./cover-balloons.jpg
-imageTw: ./social-media-card-generator-tw.png
-imageFb: ./social-media-card-generator-tw.png
+imageShare: ./social-media-card-generator-share.png
 tags:
   - gatsby
 ---
@@ -34,19 +33,16 @@ This great idea come from a [conversation](https://twitter.com/_maxpou/status/10
   ```yaml
   title: My blog post
   # ...
-  imageTw: ./social-media-card-generator-tw.png
-  imageFb: ./social-media-card-generator-fb.png
+  imageShare: ./social-media-card-generator-share.png
   ```
 
-Gatsby will first create extra url suffixed by `/image_tw` and `/image_fb` (i.e. *http://localhost:8000/gatsby-starter-morning-dew-v1-1/image_tw*). Then, Pupetter will take a snapshot and add it to your post folder.
+Gatsby will first create extra url suffixed by `/image_share` (i.e. *http://localhost:8000/gatsby-starter-morning-dew-v1-1/image_share*). Then, Pupetter will take a snapshot and add it to your `post` folder.
 
 **💡Quick tip:** If you want to recreate this pictures
 
 ```bash
-# delete Facebook images
-find ./content -name "*-fb.png" -type f -delete
-# delete Twitter images
-find ./content -name "*-tw.png" -type f -delete
+# delete all share images
+find ./content -name "*-share.png" -type f -delete
 ```
 
 If you want to skip the file generation for some posts, add `generate-card: false` to the post's header.

gatsby-node.js

@@ -88,23 +88,12 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
     // generate post share images (dev only)
     if (process.env.gatsby_executing_command.includes('develop')) {
       createPage({
-        path: `${post.node.frontmatter.slug}/image_tw`,
+        path: `${post.node.frontmatter.slug}/image_share`,
         component: BlogPostShareImage,
         context: {
           slug: post.node.frontmatter.slug,
           width: 440,
           height: 220,
-          type: 'twitter',
-        },
-      })
-      createPage({
-        path: `${post.node.frontmatter.slug}/image_fb`,
-        component: BlogPostShareImage,
-        context: {
-          slug: post.node.frontmatter.slug,
-          width: 1200,
-          height: 630,
-          type: 'facebook',
         },
       })
     }

scripts/generatePostPreviewImages.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
 /* eslint-disable no-console */
-const { readFile } = require('fs')
+const { readFile, existsSync } = require('fs')
 const { join, dirname } = require('path')
 const glob = require('glob')
 const YAML = require('yaml')
@@ -58,18 +58,16 @@ const main = async () => {
 
   for (let i = 0; i < files.length; i++) {
     const file = files[i]
-    const destPrefix = join(file.directory, `${file.slug}-`)
-    const fbFile = `${destPrefix}fb.png`
-    const twFile = `${destPrefix}tw.png`
+    const destinationFile = join(file.directory, `${file.slug}-share.png`)
 
-    if (file['generate-card'] !== false) {
-      await takeScreenshot(`${baseUrl}${file.slug}/image_fb`, 1200, 630, fbFile)
-      console.log(`Created ${fbFile}`)
-    }
-
-    if (file['generate-card'] !== false) {
-      await takeScreenshot(`${baseUrl}${file.slug}/image_tw`, 440, 220, twFile)
-      console.log(`Created ${twFile}`)
+    if (file['generate-card'] !== false && !existsSync(destinationFile)) {
+      await takeScreenshot(
+        `${baseUrl}${file.slug}/image_share`,
+        440,
+        220,
+        destinationFile
+      )
+      console.log(`Created ${destinationFile}`)
     }
   }
 }

src/components/SEO.js

@@ -17,10 +17,8 @@ const SEO = props => {
   const formatedSiteUrl = siteUrl.endsWith('/')
     ? siteUrl.substring(0, siteUrl.length - 1)
     : siteUrl
-  const imagePath = props.imageFb || props.cover || withPrefix(siteCover)
-  const imagePathTwitter = props.imageTw || props.cover || withPrefix(siteCover)
+  const imagePath = props.imageShare || props.cover || withPrefix(siteCover)
   const image = `${formatedSiteUrl}${imagePath}`
-  const imageTwitter = `${formatedSiteUrl}${imagePathTwitter}`
   const description = props.description || siteDescription
 
   return (
@@ -42,7 +40,7 @@ const SEO = props => {
       <meta name="twitter:creator" content={twitterUsername} />
       <meta name="twitter:title" content={title} />
       <meta name="twitter:description" content={description} />
-      <meta name="twitter:image" content={imageTwitter} />
+      <meta name="twitter:image" content={image} />
     </Helmet>
   )
 }

src/templates/blog-post-share-image.js

@@ -58,22 +58,18 @@ const Preview = styled.div.attrs({
   opacity: 0.5;
 `
 
-const Title = styled.h1.attrs({
-  fontSize: props => (props.type === 'twitter' ? '1.8rem' : '4.8rem'),
-})`
+const Title = styled.h1`
   font-weight: 700;
-  font-size: ${props => props.fontSize};
+  font-size: '1.8rem';
   margin: 10px 60px;
   color: #fff;
   text-shadow: 1px 1px 4px rgba(34, 34, 34, 0.6);
   text-align: center;
   z-index: 1;
 `
 
-const SiteTitle = styled.p.attrs({
-  fontSize: props => (props.type === 'twitter' ? '1rem' : '2.6rem'),
-})`
-  font-size: ${props => props.fontSize};
+const SiteTitle = styled.p`
+  font-size: '1rem';
   left: 50%;
   font-weight: 700;
   text-align: center;
@@ -86,12 +82,10 @@ const SiteTitle = styled.p.attrs({
   width: max-content;
 `
 
-const AuthorImg = styled.img.attrs({
-  size: props => (props.type === 'twitter' ? '40px' : '52px'),
-})`
-  height: ${props => props.size};
-  width: ${props => props.size};
-  border-radius: ${props => props.size};
+const AuthorImg = styled.img`
+  height: 40px;
+  width: 40px;
+  border-radius: 40px;
   display: inline-block;
   vertical-align: middle;
 `
@@ -103,18 +97,16 @@ const SubTitle = styled.div`
   z-index: 1;
 `
 
-const ReadTime = styled.span.attrs({
-  fontSize: props => (props.type === 'twitter' ? '1rem' : '2rem'),
-})`
-  font-size: ${props => props.fontSize};
+const ReadTime = styled.span`
+  font-size: '1rem';
   text-shadow: 1px 1px 4px rgba(34, 34, 34, 0.6);
   color: #fff;
   padding-left: 8px;
 `
 
 const BlogPostShareImage = props => {
   const post = props.data.post
-  const { width, height, type } = props.pageContext
+  const { width, height } = props.pageContext
   const heroImg = post.frontmatter.cover && post.frontmatter.cover.publicURL
   const { siteCover, authorAvatar, headerTitle } = useSiteMetadata()
   const { fixed } = useSiteImages(authorAvatar)
@@ -127,11 +119,11 @@ const BlogPostShareImage = props => {
       />
       <GlobalPageStyle />
 
-      <SiteTitle type={type}>{headerTitle}</SiteTitle>
-      <Title type={type}>{post.frontmatter.title}</Title>
+      <SiteTitle>{headerTitle}</SiteTitle>
+      <Title>{post.frontmatter.title}</Title>
       <SubTitle>
-        <AuthorImg type={type} src={fixed.src} />
-        <ReadTime type={type}>{post.timeToRead} min read</ReadTime>
+        <AuthorImg src={fixed.src} />
+        <ReadTime>{post.timeToRead} min read</ReadTime>
       </SubTitle>
       <Preview
         width={width}

src/templates/blog-post.js

@@ -13,18 +13,14 @@ class BlogPostTemplate extends React.Component {
   render() {
     const post = this.props.data.post
     const { previous, next } = this.props.pageContext
-
     return (
       <Layout location={this.props.location}>
         <SEO
           title={post.frontmatter.title}
           description={post.excerpt}
           cover={post.frontmatter.cover && post.frontmatter.cover.publicURL}
-          imageFb={
-            post.frontmatter.imageFb && post.frontmatter.imageFb.publicURL
-          }
-          imageTw={
-            post.frontmatter.imageTw && post.frontmatter.imageTw.publicURL
+          imageShare={
+            post.frontmatter.imageShare && post.frontmatter.imageShare.publicURL
           }
           lang={post.frontmatter.language}
           path={post.frontmatter.slug}
@@ -65,10 +61,7 @@ export const pageQuery = graphql`
         cover {
           publicURL
         }
-        imageTw {
-          publicURL
-        }
-        imageFb {
+        imageShare {
           publicURL
         }
       }