diff --git a/src/gatsby-types.d.ts b/src/gatsby-types.d.ts index c58a9e1..5ec2244 100644 --- a/src/gatsby-types.d.ts +++ b/src/gatsby-types.d.ts @@ -4418,6 +4418,11 @@ type GatsbyImageSharpFluid_withWebp_tracedSVGFragment = { readonly tracedSVG: st type GatsbyImageSharpFluidLimitPresentationSizeFragment = { readonly maxHeight: number, readonly maxWidth: number }; +type IndexPageQueryVariables = Exact<{ [key: string]: never; }>; + + +type IndexPageQuery = { readonly allFile: { readonly nodes: ReadonlyArray<{ readonly relativePath: string, readonly base: string, readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData, readonly fluid: { readonly aspectRatio: number } | null } | null, readonly fields: { readonly imageMeta: { readonly vibrant: { readonly DarkMuted: ReadonlyArray | null, readonly DarkVibrant: ReadonlyArray | null, readonly LightMuted: ReadonlyArray | null, readonly LightVibrant: ReadonlyArray | null, readonly Vibrant: ReadonlyArray | null, readonly Muted: ReadonlyArray | null } | null } | null } | null }> } }; + type VibrantColorsFragment = { readonly DarkMuted: ReadonlyArray | null, readonly DarkVibrant: ReadonlyArray | null, readonly LightMuted: ReadonlyArray | null, readonly LightVibrant: ReadonlyArray | null, readonly Vibrant: ReadonlyArray | null, readonly Muted: ReadonlyArray | null }; diff --git a/src/pages/index.js b/src/pages/index.tsx similarity index 96% rename from src/pages/index.js rename to src/pages/index.tsx index e59dc02..e5a1c31 100644 --- a/src/pages/index.js +++ b/src/pages/index.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { graphql } from "gatsby"; +import { graphql, PageProps } from "gatsby"; import { GatsbyImage, getImage } from "gatsby-plugin-image"; import { Helmet } from "react-helmet"; import { take } from "ramda"; @@ -28,7 +28,7 @@ const IndexPage = ({ data: { allFile: { nodes: images }, }, -}) => { +}: PageProps) => { const [isClient, setIsClient] = React.useState(false); const [imageIndex, setImageIndex] = React.useState(0); const image = React.useMemo(() => { @@ -37,16 +37,14 @@ const IndexPage = ({ console.log(image); const shuffleImage = React.useCallback( - (currentImage) => { + (currentImage?: typeof images[number]) => { const lastThreeImages = - JSON.parse(localStorage.getItem("lastHeros")) || []; + 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 */ } @@ -110,11 +108,13 @@ const IndexPage = ({ return ( <> + {/* @ts-ignore */} Chuck Dries