diff --git a/package.json b/package.json index c70f4f6..839b19a 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ ], "scripts": { "develop": "gatsby develop", - "start": "gatsby develop -H 0.0.0.0", + "start": "cross-env NODE_OPTIONS=--no-experimental-fetch gatsby develop -H 0.0.0.0", "build": "gatsby build", "serve": "gatsby serve", "clean": "gatsby clean", @@ -63,6 +63,7 @@ "use-breakpoint": "^2.0.1" }, "devDependencies": { + "cross-env": "^7.0.3", "prettier": "2.3.2" } } diff --git a/src/components/GalleryImage/GalleryImage.js b/src/components/GalleryImage/GalleryImage.js index 5512870..853f34d 100644 --- a/src/components/GalleryImage/GalleryImage.js +++ b/src/components/GalleryImage/GalleryImage.js @@ -51,7 +51,7 @@ const GalleryImage = ({ data, pageContext }) => { case "Escape": case "KeyG": { logKeyShortcut(e.code); - navigate("/photogallery/"); + navigate(`/photogallery/#${image.base}`); } } }; @@ -59,7 +59,7 @@ const GalleryImage = ({ data, pageContext }) => { return () => { document.removeEventListener("keydown", keyListener); }; - }, [pageContext]); + }, [pageContext, image.base]); const name = getName(image); const { meta, dateTaken: dt } = getMeta(image); @@ -108,7 +108,7 @@ const GalleryImage = ({ data, pageContext }) => { gallery esc diff --git a/src/components/MasonryGallery.js b/src/components/MasonryGallery.js index 4801f22..b6767c7 100644 --- a/src/components/MasonryGallery.js +++ b/src/components/MasonryGallery.js @@ -17,6 +17,25 @@ const MasonryGallery = ({ ); const { breakpoint } = useBreakpoint(breakpoints, "sm"); + console.log("🚀 ~ file: MasonryGallery.js ~ line 20 ~ breakpoint", breakpoint) + + const scrollIntoView = React.useCallback(() => { + if (!window.location.hash) { + return; + } + const el = document.getElementById(window.location.hash.split("#")[1]); + if (!el) { + return; + } + el.scrollIntoView(); + }, []); + + React.useEffect(() => { + // hacky but it works for now + setTimeout(() => { + scrollIntoView(); + }, 100) + }, [scrollIntoView]); const aspectRatios = React.useMemo( () => R.map(getAspectRatio, images), @@ -84,6 +103,7 @@ const MasonryGallery = ({ return ( {
diff --git a/yarn.lock b/yarn.lock index 74055f3..d4abd9c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4080,6 +4080,13 @@ cross-env@^6.0.3: dependencies: cross-spawn "^7.0.0" +cross-env@^7.0.3: + version "7.0.3" + resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf" + integrity sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw== + dependencies: + cross-spawn "^7.0.1" + cross-fetch@3.1.4: version "3.1.4" resolved "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.4.tgz" @@ -4087,7 +4094,7 @@ cross-fetch@3.1.4: dependencies: node-fetch "2.6.1" -cross-spawn@7.0.3, cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3: +cross-spawn@7.0.3, cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3: version "7.0.3" resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz" integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==