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

Move GalleryImage and separate MetadataItem into component

Browse Source
This commit is contained in:
Chuck Dries 2021-07-10 09:45:25 -07:00
parent 46bcc43688
commit 2d89e3ff4c
5 changed files with 32 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
data/gallery/_DSC4792.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

2
gatsby-node.js
View File

@ -163,7 +163,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
return; return;
} }
// Create pages for each markdown file. // Create pages for each markdown file.
const galleryImageTemplate = path.resolve('src/components/GalleryImage.js'); const galleryImageTemplate = path.resolve('src/components/GalleryImage/GalleryImage.js');
// const diffDate = (a, b) => // const diffDate = (a, b) =>
// new Date(R.path(['node', 'childImageSharp', 'fields', 'imageMeta', 'dateTaken'], a)).getTime() - new Date(R.path(['node', 'childImageSharp', 'fields', 'imageMeta', 'dateTaken'],b)).getTime(); // new Date(R.path(['node', 'childImageSharp', 'fields', 'imageMeta', 'dateTaken'], a)).getTime() - new Date(R.path(['node', 'childImageSharp', 'fields', 'imageMeta', 'dateTaken'],b)).getTime();

58
src/components/GalleryImage.js → src/components/GalleryImage/GalleryImage.js
View File

@ -8,11 +8,12 @@ import {
getVibrant, getVibrant,
getVibrantToHelmetSafeBodyStyle, getVibrantToHelmetSafeBodyStyle,
hasName, hasName,
} from '../utils'; } 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';
import posthog from 'posthog-js'; import posthog from 'posthog-js';
import MetadataItem from './MetadataItem';
const logKeyShortcut = (keyCode) => { const logKeyShortcut = (keyCode) => {
try { try {
@ -128,56 +129,11 @@ const GalleryImage = ({ data, pageContext }) => {
<p className="landscape:mr-2">{meta.iptc.caption}</p> <p className="landscape:mr-2">{meta.iptc.caption}</p>
</div> </div>
{<div className="portrait:border-t-2 border-muted-light portrait:mt-2 mr-2 portrait:mb-1" style={{width: 30}}></div>} {<div className="portrait:border-t-2 border-muted-light portrait:mt-2 mr-2 portrait:mb-1" style={{width: 30}}></div>}
{dateTaken && <MetadataItem aspectRatio={ar} data={dateTaken} icon="calendar-sharp" title="date taken"/>
<div className={classnames('flex items-baseline ml-2 text-lg', <MetadataItem aspectRatio={ar} data={locationString} icon="location-sharp" title="location"/>
ar <= 1 ? 'flex-row-reverse' : 'portrait:flex-row-reverse')} <MetadataItem aspectRatio={ar} data={shutterSpeed} icon="stopwatch-sharp" title="shutter speed" />
title="shutter speed" <MetadataItem aspectRatio={ar} data={meta.exif.FNumber} icon="aperture-sharp" title="aperture" />
> <MetadataItem aspectRatio={ar} data={meta.exif.ISO} icon="film-outline" title="ISO" />
<span className="icon-offset mr-1">
<ion-icon name="calendar"></ion-icon>
</span>
<span className="mr-1">{dateTaken.toLocaleDateString()}</span>
</div>}
{(locationString) &&
<div className={classnames('flex items-baseline ml-2 text-lg',
ar <= 1 ? 'flex-row-reverse' : 'portrait:flex-row-reverse')}
title="location"
>
<span className="icon-offset mr-1">
<ion-icon name="location-sharp"></ion-icon>
</span>
<span className="mr-1">{locationString}</span>
</div>}
{shutterSpeed &&
<div className={classnames('flex items-baseline ml-2 text-lg',
ar <= 1 ? 'flex-row-reverse' : 'portrait:flex-row-reverse')}
title="shutter speed"
>
<span className="icon-offset mr-1">
<ion-icon name="stopwatch-sharp"></ion-icon>
</span>
<span className="mr-1">{shutterSpeed}</span>
</div>}
{meta.exif.FNumber &&
<div className={classnames('flex items-baseline ml-2 text-lg',
ar <= 1 ? 'flex-row-reverse' : 'portrait:flex-row-reverse')}
title="shutter speed"
>
<span className="icon-offset mr-1">
<ion-icon name="aperture-sharp"></ion-icon>
</span>
<span className="mr-1">f/{meta.exif.FNumber}</span>
</div>}
{meta.exif.ISO &&
<div className={classnames('flex items-baseline ml-2 text-lg',
ar <= 1 ? 'flex-row-reverse' : 'portrait:flex-row-reverse')}
title="shutter speed"
>
<span className="icon-offset mr-1">
<ion-icon name="film-outline"></ion-icon>
</span>
<span className="mr-1">{meta.exif.ISO}</span>
</div>}
</div> </div>
</div> </div>
<div></div> <div></div>

21
src/components/GalleryImage/MetadataItem.js Normal file
View File

@ -0,0 +1,21 @@
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">f/{data}</span>
</div>
) : null;
export default MetadataItem;

2
src/pages/index.js
View File

@ -9,8 +9,6 @@ import posthog from 'posthog-js';
import { getVibrantToHelmetSafeBodyStyle, getVibrant, getAspectRatio } from '../utils'; import { getVibrantToHelmetSafeBodyStyle, getVibrant, getAspectRatio } from '../utils';
import { HeroA } from '../components/Index/HeroLink'; import { HeroA } from '../components/Index/HeroLink';
// TODO: better text colors in situations of low contrast
const env = process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || 'development'; const env = process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || 'development';
const getDifferentRand = (range, lastNs, iterations = 0) => { const getDifferentRand = (range, lastNs, iterations = 0) => {