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

formatting

Browse Source
This commit is contained in:
Chuck Dries 2022-10-24 19:44:34 -07:00
parent f73906bf1e
commit 01039a54e7
No known key found for this signature in database
GPG Key ID: A00B7AEAE1DC5BE6
1 changed files with 86 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

171
src/components/MasonryGallery.tsx
View File

@ -56,7 +56,10 @@ const MasonryGallery = ({
// ); // );
// const { breakpoint } = useBreakpoint(breakpoints, "sm"); // const { breakpoint } = useBreakpoint(breakpoints, "sm");
console.log("🚀 ~ file: MasonryGallery.tsx ~ line 46 ~ breakpoint", breakpoint) console.log(
"🚀 ~ file: MasonryGallery.tsx ~ line 46 ~ breakpoint",
breakpoint
);
const aspectRatios = React.useMemo( const aspectRatios = React.useMemo(
() => R.map(getAspectRatio, images).filter(Boolean), () => R.map(getAspectRatio, images).filter(Boolean),
@ -109,94 +112,92 @@ const MasonryGallery = ({
let cursor = 0; let cursor = 0;
return ( return (
<> <div
<div className="flex items-center flex-wrap sm:container mx-auto"
className="flex items-center flex-wrap sm:container mx-auto" ref={observe}
ref={observe} style={{
style={{ position: "relative",
position: "relative", }}
}} >
> {images.map((image, i) => {
{images.map((image, i) => { let currentRow = rows[cursor];
let currentRow = rows[cursor]; if (rows[i]) {
if (rows[i]) { cursor = i;
cursor = i; currentRow = rows[i];
currentRow = rows[i]; }
} const rowAspectRatioSum = currentRow.aspect;
const rowAspectRatioSum = currentRow.aspect; const ar = getAspectRatio(image);
const ar = getAspectRatio(image); let width;
let width; let height = `calc(${containerWidth}px / ${rowAspectRatioSum} - 10px)`;
let height = `calc(${containerWidth}px / ${rowAspectRatioSum} - 10px)`; if (rowAspectRatioSum < targetAspect * 0.66) {
if (rowAspectRatioSum < targetAspect * 0.66) { // incomplete row, render stuff at "ideal" sizes instead of filling width
// incomplete row, render stuff at "ideal" sizes instead of filling width width = `calc(${containerWidth}px / ${targetAspect / ar})`;
width = `calc(${containerWidth}px / ${targetAspect / ar})`; height = "unset";
height = "unset"; } else {
} else { const widthNumber = ((ar / rowAspectRatioSum) * 100).toFixed(7);
const widthNumber = ((ar / rowAspectRatioSum) * 100).toFixed(7); width = `${widthNumber}%`;
width = `${widthNumber}%`; }
} // @ts-ignore
// @ts-ignore const img = getImage(image);
const img = getImage(image); return (
return ( <Link
<Link className={classNames(
className={classNames( "border-4 overflow-hidden",
"border-4 overflow-hidden", debugHue && "border-8"
debugHue && "border-8" )}
)} id={image.base}
id={image.base} key={`${image.base}`}
key={`${image.base}`} state={{
state={{ ...linkState,
...linkState, sortedImageList,
sortedImageList, currentIndex: i,
currentIndex: i, }}
}} style={{
style={{ height,
height, width,
width, // borderColor: `hsl(${image.fields.imageMeta.dominantHue}, 100%, 50%)`
// borderColor: `hsl(${image.fields.imageMeta.dominantHue}, 100%, 50%)` // borderColor: `rgb(${image.fields.imageMeta.vibrant.Vibrant.join(',')})`
// borderColor: `rgb(${image.fields.imageMeta.vibrant.Vibrant.join(',')})` borderColor: debugHue
borderColor: debugHue ? `hsl(
? `hsl(
${image.fields?.imageMeta?.dominantHue?.[0]}, ${image.fields?.imageMeta?.dominantHue?.[0]},
${image.fields?.imageMeta?.dominantHue?.[1] ?? 0 * 100}%, ${image.fields?.imageMeta?.dominantHue?.[1] ?? 0 * 100}%,
${image.fields?.imageMeta?.dominantHue?.[2] ?? 0 * 100}% ${image.fields?.imageMeta?.dominantHue?.[2] ?? 0 * 100}%
)` )`
: "black", : "black",
}} }}
to={`/photogallery/${image.base}`} to={`/photogallery/${image.base}`}
> >
{debugHue && ( {debugHue && (
<span className="text-white z-20 absolute bg-black"> <span className="text-white z-20 absolute bg-black">
hsl( hsl(
{image.fields?.imageMeta?.dominantHue?.[0]},{" "} {image.fields?.imageMeta?.dominantHue?.[0]},{" "}
{( {(image.fields?.imageMeta?.dominantHue?.[1] ?? 0 * 100).toFixed(
image.fields?.imageMeta?.dominantHue?.[1] ?? 0 * 100 2
).toFixed(2)} )}
%,{" "} %,{" "}
{( {(image.fields?.imageMeta?.dominantHue?.[2] ?? 0 * 100).toFixed(
image.fields?.imageMeta?.dominantHue?.[2] ?? 0 * 100 2
).toFixed(2)} )}
% ) % )
</span> </span>
)} )}
{debugRating && ( {debugRating && (
<span className="text-white z-20 absolute bg-black"> <span className="text-white z-20 absolute bg-black">
rating: {image.fields?.imageMeta?.meta?.Rating} rating: {image.fields?.imageMeta?.meta?.Rating}
</span> </span>
)} )}
{img && ( {img && (
<GatsbyImage <GatsbyImage
alt={getName(image)} alt={getName(image)}
className="w-full h-full" className="w-full h-full"
image={img} image={img}
objectFit="cover" objectFit="cover"
/> />
)} )}
</Link> </Link>
); );
})} })}
</div> </div>
</>
); );
}; };