WIP add gallery and eslint

gatsby/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  globals: {
+    __PATH_PREFIX__: true,
+  },
+  extends: `react-app`,
+}

gatsby/gatsby-node.js

@@ -1,5 +1,6 @@
 const fs = require('fs');
-const util = require('util')
+const util = require('util');
+const path = require('path');
 const { read } = require('fast-exif');
 const iptc = require('node-iptc');
 
@@ -39,9 +40,7 @@ function transformMetaToNodeData(exifData, iptcData) {
   return {
     exif: exifData?.exif,
     gps,
-    meta: {
+    dateTaken: exifData?.exif?.DateTimeOriginal,
-      dateTaken: exifData?.exif?.DateTimeOriginal
-    },
     iptc: iptcData || undefined
   };
 }
@@ -62,3 +61,44 @@ exports.onCreateNode = async function ({ node, getNode, actions }) {
     });
   }
 }
+
+// Implement the Gatsby API “createPages”. This is called once the
+// data layer is bootstrapped to let plugins create pages from data.
+exports.createPages = async ({ graphql, actions, reporter }) => {
+  const { createPage } = actions;
+  // get all images
+  const galleryImages = await graphql(
+    `
+      {
+        allFile(filter: {
+          sourceInstanceName: { eq: "gallery" }}) {
+          edges {
+            node {
+              relativePath,
+              base
+            }
+          }
+        }
+      }
+    `
+  )
+  // Handle errors
+  if (galleryImages.errors) {
+    reporter.panicOnBuild(`Error while running GraphQL query.`)
+    return
+  }
+  // Create pages for each markdown file.
+  const galleryImageTemplate = path.resolve(`src/templates/gallery-image.js`)
+  galleryImages.data.allFile.edges.forEach(({ node }) => {
+    // const path = node.base
+    createPage({
+      path: `gallery/${node.base}`,
+      component: galleryImageTemplate,
+      // In your blog post template's graphql query, you can use pagePath
+      // as a GraphQL variable to query for data from the markdown file.
+      context: {
+        imageFilename: node.base,
+      },
+    })
+  })
+}

gatsby/package-lock.json

@@ -31,6 +31,9 @@
         "sass": "^1.34.0",
         "styled-components": "^5.3.0",
         "tailwindcss": "^2.1.2"
+      },
+      "devDependencies": {
+        "eslint-config-react-app": "^6.0.0"
       }
     },
     "node_modules/@ardatan/aggregate-error": {

gatsby/package.json

@@ -38,5 +38,8 @@
     "sass": "^1.34.0",
     "styled-components": "^5.3.0",
     "tailwindcss": "^2.1.2"
+  },
+  "devDependencies": {
+    "eslint-config-react-app": "^6.0.0"
   }
 }

gatsby/src/pages/gallery.js

@@ -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

gatsby/src/pages/index.js

@@ -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>
+          <h1 className="italic font-normal text-5xl text-pink-500">Chuck Dries</h1>
-          <h2 className="text-blue-300 text-2xl">Software Engineer in web &amp; VR</h2>
+          <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">
+      <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">Photography</h2>
+        <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

gatsby/src/styles/global.css

@@ -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;
 }

gatsby/src/templates/gallery-image.js

@@ -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

gatsby/src/utils.js

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

gatsby/tailwind.config.js

@@ -17,7 +17,7 @@ module.exports = {
     fontFamily: {
       ...defaultTheme.fontFamily,
       // serif: ['Didot', 'Didot LT', 'STD', 'Hoefler Text' , 'Garamond', 'Times New Roman', 'serif']
-      serif: ['Baskerville', 'Baskerville Old Face', 'Hoefler Text' , 'Garamond', 'Times New Roman', 'serif']
+      serif: ['Playfair Display', 'serif']
     },
     extend: {},
   },