Chuck Dries

import * as React from "react"; import { graphql, Link, PageProps } from "gatsby"; import { GatsbyImage, getImage } from "gatsby-plugin-image"; import { Helmet } from "react-helmet"; // import { take } from "ramda"; import classnames from "classnames"; import { getHelmetSafeBodyStyle, getAspectRatio, getVibrantStyle } from "../utils"; import Nav from "../components/Nav"; // import ActionButtons from "../components/index/ActionButtons"; import { use100vh } from "react-div-100vh"; import { useMediaQuery } from "../useMediaQuery"; const env = process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || "development"; export type HomepageImage = Queries.IndexPageQuery["allFile"]["nodes"][number]; const getDifferentRand = ( range: number, lastNs: number[], iterations = 0 ): number => { 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: { nodes: images }, }, }: PageProps) => { const [isClient, setIsClient] = React.useState(false); const [imageIndex, setImageIndex] = React.useState(0); const image = React.useMemo(() => { return images[imageIndex]; }, [images, imageIndex]); React.useEffect(() => { if (!isClient) { setIsClient(true); } }, [isClient]); const browserIsLandscape = useMediaQuery("(orientation: landscape)"); React.useLayoutEffect(() => { if (browserIsLandscape) { setImageIndex(1); } else { setImageIndex(0); } }, [browserIsLandscape]); // const vibrant = getVibrant(image); // const ar = getAspectRatio(image); const screenHeight = use100vh(); // const imageIsLandscape = isClient ? ar > 1 : true; // @ts-ignore const img = getImage(image); return ( <> {/* @ts-ignore */} Chuck Dries

Mastodon ); }; export const query = graphql` query IndexPage { allFile( filter: { sourceInstanceName: { eq: "gallery" } base: { in: [ # "DSC02610-2.jpg", # "DSC02615-2.jpg", "DSC05702.jpg", "DSC05538.jpg" ] } } sort: { base: ASC } ) { nodes { relativePath base childImageSharp { fluid { aspectRatio } gatsbyImageData( layout: CONSTRAINED placeholder: NONE breakpoints: [750, 1080, 1366, 1920, 2560, 3840] ) } fields { imageMeta { vibrant { ...VibrantColors } } } } } } `; export default IndexPage;