add color palette to galleryimage

src/components/GalleryImage/GalleryImage.js

@@ -226,13 +226,13 @@ const GalleryImage = ({ data, location: { state } }) => {
             </div>
             <div
               className={classnames(
-                "px-2 flex flex-row portrait:items-end mx-auto",
+                "px-2 flex  mx-auto",
                 ar <= 1
-                  ? "pt-5 flex-col flex-auto text-right"
+                  ? "pt-5 flex-col flex-auto text-right items-end"
-                  : "landscape:container portrait:pt-5 portrait:flex-col portrait:text-right"
+                  : "flex-row landscape:container portrait:pt-5 portrait:flex-col portrait:text-right portrait:items-end"
               )}
             >
-              <div className="flex-auto mr-2">
+              <div className="mr-2">
                 <p className="text-muted-light font-mono text-sm m-0 mt-1">
                   {image.base}
                 </p>
@@ -256,7 +256,15 @@ const GalleryImage = ({ data, location: { state } }) => {
                 >
                   Download wallpaper
                 </a>
-              </div>
+                <div className="grid grid-cols-6 w-full h-[30px]">
+                  <div className="bg-vibrant"></div>
+                  <div className="bg-vibrant-light"></div>
+                  <div className="bg-vibrant-dark"></div>
+                  <div className="bg-muted"></div>
+                  <div className="bg-muted-light"></div>
+                  <div className="bg-muted-dark"></div>
+                </div>
+              </div><div className="flex-auto"></div>
               {
                 <div
                   className="portrait:border-t-2 border-muted-light portrait:mt-2 mr-2 portrait:mb-1"

src/components/MasonryGallery.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Link } from "gatsby";
 import { GatsbyImage, getImage } from "gatsby-plugin-image";
 import * as R from "ramda";
-import { getAspectRatio, getName } from "../utils";
+import { getAspectRatio, getVibrantStyle, getName, getVibrant } from "../utils";
 import useBreakpoint from "use-breakpoint";
 
 // @ts-ignore
@@ -47,10 +47,12 @@ const MasonryGallery = ({
   //   breakpoints,
   // });
 
-  const { breakpoint } = useBreakpoint(breakpoints, 'xs')
+  const { breakpoint } = useBreakpoint(breakpoints, "xs");
 
   // const breakpoint = currentBreakpoint.length ? currentBreakpoint : "xs";
-  const galleryWidth = `calc(100vw - ${ breakpoint === "xs" || breakpoint === "sm" ? "32" : "160" }px)`;
+  const galleryWidth = `calc(100vw - ${
+    breakpoint === "xs" || breakpoint === "sm" ? "32" : "160"
+  }px)`;
 
   const aspectRatios = React.useMemo(
     () => R.map(getAspectRatio, images).filter(Boolean),
@@ -122,7 +124,7 @@ const MasonryGallery = ({
         const rowAspectRatioSum = currentRow.aspect;
         const ar = getAspectRatio(image);
         let width;
-        let height = `calc(${galleryWidth} / ${rowAspectRatioSum} - 10px)`;
+        let height = `calc(${galleryWidth} / ${rowAspectRatioSum} + 10px)`;
         if (rowAspectRatioSum < targetAspect * 0.66) {
           // incomplete row, render stuff at "ideal" sizes instead of filling width
           width = `calc(calc(100vw - 160px) / ${targetAspect / ar})`;
@@ -136,8 +138,7 @@ const MasonryGallery = ({
         return (
           <Link
             className={classNames(
-              "border-4 border-white overflow-hidden",
+              "border-8 border-white overflow-hidden"
-              debugHue && "border-8"
             )}
             id={image.base}
             key={`${image.base}`}
@@ -149,8 +150,6 @@ const MasonryGallery = ({
             style={{
               height,
               width,
-              // borderColor: `hsl(${image.fields.imageMeta.dominantHue}, 100%, 50%)`
-              // borderColor: `rgb(${image.fields.imageMeta.vibrant.Vibrant.join(',')})`
               borderColor: debugHue
                 ? `hsl(
                     ${image.fields?.imageMeta?.dominantHue?.[0]},
@@ -161,32 +160,19 @@ const MasonryGallery = ({
             }}
             to={`/photogallery/${image.base}/`}
           >
-            {debugHue && (
-              <span className="text-white z-20 absolute bg-black">
-                hsl(
-                {image.fields?.imageMeta?.dominantHue?.[0]},{" "}
-                {(image.fields?.imageMeta?.dominantHue?.[1] ?? 0 * 100).toFixed(
-                  2
-                )}
-                %,{" "}
-                {(image.fields?.imageMeta?.dominantHue?.[2] ?? 0 * 100).toFixed(
-                  2
-                )}
-                % )
-              </span>
-            )}
             {debugRating && (
               <span className="text-white z-20 absolute bg-black">
                 rating: {image.fields?.imageMeta?.meta?.Rating}
               </span>
             )}
             {img && (
-              <GatsbyImage
+                <GatsbyImage
-                alt={getName(image)}
+                  alt={getName(image)}
-                className="w-full h-full"
+                  className="w-full h-full"
-                image={img}
+                  image={img}
-                objectFit="cover"
+                  objectFit="cover"
-              />
+                />
+                
             )}
           </Link>
         );

src/utils.ts

@@ -24,17 +24,19 @@ export const getCanonicalSize = (image: GalleryImage) => ({
 export const getRgba = (palette: string[], alpha: number) =>
   `rgba(${palette[0]}, ${palette[1]}, ${palette[2]}, ${alpha || 1})`;
 
+export const getVibrantStyle = (vibrant: Queries.FileFieldsImageMetaVibrant, screenHeight?: number) => ({
+  "--muted": vibrant.Muted,
+  "--dark-muted": vibrant.DarkMuted,
+  "--light-muted": vibrant.LightMuted,
+  "--vibrant": vibrant.Vibrant,
+  "--dark-vibrant": vibrant.DarkVibrant,
+  "--light-vibrant": vibrant.LightVibrant,
+  "--height-screen": screenHeight ? `${screenHeight}px` : "100vh",
+});
+
 // work around SSR bug in react-helmet
 export const getHelmetSafeBodyStyle = (vibrant: Queries.FileFieldsImageMetaVibrant, screenHeight?: number) => {
-  const style = {
+  const style = getVibrantStyle(vibrant, screenHeight);
-    "--muted": vibrant.Muted,
-    "--dark-muted": vibrant.DarkMuted,
-    "--light-muted": vibrant.LightMuted,
-    "--vibrant": vibrant.Vibrant,
-    "--dark-vibrant": vibrant.DarkVibrant,
-    "--light-vibrant": vibrant.LightVibrant,
-    "--height-screen": screenHeight ? `${screenHeight}px` : "100vh",
-  };
   if (typeof window === "undefined") {
     return style;
   }