Move gatsby data to top level
This commit is contained in:
Chuck Dries
112
src/components/GalleryImage.js
Normal file
112
src/components/GalleryImage.js
Normal file
@@ -0,0 +1,112 @@
|
||||
import React from 'react';
|
||||
import { graphql, Link } from 'gatsby';
|
||||
import {
|
||||
getAspectRatio,
|
||||
getMeta,
|
||||
getName,
|
||||
getShutterFractionFromExposureTime,
|
||||
getVibrant,
|
||||
getVibrantToHelmetSafeBodyStyle,
|
||||
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 = getAspectRatio(image);
|
||||
|
||||
// TODO: metadata icons
|
||||
|
||||
const name = getName(image);
|
||||
const meta = getMeta(image);
|
||||
const vibrant = getVibrant(image, true);
|
||||
|
||||
const orientationClasses = ar > 1 ? 'flex-col mx-auto' : 'portrait:mx-auto landscape:mx-4 landscape:flex-row-reverse portrait:flex-col';
|
||||
console.log(ar, orientationClasses);
|
||||
const shutterSpeed = React.useMemo(() => getShutterFractionFromExposureTime(meta.exif.ExposureTime || 0), [meta]);
|
||||
return (<>
|
||||
<Helmet>
|
||||
<title>{name} - Gallery | Chuck Dries</title>
|
||||
<body
|
||||
className="text-vibrant-light bg-vibrant-dark"
|
||||
style={getVibrantToHelmetSafeBodyStyle(vibrant)}
|
||||
/>
|
||||
</Helmet>
|
||||
<Link className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before absolute" to="/photogallery">gallery</Link>
|
||||
<div className="min-h-screen pt-4 flex flex-col justify-center">
|
||||
<div className={classnames('flex', orientationClasses)}>
|
||||
<div className="flex-grow-0">
|
||||
<GatsbyImage
|
||||
alt={name}
|
||||
className=""
|
||||
image={getImage(image)}
|
||||
key={image.base}
|
||||
loading="eager"
|
||||
objectFit="contain"
|
||||
style={{
|
||||
maxWidth: `calc(max(90vh, 500px) * ${ar})`,
|
||||
maxHeight: '90vh',
|
||||
// minHeight: '500px',
|
||||
}} />
|
||||
</div>
|
||||
<div className={classnames('flex-shrink-0 mx-2 flex flex-row', ar <= 1 && 'pt-4 flex-col flex-auto text-right')}>
|
||||
<div className="flex-auto mr-1">
|
||||
{hasName(image) && <h1 className="text-2xl mt-2 font-serif">{name}</h1>}
|
||||
<p className="mr-1">{meta.iptc.caption}</p>
|
||||
</div>
|
||||
{shutterSpeed && <p className="mr-1">Shutter speed: {shutterSpeed}</p>}
|
||||
{meta.exif.FNumber && <p className="mr-1">Aperture: f/{meta.exif.FNumber}</p>}
|
||||
{meta.exif.ISO && <p className="mr-1">ISO: {meta.exif.ISO}</p>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>);
|
||||
};
|
||||
|
||||
export const query = graphql`
|
||||
query GalleryImage($imageFilename: String) {
|
||||
allFile(filter: {sourceInstanceName: {eq: "gallery"}, base: {eq: $imageFilename}}) {
|
||||
edges {
|
||||
node {
|
||||
base
|
||||
childImageSharp{
|
||||
fluid {
|
||||
aspectRatio
|
||||
}
|
||||
gatsbyImageData(
|
||||
layout: CONSTRAINED
|
||||
# placeholder: BLURRED
|
||||
placeholder: DOMINANT_COLOR
|
||||
# placeholder: TRACED_SVG
|
||||
height: 2160
|
||||
)
|
||||
fields {
|
||||
imageMeta {
|
||||
dateTaken
|
||||
iptc {
|
||||
caption
|
||||
object_name
|
||||
keywords
|
||||
}
|
||||
exif {
|
||||
FNumber
|
||||
ExposureTime
|
||||
ISO
|
||||
}
|
||||
vibrant {
|
||||
...VibrantColors
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
`;
|
||||
|
||||
export default GalleryImage;
|
||||
16
src/components/IndexComponents.js
Normal file
16
src/components/IndexComponents.js
Normal file
@@ -0,0 +1,16 @@
|
||||
import * as React from 'react';
|
||||
import classnames from 'classnames';
|
||||
|
||||
export const HeroA = ({
|
||||
href,
|
||||
children,
|
||||
className,
|
||||
isClient,
|
||||
...linkProps
|
||||
}) => (
|
||||
<a
|
||||
className={classnames('mx-1 underline', isClient && 'text-muted-light hover:text-vibrant-light', className)}
|
||||
href={href}
|
||||
{...linkProps}
|
||||
>{children}</a>
|
||||
);
|
||||
72
src/components/MasonryGallery.js
Normal file
72
src/components/MasonryGallery.js
Normal file
@@ -0,0 +1,72 @@
|
||||
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';
|
||||
import useBreakpoint from 'use-breakpoint';
|
||||
|
||||
import themeBreakpoints from '../breakpoints';
|
||||
|
||||
const MasonryGallery = ({ images, itemsPerRow: itemsPerRowByBreakpoint }) => {
|
||||
const breakpoints = React.useMemo(() =>
|
||||
R.pick(R.keys(itemsPerRowByBreakpoint), themeBreakpoints)
|
||||
, [itemsPerRowByBreakpoint]);
|
||||
console.log(breakpoints);
|
||||
|
||||
const { breakpoint } = useBreakpoint(breakpoints, 'sm');
|
||||
|
||||
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]);
|
||||
|
||||
const itemsPerRow = itemsPerRowByBreakpoint[breakpoint];
|
||||
const rowAspectRatioSumsForCurrentBP = rowAspectRatioSumsByBreakpoint[breakpoint];
|
||||
|
||||
return (
|
||||
<div
|
||||
className="w-full"
|
||||
style={{
|
||||
position: 'relative',
|
||||
}}
|
||||
// style={{ maxWidth: minWidth }}
|
||||
>
|
||||
{images.map((image, i) => {
|
||||
const rowIndex = Math.floor(i / itemsPerRow);
|
||||
const rowAspectRatioSum = rowAspectRatioSumsForCurrentBP[rowIndex];
|
||||
// const width = ((getAspectRatio(image) / rowAspectRatioSum) * 100).toFixed(10);
|
||||
const ar = getAspectRatio(image);
|
||||
const widthNumber = ((ar / rowAspectRatioSum) * 100).toFixed(5);
|
||||
const width = `${widthNumber}%`;
|
||||
// const width = `${widthNumber}%`;
|
||||
// console.log('ars', rowAspectRatioSum);
|
||||
if (i === 0) {
|
||||
// console.log(rowIndex, rowAspectRatioSum);
|
||||
// console.log(getName(image), width);
|
||||
}
|
||||
return (
|
||||
<Link
|
||||
className="inline-block"
|
||||
key={`${image.base}`}
|
||||
state={{modal: true}}
|
||||
style={{
|
||||
width,
|
||||
// marginLeft: '8px',
|
||||
}} to={`/photogallery/${image.base}`}
|
||||
>
|
||||
<GatsbyImage
|
||||
alt={getName(image)}
|
||||
className="w-full"
|
||||
// style={{ width }}
|
||||
image={getImage(image)}
|
||||
objectFit="cover"
|
||||
/>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>);
|
||||
// return null;
|
||||
};
|
||||
|
||||
export default MasonryGallery;
|
||||
0
src/components/resume/ExperienceSection.js
Normal file
0
src/components/resume/ExperienceSection.js
Normal file
29
src/components/resume/ResumeLayout.js
Normal file
29
src/components/resume/ResumeLayout.js
Normal file
@@ -0,0 +1,29 @@
|
||||
import * as React from 'react';
|
||||
import classnames from 'classnames';
|
||||
import { MDXProvider } from '@mdx-js/react';
|
||||
|
||||
import '../../styles/resume.css';
|
||||
|
||||
const MyH1 = props => <h1 style={{ color: 'tomato' }} {...props} />;
|
||||
// const MyParagraph = props => (
|
||||
// <p style={{ fontSize: '18px', lineHeight: 1.6 }} {...props} />
|
||||
// );
|
||||
|
||||
const components = {
|
||||
h1: MyH1,
|
||||
// p: MyParagraph,
|
||||
};
|
||||
|
||||
|
||||
const ResumeLayout = ({ pageContext, children }) => {
|
||||
console.log('pc', pageContext);
|
||||
return (
|
||||
<MDXProvider components={components}>
|
||||
<div className={classnames('font-serif container mx-auto resume')}>{children}</div>
|
||||
</MDXProvider>
|
||||
);
|
||||
};
|
||||
|
||||
// TODO: can I use custom components for just this layout/page?
|
||||
|
||||
export default ResumeLayout;
|
||||
Reference in New Issue
Block a user