keyword images and add keyword filtering

src/components/KeywordsPicker.js

@@ -0,0 +1,37 @@
+import classNames from "classnames";
+import * as React from "react";
+
+const KeywordsPicker = ({ keywords, value, onChange }) => {
+  return (
+    <div>
+      <span className="text-xs text-[#A2A2A2]">Filter by...</span>
+      <ul className="flex gap-1 flex-wrap mt-1 mb-2">
+        {keywords.map((keyword) => {
+          const selected = value === keyword;
+          const disabled = value && !selected;
+          // if (value && !selected) {
+          //   return;
+          // }
+          return (
+            <li key={keyword}>
+              <button
+                className={classNames(
+                  "py-[5px] px-2 rounded-full text-[#C8C8C8] hover:bg-gray-700 bg-[#1A1A1A] border border-[#494949]                  ",
+                  selected && "bg-blue-600 hover:bg-blue-800",
+                  disabled && "text-[#777777] cursor-default hover:bg-[#1A1A1A]"
+                )}
+                disabled={disabled}
+                onClick={() => (selected ? onChange(null) : onChange(keyword))}
+                type="button"
+              >
+                {keyword}
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+export default KeywordsPicker;

src/components/MasonryGallery.js

@@ -103,7 +103,7 @@ const MasonryGallery = ({
         const ar = getAspectRatio(image);
         let width;
         let height = `calc(100vw / ${rowAspectRatioSum} - 10px)`;
-        if (rowAspectRatioSum < targetAspect / 2) {
+        if (rowAspectRatioSum < targetAspect * 0.66) {
           // incomplete row, render stuff at "ideal" sizes instead of filling width
           width = `calc(100vw / ${targetAspect / ar})`;
           height = "unset";

src/pages/photogallery.js

@@ -6,6 +6,7 @@ import { Helmet } from "react-helmet";
 import { Picker, Item } from "@adobe/react-spectrum";
 
 import MasonryGallery from "../components/MasonryGallery";
+import KeywordsPicker from "../components/KeywordsPicker";
 
 const SORT_KEYS = {
   hue: ["fields", "imageMeta", "vibrantHue"],
@@ -15,7 +16,20 @@ const SORT_KEYS = {
 };
 
 const GalleryPage = ({ data }) => {
+  const [keyword, _setKeyword] = React.useState(null);
   const [sortKey, _setSortKey] = React.useState("rating");
+
+  const setKeyword = React.useCallback((keyword) => {
+    try {
+      window.plausible("Filter Keyword", {
+        props: { keyword },
+      });
+    } catch (e) {
+      // do nothing
+    }
+    _setKeyword(keyword);
+  }, [_setKeyword]);
+
   const setSortKey = React.useCallback(
     (key) => {
       try {
@@ -25,14 +39,14 @@ const GalleryPage = ({ data }) => {
       } catch (e) {
         // do nothing
       }
-      localStorage?.setItem("photogallery.sortkey", key);
+      localStorage?.setItem("photogallery.sortkey2", key);
       _setSortKey(key);
     },
     [_setSortKey]
   );
 
   React.useEffect(() => {
-    const _sortKey = localStorage.getItem("photogallery.sortkey");
+    const _sortKey = localStorage.getItem("photogallery.sortkey2");
     if (_sortKey) {
       setSortKey(_sortKey);
     }
@@ -52,9 +66,17 @@ const GalleryPage = ({ data }) => {
               );
               return -1 * (date1.getTime() - date2.getTime());
             })
-          : R.sort(R.descend(R.path(SORT_KEYS[sortKey])))
+          : R.sort(R.descend(R.path(SORT_KEYS[sortKey]))),
+        keyword
+          ? R.filter((image) =>
+              R.includes(
+                keyword,
+                R.path(["fields", "imageMeta", "meta", "Keywords"], image)
+              )
+            )
+          : R.identity
       )(data.allFile.edges),
-    [data, sortKey]
+    [data, sortKey, keyword]
   );
 
   const showDebug =
@@ -93,6 +115,22 @@ const GalleryPage = ({ data }) => {
           <h1 className="text-3xl sm:text-5xl mt-0 ml-5 font-serif font-black z-10 flex-auto">
             Photo Gallery
           </h1>
+          <KeywordsPicker
+            keywords={[
+              "night",
+              "coast",
+              "city",
+              "landscape",
+              "flowers",
+              "product",
+              "waterfall",
+              "fireworks",
+              "panoramic",
+              // "sunset",
+            ]}
+            onChange={setKeyword}
+            value={keyword}
+          />
           <div className="m-2 ml-5 self-end">
             <Picker
               label="Sort by..."
@@ -149,6 +187,7 @@ export const query = graphql`
               dominantHue
               dateTaken
               meta {
+                Keywords
                 Rating
                 ObjectName
               }