create layout and stylesheet for resume markdown

gatsby/.eslintrc.js

@@ -18,6 +18,7 @@ module.exports = {
   ],
   'rules': {
     'react/prop-types': 0,
-    'quotes': ['warn', 'single']
+    'quotes': ['warn', 'single'],
+    'semi': 1
   }
-}
+};

gatsby/gatsby-browser.js

@@ -1 +1,17 @@
 import './src/styles/global.css';
+// import * as React from 'react';
+// import { MDXProvider } from '@mdx-js/react';
+
+// const MyH1 = props => <h1 style={{ color: 'tomato' }} {...props} />;
+// const MyParagraph = props => (
+//   <p style={{ fontSize: '18px', lineHeight: 1.6 }} {...props} />
+// );
+
+// const components = {
+//   h1: MyH1,
+//   p: MyParagraph,
+// };
+
+// export const wrapRootElement = ({ element }) => (
+//   <MDXProvider components={components}>{element}</MDXProvider>
+// );

gatsby/gatsby-node.js

@@ -4,7 +4,7 @@ const path = require('path');
 const { read } = require('fast-exif');
 const iptc = require('node-iptc');
 
-const readFile = util.promisify(fs.readFile)
+const readFile = util.promisify(fs.readFile);
 
 
 function convertDMSToDD(dms, positiveDirection) {
@@ -51,16 +51,16 @@ exports.onCreateNode = async function ({ node, getNode, actions }) {
   if (node.internal.type === 'ImageSharp') {
     const parent = getNode(node.parent);
 
-    const file = await readFile(parent.absolutePath)
-    const iptcData = iptc(file)
-    const exifData = await read(parent.absolutePath)
+    const file = await readFile(parent.absolutePath);
+    const iptcData = iptc(file);
+    const exifData = await read(parent.absolutePath);
     createNodeField({
       node,
       name: 'imageMeta',
       value: transformMetaToNodeData(exifData, iptcData)
     });
   }
-}
+};
 
 // Implement the Gatsby API “createPages”. This is called once the
 // data layer is bootstrapped to let plugins create pages from data.
