add mdx and switch to yarn

gatsby/gatsby-node.js

@@ -84,15 +84,15 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
   )
   // Handle errors
   if (galleryImages.errors) {
-    reporter.panicOnBuild(`Error while running GraphQL query.`)
+    reporter.panicOnBuild('Error while running GraphQL query.')
     return
   }
   // Create pages for each markdown file.
-  const galleryImageTemplate = path.resolve(`src/templates/gallery-image.js`)
+  const galleryImageTemplate = path.resolve('src/components/gallery-image.js')
   galleryImages.data.allFile.edges.forEach(({ node }) => {
     // const path = node.base
     createPage({
-      path: `gallery/${node.base}`,
+      path: `photogallery/${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.

gatsby/package.json

@@ -24,7 +24,7 @@
     "gatsby": "^3.4.1",
     "gatsby-plugin-image": "^1.6.0",
     "gatsby-plugin-manifest": "^3.6.0",
-    "gatsby-plugin-mdx": "^2.6.0",
+    "gatsby-plugin-mdx": "^2.7.1",
     "gatsby-plugin-postcss": "^4.6.0",
     "gatsby-plugin-react-helmet": "^4.6.0",
     "gatsby-plugin-sass": "^4.6.0",
@@ -32,7 +32,7 @@
     "gatsby-source-filesystem": "^3.6.0",
     "gatsby-transformer-sharp": "^3.6.0",
     "node-iptc": "^1.0.5",
-    "postcss": "^8.2.6",
+    "postcss": "^8.3.4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",

gatsby/src/pages/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { graphql } from 'gatsby'
+import { graphql, Link } from 'gatsby'
 import { GatsbyImage, getImage } from 'gatsby-plugin-image'
 
 // markup
@@ -36,7 +36,7 @@ const IndexPage = ({ data }) => {
         </span>
       </h1> */}
       <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>
+        <h2 className="ml-6 text-2xl mb-2"><Link to='/photogallery'>Photography</Link></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

gatsby/src/pages/photogallery.js

@@ -43,7 +43,7 @@ const GalleryPage = ({ data }) => {
             const name = getMeta(image).iptc.object_name || image.base
             return (
               <React.Fragment key={name}>
-                <Link state={{modal: true}} to={`/gallery/${image.base}`}>
+                <Link state={{modal: true}} to={`/photogallery/${image.base}`}>
                   <GatsbyImage
                     key={image.base}
                     image={getImage(image)}

gatsby/src/pages/resume.mdx

@@ -0,0 +1,7 @@
+---
+title: Charles Dries Resume
+---
+
+# Hello, World!
+
+<h1>{props.pageContext.frontmatter.title}</h1>

gatsby/src/styles/gallery.scss

@@ -1,30 +0,0 @@
-.gallery {
-  width: 100%;
-  // aspect-ratio: 5/3;
-  background: black;
-  display: flex;
-  overflow-x: scroll;
-  scroll-snap-type: x mandatory;
-  padding: 2em 0;
-  scroll-padding: 3em;
-  // &::before {
-  //   content: ".";
-  //   background: linear-gradient(-90deg, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 04, 1) 100%);
-  //   display: block;
-  //   width: 120px;
-  //   position: absolute;
-  //   top: 0;
-  //   left: 0;
-  //   height: 100%;
-  // }
-
-  .gatsby-image-wrapper {
-    aspect-ratio: 3/2;
-    width: 400px;
-    flex-shrink: 0;
-    // height: 280px;
-    // width: 350px;
-    scroll-snap-align: start;
-    margin-left: 2em;
-  }
-}

gatsby/src/styles/global.css

@@ -21,15 +21,25 @@
     scroll-snap-align: start;
   }
   .scroll-padding-6 {
-    scroll-padding: theme('spacing.6')
+    scroll-padding: theme('spacing.6');
   }
 }
 
-.gallery-img:first-child {
-  margin-left: theme('spacing.6')
-}
 body {
   @apply bg-gray-100;
   /* @apply bg-black; */
   @apply text-white;
 }
+
+h1 {
+  @apply text-2xl;
+}
+h2 {
+  @apply text-xl;
+}
+h3 {
+  @apply text-lg;
+}
+a {
+  @apply text-blue-600;
+}

gatsby/src/styles/index.scss

@@ -1,3 +0,0 @@
-* {
-  box-sizing: border-box;
-}