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

WIP add gallery and eslint

Browse Source
This commit is contained in:
Chuck Dries
2021-06-13 10:49:28 -07:00
parent 4b820352ea
commit 050aa0415a
12 changed files with 240 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
gatsby/src/pages/gallery.js Normal file
View File

@@ -0,0 +1,97 @@
import * as React from "react"
import { graphql, Link } from 'gatsby'
import { GatsbyImage, getImage } from "gatsby-plugin-image"
import { getMeta } from "../utils"
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
, data)
return (<div className="bg-black">
<h1 className="text-2xl">Gallery</h1>
{images.map(image => {
console.log('ar', image.childImageSharp)
const name = getMeta(image).iptc.object_name || image.base
// const {
// name: object_name,
// aspectRatio
// }
// const file = data.allFile
// console.log(fileName)
// return <></>
return (
// <div style={{ maxHeight: '500px' }} className="flex-shrink-0 mr-4 scroll-snap-start bg-red-300">
// .
<>
<Link to={`/gallery/${image.base}`}>
{/* <span>{name}</span> */}
<GatsbyImage
className=""
style={{
// maxHeight: "800px"
// width: '400px',
// height: '100%'
}}
key={image.base}
image={getImage(image)}
alt={name} />
</Link>
</>
);
})}
</div>)
}
export const query = graphql`
query GalleryPageQuery {
allFile(filter: {
sourceInstanceName: { eq: "gallery" }}) {
edges {
node {
relativePath,
base,
childImageSharp{
fluid {
aspectRatio
},
gatsbyImageData(
layout: CONSTRAINED,
width: 400
)
fields {
imageMeta {
dateTaken
iptc {
caption
object_name
}
exif {
FNumber
ExposureTime
ShutterSpeedValue
ISO
}
}
}
}
}
}
}
}`;
export default GalleryPage

18
gatsby/src/pages/index.js
View File

@@ -13,10 +13,10 @@ const IndexPage = ({ data }) => {
return (
<main className="font-serif">
<section className="m-2 h-1/2 py-6 intro flex flex-col justify-center flex-auto bg-black rounded-xl">
<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-semibold text-6xl text-pink-600">Chuck Dries</h1>
<h2 className="text-blue-300 text-2xl">Software Engineer in web &amp; VR</h2>
<h1 className="italic font-normal text-5xl text-pink-500">Chuck Dries</h1>
<h2 className="italic text-blue-300 text-2xl">Software Engineer in web &amp; VR</h2>
<ul>
<li>Software Developer, <span className="text-gray-300 italic">Axosoft</span></li>
<li><a className="hover:text-pink-400 underline" href="mailto:chuck@chuckdries.com">chuck@chuckdries.com</a> / <span>602.618.0414</span></li>
@@ -39,8 +39,8 @@ const IndexPage = ({ data }) => {
🎉🎉🎉
</span>
</h1> */}
<section className="mt-0 m-2 max-w-full flex flex-col bg-black text-gray-200 py-2 rounded-xl">
<h2 className="ml-6 text-2xl">Photography</h2>
<section className="mt-0 m-2 max-w-full flex flex-col shadow-md bg-black text-gray-200 py-2 rounded-xl">
<h2 className="ml-6 text-2xl mb-2">Photography</h2>
<div className="gallery gallery flex-auto flex overflow-x-scroll w-full scroll-snap-x scroll-padding-6 ">
{images.map(image => {
const name = image.childImageSharp.fields.imageMeta.iptc.object_name || image.base
@@ -81,16 +81,14 @@ query HomePageGallery {
childImageSharp{
gatsbyImageData(
layout: CONSTRAINED,
placeholder: BLURRED,
placeholder: DOMINANT_COLOR,
# width: 400
# height: 900
height: 400
height: 600
)
fields {
imageMeta {
meta {
dateTaken
}
dateTaken
iptc {
caption
object_name

8
gatsby/src/styles/global.css
View File

@@ -1,3 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital@0;1&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
@@ -27,5 +29,7 @@
margin-left: theme('spacing.6')
}
body {
@apply bg-gray-900 text-white;
}
@apply bg-gray-100;
/* @apply bg-black; */
@apply text-white;
}

68
gatsby/src/templates/gallery-image.js Normal file
View File

@@ -0,0 +1,68 @@
import React from "react"
import { graphql } from 'gatsby'
import { getMeta, getName } from "../utils";
import { GatsbyImage, getImage } from "gatsby-plugin-image"
const GalleryImage = ({ pageContext, data }) => {
const image = data.allFile.edges[0].node
console.log(getMeta(image));
const name = getName(image);
return (
<div className="bg-black h-screen">
<h1>{name}</h1>
<GatsbyImage
className=""
style={{
// maxHeight: "800px"
// width: '400px',
// height: '100%'
}}
key={image.base}
image={getImage(image)}
alt={name} />
<p>{getMeta(image).iptc.caption}</p>
</div>
);
}
export const query = graphql`
query GalleryImage($imageFilename: String) {
allFile(filter: {sourceInstanceName: {eq: "gallery"}, base: {eq: $imageFilename}}) {
edges {
node {
relativePath
base
childImageSharp{
fluid {
aspectRatio
}
gatsbyImageData(
layout: FULL_WIDTH
placeholder: BLURRED
# width: 400
)
fields {
imageMeta {
dateTaken
iptc {
caption
object_name
}
exif {
FNumber
ExposureTime
ShutterSpeedValue
ISO
}
}
}
}
}
}
}
}
`
export default GalleryImage

3
gatsby/src/utils.js Normal file
View File

@@ -0,0 +1,3 @@
export const getMeta = (image) => image.childImageSharp.fields.imageMeta
export const getName = (image) => getMeta(image).iptc.object_name || image.base