sort gallery by Vibrant hue

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,
-              xl: 6.1,
+              lg: 4,
+              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
               }
             }