run prettier
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { graphql, navigate, Link } from 'gatsby';
|
||||
import React from "react";
|
||||
import { graphql, navigate, Link } from "gatsby";
|
||||
import {
|
||||
getAspectRatio,
|
||||
getMeta,
|
||||
@@ -8,19 +8,21 @@ import {
|
||||
getVibrant,
|
||||
getVibrantToHelmetSafeBodyStyle,
|
||||
hasName,
|
||||
} from '../../utils';
|
||||
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import classnames from 'classnames';
|
||||
import posthog from 'posthog-js';
|
||||
import MetadataItem from './MetadataItem';
|
||||
} from "../../utils";
|
||||
import { GatsbyImage, getImage } from "gatsby-plugin-image";
|
||||
import { Helmet } from "react-helmet";
|
||||
import classnames from "classnames";
|
||||
import posthog from "posthog-js";
|
||||
import MetadataItem from "./MetadataItem";
|
||||
|
||||
const logKeyShortcut = (keyCode) => {
|
||||
try {
|
||||
// eslint-disable-next-line
|
||||
posthog.capture('[key shortcut]', { keyCode });
|
||||
window.plausible('KeyShortcut', {props: { keyCode }});
|
||||
} catch (e) {/* do nothing */}
|
||||
posthog.capture("[key shortcut]", { keyCode });
|
||||
window.plausible("KeyShortcut", { props: { keyCode } });
|
||||
} catch (e) {
|
||||
/* do nothing */
|
||||
}
|
||||
};
|
||||
|
||||
const GalleryImage = ({ data, pageContext }) => {
|
||||
@@ -29,32 +31,31 @@ const GalleryImage = ({ data, pageContext }) => {
|
||||
|
||||
React.useEffect(() => {
|
||||
const keyListener = (e) => {
|
||||
|
||||
switch (e.code) {
|
||||
case 'ArrowRight': {
|
||||
logKeyShortcut(e.code);
|
||||
if (pageContext.nextImage) {
|
||||
navigate(`/photogallery/${pageContext.nextImage}/`);
|
||||
case "ArrowRight": {
|
||||
logKeyShortcut(e.code);
|
||||
if (pageContext.nextImage) {
|
||||
navigate(`/photogallery/${pageContext.nextImage}/`);
|
||||
}
|
||||
return;
|
||||
}
|
||||
return;
|
||||
}
|
||||
case 'ArrowLeft': {
|
||||
logKeyShortcut(e.code);
|
||||
if (pageContext.prevImage) {
|
||||
navigate(`/photogallery/${pageContext.prevImage}/`);
|
||||
case "ArrowLeft": {
|
||||
logKeyShortcut(e.code);
|
||||
if (pageContext.prevImage) {
|
||||
navigate(`/photogallery/${pageContext.prevImage}/`);
|
||||
}
|
||||
return;
|
||||
}
|
||||
case "Escape":
|
||||
case "KeyG": {
|
||||
logKeyShortcut(e.code);
|
||||
navigate("/photogallery/");
|
||||
}
|
||||
return;
|
||||
}
|
||||
case 'Escape':
|
||||
case 'KeyG': {
|
||||
logKeyShortcut(e.code);
|
||||
navigate('/photogallery/');
|
||||
}
|
||||
}
|
||||
};
|
||||
document.addEventListener('keydown', keyListener);
|
||||
document.addEventListener("keydown", keyListener);
|
||||
return () => {
|
||||
document.removeEventListener('keydown', keyListener);
|
||||
document.removeEventListener("keydown", keyListener);
|
||||
};
|
||||
}, [pageContext]);
|
||||
|
||||
@@ -62,128 +63,193 @@ const GalleryImage = ({ data, pageContext }) => {
|
||||
const meta = getMeta(image);
|
||||
let locationString;
|
||||
if (meta.iptc.city || meta.iptc.province_or_state) {
|
||||
const location = [meta.iptc.city, meta.iptc.province_or_state].filter(Boolean);
|
||||
locationString = location.join(', ');
|
||||
const location = [meta.iptc.city, meta.iptc.province_or_state].filter(
|
||||
Boolean
|
||||
);
|
||||
locationString = location.join(", ");
|
||||
}
|
||||
const vibrant = getVibrant(image, true);
|
||||
|
||||
const orientationClasses = ar > 1 ? 'flex-col mx-auto' : 'portrait:mx-auto landscape:mx-5 landscape:flex-row-reverse portrait:flex-col';
|
||||
const shutterSpeed = React.useMemo(() => getShutterFractionFromExposureTime(meta.exif.ExposureTime || 0), [meta]);
|
||||
const orientationClasses =
|
||||
ar > 1
|
||||
? "flex-col mx-auto"
|
||||
: "portrait:mx-auto landscape:mx-5 landscape:flex-row-reverse portrait:flex-col";
|
||||
const shutterSpeed = React.useMemo(
|
||||
() => getShutterFractionFromExposureTime(meta.exif.ExposureTime || 0),
|
||||
[meta]
|
||||
);
|
||||
const dateTaken = React.useMemo(() => new Date(meta.dateTaken), [meta]);
|
||||
return (<>
|
||||
<Helmet>
|
||||
<title>{name} - Gallery | Chuck Dries</title>
|
||||
<body
|
||||
className="text-vibrant-light bg-vibrant-dark"
|
||||
style={getVibrantToHelmetSafeBodyStyle(vibrant)}
|
||||
/>
|
||||
</Helmet>
|
||||
<div className="min-h-screen flex flex-col justify-between">
|
||||
<nav className="mt-1 ml-1 text-lg mb-4">
|
||||
<button
|
||||
className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before mr-1"
|
||||
onClick={() => navigate(-1)}
|
||||
type="button"
|
||||
>back</button>
|
||||
<Link
|
||||
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
|
||||
to="/"
|
||||
>home</Link>
|
||||
<Link
|
||||
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
|
||||
to="/photogallery/"
|
||||
>gallery <span className="bg-gray-300 text-black">esc</span></Link>
|
||||
{pageContext.prevImage && <Link
|
||||
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
|
||||
to={`/photogallery/${pageContext.prevImage}/`}
|
||||
>previous <span className="bg-gray-300 text-black">⭠</span></Link>}
|
||||
{pageContext.nextImage && <Link
|
||||
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
|
||||
to={`/photogallery/${pageContext.nextImage}/`}
|
||||
>next <span className="bg-gray-300 text-black">⭢</span></Link>}
|
||||
</nav>
|
||||
<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 portrait:items-end', ar <= 1
|
||||
? 'pt-5 flex-col flex-auto text-right'
|
||||
: 'portrait:pt-5 portrait:flex-col portrait:text-right'
|
||||
)}>
|
||||
<div className="flex-auto mr-2">
|
||||
<p className="text-muted-light font-mono text-sm m-0 mt-1">{image.base}</p>
|
||||
{hasName(image) && <h1 className="text-4xl mt-0 font-serif">{name}</h1>}
|
||||
<p className="landscape:mr-2">{meta.iptc.caption}</p>
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{name} - Gallery | Chuck Dries</title>
|
||||
<body
|
||||
className="text-vibrant-light bg-vibrant-dark"
|
||||
style={getVibrantToHelmetSafeBodyStyle(vibrant)}
|
||||
/>
|
||||
</Helmet>
|
||||
<div className="min-h-screen flex flex-col justify-between">
|
||||
<nav className="mt-1 ml-1 text-lg mb-4">
|
||||
<button
|
||||
className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before mr-1"
|
||||
onClick={() => navigate(-1)}
|
||||
type="button"
|
||||
>
|
||||
back
|
||||
</button>
|
||||
<Link
|
||||
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
|
||||
to="/"
|
||||
>
|
||||
home
|
||||
</Link>
|
||||
<Link
|
||||
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
|
||||
to="/photogallery/"
|
||||
>
|
||||
gallery <span className="bg-gray-300 text-black">esc</span>
|
||||
</Link>
|
||||
{pageContext.prevImage && (
|
||||
<Link
|
||||
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
|
||||
to={`/photogallery/${pageContext.prevImage}/`}
|
||||
>
|
||||
previous <span className="bg-gray-300 text-black">⭠</span>
|
||||
</Link>
|
||||
)}
|
||||
{pageContext.nextImage && (
|
||||
<Link
|
||||
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
|
||||
to={`/photogallery/${pageContext.nextImage}/`}
|
||||
>
|
||||
next <span className="bg-gray-300 text-black">⭢</span>
|
||||
</Link>
|
||||
)}
|
||||
</nav>
|
||||
<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 portrait:items-end",
|
||||
ar <= 1
|
||||
? "pt-5 flex-col flex-auto text-right"
|
||||
: "portrait:pt-5 portrait:flex-col portrait:text-right"
|
||||
)}
|
||||
>
|
||||
<div className="flex-auto mr-2">
|
||||
<p className="text-muted-light font-mono text-sm m-0 mt-1">
|
||||
{image.base}
|
||||
</p>
|
||||
{hasName(image) && (
|
||||
<h1 className="text-4xl mt-0 font-serif">{name}</h1>
|
||||
)}
|
||||
<p className="landscape:mr-2">{meta.iptc.caption}</p>
|
||||
</div>
|
||||
{
|
||||
<div
|
||||
className="portrait:border-t-2 border-muted-light portrait:mt-2 mr-2 portrait:mb-1"
|
||||
style={{ width: 30 }}
|
||||
></div>
|
||||
}
|
||||
<MetadataItem
|
||||
aspectRatio={ar}
|
||||
data={dateTaken.toLocaleDateString()}
|
||||
icon="calendar-sharp"
|
||||
title="date taken"
|
||||
/>
|
||||
<MetadataItem
|
||||
aspectRatio={ar}
|
||||
data={locationString}
|
||||
icon="location-sharp"
|
||||
title="location"
|
||||
/>
|
||||
<MetadataItem
|
||||
aspectRatio={ar}
|
||||
data={shutterSpeed}
|
||||
icon="stopwatch-sharp"
|
||||
title="shutter speed"
|
||||
/>
|
||||
<MetadataItem
|
||||
aspectRatio={ar}
|
||||
data={`f/${meta.exif.FNumber}`}
|
||||
icon="aperture-sharp"
|
||||
title="aperture"
|
||||
/>
|
||||
<MetadataItem
|
||||
aspectRatio={ar}
|
||||
data={meta.exif.ISO}
|
||||
icon="film-outline"
|
||||
title="ISO"
|
||||
/>
|
||||
</div>
|
||||
{<div className="portrait:border-t-2 border-muted-light portrait:mt-2 mr-2 portrait:mb-1" style={{width: 30}}></div>}
|
||||
<MetadataItem aspectRatio={ar} data={dateTaken.toLocaleDateString()} icon="calendar-sharp" title="date taken"/>
|
||||
<MetadataItem aspectRatio={ar} data={locationString} icon="location-sharp" title="location"/>
|
||||
<MetadataItem aspectRatio={ar} data={shutterSpeed} icon="stopwatch-sharp" title="shutter speed" />
|
||||
<MetadataItem aspectRatio={ar} data={`f/${meta.exif.FNumber}`} icon="aperture-sharp" title="aperture" />
|
||||
<MetadataItem aspectRatio={ar} data={meta.exif.ISO} icon="film-outline" title="ISO" />
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<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
|
||||
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
|
||||
)
|
||||
}
|
||||
gatsbyImageData(
|
||||
layout: CONSTRAINED
|
||||
# placeholder: BLURRED
|
||||
placeholder: DOMINANT_COLOR
|
||||
# placeholder: TRACED_SVG
|
||||
height: 2160
|
||||
)
|
||||
}
|
||||
fields {
|
||||
imageMeta {
|
||||
dateTaken
|
||||
iptc {
|
||||
caption
|
||||
object_name
|
||||
keywords
|
||||
city
|
||||
province_or_state
|
||||
}
|
||||
exif {
|
||||
FNumber
|
||||
ExposureTime
|
||||
ISO
|
||||
}
|
||||
vibrant {
|
||||
...VibrantColors
|
||||
fields {
|
||||
imageMeta {
|
||||
dateTaken
|
||||
iptc {
|
||||
caption
|
||||
object_name
|
||||
keywords
|
||||
city
|
||||
province_or_state
|
||||
}
|
||||
exif {
|
||||
FNumber
|
||||
ExposureTime
|
||||
ISO
|
||||
}
|
||||
vibrant {
|
||||
...VibrantColors
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
`;
|
||||
|
||||
export default GalleryImage;
|
||||
|
||||
@@ -1,21 +1,20 @@
|
||||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
import classNames from "classnames";
|
||||
import React from "react";
|
||||
|
||||
const MetadataItem = ({
|
||||
aspectRatio,
|
||||
icon,
|
||||
data,
|
||||
title,
|
||||
}) => data ? (
|
||||
<div className={classNames('flex items-baseline ml-2 text-lg',
|
||||
aspectRatio <= 1 ? 'flex-row-reverse' : 'portrait:flex-row-reverse')}
|
||||
title={title}
|
||||
>
|
||||
<span className="icon-offset mr-1">
|
||||
<ion-icon name={icon}></ion-icon>
|
||||
</span>
|
||||
<span className="mr-1">{data}</span>
|
||||
</div>
|
||||
) : null;
|
||||
const MetadataItem = ({ aspectRatio, icon, data, title }) =>
|
||||
data ? (
|
||||
<div
|
||||
className={classNames(
|
||||
"flex items-baseline ml-2 text-lg",
|
||||
aspectRatio <= 1 ? "flex-row-reverse" : "portrait:flex-row-reverse"
|
||||
)}
|
||||
title={title}
|
||||
>
|
||||
<span className="icon-offset mr-1">
|
||||
<ion-icon name={icon}></ion-icon>
|
||||
</span>
|
||||
<span className="mr-1">{data}</span>
|
||||
</div>
|
||||
) : null;
|
||||
|
||||
export default MetadataItem;
|
||||
export default MetadataItem;
|
||||
|
||||
Reference in New Issue
Block a user