even better masonry layout and add sort by date option to gallery

gatsby-browser.js

@@ -1,3 +1,5 @@
+import * as React from "react";
+import { darkTheme, Provider } from "@adobe/react-spectrum";
 import "./src/styles/global.css";
 
 const env =
@@ -6,11 +8,11 @@ export const onRouteUpdate = function () {
   if (env === "production" && typeof window.plausible === "object") {
     window.plausible("pageview");
     // eslint-disable-next-line
-    _paq.push(['setCustomUrl', '/' + window.location.pathname]);
+    _paq.push(["setCustomUrl", "/" + window.location.pathname]);
     // eslint-disable-next-line
-    _paq.push(['setDocumentTitle', document.title]);
+    _paq.push(["setDocumentTitle", document.title]);
     // eslint-disable-next-line
-    _paq.push(['trackPageView']);
+    _paq.push(["trackPageView"]);
   }
 };
 // import * as React from 'react';
@@ -26,6 +28,19 @@ export const onRouteUpdate = function () {
 //   p: MyParagraph,
 // };
 
-// export const wrapRootElement = ({ element }) => (
-//   <MDXProvider components={components}>{element}</MDXProvider>
-// );
+
+export const wrapRootElement = ({ element }) => (
+  <Provider
+    UNSAFE_style={{
+      background: "transparent !important",
+      color: 'unset !important'
+    }}
+    colorScheme="dark"
+    theme={darkTheme}
+  >
+    {element}
+  </Provider>
+);
+
+
+// {/* // <MDXProvider components={components}>{element}</MDXProvider> */}

gatsby-ssr.js

@@ -1 +1,16 @@
+import * as React from "react";
+import { darkTheme, Provider } from "@adobe/react-spectrum";
 import "./src/styles/global.css";
+
+export const wrapRootElement = ({ element }) => (
+  <Provider
+    UNSAFE_style={{
+      background: "transparent !important",
+      color: 'unset !important'
+    }}
+    colorScheme="dark"
+    theme={darkTheme}
+  >
+    {element}
+  </Provider>
+);

package.json

@@ -21,6 +21,7 @@
     "pretty": "prettier --write ."
   },
   "dependencies": {
+    "@adobe/react-spectrum": "^3.19.0",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
     "autoprefixer": "^10.2.6",

src/components/MasonryGallery.js

@@ -51,23 +51,28 @@ const MasonryGallery = ({
             R.reduce(
               (acc, currentAspect) => {
                 const currentRow = acc.pop();
-                if (currentRow.aspect + currentAspect > targetAspect) {
+                const currentDiff = Math.abs(targetAspect - currentRow.aspect);
+                const diffIfImageIsAddedToCurrentRow = Math.abs(
+                  targetAspect - (currentRow.aspect + currentAspect)
+                );
+                // add image to current row if it gets us closer to our target aspect ratio
+                if (currentDiff > diffIfImageIsAddedToCurrentRow) {
                   return [
                     ...acc,
-                    currentRow,
                     {
-                      aspect: currentAspect,
-                      images: 1,
-                      startIndex: currentRow.startIndex + currentRow.images,
+                      aspect: currentRow.aspect + currentAspect,
+                      images: currentRow.images + 1,
+                      startIndex: currentRow.startIndex,
                     },
                   ];
                 }
                 return [
                   ...acc,
+                  currentRow,
                   {
-                    aspect: currentRow.aspect + currentAspect,
-                    images: currentRow.images + 1,
-                    startIndex: currentRow.startIndex,
+                    aspect: currentAspect,
+                    images: 1,
+                    startIndex: currentRow.startIndex + currentRow.images,
                   },
                 ];
               },
@@ -128,8 +133,8 @@ const MasonryGallery = ({
             {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[0]},{" "}
+                {(image.fields.imageMeta.dominantHue[1] * 100).toFixed(2)}%,{" "}
                 {(image.fields.imageMeta.dominantHue[2] * 100).toFixed(2)}% )
               </span>
             )}

src/pages/index.js

@@ -35,6 +35,7 @@ const IndexPage = ({
   const image = React.useMemo(() => {
     return images[imageIndex];
   }, [images, imageIndex]);
+  console.log(image);
 
   const shuffleImage = React.useCallback(
     (currentImage) => {
@@ -214,6 +215,7 @@ export const query = graphql`
         sourceInstanceName: { eq: "gallery" }
         base: {
           in: [
+            "DSC06616.jpg" # B&W abstract ## KEEP ON TOP
             # "20160530-DSC09108.jpg" # portrait red flowers
             # # "DSC00201.jpg" # duck
             # "DSC04905.jpg" # purple layers
@@ -245,7 +247,6 @@ export const query = graphql`
             "DSC02615.jpg" # rori iredale beach field camera
             "DSC06490.jpg" # Japanese garden steps
             "DSC06687.jpg" # Multnomah Falls long exposure
-            "DSC06616.jpg" # B&W abstract
           ]
         }
       }

src/pages/photogallery.js

@@ -3,23 +3,37 @@ import * as R from "ramda";
 import { graphql, Link } from "gatsby";
 import { navigate } from "gatsby";
 import { Helmet } from "react-helmet";
+import { Picker, Item } from "@adobe/react-spectrum";
 
 import MasonryGallery from "../components/MasonryGallery";
 
+const SORT_KEYS = {
+  hue: ["fields", "imageMeta", "vibrantHue"],
+  hue_debug: ["fields", "imageMeta", "dominantHue", 0],
+  date: [],
+};
+
 const GalleryPage = ({ data }) => {
-  const [debug, setDebug] = React.useState(false);
+  const [sortKey, setSortKey] = React.useState("hue");
 
   const images = React.useMemo(
     () =>
       R.pipe(
         R.map((edge) => edge.node),
-        debug
-          ? R.sortBy(R.path(["fields", "imageMeta", "dominantHue", 0]))
-          : R.sortBy(R.path(["fields", "imageMeta", "vibrantHue"]))
+        sortKey === "date"
+          ? R.sort((node1, node2) => {
+            const date1 = new Date(R.path(["fields", "imageMeta", "dateTaken"], node1));
+            const date2 = new Date(R.path(["fields", "imageMeta", "dateTaken"], node2));
+            return -1 * (date1.getTime() - date2.getTime())
+          })
+          : R.sortBy(R.path(SORT_KEYS[sortKey]))
       )(data.allFile.edges),
-    [data, debug]
+    [data, sortKey]
   );
 
+  const showDebug = typeof window !== "undefined" &&
+  window.location.search.includes("debug=true")
+
   return (
     <>
       <Helmet>
@@ -48,24 +62,23 @@ const GalleryPage = ({ data }) => {
         </Link>
       </nav>
       <div className="bg-black min-h-screen mx-auto">
-        <div className="flex flex-col md:flex-row">
+        <div className="flex flex-col sm:flex-row items-stretch sm:items-end">
           <h1 className="text-5xl mt-0 ml-5 font-serif font-black z-10 flex-auto">
             Photo Gallery
           </h1>
-          {typeof window !== "undefined" &&
-          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 className="m-2 ml-5 self-end">
+            <Picker
+              label="Sort by..."
+              onSelectionChange={setSortKey}
+              selectedKey={sortKey}
+            >
+              <Item key="hue">Hue</Item>
+              {showDebug && (
+                  <Item key="hue_debug">Dominant hue[debug]</Item>
+                )}
+              <Item key="date">Date</Item>
+            </Picker>
+          </div>
         </div>
         <div className="mx-auto">
           <MasonryGallery
@@ -74,8 +87,9 @@ const GalleryPage = ({ data }) => {
               md: 4,
               lg: 4,
               xl: 5,
+              // '2xl': 6.1,
             }}
-            debug={debug}
+            debug={sortKey === 'hue_debug'}
             images={images}
           />
         </div>