more work on gallery - contain images in page and load tailwind on all pages

gatsby/.eslintrc.js

@@ -2,5 +2,12 @@ module.exports = {
   globals: {
     __PATH_PREFIX__: true,
   },
-  extends: `react-app`,
+  plugins: [
+    "react"
+  ],
+  extends: [
+    `react-app`,
+    "eslint:recommended",
+    "plugin:react/recommended"
+  ]
 }

gatsby/gatsby-browser.js

@@ -0,0 +1 @@
+import './src/styles/global.css';

gatsby/gatsby-ssr.js

@@ -0,0 +1 @@
+import './src/styles/global.css';

gatsby/src/pages/gallery.js

@@ -2,7 +2,7 @@ import * as React from "react"
 import { graphql, Link } from 'gatsby'
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
 import { getMeta } from "../utils"
-
+import { Helmet } from "react-helmet"
 
 const GalleryPage = ({ data }) => {
   const images = React.useMemo(() =>
@@ -20,9 +20,13 @@ const GalleryPage = ({ data }) => {
         }
         return 0;
       }) // TODO HERE
-    , data)
+    , [data])
-  return (<div className="bg-black">
 
+  return (<>
+  <Helmet>
+    <title>Gallery | Chuck Dries</title>
+  </Helmet>
+  <div className="bg-black">
     <h1 className="text-2xl">Gallery</h1>
     {images.map(image => {
       console.log('ar', image.childImageSharp)
@@ -37,7 +41,7 @@ const GalleryPage = ({ data }) => {
       return (
         // <div style={{ maxHeight: '500px' }} className="flex-shrink-0 mr-4 scroll-snap-start bg-red-300">
         // .
-        <>
+        <React.Fragment key={name}>
           <Link to={`/gallery/${image.base}`}>
             {/* <span>{name}</span> */}
             <GatsbyImage
@@ -51,10 +55,11 @@ const GalleryPage = ({ data }) => {
               image={getImage(image)}
               alt={name} />
           </Link>
-        </>
+        </React.Fragment>
       );
     })}
-  </div>)
+  </div>
+  </>)
 }
 
 export const query = graphql`

gatsby/src/pages/index.js

@@ -2,10 +2,6 @@ import * as React from "react"
 import { graphql } from 'gatsby'
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
 
-import '../styles/global.css';
-// import "../styles/gallery.scss"
-// import "../styles/index.scss"
-
 // markup
 const IndexPage = ({ data }) => {
   const images = React.useMemo(() => data.allFile.edges.map(edge => edge.node, [data]))

gatsby/src/templates/gallery-image.js

@@ -2,29 +2,41 @@ import React from "react"
 import { graphql } from 'gatsby'
 import { getMeta, getName } from "../utils";
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
+import { Helmet } from "react-helmet";
 
 const GalleryImage = ({ pageContext, data }) => {
   const image = data.allFile.edges[0].node
   console.log(getMeta(image));
   const name = getName(image);
-  return (
+  return (<>
-    <div className="bg-black min-h-screen">
+  <Helmet>
+    <title>{name} - Gallery | Chuck Dries</title>
+  </Helmet>
+    <div className="bg-black h-screen w-screen">
       <h1>{name}</h1>
       <GatsbyImage
         className=""
+        loading='eager'
+        objectFit='contain'
         style={{
-          width: '100vw',
+          // width: '100%',
-          maxHeight: '100%'
+          // height: '100%',
+          // objectFit: 'contain',
+          // objectPosition: 'center',
+          // maxWidth: 'min(100vw, 1500px)',
+          // maxWidth: '100%',
+          // maxHeight: '100vh'
           // maxHeight: "800px"
           // width: '400px',
-          // height: '100%'
+          width: '100%',
+          height: '100%'
         }}
         key={image.base}
         image={getImage(image)}
         alt={name} />
       <p>{getMeta(image).iptc.caption}</p>
     </div>
-  );
+  </>);
 }
 
 export const query = graphql`
@@ -41,7 +53,9 @@ export const query = graphql`
           gatsbyImageData(
             layout: CONSTRAINED
             placeholder: BLURRED
-            width: 1920
+            # placeholder: DOMINANT_COLOR
+            # placeholder: TRACED_SVG
+            height: 2048
           )
           fields {
             imageMeta {