chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

wip types aren't quite right

Browse Source
This commit is contained in:
Chuck Dries
2022-10-10 02:54:52 -07:00
parent 1f84f3b4a7
commit face0f0f86
2 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/gatsby-types.d.ts vendored
View File

@@ -4418,6 +4418,11 @@ type GatsbyImageSharpFluid_withWebp_tracedSVGFragment = { readonly tracedSVG: st
type GatsbyImageSharpFluidLimitPresentationSizeFragment = { readonly maxHeight: number, readonly maxWidth: number }; 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<number | null> | null, readonly DarkVibrant: ReadonlyArray<number | null> | null, readonly LightMuted: ReadonlyArray<number | null> | null, readonly LightVibrant: ReadonlyArray<number | null> | null, readonly Vibrant: ReadonlyArray<number | null> | null, readonly Muted: ReadonlyArray<number | null> | null } | null } | null } | null }> } };
type VibrantColorsFragment = { readonly DarkMuted: ReadonlyArray<number | null> | null, readonly DarkVibrant: ReadonlyArray<number | null> | null, readonly LightMuted: ReadonlyArray<number | null> | null, readonly LightVibrant: ReadonlyArray<number | null> | null, readonly Vibrant: ReadonlyArray<number | null> | null, readonly Muted: ReadonlyArray<number | null> | null }; type VibrantColorsFragment = { readonly DarkMuted: ReadonlyArray<number | null> | null, readonly DarkVibrant: ReadonlyArray<number | null> | null, readonly LightMuted: ReadonlyArray<number | null> | null, readonly LightVibrant: ReadonlyArray<number | null> | null, readonly Vibrant: ReadonlyArray<number | null> | null, readonly Muted: ReadonlyArray<number | null> | null };

16
src/pages/index.js → src/pages/index.tsx
View File

@@ -1,5 +1,5 @@
import * as React from "react"; import * as React from "react";
import { graphql } from "gatsby"; import { graphql, PageProps } from "gatsby";
import { GatsbyImage, getImage } from "gatsby-plugin-image"; import { GatsbyImage, getImage } from "gatsby-plugin-image";
import { Helmet } from "react-helmet"; import { Helmet } from "react-helmet";
import { take } from "ramda"; import { take } from "ramda";
@@ -28,7 +28,7 @@ const IndexPage = ({
data: { data: {
allFile: { nodes: images }, allFile: { nodes: images },
}, },
}) => { }: PageProps<Queries.IndexPageQuery>) => {
const [isClient, setIsClient] = React.useState(false); const [isClient, setIsClient] = React.useState(false);
const [imageIndex, setImageIndex] = React.useState(0); const [imageIndex, setImageIndex] = React.useState(0);
const image = React.useMemo(() => { const image = React.useMemo(() => {
@@ -37,16 +37,14 @@ const IndexPage = ({
console.log(image); console.log(image);
const shuffleImage = React.useCallback( const shuffleImage = React.useCallback(
(currentImage) => { (currentImage?: typeof images[number]) => {
const lastThreeImages = const lastThreeImages =
JSON.parse(localStorage.getItem("lastHeros")) || []; JSON.parse(localStorage.getItem("lastHeros") ?? "[]") || [];
if (env === "production") { if (env === "production") {
try { try {
window.plausible("Shuffle", { window.plausible("Shuffle", {
props: { currentImage: currentImage?.base }, props: { currentImage: currentImage?.base },
}); });
// eslint-disable-next-line
_paq.push(["trackEvent", "Index", "Shuffle", currentImage?.base]);
} catch (e) { } catch (e) {
/* do nothing */ /* do nothing */
} }
@@ -110,11 +108,13 @@ const IndexPage = ({
return ( return (
<> <>
{/* @ts-ignore */}
<Helmet> <Helmet>
<title>Chuck Dries</title> <title>Chuck Dries</title>
<body <body
className={classnames(isClient ? "bg-muted-dark" : "bg-gray-800")} className={classnames(isClient ? "bg-muted-dark" : "bg-gray-800")}
style={getHelmetSafeBodyStyle(vibrant, screenHeight)} // @ts-ignore
style={getHelmetSafeBodyStyle(vibrant!, screenHeight)}
/> />
</Helmet> </Helmet>
<main <main
@@ -218,7 +218,7 @@ const IndexPage = ({
}; };
export const query = graphql` export const query = graphql`
{ query IndexPage {
allFile( allFile(
filter: { filter: {
sourceInstanceName: { eq: "gallery" } sourceInstanceName: { eq: "gallery" }