From ff64d4f984eae2253fd41c572e0f80c763e3a8e3 Mon Sep 17 00:00:00 2001 From: Chuck Dries Date: Mon, 14 Jun 2021 20:30:12 -0700 Subject: [PATCH] responsive masonry gallery by hand - breakpoints break hydration --- gatsby/.eslintrc.js | 1 + gatsby/gatsby-node.js | 9 ++-- gatsby/package.json | 4 +- gatsby/src/components/GalleryImage.js | 8 +-- gatsby/src/components/MasonryGallery.js | 68 +++++++++++++++++++++++ gatsby/src/pages/index.js | 6 ++- gatsby/src/pages/photogallery.js | 72 +++++++++++-------------- gatsby/src/utils.js | 4 +- gatsby/tailwind.config.js | 15 ++++-- gatsby/yarn.lock | 10 ++++ 10 files changed, 139 insertions(+), 58 deletions(-) create mode 100644 gatsby/src/components/MasonryGallery.js diff --git a/gatsby/.eslintrc.js b/gatsby/.eslintrc.js index 3725e19..1e0b5ab 100644 --- a/gatsby/.eslintrc.js +++ b/gatsby/.eslintrc.js @@ -22,5 +22,6 @@ module.exports = { 'semi': 1, 'indent': ['warn', 2], 'comma-dangle': ['warn', 'always-multiline'], + 'no-unused-vars': 1, }, }; diff --git a/gatsby/gatsby-node.js b/gatsby/gatsby-node.js index 1dd3f84..62f46bb 100644 --- a/gatsby/gatsby-node.js +++ b/gatsby/gatsby-node.js @@ -67,11 +67,11 @@ exports.onCreateNode = async function ({ node, getNode, actions }) { exports.createPages = async ({ graphql, actions, reporter }) => { const { createPage } = actions; // get all images - const galleryImages = await graphql( - ` + const galleryImages = await graphql(` { allFile(filter: { - sourceInstanceName: { eq: "gallery" }}) { + sourceInstanceName: { eq: "gallery" }} + ) { edges { node { relativePath, @@ -80,8 +80,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => { } } } - ` - ); + `); // Handle errors if (galleryImages.errors) { reporter.panicOnBuild('Error while running GraphQL query.'); diff --git a/gatsby/package.json b/gatsby/package.json index 299aacd..f6551b1 100644 --- a/gatsby/package.json +++ b/gatsby/package.json @@ -35,13 +35,15 @@ "node-iptc": "^1.0.5", "postcss": "^8.3.4", "postcss-nested": "^5.0.5", + "ramda": "^0.27.1", "react": "^17.0.1", "react-dom": "^17.0.1", "react-helmet": "^6.1.0", "react-responsive-masonry": "^2.1.2", "sass": "^1.34.0", "styled-components": "^5.3.0", - "tailwindcss": "^2.1.2" + "tailwindcss": "^2.1.2", + "use-breakpoint": "^2.0.1" }, "devDependencies": { "babel-eslint": "^10.1.0", diff --git a/gatsby/src/components/GalleryImage.js b/gatsby/src/components/GalleryImage.js index 0435d26..14115c7 100644 --- a/gatsby/src/components/GalleryImage.js +++ b/gatsby/src/components/GalleryImage.js @@ -1,13 +1,13 @@ import React from 'react'; import { graphql } from 'gatsby'; -import { getMeta, getName, hasName } from '../utils'; +import { getAspectRatio, getMeta, getName, hasName } from '../utils'; import { GatsbyImage, getImage } from 'gatsby-plugin-image'; import { Helmet } from 'react-helmet'; import classnames from 'classnames'; const GalleryImage = ({ data }) => { const image = data.allFile.edges[0].node; - const ar = image.childImageSharp.fluid.aspectRatio; + const ar = getAspectRatio(image); console.log(ar); // const imageStyle = {} // if (ar > 1) { @@ -22,7 +22,7 @@ const GalleryImage = ({ data }) => { return (<> {name} - Gallery | Chuck Dries - +
{/* TODO: change layout by amount of empty space on side of page, not aspect ratio? */} @@ -95,4 +95,4 @@ export const query = graphql` `; -export default GalleryImage; \ No newline at end of file +export default GalleryImage; diff --git a/gatsby/src/components/MasonryGallery.js b/gatsby/src/components/MasonryGallery.js new file mode 100644 index 0000000..899085b --- /dev/null +++ b/gatsby/src/components/MasonryGallery.js @@ -0,0 +1,68 @@ +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'; +// TODO: use resolveCOnfig to not need to define screens in theme file +import resolveConfig from 'tailwindcss/resolveConfig'; +import tailwindConfig from '../../tailwind.config.js'; +import useBreakpoint from 'use-breakpoint'; + +const {theme: {screens}} = resolveConfig(tailwindConfig); +const themeBreakpoints = R.map(size => parseInt(size, 10), screens); +console.log(themeBreakpoints); + +const MasonryGallery = ({ images, itemsPerRow: itemsPerRowByBreakpoint }) => { + const breakpoints = React.useMemo(() => + R.pick(R.keys(itemsPerRowByBreakpoint), themeBreakpoints) + , [itemsPerRowByBreakpoint]); + + const { breakpoint, maxWidth, minWidth } = useBreakpoint(breakpoints, 'md'); + + const aspectRatios = React.useMemo(() => R.map(getAspectRatio, images), [images]); + const rowAspectRatioSumsByBreakpoint = React.useMemo(() => R.map(R.pipe( + R.splitEvery(R.__, aspectRatios), + R.map(R.sum) + ))(itemsPerRowByBreakpoint), [aspectRatios, itemsPerRowByBreakpoint]); + + // console.log('bp', breakpoint); + const rowAspectRatioSumsForCurrentBP = rowAspectRatioSumsByBreakpoint[breakpoint]; + console.log('rowAspectRatioSumsForCurrentBP :', rowAspectRatioSumsForCurrentBP); + + return ( +
+ {images.map((image, i) => { + const rowIndex = Math.floor(i / itemsPerRowByBreakpoint[breakpoint]); + const rowAspectRatioSum = rowAspectRatioSumsForCurrentBP[rowIndex]; + // console.log('ars', rowAspectRatioSum); + if (i === 0) { + console.log(rowIndex, rowAspectRatioSum); + console.log(getName(image), `${(getAspectRatio(image) / rowAspectRatioSum) * 100}%`); + } + return ( + // + + // + ); + })} +
); + // return null; +}; + +export default MasonryGallery; diff --git a/gatsby/src/pages/index.js b/gatsby/src/pages/index.js index 602ff89..e574225 100644 --- a/gatsby/src/pages/index.js +++ b/gatsby/src/pages/index.js @@ -8,7 +8,7 @@ const IndexPage = ({ data }) => { console.log('images', images); return ( -
+

Chuck Dries

@@ -61,7 +61,9 @@ const IndexPage = ({ data }) => { export const query = graphql` query HomePageGallery { allFile(filter: { - sourceInstanceName: { eq: "gallery" }}) { + sourceInstanceName: { eq: "gallery" }} + sort: {order: DESC, fields: childrenImageSharp___fields___imageMeta___dateTaken} + ) { edges { node { relativePath, diff --git a/gatsby/src/pages/photogallery.js b/gatsby/src/pages/photogallery.js index c0585a8..36260e9 100644 --- a/gatsby/src/pages/photogallery.js +++ b/gatsby/src/pages/photogallery.js @@ -1,59 +1,47 @@ import * as React from 'react'; -import { graphql, Link } from 'gatsby'; -import { GatsbyImage, getImage } from 'gatsby-plugin-image'; +import { graphql } from 'gatsby'; +// import { GatsbyImage, getImage } from 'gatsby-plugin-image'; import { Helmet } from 'react-helmet'; -import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry'; +// import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry'; -import { getMeta } from '../utils'; +// import { getMeta } from '../utils'; +import MasonryGallery from '../components/MasonryGallery'; const GalleryPage = ({ data }) => { const images = React.useMemo(() => data.allFile.edges .map(edge => edge.node, [data]) - .sort((left, right) => { - const leftDate = new Date(getMeta(left).dateTaken); - console.log(leftDate); - const rightDate = new Date(getMeta(right).dateTaken); - if (leftDate < rightDate) { - return 1; - } - if (leftDate > rightDate) { - return -1; - } - return 0; - }) // TODO HERE + // .sort((left, right) => { + // const leftDate = new Date(getMeta(left).dateTaken); + // console.log(leftDate); + // const rightDate = new Date(getMeta(right).dateTaken); + // if (leftDate < rightDate) { + // return 1; + // } + // if (leftDate > rightDate) { + // return -1; + // } + // return 0; + // }) // TODO HERE , [data]); return (<> Gallery | Chuck Dries - +

Gallery

- {/* TODO swap masonry plugin, this one makes really unbalanced columns */} - {/* ...implement manually :sadge: */} - - - {images.map(image => { - console.log('ar', image.childImageSharp); - const name = getMeta(image).iptc.object_name || image.base; - return ( - - - - - - ); - })} - - +
); @@ -62,7 +50,9 @@ const GalleryPage = ({ data }) => { export const query = graphql` query GalleryPageQuery { allFile(filter: { - sourceInstanceName: { eq: "gallery" }}) { + sourceInstanceName: { eq: "gallery" }} + sort: {order: DESC, fields: childrenImageSharp___fields___imageMeta___dateTaken} + ) { edges { node { relativePath, @@ -73,7 +63,7 @@ query GalleryPageQuery { }, gatsbyImageData( layout: CONSTRAINED, - width: 650 + height: 400 ) fields { imageMeta { diff --git a/gatsby/src/utils.js b/gatsby/src/utils.js index e88c3a0..debb0b3 100644 --- a/gatsby/src/utils.js +++ b/gatsby/src/utils.js @@ -2,4 +2,6 @@ export const getMeta = (image) => image.childImageSharp.fields.imageMeta; export const getName = (image) => getMeta(image)?.iptc.object_name || image.base; -export const hasName = (image) => Boolean(getMeta(image)?.iptc.object_name); \ No newline at end of file +export const hasName = (image) => Boolean(getMeta(image)?.iptc.object_name); + +export const getAspectRatio = (image) => image.childImageSharp.fluid.aspectRatio; diff --git a/gatsby/tailwind.config.js b/gatsby/tailwind.config.js index dce82a5..bc4915b 100644 --- a/gatsby/tailwind.config.js +++ b/gatsby/tailwind.config.js @@ -1,9 +1,16 @@ -const defaultTheme = require('tailwindcss/defaultTheme') +const defaultTheme = require('tailwindcss/defaultTheme'); module.exports = { purge: ['./src/**/*.{js,jsx,ts,tsx}'], // darkMode: 'media', // or 'media' or 'class' theme: { + screens: { + 'sm': '640px', + 'md': '768px', + 'lg': '1024px', + 'xl': '1280px', + '2xl': '1536px', + }, spacing: { '1': '8px', '2': '12px', @@ -12,12 +19,12 @@ module.exports = { '5': '32px', '6': '48px', '7': '80px', - '8': '800px' + '8': '800px', }, fontFamily: { ...defaultTheme.fontFamily, // serif: ['Didot', 'Didot LT', 'STD', 'Hoefler Text' , 'Garamond', 'Times New Roman', 'serif'] - serif: ['Playfair Display', 'serif'] + serif: ['Playfair Display', 'serif'], }, extend: {}, }, @@ -25,4 +32,4 @@ module.exports = { extend: {}, }, plugins: [], -} +}; diff --git a/gatsby/yarn.lock b/gatsby/yarn.lock index 82ec0cf..fa510cd 100644 --- a/gatsby/yarn.lock +++ b/gatsby/yarn.lock @@ -10973,6 +10973,11 @@ quick-lru@^5.1.1: resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932" integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA== +ramda@^0.27.1: + version "0.27.1" + resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.27.1.tgz#66fc2df3ef873874ffc2da6aa8984658abacf5c9" + integrity sha512-PgIdVpn5y5Yns8vqb8FzBUEYn98V3xcPgawAkkgj0YJ0qDsnHCiNmZYfOGMgOvoB0eWFLpYbhxUR3mxfDIMvpw== + randombytes@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a" @@ -13616,6 +13621,11 @@ url@^0.11.0: punycode "1.3.2" querystring "0.2.0" +use-breakpoint@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/use-breakpoint/-/use-breakpoint-2.0.1.tgz#0e98cd55a6b0173147b84837a8cdecc63eabfcd7" + integrity sha512-f9PuRHzPsCIBW6oizdGpTAuH+49Tt9hMvByWQYpqI95tUN8k6qDX5WhL5s3b6cQfbubtIHCd1bw/8s5CzSbXpA== + use@^3.1.0: version "3.1.1" resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"