From 4bc81d9cce7d3ec2feba026f2256c9439193bacf Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Tue, 7 Mar 2023 23:38:39 -0800
Subject: [PATCH] improves scroll hash and history behavior (smooth scroll)

---
 src/pages/photogallery.tsx | 83 ++++++++++++++++++++++++--------------
 src/styles/global.css      | 18 ++-------
 2 files changed, 56 insertions(+), 45 deletions(-)

diff --git a/src/pages/photogallery.tsx b/src/pages/photogallery.tsx
index b149c29..d895799 100644
--- a/src/pages/photogallery.tsx
+++ b/src/pages/photogallery.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as R from "ramda";
-import { graphql, PageProps } from "gatsby";
+import { graphql, Link, PageProps } from "gatsby";
 import { Helmet } from "react-helmet";
 // import { Picker, Item } from "@adobe/react-spectrum";
 
@@ -23,19 +23,21 @@ const SORT_KEYS = {
   // hue_debug: ["fields", "imageMeta", "dominantHue", 0],
   hue_debug: ["fields", "imageMeta", "dominantHue", "0"],
   date: ["fields", "imageMeta", "dateTaken"],
-  modified: ["fields", "imageMeta", "datePublished"],
+  datePublished: ["fields", "imageMeta", "datePublished"],
 } as const;
 
 export type GalleryImage =
   Queries.GalleryPageQueryQuery["all"]["nodes"][number];
 
-function smartCompareDates(key: keyof typeof SORT_KEYS, left: GalleryImage, right: GalleryImage) {
+function smartCompareDates(
+  key: keyof typeof SORT_KEYS,
+  left: GalleryImage,
+  right: GalleryImage
+) {
   let diff = compareDates(SORT_KEYS[key], left, right);
-  console.log("🚀 ~ file: photogallery.tsx:34 ~ smartCompareDates ~ diff:", diff)
   if (diff !== 0) {
     return diff;
   }
-  console.log('falling back to date')
   return compareDates(SORT_KEYS.date, left, right);
 }
 
@@ -100,13 +102,13 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
     );
 
     url.hash = "";
-    window.history.replaceState(null, "", url.href.toString());
+    window.history.pushState(null, "", url.href.toString());
     window.removeEventListener("wheel", removeHash);
     setHashCleared(true);
   }, []);
 
   const scrollIntoView = React.useCallback(() => {
-    if (!hash) {
+    if (!hash || hash.startsWith('all')) {
       return;
     }
     const el = document.getElementById(hash);
@@ -125,6 +127,8 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
     const sortKeyFromUrl = url.searchParams.get("sort");
     if (sortKeyFromUrl) {
       _setSortKey(sortKeyFromUrl);
+    } else {
+      _setSortKey('rating')
     }
 
     const filterKeyFromUrl = url.searchParams.get("filter");
@@ -141,8 +145,10 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
 
   const images: GalleryImage[] = React.useMemo(() => {
     const sort =
-      sortKey === "date" || sortKey === "modified"
-        ? R.sort((node1: typeof data["all"]["nodes"][number], node2) => smartCompareDates(sortKey, node1, node2))
+      sortKey === "date" || sortKey === "datePublished"
+        ? R.sort((node1: typeof data["all"]["nodes"][number], node2) =>
+            smartCompareDates(sortKey, node1, node2)
+          )
         : R.sort(
             // @ts-ignore
             R.descend(R.path<GalleryImage>(SORT_KEYS[sortKey]))
@@ -171,8 +177,11 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
   }, [data, sortKey, filterKeyword]);
 
   const recents = React.useMemo(() => {
-    return R.sort((left, right) => smartCompareDates('modified', left, right), data.recents.nodes)
-  }, [data, 'hi'])
+    return R.sort(
+      (left, right) => smartCompareDates("datePublished", left, right),
+      data.recents.nodes
+    );
+  }, [data, "hi"]);
 
   return (
     <>
@@ -205,25 +214,39 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
             ]}
           />
         </div>
-        <div className="px-4 md:px-8">
-          <h3 id="recently" className="mx-2 font-bold">
-            Recently published
-          </h3>
+        <div className="gradient pb-6">
+          <div className="px-4 md:px-8 flex">
+            <h3 id="recently" className="mx-2 font-bold">
+              Recently published
+            </h3>
+            {sortKey !== "datePublished" && (
+              <Link
+                onClick={(e) => {
+                  // e.preventDefault();
+                  // setSortKey("datePublished")
+                }}
+                to="?sort=datePublished#all"
+                className="underline cursor-pointer"
+              >
+                show more
+              </Link>
+            )}
+          </div>
+          <MasonryGallery
+            aspectsByBreakpoint={{
+              xs: 2,
+              sm: 2,
+              md: 3,
+              lg: 4,
+              xl: 5,
+              "2xl": 6.1,
+              "3xl": 8,
+            }}
+            images={recents}
+            singleRow
+          />
         </div>
-        <MasonryGallery
-          aspectsByBreakpoint={{
-            xs: 2,
-            sm: 2,
-            md: 3,
-            lg: 4,
-            xl: 5,
-            "2xl": 6.1,
-            "3xl": 8,
-          }}
-          images={recents}
-          singleRow
-        />
-        <div className="px-4 md:px-8 mt-4 pt-2 border-t">
+        <div className="px-4 md:px-8 mt-2 pt-2">
           <h3 id="all" className="mx-2 font-bold">
             All images
           </h3>
@@ -270,7 +293,7 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
               selectedKey={sortKey}
             >
               <Item key="rating">Curated</Item>
-              <Item key="modified">Date published</Item>
+              <Item key="datePublished">Date published</Item>
               <Item key="date">Date taken</Item>
               <Item key="hue">Hue</Item>
             </Select>
diff --git a/src/styles/global.css b/src/styles/global.css
index be1dbe6..23822b3 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -8,6 +8,7 @@
 
 * {
   box-sizing: border-box;
+  scroll-behavior: smooth;
 }
 /* .hero * {
   transition: color .2s, background-color .2s;
@@ -83,21 +84,8 @@
   .gradient {
     background-image: linear-gradient(
       180deg,
-      hsl(31deg 24% 44%) 0%,
-      hsl(27deg 25% 42%) 7%,
-      hsl(22deg 26% 40%) 14%,
-      hsl(18deg 27% 37%) 21%,
-      hsl(12deg 28% 35%) 29%,
-      hsl(9deg 29% 32%) 36%,
-      hsl(4deg 30% 30%) 43%,
-      hsl(0deg 31% 27%) 50%,
-      hsl(0deg 31% 23%) 57%,
-      hsl(0deg 31% 19%) 64%,
-      hsl(0deg 32% 15%) 71%,
-      hsl(0deg 30% 12%) 79%,
-      hsl(0deg 30% 8%) 86%,
-      hsl(0deg 30% 4%) 93%,
-      hsl(0deg 0% 0%) 100%
+      hsla(0deg, 0%, 0%, 0%) 95%,
+      hsla(0deg, 0%, 0%, 10%) 100%
     );
   }
 }