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

Get text colors from vibrant, make fragment to help; hopefully fix hydration issue with mobile safari, default to sm breakpoint

Browse Source
This commit is contained in:
Chuck Dries 2021-06-17 23:33:48 -07:00
parent 192efd413e
commit 28d40895aa
9 changed files with 70 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
gatsby/gatsby-node.js
View File

@ -40,8 +40,11 @@ function transformMetaToNodeData(exifData, iptcData, vibrantData) {
// console.log('asdf', JSON.stringify(vibrantData.Vibrant.getTitleTextColor()));
const vibrant = R.map((swatch) =>
swatch.getRgb()
const vibrant = R.map((swatch) => ({
rgb: swatch.getRgb(),
titleTextColor: swatch.getTitleTextColor(),
bodyTextColor: swatch.getBodyTextColor(),
})
// ({
// // rgb: swatch.getRgb(),
// // hsl: swatch.getHsl(),

2
gatsby/package.json
View File

@ -37,7 +37,7 @@
"gatsby-transformer-sharp": "^3.6.0",
"kebab-case": "^1.0.1",
"node-iptc": "^1.0.5",
"node-vibrant": "^3.2.1-alpha.1",
"node-vibrant": "3.1.6",
"postcss": "^8.3.4",
"postcss-nested": "^5.0.5",
"ramda": "^0.27.1",

9
gatsby/src/components/GalleryImage.js
View File

@ -50,7 +50,7 @@ const GalleryImage = ({ data }) => {
style={{
maxWidth: `calc(max(90vh, 500px) * ${ar})`,
maxHeight: '90vh',
minHeight: '500px',
// minHeight: '500px',
}} />
</div>
<div className={classnames('flex-shrink-0 mr-2 flex flex-row', ar <= 1 && 'pt-4 flex-col flex-auto text-right')}>
@ -98,12 +98,7 @@ export const query = graphql`
ISO
}
vibrant {
DarkMuted
DarkVibrant
LightMuted
LightVibrant
Muted
Vibrant
...VibrantColors
}
}
}

5
gatsby/src/components/MasonryGallery.js
View File

@ -11,8 +11,9 @@ const MasonryGallery = ({ images, itemsPerRow: itemsPerRowByBreakpoint }) => {
const breakpoints = React.useMemo(() =>
R.pick(R.keys(itemsPerRowByBreakpoint), themeBreakpoints)
, [itemsPerRowByBreakpoint]);
console.log(breakpoints);
const { breakpoint } = useBreakpoint(breakpoints, 'md');
const { breakpoint } = useBreakpoint(breakpoints, 'sm');
const aspectRatios = React.useMemo(() => R.map(getAspectRatio, images), [images]);
const rowAspectRatioSumsByBreakpoint = React.useMemo(() => R.map(R.pipe(
@ -36,7 +37,7 @@ const MasonryGallery = ({ images, itemsPerRow: itemsPerRowByBreakpoint }) => {
const rowAspectRatioSum = rowAspectRatioSumsForCurrentBP[rowIndex];
// const width = ((getAspectRatio(image) / rowAspectRatioSum) * 100).toFixed(10);
const ar = getAspectRatio(image);
const widthNumber = ((ar / rowAspectRatioSum) * 100);
const widthNumber = ((ar / rowAspectRatioSum) * 100).toFixed(5);
const width = `${widthNumber}%`;
// const width = `${widthNumber}%`;
// console.log('ars', rowAspectRatioSum);

36
gatsby/src/fragments.js Normal file
View File

@ -0,0 +1,36 @@
import { graphql } from 'gatsby';
export const VibrantColorsFragment = graphql`
fragment VibrantColors on ImageSharpFieldsImageMetaVibrant {
DarkMuted {
titleTextColor
bodyTextColor
rgb
}
DarkVibrant {
titleTextColor
bodyTextColor
rgb
}
LightMuted {
titleTextColor
bodyTextColor
rgb
}
LightVibrant {
titleTextColor
bodyTextColor
rgb
}
Vibrant {
titleTextColor
bodyTextColor
rgb
}
Muted {
titleTextColor
bodyTextColor
rgb
}
}
`;

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

@ -29,7 +29,7 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
localStorage.setItem('lastHeros', JSON.stringify(take(3, [imageIndex, ...lastThreeImages])));
return images[imageIndex];
}, [images, isClient]);
const vibrant = getVibrant(image, isClient);
const vibrant = getVibrant(image);
React.useEffect(() => {
if (!isClient) {
setIsClient(true);
@ -118,12 +118,7 @@ export const query = graphql`
fields {
imageMeta {
vibrant {
DarkMuted
DarkVibrant
LightMuted
LightVibrant
Muted
Vibrant
...VibrantColors
}
}
}

4
gatsby/src/pages/photogallery.js
View File

@ -26,9 +26,9 @@ const GalleryPage = ({ data }) => {
<MasonryGallery
images={images}
itemsPerRow={{
sm: 1,
sm: 2,
md: 2,
lg: 2,
lg: 3,
xl: 3,
'2xl': 4,
}}

21
gatsby/src/utils.js
View File

@ -5,14 +5,7 @@ export const getMeta = (image) => image.childImageSharp.fields.imageMeta;
export const getName = (image) => getMeta(image)?.iptc.object_name || image.base;
// some pleasing default colors for SSR and initial hydration
export const getVibrant = (image, isClient) => isClient ? getMeta(image)?.vibrant : {
'DarkMuted': [ 63, 64, 73 ],
'DarkVibrant': [ 52, 75, 116 ],
'LightMuted': [ 211, 194, 181 ],
'LightVibrant': [ 224, 183, 140 ],
'Muted': [ 155, 123, 114 ],
'Vibrant': [ 226, 116, 81 ],
};
export const getVibrant = (image) => getMeta(image)?.vibrant;
export const hasName = (image) => Boolean(getMeta(image)?.iptc.object_name);
@ -23,12 +16,12 @@ export const getRgba = (palette, alpha) => `rgba(${palette[0]}, ${palette[1]}, $
// work around SSR bug in react-helmet
export const getVibrantToHelmetSafeBodyStyle = (vibrant) => {
const style = {
'--muted': vibrant.Muted,
'--dark-muted': vibrant.DarkMuted,
'--light-muted': vibrant.LightMuted,
'--vibrant': vibrant.Vibrant,
'--dark-vibrant': vibrant.DarkVibrant,
'--light-vibrant': vibrant.LightVibrant,
'--muted': vibrant.Muted.rgb,
'--dark-muted': vibrant.DarkMuted.rgb,
'--light-muted': vibrant.LightMuted.rgb,
'--vibrant': vibrant.Vibrant.rgb,
'--dark-vibrant': vibrant.DarkVibrant.rgb,
'--light-vibrant': vibrant.LightVibrant.rgb,
};
if (typeof window === 'undefined') {
return style;

112
gatsby/yarn.lock
View File

@ -2054,7 +2054,7 @@
dependencies:
"@types/node" "*"
"@types/lodash@^4.14.92":
"@types/lodash@^4.14.53", "@types/lodash@^4.14.92":
version "4.14.170"
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.170.tgz#0d67711d4bf7f4ca5147e9091b847479b87925d6"
integrity sha512-bpcvu/MKHHeYX+qeEN8GE7DIravODWdACVA1ctevD8CN24RhPZIKMn9ntfAsrvLfSX3cR5RrBKAbYm9bGs0A+Q==
@ -2091,7 +2091,7 @@
resolved "https://registry.yarnpkg.com/@types/node/-/node-15.12.2.tgz#1f2b42c4be7156ff4a6f914b2fb03d05fa84e38d"
integrity sha512-zjQ69G564OCIWIOHSXyQEEDpdpGl+G348RAKY0XXy9Z5kU9Vzv1GMNnkar/ZJ8dzXB3COzD9Mo9NtRZ4xfgUww==
"@types/node@^10.12.18":
"@types/node@^10.11.7":
version "10.17.60"
resolved "https://registry.yarnpkg.com/@types/node/-/node-10.17.60.tgz#35f3d6213daed95da7f0f73e75bcc6980e90597b"
integrity sha512-F0KIgDJfy2nA3zMLmWGKxcH2ZVEtCZXHHdOQs2gSaQ27+lNeEfGxzkIw90aXswATX7AZ33tahPbzy6KAfUreVw==
@ -2290,94 +2290,6 @@
"@typescript-eslint/types" "4.27.0"
eslint-visitor-keys "^2.0.0"
"@vibrant/color@^3.2.1-alpha.1":
version "3.2.1-alpha.1"
resolved "https://registry.yarnpkg.com/@vibrant/color/-/color-3.2.1-alpha.1.tgz#1bcee4545d2276d36f9a1acb42ab3485a9b489ec"
integrity sha512-cvm+jAPwao2NerTr3d1JttYyLhp3eD/AQBeevxF7KT6HctToWZCwr2AeTr003/wKgbjzdOV1qySnbyOeu+R+Jw==
"@vibrant/core@^3.2.1-alpha.1":
version "3.2.1-alpha.1"
resolved "https://registry.yarnpkg.com/@vibrant/core/-/core-3.2.1-alpha.1.tgz#9adff0835b5c750be3386ec01669d2a8d6389fdb"
integrity sha512-X9Oa9WfPEQnZ6L+5dLRlh+IlsxJkYTw9b/g3stFKoNXbVRKCeXHmH48l7jIBBOg3VcXOGUdsYBqsTwPNkIveaA==
dependencies:
"@vibrant/color" "^3.2.1-alpha.1"
"@vibrant/generator" "^3.2.1-alpha.1"
"@vibrant/image" "^3.2.1-alpha.1"
"@vibrant/quantizer" "^3.2.1-alpha.1"
"@vibrant/types" "^3.2.1-alpha.1"
"@vibrant/worker" "^3.2.1-alpha.1"
"@vibrant/generator-default@^3.2.1-alpha.1":
version "3.2.1-alpha.1"
resolved "https://registry.yarnpkg.com/@vibrant/generator-default/-/generator-default-3.2.1-alpha.1.tgz#70ae71ea1f72d3e71aa6b244830d01ecae1d755a"
integrity sha512-BWnQhDaz92UhyHnpdAzKXHQecY+jvyMXtzjKYbveFxThm6+HVoLjwONlbck7oyOpFzV2OM7V11XuR85BxaHvjw==
dependencies:
"@vibrant/color" "^3.2.1-alpha.1"
"@vibrant/generator" "^3.2.1-alpha.1"
"@vibrant/generator@^3.2.1-alpha.1":
version "3.2.1-alpha.1"
resolved "https://registry.yarnpkg.com/@vibrant/generator/-/generator-3.2.1-alpha.1.tgz#887b36f7ed978ff94c93cc8a3ac742ce769b6112"
integrity sha512-luS5YvMhwMqG01YTj1dJ+cmkuIw1VCByOR6zIaCOwQqI/mcOs88JBWcA1r2TywJTOPlVpjfnDvAlyaKBKh4dMA==
dependencies:
"@vibrant/color" "^3.2.1-alpha.1"
"@vibrant/types" "^3.2.1-alpha.1"
"@vibrant/image-browser@^3.2.1-alpha.1":
version "3.2.1-alpha.1"
resolved "https://registry.yarnpkg.com/@vibrant/image-browser/-/image-browser-3.2.1-alpha.1.tgz#fe595bfe0c0ddc412300b5419e1e42d8b88d4380"
integrity sha512-6xWvQfB20sE6YtCWylgEAHuee3iD8h3aFIDbCS2yj7jIelKcYTrrp5jg2d2BhOOB6pC5JzF+QfpCrm0DmAIlgQ==
dependencies:
"@vibrant/image" "^3.2.1-alpha.1"
"@vibrant/image-node@^3.2.1-alpha.1":
version "3.2.1-alpha.1"
resolved "https://registry.yarnpkg.com/@vibrant/image-node/-/image-node-3.2.1-alpha.1.tgz#2901e09aee05d64ac9e792a951ee0727299ab80f"
integrity sha512-/Io/Rpo4EkO6AhaXdcxUXkbOFhSFtjm0LSAM4c0AyGA5EbC8PyZqjk8b11bQAEMCaYaweFQfTdGD7oVbXe21CQ==
dependencies:
"@jimp/custom" "^0.16.1"
"@jimp/plugin-resize" "^0.16.1"
"@jimp/types" "^0.16.1"
"@vibrant/image" "^3.2.1-alpha.1"
"@vibrant/image@^3.2.1-alpha.1":
version "3.2.1-alpha.1"
resolved "https://registry.yarnpkg.com/@vibrant/image/-/image-3.2.1-alpha.1.tgz#8bcde820f5ad873e2e96b00479def80f86e925a5"
integrity sha512-4aF5k79QfyhZOqRovJpbnIjWfe3uuWhY8voqVdd4/qgu4o70/AwVlM+pYmCaJVzI45VWNWWHYA5QlYuKsXnBqQ==
dependencies:
"@vibrant/color" "^3.2.1-alpha.1"
"@vibrant/types" "^3.2.1-alpha.1"
"@vibrant/quantizer-mmcq@^3.2.1-alpha.1":
version "3.2.1-alpha.1"
resolved "https://registry.yarnpkg.com/@vibrant/quantizer-mmcq/-/quantizer-mmcq-3.2.1-alpha.1.tgz#b36ecb48f4bff9ea35ed23389d8af79c079c079a"
integrity sha512-Wuk9PTZtxr8qsWTcgP6lcrrmrq36syVwxf+BUxdgQYntBcQ053SaN34lVGOJ0WPdK5vABoxbYljhceCgiILtZw==
dependencies:
"@vibrant/color" "^3.2.1-alpha.1"
"@vibrant/image" "^3.2.1-alpha.1"
"@vibrant/quantizer" "^3.2.1-alpha.1"
"@vibrant/quantizer@^3.2.1-alpha.1":
version "3.2.1-alpha.1"
resolved "https://registry.yarnpkg.com/@vibrant/quantizer/-/quantizer-3.2.1-alpha.1.tgz#8d29e288ea7acbcd0c9ab8c6b86f80adce606210"
integrity sha512-iHnPx/+n4iLtYLm1GClSfyg2fFbMatFG0ipCyp9M6tXNIPAg+pSvUJSGBnVnH7Nl/bR8Gkkj1h0pJ4RsKcdIrQ==
dependencies:
"@vibrant/color" "^3.2.1-alpha.1"
"@vibrant/image" "^3.2.1-alpha.1"
"@vibrant/types" "^3.2.1-alpha.1"
"@vibrant/types@^3.2.1-alpha.1":
version "3.2.1-alpha.1"
resolved "https://registry.yarnpkg.com/@vibrant/types/-/types-3.2.1-alpha.1.tgz#54ecf8b4d1045af699bfaf592e455079801bc951"
integrity sha512-ts9u7nsrENoYI5s0MmPOeY5kCLFKvQndKVDOPFCbTA0z493uhDp8mpiQhjFYTf3kPbS04z9zbHLE2luFC7x4KQ==
"@vibrant/worker@^3.2.1-alpha.1":
version "3.2.1-alpha.1"
resolved "https://registry.yarnpkg.com/@vibrant/worker/-/worker-3.2.1-alpha.1.tgz#d09e4ec72902d36b9632c2c0aab855747acf1015"
integrity sha512-mtSlBdHkFNr4FOnMtqtHJxy9z5AsUcZzGlpiHzvWOoaoN9lNTDPwxOBd0q4VTYWuGPrIm6Fuq5m7aRbLv7KqiQ==
dependencies:
"@vibrant/types" "^3.2.1-alpha.1"
"@webassemblyjs/ast@1.11.0":
version "1.11.0"
resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.0.tgz#a5aa679efdc9e51707a4207139da57920555961f"
@ -9674,17 +9586,17 @@ node-releases@^1.1.61, node-releases@^1.1.71:
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.73.tgz#dd4e81ddd5277ff846b80b52bb40c49edf7a7b20"
integrity sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg==
node-vibrant@^3.2.1-alpha.1:
version "3.2.1-alpha.1"
resolved "https://registry.yarnpkg.com/node-vibrant/-/node-vibrant-3.2.1-alpha.1.tgz#d80a3dd22741150b804ae0d3eb99ceaf9f79980a"
integrity sha512-EQergCp7fvbvUCE0VMCBnvaAV0lGWSP8SXLmuWQIBzQK5M5pIwcd9fIOXuzFkJx/8hUiiiLvAzzGDS/bIy2ikA==
node-vibrant@3.1.6:
version "3.1.6"
resolved "https://registry.yarnpkg.com/node-vibrant/-/node-vibrant-3.1.6.tgz#8554c3108903232cbe1e722f928469ee4379aa18"
integrity sha512-Wlc/hQmBMOu6xon12ZJHS2N3M+I6J8DhrD3Yo6m5175v8sFkVIN+UjhKVRcO+fqvre89ASTpmiFEP3nPO13SwA==
dependencies:
"@types/node" "^10.12.18"
"@vibrant/core" "^3.2.1-alpha.1"
"@vibrant/generator-default" "^3.2.1-alpha.1"
"@vibrant/image-browser" "^3.2.1-alpha.1"
"@vibrant/image-node" "^3.2.1-alpha.1"
"@vibrant/quantizer-mmcq" "^3.2.1-alpha.1"
"@jimp/custom" "^0.16.1"
"@jimp/plugin-resize" "^0.16.1"
"@jimp/types" "^0.16.1"
"@types/lodash" "^4.14.53"
"@types/node" "^10.11.7"
lodash "^4.17.20"
url "^0.11.0"
noms@0.0.0: