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

add color palette to galleryimage

Browse Source
This commit is contained in:
Chuck Dries 2023-01-07 01:56:10 -08:00
parent 9b7e757f29
commit 378a17d76b
No known key found for this signature in database
GPG Key ID: A00B7AEAE1DC5BE6
3 changed files with 38 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/GalleryImage/GalleryImage.js
View File

@ -226,13 +226,13 @@ const GalleryImage = ({ data, location: { state } }) => {
</div>
<div
className={classnames(
"px-2 flex flex-row portrait:items-end mx-auto",
"px-2 flex mx-auto",
ar <= 1
? "pt-5 flex-col flex-auto text-right"
: "landscape:container portrait:pt-5 portrait:flex-col portrait:text-right"
? "pt-5 flex-col flex-auto text-right items-end"
: "flex-row landscape:container portrait:pt-5 portrait:flex-col portrait:text-right portrait:items-end"
)}
>
<div className="flex-auto mr-2">
<div className="mr-2">
<p className="text-muted-light font-mono text-sm m-0 mt-1">
{image.base}
</p>
@ -256,7 +256,15 @@ const GalleryImage = ({ data, location: { state } }) => {
>
Download wallpaper
</a>
</div>
<div className="grid grid-cols-6 w-full h-[30px]">
<div className="bg-vibrant"></div>
<div className="bg-vibrant-light"></div>
<div className="bg-vibrant-dark"></div>
<div className="bg-muted"></div>
<div className="bg-muted-light"></div>
<div className="bg-muted-dark"></div>
</div>
</div><div className="flex-auto"></div>
{
<div
className="portrait:border-t-2 border-muted-light portrait:mt-2 mr-2 portrait:mb-1"

42
src/components/MasonryGallery.tsx
View File

@ -2,7 +2,7 @@ import * as React from "react";
import { Link } from "gatsby";
import { GatsbyImage, getImage } from "gatsby-plugin-image";
import * as R from "ramda";
import { getAspectRatio, getName } from "../utils";
import { getAspectRatio, getVibrantStyle, getName, getVibrant } from "../utils";
import useBreakpoint from "use-breakpoint";
// @ts-ignore
@ -47,10 +47,12 @@ const MasonryGallery = ({
// breakpoints,
// });
const { breakpoint } = useBreakpoint(breakpoints, 'xs')
const { breakpoint } = useBreakpoint(breakpoints, "xs");
// const breakpoint = currentBreakpoint.length ? currentBreakpoint : "xs";
const galleryWidth = `calc(100vw - ${ breakpoint === "xs" || breakpoint === "sm" ? "32" : "160" }px)`;
const galleryWidth = `calc(100vw - ${
breakpoint === "xs" || breakpoint === "sm" ? "32" : "160"
}px)`;
const aspectRatios = React.useMemo(
() => R.map(getAspectRatio, images).filter(Boolean),
@ -122,7 +124,7 @@ const MasonryGallery = ({
const rowAspectRatioSum = currentRow.aspect;
const ar = getAspectRatio(image);
let width;
let height = `calc(${galleryWidth} / ${rowAspectRatioSum} - 10px)`;
let height = `calc(${galleryWidth} / ${rowAspectRatioSum} + 10px)`;
if (rowAspectRatioSum < targetAspect * 0.66) {
// incomplete row, render stuff at "ideal" sizes instead of filling width
width = `calc(calc(100vw - 160px) / ${targetAspect / ar})`;
@ -136,8 +138,7 @@ const MasonryGallery = ({
return (
<Link
className={classNames(
"border-4 border-white overflow-hidden",
debugHue && "border-8"
"border-8 border-white overflow-hidden"
)}
id={image.base}
key={`${image.base}`}
@ -149,8 +150,6 @@ const MasonryGallery = ({
style={{
height,
width,
// borderColor: `hsl(${image.fields.imageMeta.dominantHue}, 100%, 50%)`
// borderColor: `rgb(${image.fields.imageMeta.vibrant.Vibrant.join(',')})`
borderColor: debugHue
? `hsl(
${image.fields?.imageMeta?.dominantHue?.[0]},
@ -161,32 +160,19 @@ const MasonryGallery = ({
}}
to={`/photogallery/${image.base}/`}
>
{debugHue && (
<span className="text-white z-20 absolute bg-black">
hsl(
{image.fields?.imageMeta?.dominantHue?.[0]},{" "}
{(image.fields?.imageMeta?.dominantHue?.[1] ?? 0 * 100).toFixed(
2
)}
%,{" "}
{(image.fields?.imageMeta?.dominantHue?.[2] ?? 0 * 100).toFixed(
2
)}
% )
</span>
)}
{debugRating && (
<span className="text-white z-20 absolute bg-black">
rating: {image.fields?.imageMeta?.meta?.Rating}
</span>
)}
{img && (
<GatsbyImage
alt={getName(image)}
className="w-full h-full"
image={img}
objectFit="cover"
/>
<GatsbyImage
alt={getName(image)}
className="w-full h-full"
image={img}
objectFit="cover"
/>
)}
</Link>
);

20
src/utils.ts
View File

@ -24,17 +24,19 @@ export const getCanonicalSize = (image: GalleryImage) => ({
export const getRgba = (palette: string[], alpha: number) =>
`rgba(${palette[0]}, ${palette[1]}, ${palette[2]}, ${alpha || 1})`;
export const getVibrantStyle = (vibrant: Queries.FileFieldsImageMetaVibrant, screenHeight?: number) => ({
"--muted": vibrant.Muted,
"--dark-muted": vibrant.DarkMuted,
"--light-muted": vibrant.LightMuted,
"--vibrant": vibrant.Vibrant,
"--dark-vibrant": vibrant.DarkVibrant,
"--light-vibrant": vibrant.LightVibrant,
"--height-screen": screenHeight ? `${screenHeight}px` : "100vh",
});
// work around SSR bug in react-helmet
export const getHelmetSafeBodyStyle = (vibrant: Queries.FileFieldsImageMetaVibrant, screenHeight?: number) => {
const style = {
"--muted": vibrant.Muted,
"--dark-muted": vibrant.DarkMuted,
"--light-muted": vibrant.LightMuted,
"--vibrant": vibrant.Vibrant,
"--dark-vibrant": vibrant.DarkVibrant,
"--light-vibrant": vibrant.LightVibrant,
"--height-screen": screenHeight ? `${screenHeight}px` : "100vh",
};
const style = getVibrantStyle(vibrant, screenHeight);
if (typeof window === "undefined") {
return style;
}