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

WIP sort gallery images by date for prev/next nav btns

Browse Source
This commit is contained in:
Chuck Dries 2021-06-19 14:31:52 -07:00
parent 78e8da5e8e
commit 17e6f300c1
2 changed files with 61 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
gatsby-node.js
View File

@ -6,6 +6,7 @@ const iptc = require('node-iptc');
const Vibrant = require('node-vibrant'); const Vibrant = require('node-vibrant');
const chroma = require('chroma-js'); const chroma = require('chroma-js');
const chalk = require('chalk'); const chalk = require('chalk');
const R = require('ramda');
const readFile = util.promisify(fs.readFile); const readFile = util.promisify(fs.readFile);
@ -143,7 +144,14 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
edges { edges {
node { node {
relativePath, relativePath,
base base,
childImageSharp {
fields {
imageMeta {
dateTaken
}
}
}
} }
} }
} }
@ -156,7 +164,11 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
} }
// 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.js');
const edges = galleryImages.data.allFile.edges; const edges = R.sort((edge) =>
new Date(R.path(['node', 'childImageSharp', 'fields', 'imageMeta', 'dateTaken'], edge)),
galleryImages.data.allFile.edges);
console.log(R.map(R.path(['node', 'childImageSharp', 'fields', 'imageMeta', 'dateTaken']), edges));
edges.forEach(({ node }, index) => { edges.forEach(({ node }, index) => {
const nextImage = index === edges.length - 1 const nextImage = index === edges.length - 1
@ -165,7 +177,6 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
const prevImage = index === 0 const prevImage = index === 0
? null ? null
: edges[index - 1].node.base; : edges[index - 1].node.base;
console.log('next', nextImage);
createPage({ createPage({
path: `photogallery/${node.base}`, path: `photogallery/${node.base}`,

72
src/components/GalleryImage.js
View File

@ -17,7 +17,28 @@ const GalleryImage = ({ data, pageContext }) => {
const image = data.allFile.edges[0].node; const image = data.allFile.edges[0].node;
const ar = getAspectRatio(image); const ar = getAspectRatio(image);
console.log(pageContext); React.useEffect(() => {
const keyListener = (e) => {
switch (e.code) {
case 'ArrowRight': {
if (pageContext.nextImage) {
navigate(`/photogallery/${pageContext.nextImage}/`);
}
return;
}
case 'ArrowLeft': {
if (pageContext.prevImage) {
navigate(`/photogallery/${pageContext.prevImage}/`);
}
return;
}
}
};
document.addEventListener('keydown', keyListener);
return () => {
document.removeEventListener('keydown', keyListener);
};
}, [pageContext]);
const name = getName(image); const name = getName(image);
const meta = getMeta(image); const meta = getMeta(image);
@ -39,30 +60,30 @@ const GalleryImage = ({ data, pageContext }) => {
style={getVibrantToHelmetSafeBodyStyle(vibrant)} style={getVibrantToHelmetSafeBodyStyle(vibrant)}
/> />
</Helmet> </Helmet>
<nav className="mt-0"> <div className="min-h-screen flex flex-col justify-between">
<button <nav className="mt-0">
className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before mr-1" <button
onClick={() => navigate(-1)} className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before mr-1"
type="button" onClick={() => navigate(-1)}
>back</button> type="button"
<Link >back</button>
className="hover:underline text-vibrant-light hover:text-muted-light mx-1" <Link
to="/" className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
>home</Link> to="/"
<Link >home</Link>
className="hover:underline text-vibrant-light hover:text-muted-light mx-1" <Link
to="/photogallery/" className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
>gallery</Link> to="/photogallery/"
{pageContext.prevImage && <Link >gallery</Link>
className="hover:underline text-vibrant-light hover:text-muted-light mx-1" {pageContext.prevImage && <Link
to={`/photogallery/${pageContext.prevImage}/`} className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
>previous</Link>} to={`/photogallery/${pageContext.prevImage}/`}
{pageContext.nextImage && <Link >previous</Link>}
className="hover:underline text-vibrant-light hover:text-muted-light mx-1" {pageContext.nextImage && <Link
to={`/photogallery/${pageContext.nextImage}/`} className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
>next</Link>} to={`/photogallery/${pageContext.nextImage}/`}
</nav> >next</Link>}
<div className="min-h-screen flex flex-col justify-center"> </nav>
<div className={classnames('flex', orientationClasses)}> <div className={classnames('flex', orientationClasses)}>
<div className="flex-grow-0"> <div className="flex-grow-0">
<GatsbyImage <GatsbyImage
@ -110,6 +131,7 @@ const GalleryImage = ({ data, pageContext }) => {
</div>} </div>}
</div> </div>
</div> </div>
<div></div>
</div> </div>
</>); </>);
}; };