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

responsive masonry gallery by hand - breakpoints break hydration

Browse Source
This commit is contained in:
Chuck Dries 2021-06-14 20:30:12 -07:00
parent b735378e96
commit ff64d4f984
No known key found for this signature in database
GPG Key ID: 4E6B9B2DCEC64BA9
10 changed files with 139 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
gatsby/.eslintrc.js
View File

@ -22,5 +22,6 @@ module.exports = {
'semi': 1, 'semi': 1,
'indent': ['warn', 2], 'indent': ['warn', 2],
'comma-dangle': ['warn', 'always-multiline'], 'comma-dangle': ['warn', 'always-multiline'],
'no-unused-vars': 1,
}, },
}; };

9
gatsby/gatsby-node.js
View File

@ -67,11 +67,11 @@ exports.onCreateNode = async function ({ node, getNode, actions }) {
exports.createPages = async ({ graphql, actions, reporter }) => { exports.createPages = async ({ graphql, actions, reporter }) => {
const { createPage } = actions; const { createPage } = actions;
// get all images // get all images
const galleryImages = await graphql( const galleryImages = await graphql(`
`
{ {
allFile(filter: { allFile(filter: {
sourceInstanceName: { eq: "gallery" }}) { sourceInstanceName: { eq: "gallery" }}
) {
edges { edges {
node { node {
relativePath, relativePath,
@ -80,8 +80,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
} }
} }
} }
` `);
);
// Handle errors // Handle errors
if (galleryImages.errors) { if (galleryImages.errors) {
reporter.panicOnBuild('Error while running GraphQL query.'); reporter.panicOnBuild('Error while running GraphQL query.');

4
gatsby/package.json
View File

@ -35,13 +35,15 @@
"node-iptc": "^1.0.5", "node-iptc": "^1.0.5",
"postcss": "^8.3.4", "postcss": "^8.3.4",
"postcss-nested": "^5.0.5", "postcss-nested": "^5.0.5",
"ramda": "^0.27.1",
"react": "^17.0.1", "react": "^17.0.1",
"react-dom": "^17.0.1", "react-dom": "^17.0.1",
"react-helmet": "^6.1.0", "react-helmet": "^6.1.0",
"react-responsive-masonry": "^2.1.2", "react-responsive-masonry": "^2.1.2",
"sass": "^1.34.0", "sass": "^1.34.0",
"styled-components": "^5.3.0", "styled-components": "^5.3.0",
"tailwindcss": "^2.1.2" "tailwindcss": "^2.1.2",
"use-breakpoint": "^2.0.1"
}, },
"devDependencies": { "devDependencies": {
"babel-eslint": "^10.1.0", "babel-eslint": "^10.1.0",

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

@ -1,13 +1,13 @@
import React from 'react'; import React from 'react';
import { graphql } from 'gatsby'; 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 { GatsbyImage, getImage } from 'gatsby-plugin-image';
import { Helmet } from 'react-helmet'; import { Helmet } from 'react-helmet';
import classnames from 'classnames'; import classnames from 'classnames';
const GalleryImage = ({ data }) => { const GalleryImage = ({ data }) => {
const image = data.allFile.edges[0].node; const image = data.allFile.edges[0].node;
const ar = image.childImageSharp.fluid.aspectRatio; const ar = getAspectRatio(image);
console.log(ar); console.log(ar);
// const imageStyle = {} // const imageStyle = {}
// if (ar > 1) { // if (ar > 1) {
@ -22,7 +22,7 @@ const GalleryImage = ({ data }) => {
return (<> return (<>
<Helmet> <Helmet>
<title>{name} - Gallery | Chuck Dries</title> <title>{name} - Gallery | Chuck Dries</title>
<body className="bg-black" /> <body className="bg-black text-white" />
</Helmet> </Helmet>
<div className="min-h-screen flex flex-col justify-center"> <div className="min-h-screen flex flex-col justify-center">
{/* TODO: change layout by amount of empty space on side of page, not aspect ratio? */} {/* TODO: change layout by amount of empty space on side of page, not aspect ratio? */}

68
gatsby/src/components/MasonryGallery.js Normal file
View File

@ -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 (
<div
style={{
width: '100%',
position: 'relative',
}}
// className='mx-auto'
// style={{ maxWidth: minWidth }}
>
{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 (
// <Link className='inline-block' key={image.base} state={{modal: true}} to={`/photogallery/${image.base}`}>
<GatsbyImage
key={`${image.base}-img`}
className='inline-block'
style={{
width: `${(getAspectRatio(image) / rowAspectRatioSum) * 100}%`,
}}
// objectFit='contain'
image={getImage(image)}
alt={getName(image)}
/>
// </Link>
);
})}
</div>);
// return null;
};
export default MasonryGallery;

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

@ -8,7 +8,7 @@ const IndexPage = ({ data }) => {
console.log('images', images); console.log('images', images);
return ( return (
<main className="font-serif"> <main className="font-serif text-white">
<section style={{ height: '50vh' }} className="m-2 py-6 intro flex flex-col justify-center flex-auto bg-black rounded-xl"> <section style={{ height: '50vh' }} className="m-2 py-6 intro flex flex-col justify-center flex-auto bg-black rounded-xl">
<div className="mx-auto px-4 md:px-2 w-full md:w-8 "> <div className="mx-auto px-4 md:px-2 w-full md:w-8 ">
<h1 className="italic font-normal text-5xl text-pink-500">Chuck Dries</h1> <h1 className="italic font-normal text-5xl text-pink-500">Chuck Dries</h1>
@ -61,7 +61,9 @@ const IndexPage = ({ data }) => {
export const query = graphql` export const query = graphql`
query HomePageGallery { query HomePageGallery {
allFile(filter: { allFile(filter: {
sourceInstanceName: { eq: "gallery" }}) { sourceInstanceName: { eq: "gallery" }}
sort: {order: DESC, fields: childrenImageSharp___fields___imageMeta___dateTaken}
) {
edges { edges {
node { node {
relativePath, relativePath,

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

@ -1,59 +1,47 @@
import * as React from 'react'; import * as React from 'react';
import { graphql, Link } from 'gatsby'; import { graphql } from 'gatsby';
import { GatsbyImage, getImage } from 'gatsby-plugin-image'; // import { GatsbyImage, getImage } from 'gatsby-plugin-image';
import { Helmet } from 'react-helmet'; 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 GalleryPage = ({ data }) => {
const images = React.useMemo(() => const images = React.useMemo(() =>
data.allFile.edges data.allFile.edges
.map(edge => edge.node, [data]) .map(edge => edge.node, [data])
.sort((left, right) => { // .sort((left, right) => {
const leftDate = new Date(getMeta(left).dateTaken); // const leftDate = new Date(getMeta(left).dateTaken);
console.log(leftDate); // console.log(leftDate);
const rightDate = new Date(getMeta(right).dateTaken); // const rightDate = new Date(getMeta(right).dateTaken);
if (leftDate < rightDate) { // if (leftDate < rightDate) {
return 1; // return 1;
} // }
if (leftDate > rightDate) { // if (leftDate > rightDate) {
return -1; // return -1;
} // }
return 0; // return 0;
}) // TODO HERE // }) // TODO HERE
, [data]); , [data]);
return (<> return (<>
<Helmet> <Helmet>
<title>Gallery | Chuck Dries</title> <title>Gallery | Chuck Dries</title>
<body className="bg-black" /> <body className="bg-black text-white" />
</Helmet> </Helmet>
<div className="bg-black min-h-screen"> <div className="bg-black min-h-screen">
<h1 className="text-2xl">Gallery</h1> <h1 className="text-2xl">Gallery</h1>
<div className="mx-auto" style={{maxWidth: '1800px'}}> <div className="mx-auto" style={{maxWidth: '1800px'}}>
{/* TODO swap masonry plugin, this one makes really unbalanced columns */} <MasonryGallery
{/* ...implement manually :sadge: */} images={images}
<ResponsiveMasonry itemsPerRow={{
columnsCountBreakPoints={{ 350: 1, 650: 2, 1200: 3 }} sm: 2,
> md: 3,
<Masonry gutter='5px'> lg: 4,
{images.map(image => { xl: 5,
console.log('ar', image.childImageSharp); }}
const name = getMeta(image).iptc.object_name || image.base; />
return (
<React.Fragment key={name}>
<Link state={{modal: true}} to={`/photogallery/${image.base}`}>
<GatsbyImage
key={image.base}
image={getImage(image)}
alt={name} />
</Link>
</React.Fragment>
);
})}
</Masonry>
</ResponsiveMasonry>
</div> </div>
</div> </div>
</>); </>);
@ -62,7 +50,9 @@ const GalleryPage = ({ data }) => {
export const query = graphql` export const query = graphql`
query GalleryPageQuery { query GalleryPageQuery {
allFile(filter: { allFile(filter: {
sourceInstanceName: { eq: "gallery" }}) { sourceInstanceName: { eq: "gallery" }}
sort: {order: DESC, fields: childrenImageSharp___fields___imageMeta___dateTaken}
) {
edges { edges {
node { node {
relativePath, relativePath,
@ -73,7 +63,7 @@ query GalleryPageQuery {
}, },
gatsbyImageData( gatsbyImageData(
layout: CONSTRAINED, layout: CONSTRAINED,
width: 650 height: 400
) )
fields { fields {
imageMeta { imageMeta {

2
gatsby/src/utils.js
View File

@ -3,3 +3,5 @@ export const getMeta = (image) => image.childImageSharp.fields.imageMeta;
export const getName = (image) => getMeta(image)?.iptc.object_name || image.base; export const getName = (image) => getMeta(image)?.iptc.object_name || image.base;
export const hasName = (image) => Boolean(getMeta(image)?.iptc.object_name); export const hasName = (image) => Boolean(getMeta(image)?.iptc.object_name);
export const getAspectRatio = (image) => image.childImageSharp.fluid.aspectRatio;

15
gatsby/tailwind.config.js
View File

@ -1,9 +1,16 @@
const defaultTheme = require('tailwindcss/defaultTheme') const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = { module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}'], purge: ['./src/**/*.{js,jsx,ts,tsx}'],
// darkMode: 'media', // or 'media' or 'class' // darkMode: 'media', // or 'media' or 'class'
theme: { theme: {
screens: {
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',
},
spacing: { spacing: {
'1': '8px', '1': '8px',
'2': '12px', '2': '12px',
@ -12,12 +19,12 @@ module.exports = {
'5': '32px', '5': '32px',
'6': '48px', '6': '48px',
'7': '80px', '7': '80px',
'8': '800px' '8': '800px',
}, },
fontFamily: { fontFamily: {
...defaultTheme.fontFamily, ...defaultTheme.fontFamily,
// serif: ['Didot', 'Didot LT', 'STD', 'Hoefler Text' , 'Garamond', 'Times New Roman', 'serif'] // serif: ['Didot', 'Didot LT', 'STD', 'Hoefler Text' , 'Garamond', 'Times New Roman', 'serif']
serif: ['Playfair Display', 'serif'] serif: ['Playfair Display', 'serif'],
}, },
extend: {}, extend: {},
}, },
@ -25,4 +32,4 @@ module.exports = {
extend: {}, extend: {},
}, },
plugins: [], plugins: [],
} };

10
gatsby/yarn.lock
View File

@ -10973,6 +10973,11 @@ quick-lru@^5.1.1:
resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932" resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA== 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: randombytes@^2.1.0:
version "2.1.0" version "2.1.0"
resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a" resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@ -13616,6 +13621,11 @@ url@^0.11.0:
punycode "1.3.2" punycode "1.3.2"
querystring "0.2.0" 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: use@^3.1.0:
version "3.1.1" version "3.1.1"
resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f" resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"