add debug for dominant hue

gatsby-node.js

@@ -100,15 +100,19 @@ function processColors(vibrantData, imagePath) {
 //   }
 // }
 
-function transformMetaToNodeData(metaData, vibrantData, imagePath) {
+function transformMetaToNodeData(metaData, vibrantData, imagePath, { r, g, b }) {
   const vibrant = vibrantData ? processColors(vibrantData, imagePath) : null;
-  let dominantHue = vibrantData.Vibrant.getHsl()[0] * 360;
-
+  const vibrantHue = vibrantData.Vibrant.getHsl()[0] * 360;
+  let dominantHue = chroma(r,g,b).hsl();
+  if (isNaN(dominantHue[0])) {
+    dominantHue[0] = 0
+  }
   return {
     dateTaken: metaData.DateTimeOriginal,
     meta: metaData,
     vibrant,
-    dominantHue,
+    vibrantHue,
+    dominantHue
   };
 }
 
@@ -121,7 +125,9 @@ exports.onCreateNode = async function ({ node, actions }) {
       // icc: true
     });
 
-    const resizedImage = await sharp(node.absolutePath)
+    const sharpImage = sharp(node.absolutePath);
+    const { dominant } = await sharpImage.stats();
+    const resizedImage = await sharpImage
       .resize({
         width: 3000,
         height: 3000,
@@ -139,7 +145,8 @@ exports.onCreateNode = async function ({ node, actions }) {
       value: transformMetaToNodeData(
         metaData,
         vibrantData,
-        node.absolutePath
+        node.absolutePath,
+        dominant
       ),
     });
   }

src/components/MasonryGallery.js

@@ -6,10 +6,12 @@ import { getAspectRatio, getName } from "../utils";
 import useBreakpoint from "use-breakpoint";
 
 import themeBreakpoints from "../breakpoints";
+import classNames from "classnames";
 
 const MasonryGallery = ({
   images,
   aspectsByBreakpoint: aspectTargetsByBreakpoint,
+  debug,
 }) => {
   const breakpoints = React.useMemo(
     () => R.pick(R.keys(aspectTargetsByBreakpoint), themeBreakpoints),
@@ -99,20 +101,42 @@ const MasonryGallery = ({
         const widthNumber = ((ar / rowAspectRatioSum) * 100).toFixed(7);
 
         const width = `${widthNumber}%`;
+        console.log(image.fields.imageMeta.dominantHue);
         return (
           <Link
-            className="border border-black inline-block"
+            className={classNames(
+              "border-4 overflow-hidden",
+              debug && "border-8"
+            )}
             id={image.base}
             key={`${image.base}`}
             state={{ modal: true }}
             style={{
+              height: `calc(100vw / ${rowAspectRatioSum} - 10px)`,
               width,
+              // borderColor: `hsl(${image.fields.imageMeta.dominantHue}, 100%, 50%)`
+              // borderColor: `rgb(${image.fields.imageMeta.vibrant.Vibrant.join(',')})`
+              borderColor: debug
+                ? `hsl(
+                    ${image.fields.imageMeta.dominantHue[0]},
+                    ${image.fields.imageMeta.dominantHue[1] * 100}%,
+                    ${image.fields.imageMeta.dominantHue[2] * 100}%
+                  )`
+                : "black",
             }}
             to={`/photogallery/${image.base}`}
           >
+            {debug && (
+              <span className="text-white z-20 absolute bg-black">
+                hsl(
+                {image.fields.imageMeta.dominantHue[0]},{' '}
+                {(image.fields.imageMeta.dominantHue[1] * 100).toFixed(2)}%,{' '}
+                {(image.fields.imageMeta.dominantHue[2] * 100).toFixed(2)}% )
+              </span>
+            )}
             <GatsbyImage
               alt={getName(image)}
-              className="w-full"
+              className="w-full h-full"
               image={getImage(image)}
               objectFit="cover"
             />

src/pages/photogallery.js

@@ -1,4 +1,5 @@
 import * as React from "react";
+import * as R from "ramda";
 import { graphql, Link } from "gatsby";
 import { navigate } from "gatsby";
 import { Helmet } from "react-helmet";
@@ -6,9 +7,15 @@ import { Helmet } from "react-helmet";
 import MasonryGallery from "../components/MasonryGallery";
 
 const GalleryPage = ({ data }) => {
+  const [debug, setDebug] = React.useState(false);
+
   const images = React.useMemo(
-    () => data.allFile.edges.map((edge) => edge.node, [data]),
-    [data]
+    () =>
+      R.pipe(
+        R.map((edge) => edge.node),
+        debug ? R.sortBy(R.path(["fields", "imageMeta", "dominantHue", 0])) : R.identity
+      )(data.allFile.edges),
+    [data, debug]
   );
 
   return (
@@ -39,9 +46,24 @@ const GalleryPage = ({ data }) => {
         </Link>
       </nav>
       <div className="bg-black min-h-screen mx-auto">
-        <h1 className="text-5xl mt-0 ml-5 font-serif font-black z-10 relative">
-          Photo Gallery
-        </h1>
+        <div className="flex flex-col md:flex-row">
+          <h1 className="text-5xl mt-0 ml-5 font-serif font-black z-10 flex-auto">
+            Photo Gallery
+          </h1>
+          {window && window.location.hash.includes("debug") ? (
+            <div className="m-2">
+              <label>
+                <input
+                  className="mr-1"
+                  onChange={() => setDebug(!debug)}
+                  type="checkbox"
+                  value={debug}
+                />
+                [debug] use stats.dominant instead of vibrant.Vibrant
+              </label>
+            </div>
+          ) : null}
+        </div>
         <div className="mx-auto">
           <MasonryGallery
             aspectsByBreakpoint={{
@@ -50,6 +72,7 @@ const GalleryPage = ({ data }) => {
               lg: 4,
               xl: 5,
             }}
+            debug={debug}
             images={images}
           />
         </div>
@@ -62,7 +85,7 @@ export const query = graphql`
   query GalleryPageQuery {
     allFile(
       filter: { sourceInstanceName: { eq: "gallery" } }
-      sort: { fields: fields___imageMeta___dominantHue, order: DESC }
+      sort: { fields: fields___imageMeta___vibrantHue, order: DESC }
     ) {
       edges {
         node {
@@ -85,6 +108,9 @@ export const query = graphql`
               meta {
                 ObjectName
               }
+              vibrant {
+                Vibrant
+              }
             }
           }
         }