sort gallery by Vibrant hue

gatsby-node.js

@@ -4,7 +4,7 @@ const chroma = require("chroma-js");
 const chalk = require("chalk");
 const R = require("ramda");
 const exifr = require("exifr");
-const sharp = require('sharp');
+const sharp = require("sharp");
 
 const badContrast = (color1, color2) => chroma.contrast(color1, color2) < 4.5;
 
@@ -102,11 +102,13 @@ function processColors(vibrantData, imagePath) {
 
 function transformMetaToNodeData(metaData, vibrantData, imagePath) {
   const vibrant = vibrantData ? processColors(vibrantData, imagePath) : null;
+  let dominantHue = vibrantData.Vibrant.getHsl()[0] * 360;
 
   return {
     dateTaken: metaData.DateTimeOriginal,
     meta: metaData,
     vibrant,
+    dominantHue,
   };
 }
 
@@ -118,13 +120,15 @@ exports.onCreateNode = async function ({ node, actions }) {
       xmp: true,
       // icc: true
     });
+
     const resizedImage = await sharp(node.absolutePath)
       .resize({
         width: 3000,
         height: 3000,
-        fit: 'inside'
+        fit: "inside",
       })
-      .toBuffer()
+      .toBuffer();
+
     const vibrantData = await Vibrant.from(resizedImage)
       .quality(1)
       .getPalette();
@@ -132,7 +136,11 @@ exports.onCreateNode = async function ({ node, actions }) {
     createNodeField({
       node,
       name: "imageMeta",
-      value: transformMetaToNodeData(metaData, vibrantData, node.absolutePath),
+      value: transformMetaToNodeData(
+        metaData,
+        vibrantData,
+        node.absolutePath
+      ),
     });
   }
 };

src/components/GalleryImage/GalleryImage.js

@@ -145,7 +145,7 @@ const GalleryImage = ({ data, pageContext }) => {
             <GatsbyImage
               alt={name}
               className={classnames(
-                "border-4 border-muted-light",
+                "border-4 border-vibrant",
                 zoom ? "cursor-zoom-out" : "cursor-zoom-in"
               )}
               image={getImage(image)}

src/components/MasonryGallery.js

@@ -17,7 +17,6 @@ const MasonryGallery = ({
   );
 
   const { breakpoint } = useBreakpoint(breakpoints, "sm");
-  console.log("🚀 ~ file: MasonryGallery.js ~ line 20 ~ breakpoint", breakpoint)
 
   const scrollIntoView = React.useCallback(() => {
     if (!window.location.hash) {
@@ -34,7 +33,7 @@ const MasonryGallery = ({
     // hacky but it works for now
     setTimeout(() => {
       scrollIntoView();
-    }, 100)
+    }, 100);
   }, [scrollIntoView]);
 
   const aspectRatios = React.useMemo(

src/pages/photogallery.js

@@ -45,10 +45,10 @@ const GalleryPage = ({ data }) => {
         <div className="mx-auto">
           <MasonryGallery
             aspectsByBreakpoint={{
-              sm: 3.6,
+              sm: 3,
               md: 4,
-              lg: 5,
+              lg: 4,
-              xl: 6.1,
+              xl: 5,
             }}
             images={images}
           />
@@ -62,7 +62,7 @@ export const query = graphql`
   query GalleryPageQuery {
     allFile(
       filter: { sourceInstanceName: { eq: "gallery" } }
-      sort: { order: DESC, fields: fields___imageMeta___dateTaken }
+      sort: { fields: fields___imageMeta___dominantHue, order: DESC }
     ) {
       edges {
         node {
@@ -72,12 +72,17 @@ export const query = graphql`
             fluid {
               aspectRatio
             }
-            gatsbyImageData(layout: CONSTRAINED, height: 550)
+            gatsbyImageData(
+              layout: CONSTRAINED
+              height: 550
+              placeholder: DOMINANT_COLOR
+            )
           }
           fields {
             imageMeta {
+              dominantHue
               dateTaken
-              meta{
+              meta {
                 ObjectName
               }
             }