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

maybe bring back homepage image shuffling?

Browse Source
This commit is contained in:
Chuck Dries 2022-11-17 00:38:15 -08:00
parent ea724c6e3e
commit f1c0dce935
No known key found for this signature in database
GPG Key ID: A00B7AEAE1DC5BE6
1 changed files with 42 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/pages/index.tsx
View File

@ -8,8 +8,8 @@ import classnames from "classnames";
import { getHelmetSafeBodyStyle, getVibrant, getAspectRatio } from "../utils"; import { getHelmetSafeBodyStyle, getVibrant, getAspectRatio } from "../utils";
import Nav from "../components/Nav"; import Nav from "../components/Nav";
import ActionButtons from "../components/index/ActionButtons"; import ActionButtons from "../components/index/ActionButtons";
import { use100vh } from "react-div-100vh"; // import { use100vh } from "react-div-100vh";
import { useMediaQuery } from "../useMediaQuery"; // import { useMediaQuery } from "../useMediaQuery";
const env = const env =
process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || "development"; process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || "development";
@ -71,14 +71,46 @@ const IndexPage = ({
} }
}, [isClient, imageIndex, image, shuffleImage]); }, [isClient, imageIndex, image, shuffleImage]);
const browserIsLandscape = useMediaQuery("(orientation: landscape)"); React.useEffect(() => {
const keyListener = (e: KeyboardEvent) => {
switch (e.code) {
case "Space": {
shuffleImage(image);
return;
}
case "ArrowRight": {
if (imageIndex === images.length - 1) {
setImageIndex(0);
return;
}
setImageIndex(imageIndex + 1);
return;
}
const vibrant = getVibrant(image); case "ArrowLeft": {
if (imageIndex === 0) {
setImageIndex(images.length - 1);
return;
}
setImageIndex(imageIndex - 1);
return;
}
}
};
document.addEventListener("keydown", keyListener);
return () => {
document.removeEventListener("keydown", keyListener);
};
}, [imageIndex, images.length, image, shuffleImage]);
// const browserIsLandscape = useMediaQuery("(orientation: landscape)");
// const vibrant = getVibrant(image);
const ar = getAspectRatio(image); const ar = getAspectRatio(image);
const screenHeight = use100vh(); // const screenHeight = use100vh();
const imageIsLandscape = isClient ? ar > 1 : true; // const imageIsLandscape = isClient ? ar > 1 : true;
// @ts-ignore // @ts-ignore
const img = getImage(image); const img = getImage(image);
@ -137,7 +169,10 @@ export const query = graphql`
allFile( allFile(
filter: { filter: {
sourceInstanceName: { eq: "gallery" } sourceInstanceName: { eq: "gallery" }
base: { in: ["DSC02615-2.jpg"] } base: { in: [
"DSC02615-2.jpg"
"DSC02615.jpg"
] }
} }
sort: { fields: { imageMeta: { dateTaken: DESC } } } sort: { fields: { imageMeta: { dateTaken: DESC } } }
) { ) {