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 { Link } from "gatsby";
import Shuffle from "@spectrum-icons/workflow/Shuffle"; import Shuffle from "@spectrum-icons/workflow/Shuffle";
import { HomepageImage } from "../../pages";
const getButtonClasses = (isClient) => const getButtonClasses = (isClient?: boolean) =>
classnames( classnames(
"z-20 rounded-md text-md inline-block px-2 py-1 mt-1 mr-2 text-md hover:underline", "z-20 rounded-md text-md inline-block px-2 py-1 mt-1 mr-2 text-md hover:underline",
isClient isClient
@ -12,7 +13,16 @@ const getButtonClasses = (isClient) =>
: "text-gray-300 bg-gray-700" : "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="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"> <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> <h3 className="sm:mb-2 drop-shadow">Try my word game!</h3>
@ -25,14 +35,14 @@ const ActionButtons = ({ isClient, image, shuffleImage }) => (
</div> </div>
<div className="flex sm:mx-6 mb-2 sm:mb-6"> <div className="flex sm:mx-6 mb-2 sm:mb-6">
<Link <Link
className={getButtonClasses(isClient, "muted")} className={getButtonClasses(isClient)}
id="image-link" id="image-link"
to={`/photogallery/${image.base}/`} to={`/photogallery/${image.base}/`}
> >
view image view image
</Link> </Link>
<button <button
className={getButtonClasses(isClient, "muted")} className={getButtonClasses(isClient)}
id="shuffle-button" id="shuffle-button"
onClick={() => { onClick={() => {
shuffleImage(image); shuffleImage(image);

14
src/pages/index.tsx
View File

@ -15,7 +15,9 @@ import { use100vh } from "react-div-100vh";
const env = const env =
process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || "development"; 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); const n = Math.floor(Math.random() * range);
if (lastNs.findIndex((x) => x === n) > -1 && iterations < 5) { if (lastNs.findIndex((x) => x === n) > -1 && iterations < 5) {
console.log("got dupe, trying again", n); console.log("got dupe, trying again", n);
@ -68,7 +70,7 @@ const IndexPage = ({
}, [isClient, imageIndex, image, shuffleImage]); }, [isClient, imageIndex, image, shuffleImage]);
React.useEffect(() => { React.useEffect(() => {
const keyListener = (e) => { const keyListener = (e: KeyboardEvent) => {
switch (e.code) { switch (e.code) {
case "Space": { case "Space": {
shuffleImage(image); shuffleImage(image);
@ -106,9 +108,11 @@ const IndexPage = ({
const imageIsLandscape = isClient ? ar > 1 : true; const imageIsLandscape = isClient ? ar > 1 : true;
// @ts-ignore
const img = getImage(image);
return ( return (
<> <>
{/* @ts-ignore */} {/* @ts-ignore */}
<Helmet> <Helmet>
<title>Chuck Dries</title> <title>Chuck Dries</title>
<body <body
@ -183,7 +187,7 @@ const IndexPage = ({
/> />
</div> </div>
</div> </div>
{isClient ? ( {isClient && img ? (
<GatsbyImage <GatsbyImage
alt="" alt=""
className={classnames( className={classnames(
@ -191,7 +195,7 @@ const IndexPage = ({
? "landscape:h-actual-screen portrait:h-two-thirds-vw" ? "landscape:h-actual-screen portrait:h-two-thirds-vw"
: "h-actual-screen portrait:w-full landscape:w-1/2" : "h-actual-screen portrait:w-full landscape:w-1/2"
)} )}
image={getImage(image)} image={img}
loading="eager" loading="eager"
style={{ style={{
gridArea: "1/1", gridArea: "1/1",

11
src/utils.ts
View File

@ -1,18 +1,19 @@
// import kebabCase from 'lodash/kebabCase'; // import kebabCase from 'lodash/kebabCase';
import { HomepageImage } from "./pages";
import { GalleryImage } from "./pages/photogallery"; 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) => 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 // 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; image.childImageSharp?.fluid?.aspectRatio ?? 1;
export const getCanonicalSize = (image: GalleryImage) => ({ export const getCanonicalSize = (image: GalleryImage) => ({