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..ba37626 100644 --- a/src/components/GalleryImage/GalleryImage.js +++ b/src/components/GalleryImage/GalleryImage.js @@ -108,7 +108,7 @@ const GalleryImage = ({ data, pageContext }) => { gallery esc diff --git a/src/components/MasonryGallery.js b/src/components/MasonryGallery.js index 4801f22..dcec964 100644 --- a/src/components/MasonryGallery.js +++ b/src/components/MasonryGallery.js @@ -16,7 +16,32 @@ const MasonryGallery = ({ [aspectTargetsByBreakpoint] ); - const { breakpoint } = useBreakpoint(breakpoints, "sm"); + const { breakpoint } = useBreakpoint(breakpoints, "xs"); + console.log("🚀 ~ file: MasonryGallery.js ~ line 20 ~ breakpoint", breakpoint) + + // const [scrolled, setScrolled] = React.useState(false); + const scrollIntoView = React.useCallback(() => { + if (!window.location.hash) { + return; + } + const el = document.getElementById(window.location.hash.split("#")[1]); + if (!el) { + return; + } + console.log("el", el); + el.scrollIntoView(); + console.log( + "🚀 ~ file: MasonryGallery.js ~ line 21 ~ scrollIntoView ~ el.offsetTop", + el.offsetTop + ); + if (el.offsetTop > window.innerHeight && window.scrollY === 0) { + // queue another + } + }, []); + + React.useEffect(() => { + scrollIntoView(); + }, [scrollIntoView, breakpoint]); const aspectRatios = React.useMemo( () => R.map(getAspectRatio, images), @@ -84,6 +109,7 @@ const MasonryGallery = ({ return ( {