create layout and stylesheet for resume markdown

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