@@ -81,14 +81,14 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
         }
       }
     `
-  )
+  );
   // Handle errors
   if (galleryImages.errors) {
-    reporter.panicOnBuild('Error while running GraphQL query.')
-    return
+    reporter.panicOnBuild('Error while running GraphQL query.');
+    return;
   }
   // Create pages for each markdown file.
-  const galleryImageTemplate = path.resolve('src/components/gallery-image.js')
+  const galleryImageTemplate = path.resolve('src/components/gallery-image.js');
   galleryImages.data.allFile.edges.forEach(({ node }) => {
     // const path = node.base
     createPage({
@@ -99,6 +99,6 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
       context: {
         imageFilename: node.base,
       },
-    })
-  })
-}
+    });
+  });
+};

gatsby/src/components/resume-layout.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import classnames from 'classnames';
+
+import '../styles/resume.css';
+
+const ResumeLayout = ({ pageContext, children }) => {
+  console.log('pc', pageContext);
+  return (<div className={classnames('font-serif container mx-auto resume')}>{children}</div>);
+};
+
+// TODO: can I use custom components for just this layout/page?
+
+export default ResumeLayout;

gatsby/src/pages/index.js

@@ -1,11 +1,11 @@
-import * as React from 'react'
-import { graphql, Link } from 'gatsby'
-import { GatsbyImage, getImage } from 'gatsby-plugin-image'
+import * as React from 'react';
+import { graphql, Link } from 'gatsby';
+import { GatsbyImage, getImage } from 'gatsby-plugin-image';
 
 // markup
 const IndexPage = ({ data }) => {
-  const images = React.useMemo(() => data.allFile.edges.map(edge => edge.node), [data])
-  console.log('images', images)
+  const images = React.useMemo(() => data.allFile.edges.map(edge => edge.node), [data]);
+  console.log('images', images);
 
   return (
     <main className="font-serif">
@@ -27,20 +27,12 @@ const IndexPage = ({ data }) => {
           </ul>
         </div>
       </section>
-      {/* <h1 >
-        Congratulations
-        <br />
-        <span >— you just made a Gatsby site! </span>
-        <span role="img" aria-label="Party popper emojis">
-          🎉🎉🎉
-        </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"><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
-            console.log('name', name)
+            const name = image.childImageSharp.fields.imageMeta.iptc.object_name || image.base;
+            console.log('name', name);
             // const file = data.allFile
             // console.log(fileName)
             // return <></>
@@ -63,8 +55,8 @@ const IndexPage = ({ data }) => {
         </div>
       </section>
     </main>
-  )
-}
+  );
+};
 
 export const query = graphql`
 query HomePageGallery {
@@ -103,4 +95,4 @@ query HomePageGallery {
   }
 }`;
 
-export default IndexPage
+export default IndexPage;

gatsby/src/pages/photogallery.js

@@ -1,19 +1,19 @@
-import * as React from 'react'
-import { graphql, Link } from 'gatsby'
-import { GatsbyImage, getImage } from 'gatsby-plugin-image'
-import { Helmet } from 'react-helmet'
-import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry'
+import * as React from 'react';
+import { graphql, Link } from 'gatsby';
+import { GatsbyImage, getImage } from 'gatsby-plugin-image';
+import { Helmet } from 'react-helmet';
+import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry';
 
-import { getMeta } from '../utils'
+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)
+        const leftDate = new Date(getMeta(left).dateTaken);
+        console.log(leftDate);
+        const rightDate = new Date(getMeta(right).dateTaken);
         if (leftDate < rightDate) {
           return 1;
         }
@@ -22,7 +22,7 @@ const GalleryPage = ({ data }) => {
         }
         return 0;
       }) // TODO HERE
-    , [data])
+    , [data]);
 
   return (<>
     <Helmet>
@@ -39,8 +39,8 @@ const GalleryPage = ({ data }) => {
       >
         <Masonry gutter='5px'>
           {images.map(image => {
-            console.log('ar', image.childImageSharp)
-            const name = getMeta(image).iptc.object_name || image.base
+            console.log('ar', image.childImageSharp);
+            const name = getMeta(image).iptc.object_name || image.base;
             return (
               <React.Fragment key={name}>
                 <Link state={{modal: true}} to={`/photogallery/${image.base}`}>
@@ -56,8 +56,8 @@ const GalleryPage = ({ data }) => {
       </ResponsiveMasonry>
       </div>
     </div>
-  </>)
-}
+  </>);
+};
 
 export const query = graphql`
 query GalleryPageQuery {
@@ -96,4 +96,4 @@ query GalleryPageQuery {
   }
 }`;
 
-export default GalleryPage
+export default GalleryPage;

gatsby/src/pages/resume.mdx

@@ -2,6 +2,9 @@
 title: Charles Dries Resume
 ---
 
+import ResumeLayout from '../components/resume-layout'
+export default ResumeLayout
+
 # Hello, World!
 
-<h1>{props.pageContext.frontmatter.title}</h1>
+<h2>{props.pageContext.frontmatter.title}</h2>

gatsby/src/styles/global.css

@@ -28,7 +28,7 @@
 body {
   @apply bg-gray-100;
   /* @apply bg-black; */
-  @apply text-white;
+  /* @apply text-white; */
 }
 
 h1 {

gatsby/src/styles/resume.css

@@ -0,0 +1,7 @@
+.resume {
+  background: green;
+}
+.resume h1 {
+  @apply text-3xl font-bold;
+}
+

gatsby/tailwind.config.js

@@ -2,7 +2,7 @@ const defaultTheme = require('tailwindcss/defaultTheme')
 
 module.exports = {
   purge: ['./src/**/*.{js,jsx,ts,tsx}'],
-  darkMode: 'media', // or 'media' or 'class'
+  // darkMode: 'media', // or 'media' or 'class'
   theme: {
     spacing: {
       '1': '8px',