feat: add support for dominant color placeholder

gatsbyjs · Jan 25, 2021 · 4630e58 · 4630e58
1 parent b3d2ac8
commit 4630e58
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 2 deletions.
diff --git a/packages/gatsby-plugin-sharp/src/index.js b/packages/gatsby-plugin-sharp/src/index.js
@@ -20,7 +20,7 @@ const { memoizedTraceSVG, notMemoizedtraceSVG } = require(`./trace-svg`)
 const duotone = require(`./duotone`)
 const { IMAGE_PROCESSING_JOB_NAME } = require(`./gatsby-worker`)
 const { getDimensionsAndAspectRatio } = require(`./utils`)
-// const { rgbToHex } = require(`./utils`)
+const { rgbToHex } = require(`./utils`)
 
 const imageSizeCache = new Map()
 
@@ -771,6 +771,7 @@ exports.fluid = fluid
 exports.fixed = fixed
 exports.getImageSize = getImageSize
 exports.getImageSizeAsync = getImageSizeAsync
+exports.rgbToHex = rgbToHex
 exports.stats = stats
 exports._unstable_createJob = createJob
 exports._lazyJobsEnabled = lazyJobsEnabled
diff --git a/packages/gatsby-source-contentful/package.json b/packages/gatsby-source-contentful/package.json
@@ -41,7 +41,8 @@
   "license": "MIT",
   "peerDependencies": {
     "gatsby": "^2.12.1",
-    "gatsby-plugin-sharp": "^2.6.14"
+    "gatsby-plugin-sharp": "^2.6.14",
+    "sharp": "^0.26.0"
   },
   "repository": {
     "type": "git",

diff --git a/packages/gatsby-source-contentful/src/extend-node-type.js b/packages/gatsby-source-contentful/src/extend-node-type.js
@@ -48,6 +48,9 @@ const inFlightBase64Cache = new Map()
 // The images are based on urls with w=20 and should be relatively small (<2kb) but it does stick around in memory
 const resolvedBase64Cache = new Map()
 
+// Caches dominat colors per cached image file
+const dominantColorCache = new Map()
+
 const {
   ImageFormatType,
   ImageResizingBehavior,
@@ -674,6 +677,25 @@ exports.extendNodeType = ({ type, store, reporter }) => {
     })
   }
 
+  const getDominantColor = async ({ image, options }) => {
+    const { rgbToHex } = require(`gatsby-plugin-sharp`)
+    const sharp = require(`sharp`)
+
+    const absolutePath = await cacheImage(store, image, options)
+
+    const pipeline = sharp(absolutePath)
+    const { dominant } = await pipeline.stats()
+
+    // Fallback in case sharp doesn't support dominant
+    const dominantColor = dominant
+      ? rgbToHex(dominant.r, dominant.g, dominant.b)
+      : `#000000`
+
+    dominantColorCache.set(absolutePath, dominantColor)
+
+    return dominantColor
+  }
+
   const resolveGatsbyImageData = async (image, options) => {
     const { baseUrl, ...sourceMetadata } = getBasicImageProps(image, options)
 
@@ -689,6 +711,13 @@ exports.extendNodeType = ({ type, store, reporter }) => {
 
     let placeholderDataURI = null
 
+    if (options.placeholder === `dominantColor`) {
+      imageProps.backgroundColor = await getDominantColor({
+        image,
+        options,
+      })
+    }
+
     if (options.placeholder === `blurred`) {
       placeholderDataURI = await getBase64Image({
         baseUrl,