Add default image config (including proper background color)

Author: andydevs

gatsby-config.js

@@ -25,8 +25,16 @@ module.exports = {
         DEV_SSR: false
     },
     plugins: [
-        'gatsby-plugin-sharp',
-        'gatsby-transformer-yaml',
+        {
+            resolve: 'gatsby-plugin-sharp',
+            options: {
+                defaults: {
+                    placeholder: 'none',
+                    backgroundColor: '#005580',
+                    quality: 100
+                }
+            }
+        },
         'gatsby-transformer-sharp',
         'gatsby-plugin-image',
         {
@@ -47,6 +55,7 @@ module.exports = {
         'gatsby-plugin-styled-components',
         'gatsby-plugin-react-helmet',
         'gatsby-plugin-scroll-reveal',
+        'gatsby-transformer-yaml',
         {
             resolve: 'gatsby-source-filesystem',
             options: {

src/sections/about.js

@@ -93,8 +93,6 @@ export default function About() {
                         layout: FIXED, 
                         width: 300, 
                         aspectRatio: 1,
-                        placeholder: DOMINANT_COLOR,
-                        quality: 100,
                         transformOptions: {duotone: {highlight: "#0088ff", shadow: "#000000"}}
                     )
                 }

src/sections/hero.js

@@ -73,24 +73,20 @@ export default function Hero() {
                 childImageSharp {
                     gatsbyImageData(
                         layout: FULL_WIDTH,
-                        placeholder: DOMINANT_COLOR,
-                        quality: 100
+                        placeholder: DOMINANT_COLOR
                     )
                 }
             }
             desktop: file(relativePath: {eq: "images/fractal-desktop.png"}) {
                 childImageSharp {
                     gatsbyImageData(
                         layout: FULL_WIDTH,
-                        placeholder: DOMINANT_COLOR,
-                        quality: 100
+                        placeholder: DOMINANT_COLOR
                     )
                 }
             }
         }
     `)
-    console.log(getImage(hero.desktop))
-    console.log(getImage(hero.mobile))
 
     const responsiveImages = withArtDirection(getImage(hero.desktop), [
         {

src/sections/projects.js

@@ -24,9 +24,7 @@ export default function Projects() {
                     image {
                         childImageSharp {
                             gatsbyImageData(
-                                layout: CONSTRAINED, 
-                                placeholder: DOMINANT_COLOR,
-                                quality: 100,
+                                layout: CONSTRAINED,
                                 transformOptions: {duotone: {highlight: "#0088ff", shadow: "#000000"}}
                             )
                         }

src/styling/index.js

@@ -1,7 +1,7 @@
 import { createGlobalStyle } from 'styled-components'
 
 export const primary = '#00aaff'
-export const darkPrimary = '#00a33ee'
+export const darkPrimary = '#005580'
 export const secondary = '#ffdd00'
 
 export default createGlobalStyle`