favicon & SEO tweaks

data/meta.yml

@@ -5,6 +5,7 @@ description: Portfolio of web & ui designer/developer hybrid Matthias Kretsc
 url: https://matthiaskretschmann.com
 email: m@kretschmann.io
 avatar: ../src/images/avatar.jpg
+img: ../src/images/twitter-card.png
 
 social:
   Email: mailto:m@kretschmann.io

gatsby-config.js

@@ -13,6 +13,7 @@ module.exports = {
     'gatsby-transformer-yaml',
     'gatsby-transformer-sharp',
     'gatsby-plugin-sharp',
+    'gatsby-plugin-offline',
     {
       resolve: 'gatsby-plugin-sass',
       options: {
@@ -50,6 +51,23 @@ module.exports = {
         // see https://github.com/smooth-code/svgr for a list of all options
       },
     },
-    'gatsby-plugin-offline',
+    {
+      resolve: 'gatsby-plugin-favicon',
+      options: {
+        logo: './src/images/favicon.png',
+        injectHTML: true,
+        icons: {
+          android: true,
+          appleIcon: true,
+          appleStartup: false,
+          coast: false,
+          favicons: true,
+          firefox: true,
+          twitter: false,
+          yandex: true,
+          windows: true,
+        },
+      },
+    },
   ],
 }

package.json

@@ -17,6 +17,7 @@
     "gatsby": "^1.9.259",
     "gatsby-image": "^1.0.51",
     "gatsby-link": "^1.6.44",
+    "gatsby-plugin-favicon": "^2.1.1",
     "gatsby-plugin-google-analytics": "^1.0.31",
     "gatsby-plugin-offline": "^1.0.15",
     "gatsby-plugin-react-helmet": "^2.0.11",

src/components/atoms/SEO.jsx

@@ -2,11 +2,11 @@ import React from 'react'
 import Helmet from 'react-helmet'
 import PropTypes from 'prop-types'
 
-const SEO = ({ postMeta, meta }) => {
-  const title = postMeta.title || meta.title
-  const description = postMeta.description || meta.description
-  const image = postMeta.img || meta.img || null
-  const url = postMeta.slug ? `${meta.url}/${postMeta.slug}` : meta.url
+const SEO = ({ project, meta }) => {
+  const title = project.title ? project.title : meta.title
+  const description = project.description ? project.description : meta.description
+  const image = project.img ? project.img.childImageSharp.twitterImage.src : meta.img.childImageSharp.resize.src
+  const url = project.slug ? `${meta.url}/${project.slug}` : meta.url
 
   return (
     <Helmet>
@@ -32,12 +32,12 @@ const SEO = ({ postMeta, meta }) => {
 }
 
 SEO.propTypes = {
-  postMeta: PropTypes.object,
+  project: PropTypes.object,
   meta: PropTypes.object,
 }
 
 SEO.defaultProps = {
-  postMeta: {},
+  project: {},
   meta: {},
 }
 

src/components/organisms/Header.jsx

@@ -13,9 +13,7 @@ class Header extends Component {
     const meta = this.props.meta
 
     let classes = 'header'
-    if (!isHomepage) {
-      classes += ' header--minimal'
-    }
+    if (!isHomepage) classes += ' header--minimal'
 
     return (
       <header className={classes}>

src/layouts/index.jsx

@@ -81,6 +81,13 @@ export const query = graphql`
           }
         }
       }
+      img {
+        childImageSharp {
+          resize(width: 980) {
+            src
+          }
+        }
+      }
       social {
         Email
         Blog

src/templates/Project.jsx

@@ -32,7 +32,7 @@ class Project extends Component {
           <title>{title}</title>
         </Helmet>
 
-        <SEO meta={meta} postMeta={project} />
+        <SEO project={project} meta={meta} />
 
         <article className="project">
           <Content>
@@ -79,6 +79,13 @@ export const projectQuery = graphql`
         url
       }
       techstack
+      img {
+        childImageSharp {
+          twitterImage: resize(width: 980) {
+            src
+          }
+        }
+      }
     }
     dataYaml {
       title
@@ -99,6 +106,13 @@ export const projectQuery = graphql`
       }
       typekit
       googleanalytics
+      img {
+        childImageSharp {
+          resize(width: 980) {
+            src
+          }
+        }
+      }
     }
     projectImages: allImageSharp(
       filter: { id: { regex: $slug } }