import * as React from "react"; import { graphql } from "gatsby"; import { GatsbyImage, getImage } from "gatsby-plugin-image"; import { Helmet } from "react-helmet"; import { take } from "ramda"; import classnames from "classnames"; import { getVibrantToHelmetSafeBodyStyle, getVibrant, getAspectRatio, } from "../utils"; import Nav from "../components/index/Nav"; import ActionButtons from "../components/index/ActionButtons"; const env = process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || "development"; const getDifferentRand = (range, lastNs, iterations = 0) => { const n = Math.floor(Math.random() * range); if (lastNs.findIndex((x) => x === n) > -1 && iterations < 5) { console.log("got dupe, trying again", n); return getDifferentRand(range, lastNs, iterations + 1); } return n; }; const IndexPage = ({ data: { allFile: { edges }, }, }) => { const [isClient, setIsClient] = React.useState(false); const [imageIndex, setImageIndex] = React.useState(0); const images = React.useMemo(() => edges.map((edge) => edge.node), [edges]); const image = React.useMemo(() => { return images[imageIndex]; }, [images, imageIndex]); const shuffleImage = React.useCallback( (currentImage) => { const lastThreeImages = JSON.parse(localStorage.getItem("lastHeros")) || []; if (env === "production") { try { window.plausible("Shuffle", { props: { currentImage: currentImage?.base }, }); // eslint-disable-next-line _paq.push(["trackEvent", "Index", "Shuffle", currentImage?.base]); } catch (e) { /* do nothing */ } } const index = getDifferentRand(images.length, lastThreeImages); localStorage.setItem( "lastHeros", JSON.stringify(take(3, [index, ...lastThreeImages])) ); setImageIndex(index); }, [images.length] ); // pick random image on page hydration React.useEffect(() => { if (!isClient) { setIsClient(true); shuffleImage(image); } }, [isClient, imageIndex, image, shuffleImage]); React.useEffect(() => { const keyListener = (e) => { switch (e.code) { case "Space": { shuffleImage(image); return; } case "ArrowRight": { if (imageIndex === images.length - 1) { setImageIndex(0); return; } setImageIndex(imageIndex + 1); return; } case "ArrowLeft": { if (imageIndex === 0) { setImageIndex(images.length - 1); return; } setImageIndex(imageIndex - 1); return; } } }; document.addEventListener("keydown", keyListener); return () => { document.removeEventListener("keydown", keyListener); }; }, [imageIndex, images.length, image, shuffleImage]); const vibrant = getVibrant(image); const ar = getAspectRatio(image); const imageIsLandscape = isClient ? ar > 1 : true; return ( <> Chuck Dries
{isClient ? ( ) : (
)} {imageIsLandscape && (
)}
); }; export const query = graphql` { allFile( filter: { sourceInstanceName: { eq: "gallery" } base: { in: [ "20160530-DSC09108.jpg" # portrait red flowers # "DSC00201.jpg" # duck "DSC04905.jpg" # purple layers "DSC05761.jpg" # monument valley "DSC05851.jpg" # utahn highway sunset "DSC06245.jpg" # snowy milky way # "DSC08521.jpg" # firepit bloom j&e # "DSC07490.jpg" # house on prairie "DSC02538.jpg" # portrait pink cactus bloom "20190624-DSC00771.jpg" # glacier forest fog # "DSC00237.jpg" # cotton candy clouds "_DSC6062.jpg" # field of wildflowers "_DSC6060.jpg" # edge of the world "_DSC6219.jpg" # whihte/yellow rosebush "_DSC6243.jpg" # bright rose in darkness "_DSC6400-2.jpg" # Horsetail falls "_DSC6798.jpg" # Japanese zen garden "_DSC6481.jpg" # Mt Hood from Powell Butte "_DSC5916.jpg" # blue dart stinger ] } } sort: { order: DESC, fields: fields___imageMeta___dateTaken } ) { edges { node { relativePath base childImageSharp { fluid { aspectRatio } gatsbyImageData( layout: FULL_WIDTH placeholder: NONE breakpoints: [750, 1080, 1366, 1920, 2560, 3840] ) } fields { imageMeta { vibrant { ...VibrantColors } } } } } } } `; export default IndexPage;