diff --git a/gatsby/gatsby-node.js b/gatsby/gatsby-node.js index 0e466fa..e36a1e0 100644 --- a/gatsby/gatsby-node.js +++ b/gatsby/gatsby-node.js @@ -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(), diff --git a/gatsby/package.json b/gatsby/package.json index 427aeea..39ff4d1 100644 --- a/gatsby/package.json +++ b/gatsby/package.json @@ -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", diff --git a/gatsby/src/components/GalleryImage.js b/gatsby/src/components/GalleryImage.js index cf261c8..c2ae7c7 100644 --- a/gatsby/src/components/GalleryImage.js +++ b/gatsby/src/components/GalleryImage.js @@ -50,7 +50,7 @@ const GalleryImage = ({ data }) => { style={{ maxWidth: `calc(max(90vh, 500px) * ${ar})`, maxHeight: '90vh', - minHeight: '500px', + // minHeight: '500px', }} />
@@ -98,12 +98,7 @@ export const query = graphql` ISO } vibrant { - DarkMuted - DarkVibrant - LightMuted - LightVibrant - Muted - Vibrant + ...VibrantColors } } } diff --git a/gatsby/src/components/MasonryGallery.js b/gatsby/src/components/MasonryGallery.js index 34b552b..11d49eb 100644 --- a/gatsby/src/components/MasonryGallery.js +++ b/gatsby/src/components/MasonryGallery.js @@ -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); diff --git a/gatsby/src/fragments.js b/gatsby/src/fragments.js new file mode 100644 index 0000000..fc308eb --- /dev/null +++ b/gatsby/src/fragments.js @@ -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 + } + } +`; \ No newline at end of file diff --git a/gatsby/src/pages/index.js b/gatsby/src/pages/index.js index d2674c1..5c23b79 100644 --- a/gatsby/src/pages/index.js +++ b/gatsby/src/pages/index.js @@ -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 } } } diff --git a/gatsby/src/pages/photogallery.js b/gatsby/src/pages/photogallery.js index c06a56a..11b26d4 100644 --- a/gatsby/src/pages/photogallery.js +++ b/gatsby/src/pages/photogallery.js @@ -26,9 +26,9 @@ const GalleryPage = ({ data }) => { 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; diff --git a/gatsby/yarn.lock b/gatsby/yarn.lock index 8b33bbd..13dccb2 100644 --- a/gatsby/yarn.lock +++ b/gatsby/yarn.lock @@ -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: