fix navigation behavior and homepage layout
This commit is contained in:
parent
5f7ceabf20
commit
5dcc5920c4
@ -63,6 +63,12 @@ const GalleryImage = ({ data, location: { state } }) => {
|
||||
setIsClient(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
requestAnimationFrame(() => {
|
||||
window.scrollTo(0, 180);
|
||||
});
|
||||
}, [image.base]);
|
||||
|
||||
const nextIndex =
|
||||
sortedImageList && currentIndex < sortedImageList.length
|
||||
? currentIndex + 1
|
||||
@ -135,7 +141,7 @@ const GalleryImage = ({ data, location: { state } }) => {
|
||||
locationString = location.join(", ");
|
||||
}
|
||||
const vibrant = getVibrant(image, true);
|
||||
const BLEND = 'hsl'
|
||||
const BLEND = "hsl";
|
||||
const darkAccent = chroma
|
||||
.mix(vibrant.Vibrant, "hsla(216, 0%, 90%, 1)", 0.6, BLEND)
|
||||
.hex();
|
||||
@ -145,7 +151,7 @@ const GalleryImage = ({ data, location: { state } }) => {
|
||||
ar > 1
|
||||
? "flex-col"
|
||||
: "portrait:mx-auto landscape:mx-5 landscape:flex-row-reverse portrait:flex-col";
|
||||
const verticalPad = ar > 1 ? "250px" : "100px";
|
||||
const verticalPad = ar > 1 ? "180px" : "20px";
|
||||
|
||||
const shutterSpeed = React.useMemo(
|
||||
() =>
|
||||
|
||||
@ -1,19 +1,17 @@
|
||||
import * as React from "react";
|
||||
import classNames from "classnames";
|
||||
import Checkmark from "@spectrum-icons/workflow/Checkmark";
|
||||
import { Link } from "gatsby";
|
||||
|
||||
interface KeywordsPickerProps {
|
||||
keywords: string[];
|
||||
value: string | null;
|
||||
onChange: (val: string | null) => void;
|
||||
getHref: (value: string | null) => string;
|
||||
onPick: (value: string | null) => void;
|
||||
}
|
||||
const KeywordsPicker = ({ keywords, value, onChange }: KeywordsPickerProps) => {
|
||||
const KeywordsPicker = ({ keywords, value, getHref, onPick }: KeywordsPickerProps) => {
|
||||
return (
|
||||
<div className="mx-2 mt-2">
|
||||
<span className="text-xs text-black">
|
||||
Collections
|
||||
</span>
|
||||
<span className="text-xs text-black">Collections</span>
|
||||
<ul className="flex gap-1 flex-wrap mt-1 mb-2">
|
||||
{keywords.map((keyword) => {
|
||||
const selected = value === keyword;
|
||||
@ -28,17 +26,11 @@ const KeywordsPicker = ({ keywords, value, onChange }: KeywordsPickerProps) => {
|
||||
: `bg-white
|
||||
hover:bg-black/10`
|
||||
)}
|
||||
to={selected ? '/photogallery/' : `?filter=${encodeURIComponent(keyword)}`}
|
||||
// onClick={() => (selected ? onChange(null) : onChange(keyword))}
|
||||
onClick={() => onPick(keyword)}
|
||||
replace={false}
|
||||
to={getHref(keyword)}
|
||||
>
|
||||
{keyword}{" "}
|
||||
{/* {selected && (
|
||||
<Checkmark
|
||||
UNSAFE_className="mx-1"
|
||||
UNSAFE_style={{ width: "15px" }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)} */}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
|
||||
@ -97,7 +97,6 @@ const MasonryGallery = ({
|
||||
|
||||
return R.indexBy(R.prop("startIndex"), _rows);
|
||||
}, [aspectRatios, targetAspect, singleRow]);
|
||||
console.log("🚀 ~ file: MasonryGallery.tsx:109 ~ rows:", rows);
|
||||
|
||||
const sortedImageList = React.useMemo(
|
||||
() => _images.map((image) => image.base),
|
||||
|
||||
@ -108,8 +108,8 @@ const Nav = ({ internalLinks, className }: NavProps) => {
|
||||
<StaticImage
|
||||
alt="A picture of me"
|
||||
className="relative"
|
||||
src="../images/circle-profile.png"
|
||||
placeholder="tracedSVG"
|
||||
src="../images/circle-profile.png"
|
||||
style={{
|
||||
// top: "-70%",
|
||||
// left: "-50%",
|
||||
|
||||
@ -45,22 +45,16 @@ const GalleryPage = ({
|
||||
data,
|
||||
location,
|
||||
}: PageProps<Queries.GalleryPageQueryQuery>) => {
|
||||
// const hash =
|
||||
// typeof window !== "undefined" ? window.location.hash.replace("#", "") : "";
|
||||
|
||||
const hash = location.hash ? location.hash.replace("#", "") : "";
|
||||
|
||||
const params = new URLSearchParams(location.search);
|
||||
const filterKeyword = params.get("filter");
|
||||
const sortKey = params.get("sort") ?? "rating";
|
||||
console.log("🚀 ~ file: photogallery.tsx:51 ~ GalleryPage ~ params:", params);
|
||||
|
||||
const [hashCleared, setHashCleared] = React.useState(false); // eslint-disable-line no-unused-vars
|
||||
// ^ used just to force a re-render with the cleared hash value (I know, it's a smell for sure)
|
||||
const showDebug = Boolean(params.get("debug")?.length);
|
||||
const [showPalette, setShowPalette] = React.useState(false);
|
||||
|
||||
const setKeyword = React.useCallback(
|
||||
const onKeywordPick = React.useCallback(
|
||||
(newKeyword: string | null) => {
|
||||
if (newKeyword) {
|
||||
try {
|
||||
@ -71,11 +65,8 @@ const GalleryPage = ({
|
||||
// do nothing
|
||||
}
|
||||
}
|
||||
navigate(
|
||||
getGalleryPageUrl({ keyword: newKeyword, sortKey, showDebug }, hash)
|
||||
);
|
||||
},
|
||||
[sortKey, hash, showDebug]
|
||||
[]
|
||||
);
|
||||
|
||||
const setSortKey = React.useCallback(
|
||||
@ -106,37 +97,33 @@ const GalleryPage = ({
|
||||
);
|
||||
|
||||
url.hash = "";
|
||||
// window.history.pushState(null, "", url.href.toString());
|
||||
navigate(url.href.toString());
|
||||
window.removeEventListener("wheel", removeHash);
|
||||
setHashCleared(true);
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
window.addEventListener("wheel", removeHash);
|
||||
return () => window.removeEventListener("wheel", removeHash);
|
||||
}, [removeHash]);
|
||||
|
||||
const scrollIntoView = React.useCallback(() => {
|
||||
React.useEffect(() => {
|
||||
// hacky but it works for now
|
||||
requestAnimationFrame(() => {
|
||||
// don't scroll into view if user got here with back button
|
||||
if (!hash) {
|
||||
return;
|
||||
}
|
||||
const el = document.getElementById(hash);
|
||||
if (!el) {
|
||||
console.log("⚠️failed to find hash");
|
||||
return;
|
||||
}
|
||||
el.scrollIntoView({
|
||||
block: hash.startsWith("all") ? "start" : "center",
|
||||
});
|
||||
});
|
||||
}, [hash]);
|
||||
|
||||
React.useEffect(() => {
|
||||
// hacky but it works for now
|
||||
setTimeout(() => {
|
||||
// don't scroll into view if user got here with back button
|
||||
scrollIntoView();
|
||||
}, 0);
|
||||
}, [setSortKey, setKeyword, scrollIntoView, location]);
|
||||
|
||||
const images: GalleryImage[] = React.useMemo(() => {
|
||||
const sort =
|
||||
sortKey === "date" || sortKey === "datePublished"
|
||||
@ -183,7 +170,7 @@ const GalleryPage = ({
|
||||
return null;
|
||||
}
|
||||
if (sortKey === "rating") {
|
||||
return R.pathOr(null, SORT_KEYS.rating, image);
|
||||
return `[${R.pathOr(null, SORT_KEYS.rating, image)}] ${image.base}`;
|
||||
}
|
||||
if (sortKey === "datePublished") {
|
||||
const date = R.pathOr(null, SORT_KEYS.datePublished, image);
|
||||
@ -236,10 +223,6 @@ const GalleryPage = ({
|
||||
{sortKey !== "datePublished" && (
|
||||
<Link
|
||||
className="underline cursor-pointer text-gray-500"
|
||||
// onClick={(e) => {
|
||||
// // e.preventDefault();
|
||||
// // setSortKey("datePublished")
|
||||
// }}
|
||||
to="?sort=datePublished#all"
|
||||
>
|
||||
show more
|
||||
@ -267,6 +250,12 @@ const GalleryPage = ({
|
||||
</div>
|
||||
<div className="flex flex-col lg:flex-row lg:items-end justify-between px-4 md:px-8 sm:mx-auto">
|
||||
<KeywordsPicker
|
||||
getHref={(val) =>
|
||||
getGalleryPageUrl(
|
||||
{ keyword: val, sortKey, showDebug },
|
||||
hash
|
||||
)
|
||||
}
|
||||
keywords={[
|
||||
"Boyce Thompson Arboretum",
|
||||
"winter",
|
||||
@ -283,7 +272,7 @@ const GalleryPage = ({
|
||||
// "shoot the light",
|
||||
// "sunset",
|
||||
]}
|
||||
onChange={setKeyword}
|
||||
onPick={onKeywordPick}
|
||||
value={filterKeyword}
|
||||
/>
|
||||
<div className="my-2 mr-2 flex flex-row items-end">
|
||||
@ -324,10 +313,8 @@ const GalleryPage = ({
|
||||
"2xl": 6.1,
|
||||
"3xl": 8,
|
||||
}}
|
||||
debugHue={sortKey === "hue_debug"}
|
||||
// debugRating={sortKey === "rating" && showDebug}
|
||||
// debugPublished={showDebug}
|
||||
dataFn={dataFn}
|
||||
debugHue={sortKey === "hue_debug"}
|
||||
images={images}
|
||||
linkState={{
|
||||
sortKey,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user