add "recently updated" section to gallery

gatsby-node.ts

@@ -139,6 +139,7 @@ function transformMetaToNodeData(
       ISO: metaData.ISO,
       DateTimeOriginal: metaData.DateTimeOriginal,
       CreateDate: metaData.CreateDate,
+      ModifyDate: metaData.ModifyDate,
       ShutterSpeedValue: metaData.ShutterSpeedValue,
       ApertureValue: metaData.ApertureValue,
       FocalLength: metaData.FocalLength,

src/components/MasonryGallery.tsx

@@ -18,7 +18,7 @@ interface Row {
 }
 
 interface MasonryGalleryProps {
-  images: GalleryImage[];
+  images: readonly GalleryImage[];
   aspectsByBreakpoint: {
     [breakpoint: string]: number;
   };

src/gatsby-types.d.ts

@@ -617,6 +617,7 @@ type FileFieldsImageMetaMeta = {
   readonly Location: Maybe<Scalars['String']>;
   readonly Make: Maybe<Scalars['String']>;
   readonly Model: Maybe<Scalars['String']>;
+  readonly ModifyDate: Maybe<Scalars['Date']>;
   readonly ObjectName: Maybe<Scalars['String']>;
   readonly Rating: Maybe<Scalars['Int']>;
   readonly ShutterSpeedValue: Maybe<Scalars['Float']>;
@@ -639,6 +640,14 @@ type FileFieldsImageMetaMeta_DateTimeOriginalArgs = {
   locale: InputMaybe<Scalars['String']>;
 };
 
+
+type FileFieldsImageMetaMeta_ModifyDateArgs = {
+  difference: InputMaybe<Scalars['String']>;
+  formatString: InputMaybe<Scalars['String']>;
+  fromNow: InputMaybe<Scalars['Boolean']>;
+  locale: InputMaybe<Scalars['String']>;
+};
+
 type FileFieldsImageMetaMetaFieldSelector = {
   readonly ApertureValue: InputMaybe<FieldSelectorEnum>;
   readonly Caption: InputMaybe<FieldSelectorEnum>;
@@ -654,6 +663,7 @@ type FileFieldsImageMetaMetaFieldSelector = {
   readonly Location: InputMaybe<FieldSelectorEnum>;
   readonly Make: InputMaybe<FieldSelectorEnum>;
   readonly Model: InputMaybe<FieldSelectorEnum>;
+  readonly ModifyDate: InputMaybe<FieldSelectorEnum>;
   readonly ObjectName: InputMaybe<FieldSelectorEnum>;
   readonly Rating: InputMaybe<FieldSelectorEnum>;
   readonly ShutterSpeedValue: InputMaybe<FieldSelectorEnum>;
@@ -675,6 +685,7 @@ type FileFieldsImageMetaMetaFilterInput = {
   readonly Location: InputMaybe<StringQueryOperatorInput>;
   readonly Make: InputMaybe<StringQueryOperatorInput>;
   readonly Model: InputMaybe<StringQueryOperatorInput>;
+  readonly ModifyDate: InputMaybe<DateQueryOperatorInput>;
   readonly ObjectName: InputMaybe<StringQueryOperatorInput>;
   readonly Rating: InputMaybe<IntQueryOperatorInput>;
   readonly ShutterSpeedValue: InputMaybe<FloatQueryOperatorInput>;
@@ -696,6 +707,7 @@ type FileFieldsImageMetaMetaSortInput = {
   readonly Location: InputMaybe<SortOrderEnum>;
   readonly Make: InputMaybe<SortOrderEnum>;
   readonly Model: InputMaybe<SortOrderEnum>;
+  readonly ModifyDate: InputMaybe<SortOrderEnum>;
   readonly ObjectName: InputMaybe<SortOrderEnum>;
   readonly Rating: InputMaybe<SortOrderEnum>;
   readonly ShutterSpeedValue: InputMaybe<SortOrderEnum>;
@@ -2547,10 +2559,12 @@ type GalleryImageQueryVariables = Exact<{
 
 type GalleryImageQuery = { readonly file: { readonly base: string, readonly publicURL: string | null, readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData, readonly fluid: { readonly aspectRatio: number } | null } | null, readonly fields: { readonly imageMeta: { readonly dateTaken: string | null, readonly meta: { readonly Make: string | null, readonly Model: string | null, readonly ExposureTime: number | null, readonly FNumber: number | null, readonly ISO: number | null, readonly DateTimeOriginal: string | null, readonly CreateDate: string | null, readonly ShutterSpeedValue: number | null, readonly ApertureValue: number | null, readonly FocalLength: number | null, readonly LensModel: string | null, readonly ObjectName: string | null, readonly Caption: string | null, readonly Location: string | null, readonly City: string | null, readonly State: string | null } | null, readonly vibrant: { readonly DarkMuted: ReadonlyArray<number | null> | null, readonly DarkVibrant: ReadonlyArray<number | null> | null, readonly LightMuted: ReadonlyArray<number | null> | null, readonly LightVibrant: ReadonlyArray<number | null> | null, readonly Vibrant: ReadonlyArray<number | null> | null, readonly Muted: ReadonlyArray<number | null> | null } | null } | null } | null } | null };
 
+type GalleryImageFileFragment = { readonly nodes: ReadonlyArray<{ readonly relativePath: string, readonly base: string, readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData, readonly fluid: { readonly aspectRatio: number } | null } | null, readonly fields: { readonly imageMeta: { readonly vibrantHue: number | null, readonly dominantHue: ReadonlyArray<number | null> | null, readonly dateTaken: string | null, readonly meta: { readonly Keywords: ReadonlyArray<string | null> | null, readonly Rating: number | null, readonly ObjectName: string | null, readonly CreateDate: string | null, readonly ModifyDate: string | null } | null, readonly vibrant: { readonly DarkMuted: ReadonlyArray<number | null> | null, readonly DarkVibrant: ReadonlyArray<number | null> | null, readonly LightMuted: ReadonlyArray<number | null> | null, readonly LightVibrant: ReadonlyArray<number | null> | null, readonly Vibrant: ReadonlyArray<number | null> | null, readonly Muted: ReadonlyArray<number | null> | null } | null } | null } | null }> };
+
 type GalleryPageQueryQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-type GalleryPageQueryQuery = { readonly allFile: { readonly nodes: ReadonlyArray<{ readonly relativePath: string, readonly base: string, readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData, readonly fluid: { readonly aspectRatio: number } | null } | null, readonly fields: { readonly imageMeta: { readonly vibrantHue: number | null, readonly dominantHue: ReadonlyArray<number | null> | null, readonly dateTaken: string | null, readonly meta: { readonly Keywords: ReadonlyArray<string | null> | null, readonly Rating: number | null, readonly ObjectName: string | null } | null, readonly vibrant: { readonly DarkMuted: ReadonlyArray<number | null> | null, readonly DarkVibrant: ReadonlyArray<number | null> | null, readonly LightMuted: ReadonlyArray<number | null> | null, readonly LightVibrant: ReadonlyArray<number | null> | null, readonly Vibrant: ReadonlyArray<number | null> | null, readonly Muted: ReadonlyArray<number | null> | null } | null } | null } | null }> } };
+type GalleryPageQueryQuery = { readonly recents: { readonly nodes: ReadonlyArray<{ readonly relativePath: string, readonly base: string, readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData, readonly fluid: { readonly aspectRatio: number } | null } | null, readonly fields: { readonly imageMeta: { readonly vibrantHue: number | null, readonly dominantHue: ReadonlyArray<number | null> | null, readonly dateTaken: string | null, readonly meta: { readonly Keywords: ReadonlyArray<string | null> | null, readonly Rating: number | null, readonly ObjectName: string | null, readonly CreateDate: string | null, readonly ModifyDate: string | null } | null, readonly vibrant: { readonly DarkMuted: ReadonlyArray<number | null> | null, readonly DarkVibrant: ReadonlyArray<number | null> | null, readonly LightMuted: ReadonlyArray<number | null> | null, readonly LightVibrant: ReadonlyArray<number | null> | null, readonly Vibrant: ReadonlyArray<number | null> | null, readonly Muted: ReadonlyArray<number | null> | null } | null } | null } | null }> }, readonly all: { readonly nodes: ReadonlyArray<{ readonly relativePath: string, readonly base: string, readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData, readonly fluid: { readonly aspectRatio: number } | null } | null, readonly fields: { readonly imageMeta: { readonly vibrantHue: number | null, readonly dominantHue: ReadonlyArray<number | null> | null, readonly dateTaken: string | null, readonly meta: { readonly Keywords: ReadonlyArray<string | null> | null, readonly Rating: number | null, readonly ObjectName: string | null, readonly CreateDate: string | null, readonly ModifyDate: string | null } | null, readonly vibrant: { readonly DarkMuted: ReadonlyArray<number | null> | null, readonly DarkVibrant: ReadonlyArray<number | null> | null, readonly LightMuted: ReadonlyArray<number | null> | null, readonly LightVibrant: ReadonlyArray<number | null> | null, readonly Vibrant: ReadonlyArray<number | null> | null, readonly Muted: ReadonlyArray<number | null> | null } | null } | null } | null }> } };
 
 type GatsbyImageSharpFixedFragment = { readonly base64: string | null, readonly width: number, readonly height: number, readonly src: string, readonly srcSet: string };
 

src/pages/photogallery.tsx

@@ -24,7 +24,7 @@ const SORT_KEYS = {
 } as const;
 
 export type GalleryImage =
-  Queries.GalleryPageQueryQuery["allFile"]["nodes"][number];
+  Queries.GalleryPageQueryQuery["all"]["nodes"][number];
 
 const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
   const hash =
@@ -129,7 +129,7 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
   const images: GalleryImage[] = React.useMemo(() => {
     const sort =
       sortKey === "date"
-        ? R.sort((node1: typeof data["allFile"]["nodes"][number], node2) => {
+        ? R.sort((node1: typeof data["all"]["nodes"][number], node2) => {
             const date1 = new Date(
               R.pathOr("", ["fields", "imageMeta", "dateTaken"], node1)
             );
@@ -157,7 +157,7 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
         // @ts-ignore
         sort,
         filter
-      )(data.allFile.nodes) as any;
+      )(data.all.nodes) as any;
       return ret;
     } catch (e) {
       console.log("caught images!", e);
@@ -174,6 +174,7 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
           className="bg-white transition-color"
           // @ts-ignore
           style={getHelmetSafeBodyStyle(
+            // @ts-ignore shrug
             getVibrantStyle({
               Muted: [0, 0, 0],
               LightMuted: [0, 0, 0],
@@ -195,6 +196,24 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
             ]}
           />
         </div>
+        <div className="px-4 md:px-8">
+          <h3 id="recently" className="mx-2 font-bold">Recently updated</h3>
+        </div>
+        <MasonryGallery
+          aspectsByBreakpoint={{
+            xs: 2,
+            sm: 2,
+            md: 3,
+            lg: 4,
+            xl: 5,
+            "2xl": 6.1,
+            "3xl": 8,
+          }}
+          images={data.recents.nodes}
+        />
+        <div className="px-4 md:px-8 mt-4 pt-2 border-t">
+          <h3 id="all" className="mx-2 font-bold">All images</h3>
+        </div>
         <div className="flex flex-col lg:flex-row lg:items-end justify-between px-4 md:px-8 sm:mx-auto">
           <KeywordsPicker
             keywords={[
@@ -218,17 +237,17 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
           />
           <div className="m-2 flex flex-row items-end">
             <div className="border border-black rounded mr-2">
-            <Switch
-              isSelected={showPalette}
-              onChange={(val) => setShowPalette(val)}
-            >
-              <ColorPalette
-                UNSAFE_style={{
-                  width: "24px",
-                  margin: "0 4px",
-                }}
-              />
-            </Switch>
+              <Switch
+                isSelected={showPalette}
+                onChange={(val) => setShowPalette(val)}
+              >
+                <ColorPalette
+                  UNSAFE_style={{
+                    width: "24px",
+                    margin: "0 4px",
+                  }}
+                />
+              </Switch>
             </div>
             <Select
               label="Sort by..."
@@ -268,37 +287,49 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
 
 export const query = graphql`
   query GalleryPageQuery {
-    allFile(
+    recents: allFile(
+      filter: { sourceInstanceName: { eq: "gallery" } }
+      sort: { fields: { imageMeta: { meta: { ModifyDate: DESC } } } }
+      limit: 7
+    ) {
+      ...GalleryImageFile
+    }
+    all: allFile(
       filter: { sourceInstanceName: { eq: "gallery" } }
       sort: { fields: { imageMeta: { dateTaken: DESC } } }
     ) {
-      nodes {
-        relativePath
-        base
-        childImageSharp {
-          fluid {
-            aspectRatio
-          }
-          gatsbyImageData(
-            layout: CONSTRAINED
-            height: 550
-            placeholder: DOMINANT_COLOR
-          )
+      ...GalleryImageFile
+    }
+  }
+
+  fragment GalleryImageFile on FileConnection {
+    nodes {
+      relativePath
+      base
+      childImageSharp {
+        fluid {
+          aspectRatio
         }
-        fields {
-          imageMeta {
-            vibrantHue
-            dominantHue
-            dateTaken
-            meta {
-              Keywords
-              Rating
-              ObjectName
-            }
-            vibrant {
-              # Vibrant
-              ...VibrantColors
-            }
+        gatsbyImageData(
+          layout: CONSTRAINED
+          height: 550
+          placeholder: DOMINANT_COLOR
+        )
+      }
+      fields {
+        imageMeta {
+          vibrantHue
+          dominantHue
+          dateTaken
+          meta {
+            Keywords
+            Rating
+            ObjectName
+            CreateDate
+            ModifyDate
+          }
+          vibrant {
+            ...VibrantColors
           }
         }
       }