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

Try to avoid showing users one of the last 3 hero images we picked on load

Browse Source
This commit is contained in:
Chuck Dries 2021-06-17 18:41:31 -07:00
parent 18bde28824
commit 192efd413e
No known key found for this signature in database
GPG Key ID: 4E6B9B2DCEC64BA9
1 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
gatsby/src/pages/index.js
View File

@ -3,10 +3,20 @@ import { Link, graphql } from 'gatsby';
import { GatsbyImage, getImage } from 'gatsby-plugin-image'; import { GatsbyImage, getImage } from 'gatsby-plugin-image';
import { getVibrantToHelmetSafeBodyStyle, getVibrant } from '../utils'; import { getVibrantToHelmetSafeBodyStyle, getVibrant } from '../utils';
import { Helmet } from 'react-helmet'; import { Helmet } from 'react-helmet';
import { take } from 'ramda';
import classnames from 'classnames'; import classnames from 'classnames';
import { HeroA } from '../components/IndexComponents'; import { HeroA } from '../components/IndexComponents';
const getDifferentRand = (range, lastNs, iterations = 0) => {
const n = Math.floor(Math.random() * range);
if (lastNs.findIndex(x => x === n) > -1 && iterations < 5) {
console.log('got dupe, trying again', n);
return getDifferentRand(range, lastNs, iterations + 1);
}
return n;
};
const IndexPage = ({ data: { allFile: { edges } } }) => { const IndexPage = ({ data: { allFile: { edges } } }) => {
const [isClient, setIsClient] = React.useState(false); const [isClient, setIsClient] = React.useState(false);
const images = React.useMemo(() => edges.map((edge) => edge.node), [edges]); const images = React.useMemo(() => edges.map((edge) => edge.node), [edges]);
@ -14,7 +24,10 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
if (!isClient) { if (!isClient) {
return images[0]; return images[0];
} }
return images[Math.floor(Math.random() * images.length)]; const lastThreeImages = JSON.parse(localStorage.getItem('lastHeros')) || [];
const imageIndex = getDifferentRand(images.length, lastThreeImages);
localStorage.setItem('lastHeros', JSON.stringify(take(3, [imageIndex, ...lastThreeImages])));
return images[imageIndex];
}, [images, isClient]); }, [images, isClient]);
const vibrant = getVibrant(image, isClient); const vibrant = getVibrant(image, isClient);
React.useEffect(() => { React.useEffect(() => {
@ -48,8 +61,8 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
: <div className="md:h-screen sm:h-two-thirds-vw" style={{gridArea: '1/1' }}></div> } : <div className="md:h-screen sm:h-two-thirds-vw" style={{gridArea: '1/1' }}></div> }
<div className="relative grid place-items-center" style={{gridArea: '1/1'}}> <div className="relative grid place-items-center" style={{gridArea: '1/1'}}>
<div className="m-2 flex flex-col items-end"> <div className="m-2 flex flex-col items-end">
<section className={classnames('rounded-xl py-6', isClient && ' bg-vibrant-dark-75')}> <section className={classnames('rounded-xl py-5', isClient && ' bg-vibrant-dark-75')}>
<div className="mx-auto px-6"> <div className="mx-auto px-5">
<h1 className={classnames('font-black text-6xl', isClient && 'text-vibrant-light')}>Chuck Dries</h1> <h1 className={classnames('font-black text-6xl', isClient && 'text-vibrant-light')}>Chuck Dries</h1>
<h2 className={classnames('italic text-2xl', isClient && 'text-vibrant')}>Full stack software engineer &amp; hobbyist photographer</h2> <h2 className={classnames('italic text-2xl', isClient && 'text-vibrant')}>Full stack software engineer &amp; hobbyist photographer</h2>
<ul className={classnames(isClient && 'text-muted-light')}> <ul className={classnames(isClient && 'text-muted-light')}>