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

pretty much solve type errors

Browse Source
This commit is contained in:
Chuck Dries 2022-10-10 03:00:54 -07:00
parent face0f0f86
commit 5916185c85
No known key found for this signature in database
GPG Key ID: A00B7AEAE1DC5BE6
3 changed files with 29 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/index/ActionButtons.js → src/components/index/ActionButtons.tsx
View File

@ -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);

14
src/pages/index.tsx
View File

@ -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",

11
src/utils.ts
View File

@ -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) => ({