Get text colors from vibrant, make fragment to help; hopefully fix hydration issue with mobile safari, default to sm breakpoint

gatsby/src/components/GalleryImage.js

@@ -50,7 +50,7 @@ const GalleryImage = ({ data }) => {
             style={{
               maxWidth: `calc(max(90vh, 500px) * ${ar})`,
               maxHeight: '90vh',
-              minHeight: '500px',
+              // minHeight: '500px',
             }} />
         </div>
         <div className={classnames('flex-shrink-0 mr-2 flex flex-row', ar <= 1 && 'pt-4 flex-col flex-auto text-right')}>
@@ -98,12 +98,7 @@ export const query = graphql`
                 ISO
               }
               vibrant {
-                DarkMuted
-                DarkVibrant
-                LightMuted
-                LightVibrant
-                Muted
-                Vibrant
+                ...VibrantColors
               }
             }
           }

gatsby/src/components/MasonryGallery.js

@@ -11,8 +11,9 @@ const MasonryGallery = ({ images, itemsPerRow: itemsPerRowByBreakpoint }) => {
   const breakpoints = React.useMemo(() => 
     R.pick(R.keys(itemsPerRowByBreakpoint), themeBreakpoints)
   , [itemsPerRowByBreakpoint]);
+  console.log(breakpoints);
 
-  const { breakpoint } = useBreakpoint(breakpoints, 'md');
+  const { breakpoint } = useBreakpoint(breakpoints, 'sm');
 
   const aspectRatios = React.useMemo(() => R.map(getAspectRatio, images), [images]);
   const rowAspectRatioSumsByBreakpoint = React.useMemo(() => R.map(R.pipe(
@@ -36,7 +37,7 @@ const MasonryGallery = ({ images, itemsPerRow: itemsPerRowByBreakpoint }) => {
         const rowAspectRatioSum = rowAspectRatioSumsForCurrentBP[rowIndex];
         // const width = ((getAspectRatio(image) / rowAspectRatioSum) * 100).toFixed(10);
         const ar = getAspectRatio(image);
-        const widthNumber = ((ar / rowAspectRatioSum) * 100);
+        const widthNumber = ((ar / rowAspectRatioSum) * 100).toFixed(5);
         const width = `${widthNumber}%`;
         // const width = `${widthNumber}%`;
         // console.log('ars', rowAspectRatioSum);

gatsby/src/fragments.js

@@ -0,0 +1,36 @@
+import { graphql } from 'gatsby';
+
+export const VibrantColorsFragment = graphql`
+  fragment VibrantColors on ImageSharpFieldsImageMetaVibrant {
+    DarkMuted {
+      titleTextColor
+      bodyTextColor
+      rgb
+    }
+    DarkVibrant {
+      titleTextColor
+      bodyTextColor
+      rgb
+    }
+    LightMuted {
+      titleTextColor
+      bodyTextColor
+      rgb
+    }
+    LightVibrant {
+      titleTextColor
+      bodyTextColor
+      rgb
+    }
+    Vibrant {
+      titleTextColor
+      bodyTextColor
+      rgb
+    }
+    Muted {
+      titleTextColor
+      bodyTextColor
+      rgb
+    }
+  }
+`;

gatsby/src/pages/index.js

@@ -29,7 +29,7 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
     localStorage.setItem('lastHeros', JSON.stringify(take(3, [imageIndex, ...lastThreeImages])));
     return images[imageIndex];
   }, [images, isClient]);
-  const vibrant = getVibrant(image, isClient);
+  const vibrant = getVibrant(image);
   React.useEffect(() => {
     if (!isClient) {
       setIsClient(true);
@@ -118,12 +118,7 @@ export const query = graphql`
           fields {
             imageMeta {
               vibrant {
-                DarkMuted
-                DarkVibrant
-                LightMuted
-                LightVibrant
-                Muted
-                Vibrant
+                ...VibrantColors
               }
             }
           }

gatsby/src/pages/photogallery.js

@@ -26,9 +26,9 @@ const GalleryPage = ({ data }) => {
         <MasonryGallery
           images={images}
           itemsPerRow={{
-            sm: 1,
+            sm: 2,
             md: 2,
-            lg: 2,
+            lg: 3,
             xl: 3,
             '2xl': 4,
           }}

gatsby/src/utils.js

@@ -5,14 +5,7 @@ export const getMeta = (image) => image.childImageSharp.fields.imageMeta;
 export const getName = (image) => getMeta(image)?.iptc.object_name || image.base;
 
 // some pleasing default colors for SSR and initial hydration
-export const getVibrant = (image, isClient) => isClient ? getMeta(image)?.vibrant : {
-  'DarkMuted': [ 63, 64, 73 ],
-  'DarkVibrant': [ 52, 75, 116 ],
-  'LightMuted': [ 211, 194, 181 ],
-  'LightVibrant': [ 224, 183, 140 ],
-  'Muted': [ 155, 123, 114 ],
-  'Vibrant': [ 226, 116, 81 ],
-};
+export const getVibrant = (image) => getMeta(image)?.vibrant;
 
 export const hasName = (image) => Boolean(getMeta(image)?.iptc.object_name);
 
@@ -23,12 +16,12 @@ export const getRgba = (palette, alpha) => `rgba(${palette[0]}, ${palette[1]}, $
 // work around SSR bug in react-helmet
 export const getVibrantToHelmetSafeBodyStyle = (vibrant) => {
   const style = {
-    '--muted': vibrant.Muted,
-    '--dark-muted': vibrant.DarkMuted,
-    '--light-muted': vibrant.LightMuted,
-    '--vibrant': vibrant.Vibrant,
-    '--dark-vibrant': vibrant.DarkVibrant,
-    '--light-vibrant': vibrant.LightVibrant,
+    '--muted': vibrant.Muted.rgb,
+    '--dark-muted': vibrant.DarkMuted.rgb,
+    '--light-muted': vibrant.LightMuted.rgb,
+    '--vibrant': vibrant.Vibrant.rgb,
+    '--dark-vibrant': vibrant.DarkVibrant.rgb,
+    '--light-vibrant': vibrant.LightVibrant.rgb,
   };
   if (typeof window === 'undefined') {
     return style;