diff --git a/data/gallery/DSC09365.jpg b/data/gallery/DSC09365.jpg deleted file mode 100644 index a872638..0000000 --- a/data/gallery/DSC09365.jpg +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:fe339f52851612e346ca9e82f285708797bc83327881f7973d61b3bcdff54a0b -size 3222882 diff --git a/data/gallery/DSC09455.jpg b/data/gallery/DSC09455.jpg deleted file mode 100644 index 0f1d92e..0000000 --- a/data/gallery/DSC09455.jpg +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:ca77c37850d3a912664140c0d9262d27f503eae364d0758bc24f97222158cf22 -size 3635112 diff --git a/gatsby-node.ts b/gatsby-node.ts index 0a1135a..67a670d 100644 --- a/gatsby-node.ts +++ b/gatsby-node.ts @@ -230,7 +230,7 @@ export const onCreateNode: GatsbyNode["onCreateNode"] = async function ({ node.absolutePath as string, dominant, // if datePublished is empty, image has not been committed to git yet and is thus brand new - datePublished.length ? datePublished : new Date().toISOString() + datePublished.length ? datePublished.replace("\n", "") : new Date().toISOString() ), }); } diff --git a/src/components/KeywordsPicker.tsx b/src/components/KeywordsPicker.tsx index d4784d5..130a1c2 100644 --- a/src/components/KeywordsPicker.tsx +++ b/src/components/KeywordsPicker.tsx @@ -21,7 +21,7 @@ const KeywordsPicker = ({ keywords, value, onChange }: KeywordsPickerProps) => {
  • (string | null); linkState?: object; showPalette?: boolean; singleRow?: boolean; @@ -33,7 +33,7 @@ const MasonryGallery = ({ images: _images, aspectsByBreakpoint: aspectTargetsByBreakpoint, debugHue, - debugRating, + dataFn, linkState, showPalette, singleRow, @@ -52,6 +52,7 @@ const MasonryGallery = ({ // }); const { breakpoint } = useBreakpoint(breakpoints, "xs"); + console.log("🚀 ~ file: MasonryGallery.tsx:55 ~ breakpoint:", breakpoint) // const breakpoint = currentBreakpoint.length ? currentBreakpoint : "xs"; const galleryWidth = `calc(100vw - ${ @@ -64,48 +65,39 @@ const MasonryGallery = ({ ) as number[]; const targetAspect = aspectTargetsByBreakpoint[breakpoint]; - const rows = React.useMemo( - () => - R.pipe( - R.reduce( - (acc, currentAspect: number): Row[] => { - const currentRow = acc.pop()!; - 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, - { - aspect: currentRow.aspect + currentAspect, - images: currentRow.images + 1, - startIndex: currentRow.startIndex, - }, - ]; - } - // no-op instead of starting a new row - if (singleRow) { - return [currentRow]; - } - // start a new row - return [ - ...acc, - currentRow, - { - aspect: currentAspect, - images: 1, - startIndex: currentRow.startIndex + currentRow.images, - } as Row, - ]; - }, - [{ aspect: 0, startIndex: 0, images: 0 }] as Row[] - ), - R.indexBy(R.prop("startIndex")) - )(aspectRatios), - [aspectRatios, targetAspect, singleRow] - ); + const rows = React.useMemo(() => { + const _rows: Row[] = [{ aspect: 0, startIndex: 0, images: 0 }]; + + for (const currentAspect of aspectRatios) { + const currentRow = _rows[_rows.length - 1]; + const currentDiff = Math.abs(targetAspect - currentRow.aspect); + const diffIfImageIsAddedToCurrentRow = Math.abs( + targetAspect - (currentRow.aspect + currentAspect) + ); + + // does adding current image to our row get us closer to our target aspect ratio? + if (currentDiff > diffIfImageIsAddedToCurrentRow) { + currentRow.aspect += currentAspect; + currentRow.images += 1 + // _rows.push(currentRow); + continue; + } + + if (singleRow) { + break; + } + + // start a new row + _rows.push({ + aspect: currentAspect, + images: 1, + startIndex: currentRow.startIndex + currentRow.images + }) + } + + 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), @@ -113,7 +105,7 @@ const MasonryGallery = ({ ); const images = singleRow ? _images.slice(0, rows[0].images) : _images; - + let cursor = 0; return (
    - {debugRating && ( - - rating: {image.fields?.imageMeta?.meta?.Rating} - - )} + {data && + {data} + } {img && ( -
    +
    - { showPalette && vibrant &&
    -
    -
    -
    -
    -
    -
    -
    } + {showPalette && vibrant && ( +
    +
    +
    +
    +
    +
    +
    +
    + )}
    )} diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx index 7e6b4ea..dd5baa6 100644 --- a/src/components/Nav.tsx +++ b/src/components/Nav.tsx @@ -4,7 +4,7 @@ import { Link } from "gatsby"; import { Popover } from "react-tiny-popover"; import { StaticImage } from "gatsby-plugin-image"; -const navClasses = "hover:underline hover:bg-black/10 block p-3 text-black"; +const navClasses = "hover:underline hover:bg-black/10 block p-3 text-black flex-shrink-0 whitespace-nowrap"; const ExternalLinks = () => (
      {
      { alt="A picture of me" className="relative" src="../images/circle-profile.png" + placeholder="tracedSVG" style={{ // top: "-70%", // left: "-50%", diff --git a/src/gatsby-types.d.ts b/src/gatsby-types.d.ts index 0d52e99..e2d2cc4 100644 --- a/src/gatsby-types.d.ts +++ b/src/gatsby-types.d.ts @@ -571,7 +571,7 @@ type FileFieldsFilterInput = { }; type FileFieldsImageMeta = { - readonly datePublished: Maybe; + readonly datePublished: Maybe; readonly dateTaken: Maybe; readonly dominantHue: Maybe>>; readonly meta: Maybe; @@ -580,6 +580,14 @@ type FileFieldsImageMeta = { }; +type FileFieldsImageMeta_datePublishedArgs = { + difference: InputMaybe; + formatString: InputMaybe; + fromNow: InputMaybe; + locale: InputMaybe; +}; + + type FileFieldsImageMeta_dateTakenArgs = { difference: InputMaybe; formatString: InputMaybe; @@ -597,7 +605,7 @@ type FileFieldsImageMetaFieldSelector = { }; type FileFieldsImageMetaFilterInput = { - readonly datePublished: InputMaybe; + readonly datePublished: InputMaybe; readonly dateTaken: InputMaybe; readonly dominantHue: InputMaybe; readonly meta: InputMaybe; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index edb4f0e..05e93f5 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -102,8 +102,8 @@ const IndexPage = ({ objectFit={browserIsLandscape ? "cover" : "contain"} style={{ height: screenHeight - ? `${screenHeight - 360}px` - : "calc(100vh-360px)", + ? `${screenHeight - 268}px` + : "calc(100vh-268px)", }} /> diff --git a/src/pages/photogallery.tsx b/src/pages/photogallery.tsx index 0e143a7..0186fac 100644 --- a/src/pages/photogallery.tsx +++ b/src/pages/photogallery.tsx @@ -41,22 +41,23 @@ function smartCompareDates( return compareDates(SORT_KEYS.date, left, right); } -const GalleryPage = ({ data, location }: PageProps) => { +const GalleryPage = ({ + data, + location, +}: PageProps) => { // const hash = - // typeof window !== "undefined" ? window.location.hash.replace("#", "") : ""; + // 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 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 = - typeof window !== "undefined" && - window.location.search.includes("debug=true"); + const showDebug = Boolean(params.get("debug")?.length); const [showPalette, setShowPalette] = React.useState(false); const setKeyword = React.useCallback( @@ -70,15 +71,11 @@ const GalleryPage = ({ data, location }: PageProps { @@ -128,25 +125,11 @@ const GalleryPage = ({ data, location }: PageProps { - // const url = new URL(window.location.toString()); - - // const sortKeyFromUrl = url.searchParams.get("sort"); - // if (sortKeyFromUrl) { - // _setSortKey(sortKeyFromUrl); - // } else { - // _setSortKey('rating') - // } - - // const filterKeyFromUrl = url.searchParams.get("filter"); - // if (filterKeyFromUrl) { - // // _setKeyword(filterKeyFromUrl); - // } - // hacky but it works for now setTimeout(() => { // don't scroll into view if user got here with back button @@ -192,7 +175,27 @@ const GalleryPage = ({ data, location }: PageProps smartCompareDates("datePublished", left, right), data.recents.nodes ); - }, [data, "hi"]); + }, [data]); + + const dataFn = React.useCallback( + (image: GalleryImage): string | null => { + if (!showDebug) { + return null; + } + if (sortKey === "rating") { + return R.pathOr(null, SORT_KEYS.rating, image); + } + if (sortKey === "datePublished") { + const date = R.pathOr(null, SORT_KEYS.datePublished, image); + if(!date) { + return null; + } + return new Date(date).toLocaleString(); + } + return null; + }, + [showDebug, sortKey] + ); return ( <> @@ -245,12 +248,12 @@ const GalleryPage = ({ data, location }: PageProps { interface galleryPageUrlProps { keyword: string | null; sortKey: string | null; + showDebug: boolean; } export const getGalleryPageUrl = ( - { keyword, sortKey }: galleryPageUrlProps, + { keyword, sortKey, showDebug }: galleryPageUrlProps, hash: string ) => { const url = new URL( @@ -129,6 +130,9 @@ export const getGalleryPageUrl = ( url.searchParams.set("sort", sortKey); } } + if (showDebug) { + url.searchParams.set("debug", "true"); + } if (hash) { url.hash = hash; } @@ -141,8 +145,8 @@ export function compareDates( right: T ): number { // why tf do my dates have newlines in them?!?! - const date1 = new Date(pathOr("", date_path, left).replace(/\s/g, '')); - const date2 = new Date(pathOr("", date_path, right).replace(/\s/g, '')); + const date1 = new Date(pathOr("", date_path, left).replace(/\s/g, "")); + const date2 = new Date(pathOr("", date_path, right).replace(/\s/g, "")); const diff = -1 * (date1.getTime() - date2.getTime()); return diff; }