diff --git a/src/components/index/ActionButtons.js b/src/components/index/ActionButtons.tsx
similarity index 75%
rename from src/components/index/ActionButtons.js
rename to src/components/index/ActionButtons.tsx
index 5d25b04..fe9dfe6 100644
--- a/src/components/index/ActionButtons.js
+++ b/src/components/index/ActionButtons.tsx
@@ -3,8 +3,9 @@ import classnames from "classnames";
import { Link } from "gatsby";
import Shuffle from "@spectrum-icons/workflow/Shuffle";
+import { HomepageImage } from "../../pages";
-const getButtonClasses = (isClient) =>
+const getButtonClasses = (isClient?: boolean) =>
classnames(
"z-20 rounded-md text-md inline-block px-2 py-1 mt-1 mr-2 text-md hover:underline",
isClient
@@ -12,7 +13,16 @@ const getButtonClasses = (isClient) =>
: "text-gray-300 bg-gray-700"
);
-const ActionButtons = ({ isClient, image, shuffleImage }) => (
+interface ActionButtonsProps {
+ isClient?: boolean;
+ image: HomepageImage;
+ shuffleImage: (image: HomepageImage) => void;
+}
+const ActionButtons = ({
+ isClient,
+ image,
+ shuffleImage,
+}: ActionButtonsProps) => (
<div className="flex flex-col mb-2">
<div className="text-muted-light p-2 sm:p-4 m-1 sm:m-4 bg-muted-dark rounded-xl flex flex-col text-center z-10 cool-border-small-light">
<h3 className="sm:mb-2 drop-shadow">Try my word game!</h3>
@@ -25,14 +35,14 @@ const ActionButtons = ({ isClient, image, shuffleImage }) => (
</div>
<div className="flex sm:mx-6 mb-2 sm:mb-6">
<Link
- className={getButtonClasses(isClient, "muted")}
+ className={getButtonClasses(isClient)}
id="image-link"
to={`/photogallery/${image.base}/`}
>
view image
</Link>
<button
- className={getButtonClasses(isClient, "muted")}
+ className={getButtonClasses(isClient)}
id="shuffle-button"
onClick={() => {
shuffleImage(image);
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index e5a1c31..d5bb050 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -15,7 +15,9 @@ import { use100vh } from "react-div-100vh";
const env =
process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || "development";
-const getDifferentRand = (range, lastNs, iterations = 0) => {
+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);
@@ -68,7 +70,7 @@ const IndexPage = ({
}, [isClient, imageIndex, image, shuffleImage]);
React.useEffect(() => {
- const keyListener = (e) => {
+ const keyListener = (e: KeyboardEvent) => {
switch (e.code) {
case "Space": {
shuffleImage(image);
@@ -106,9 +108,11 @@ const IndexPage = ({
const imageIsLandscape = isClient ? ar > 1 : true;
+ // @ts-ignore
+ const img = getImage(image);
return (
<>
- {/* @ts-ignore */}
+ {/* @ts-ignore */}
<Helmet>
<title>Chuck Dries</title>
<body
@@ -183,7 +187,7 @@ const IndexPage = ({
/>
</div>
</div>
- {isClient ? (
+ {isClient && img ? (
<GatsbyImage
alt=""
className={classnames(
@@ -191,7 +195,7 @@ const IndexPage = ({
? "landscape:h-actual-screen portrait:h-two-thirds-vw"
: "h-actual-screen portrait:w-full landscape:w-1/2"
)}
- image={getImage(image)}
+ image={img}
loading="eager"
style={{
gridArea: "1/1",
diff --git a/src/utils.ts b/src/utils.ts
index f1c81bc..cd292c9 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,18 +1,19 @@
// import kebabCase from 'lodash/kebabCase';
+import { HomepageImage } from "./pages";
import { GalleryImage } from "./pages/photogallery";
-export const getMeta = (image: GalleryImage) => image.fields?.imageMeta;
+export const getMeta = <T extends GalleryImage | HomepageImage>(image: T) => image.fields?.imageMeta;
export const getName = (image: GalleryImage) =>
- getMeta(image)?.meta?.ObjectName || image.base;
+image.fields?.imageMeta?.meta?.ObjectName || image.base;
// some pleasing default colors for SSR and initial hydration
-export const getVibrant = (image: GalleryImage) => getMeta(image)?.vibrant;
+export const getVibrant = (image: GalleryImage | HomepageImage) => getMeta(image)?.vibrant;
-export const hasName = (image: GalleryImage) => Boolean(getMeta(image)?.meta?.ObjectName);
+export const hasName = (image: GalleryImage) => Boolean(image.fields?.imageMeta?.meta?.ObjectName);
-export const getAspectRatio = (image: GalleryImage): number =>
+export const getAspectRatio = (image: GalleryImage | HomepageImage): number =>
image.childImageSharp?.fluid?.aspectRatio ?? 1;
export const getCanonicalSize = (image: GalleryImage) => ({