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,
'indent': ['warn', 2],
'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 }) => {
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.');

4
gatsby/package.json
View File

@ -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",

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

@ -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 (<>
<Helmet>
<title>{name} - Gallery | Chuck Dries</title>
<body className="bg-black" />
<body className="bg-black text-white" />
</Helmet>
<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? */}
@ -95,4 +95,4 @@ export const query = graphql`
`;
export default GalleryImage;
export default GalleryImage;

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);
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">
<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>
@ -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,

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

@ -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 (<>
<Helmet>
<title>Gallery | Chuck Dries</title>
<body className="bg-black" />
<body className="bg-black text-white" />
</Helmet>
<div className="bg-black min-h-screen">
<h1 className="text-2xl">Gallery</h1>
<div className="mx-auto" style={{maxWidth: '1800px'}}>
{/* TODO swap masonry plugin, this one makes really unbalanced columns */}
{/* ...implement manually :sadge: */}
<ResponsiveMasonry
columnsCountBreakPoints={{ 350: 1, 650: 2, 1200: 3 }}
>
<Masonry gutter='5px'>
{images.map(image => {
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>
<MasonryGallery
images={images}
itemsPerRow={{
sm: 2,
md: 3,
lg: 4,
xl: 5,
}}
/>
</div>
</div>
</>);
@ -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 {

4
gatsby/src/utils.js
View File

@ -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);
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 = {
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: [],
}
};

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"
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"