fix avatar

config.js

@@ -1,5 +1,3 @@
-const path = require('path')
-
 module.exports = {
   siteTitle: 'kremalicious',
   siteTitleShort: 'krlc',
@@ -8,12 +6,10 @@ module.exports = {
   themeColor: '#88bec8',
   backgroundColor: '#e7eef4',
   pathPrefix: null,
-  logo: path.resolve(__dirname, 'src/images/avatar.jpg'),
   author: {
     name: 'Matthias Kretschmann',
     email: 'm@kretschmann.io',
     uri: 'https://matthiaskretschmann.com',
-    avatar: './src/images/avatar.jpg',
     twitter: 'https://twitter.com/kremalicious',
     github: 'https://github.com/kremalicious',
     facebook: 'https://facebook.com/matthiaskretschmann',

src/components/atoms/PostActions.jsx

@@ -42,7 +42,9 @@ export default class PostActions extends PureComponent {
           <h1 className={styles.actionTitle}>Found something useful?</h1>
           <p className={styles.actionText}>
             Say thanks{' '}
-            <button className="link" onClick={this.toggleModal}>with Bitcoins or Ether.</button>
+            <button className="link" onClick={this.toggleModal}>
+              with Bitcoins or Ether.
+            </button>
           </p>
         </article>
 

src/components/atoms/SEO.jsx

@@ -13,7 +13,14 @@ const query = graphql`
         author {
           name
           twitter
-          avatar
+        }
+      }
+    }
+
+    logo: allFile(filter: { name: { eq: "apple-touch-icon" } }) {
+      edges {
+        node {
+          relativePath
         }
       }
     }
@@ -131,6 +138,8 @@ const SEO = ({ post, slug, postSEO }) => (
     query={query}
     render={data => {
       const siteMeta = data.site.siteMetadata
+      const logo = data.logo.edges[0].node.relativePath
+
       let title
       let description
       let image
@@ -140,14 +149,12 @@ const SEO = ({ post, slug, postSEO }) => (
         const postMeta = post.frontmatter
         title = `${postMeta.siteTitle} ¦ ${siteMeta.siteDescription}`
         description = postMeta.description ? postMeta.description : post.excerpt
-        image = postMeta.image
-          ? postMeta.image.childImageSharp.fluid.src
-          : siteMeta.author.avatar
+        image = postMeta.image ? postMeta.image.childImageSharp.fluid.src : logo
         postURL = `${siteMeta.siteUrl}${slug}`
       } else {
         title = `${siteMeta.siteTitle} ¦ ${siteMeta.siteDescription}`
         description = siteMeta.siteDescription
-        image = siteMeta.author.avatar
+        image = logo
       }
 
       image = `${siteMeta.siteUrl}${image}`

src/components/molecules/Vcard.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { StaticQuery, graphql } from 'gatsby'
-// import Img from 'gatsby-image'
+import Img from 'gatsby-image'
 import IconLinks from './IconLinks'
 import styles from './Vcard.module.scss'
 
@@ -18,6 +18,18 @@ const query = graphql`
         }
       }
     }
+
+    avatar: allFile(filter: { name: { eq: "avatar" } }) {
+      edges {
+        node {
+          childImageSharp {
+            fixed(width: 80, height: 80, quality: 90) {
+              ...GatsbyImageSharpFixed_withWebp_noBase64
+            }
+          }
+        }
+      }
+    }
   }
 `
 
@@ -29,16 +41,22 @@ const Vcard = () => (
         twitter,
         github,
         facebook,
-        avatar,
         name,
         uri
       } = data.site.siteMetadata.author
 
+      const avatar = data.avatar.edges[0].node.childImageSharp.fixed
       const links = [twitter, github, facebook]
 
       return (
         <div className="vcard author">
-          <img className={styles.avatar} src={avatar} alt="avatar" />
+          <Img
+            className={styles.avatar}
+            fixed={avatar}
+            alt="avatar"
+            width="80"
+            height="80"
+          />
           <p className={styles.description}>
             Blog of designer &amp; developer{' '}
             <a className="fn" rel="author" href={uri}>

src/components/molecules/Vcard.module.scss

@@ -5,7 +5,12 @@
     @include media-frame;
 
     margin-bottom: ($spacer / 2);
-    border-radius: 50%;
+
+    &,
+    img {
+        border-radius: 50%;
+        overflow: hidden;
+    }
 }
 
 .description {