add indent and comma dangle, and rearrange resume components

gatsby/.eslintrc.js

@@ -5,20 +5,22 @@ module.exports = {
   'parser': 'babel-eslint', // uses babel-eslint transforms
   'settings': {
     'react': {
-      'version': 'detect' // detect react version
+      'version': 'detect', // detect react version
-    }
+    },
   },
   'env': {
-    'node': true // defines things like process.env when generating through node
+    'node': true, // defines things like process.env when generating through node
   },
   'extends': [
     'eslint:recommended', // use recommended configs
     'plugin:react/recommended',
-    'plugin:react-hooks/recommended'
+    'plugin:react-hooks/recommended',
   ],
   'rules': {
     'react/prop-types': 0,
     'quotes': ['warn', 'single'],
-    'semi': 1
+    'semi': 1,
-  }
+    'indent': ['warn', 2],
+    'comma-dangle': ['warn', 'always-multiline'],
+  },
 };

gatsby/gatsby-node.js

@@ -88,7 +88,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
     return;
   }
   // Create pages for each markdown file.
-  const galleryImageTemplate = path.resolve('src/components/gallery-image.js');
+  const galleryImageTemplate = path.resolve('src/components/GalleryImage.js');
   galleryImages.data.allFile.edges.forEach(({ node }) => {
     // const path = node.base
     createPage({

gatsby/src/components/GalleryImage.js

@@ -36,7 +36,7 @@ const GalleryImage = ({ data }) => {
               maxWidth: `calc(max(90vh, 500px) * ${ar})`,
               // height: '90vh',
               maxHeight: '90vh',
-              minHeight: '500px'
+              minHeight: '500px',
             }}
             key={image.base}
             image={getImage(image)}

gatsby/src/components/resume/ResumeLayout.js

@@ -2,16 +2,16 @@ import * as React from 'react';
 import classnames from 'classnames';
 import { MDXProvider } from '@mdx-js/react';
 
-import '../styles/resume.css';
+import '../../styles/resume.css';
 
 const MyH1 = props => <h1 style={{ color: 'tomato' }} {...props} />;
-const MyParagraph = props => (
+// const MyParagraph = props => (
-  <p style={{ fontSize: '18px', lineHeight: 1.6 }} {...props} />
+//   <p style={{ fontSize: '18px', lineHeight: 1.6 }} {...props} />
-);
+// );
 
 const components = {
   h1: MyH1,
-  p: MyParagraph,
+  // p: MyParagraph,
 };
 
 

gatsby/src/pages/photogallery.js

@@ -22,7 +22,7 @@ const GalleryPage = ({ data }) => {
         }
         return 0;
       }) // TODO HERE
-    , [data]);
+  , [data]);
 
   return (<>
     <Helmet>
@@ -34,26 +34,26 @@ const GalleryPage = ({ data }) => {
       <div className="mx-auto" style={{maxWidth: '1800px'}}>
         {/* TODO swap masonry plugin, this one makes really unbalanced columns */}
         {/* ...implement manually :sadge: */}
-      <ResponsiveMasonry
+        <ResponsiveMasonry
-        columnsCountBreakPoints={{ 350: 1, 650: 2, 1200: 3 }}
+          columnsCountBreakPoints={{ 350: 1, 650: 2, 1200: 3 }}
-      >
+        >
-        <Masonry gutter='5px'>
+          <Masonry gutter='5px'>
-          {images.map(image => {
+            {images.map(image => {
-            console.log('ar', image.childImageSharp);
+              console.log('ar', image.childImageSharp);
-            const name = getMeta(image).iptc.object_name || image.base;
+              const name = getMeta(image).iptc.object_name || image.base;
-            return (
+              return (
-              <React.Fragment key={name}>
+                <React.Fragment key={name}>
-                <Link state={{modal: true}} to={`/photogallery/${image.base}`}>
+                  <Link state={{modal: true}} to={`/photogallery/${image.base}`}>
-                  <GatsbyImage
+                    <GatsbyImage
-                    key={image.base}
+                      key={image.base}
-                    image={getImage(image)}
+                      image={getImage(image)}
-                    alt={name} />
+                      alt={name} />
-                </Link>
+                  </Link>
-              </React.Fragment>
+                </React.Fragment>
-            );
+              );
-          })}
+            })}
-        </Masonry>
+          </Masonry>
-      </ResponsiveMasonry>
+        </ResponsiveMasonry>
       </div>
     </div>
   </>);

gatsby/src/pages/resume.mdx

@@ -2,7 +2,7 @@
 title: Charles Dries Resume
 ---
 
-import ResumeLayout from '../components/resume-layout'
+import ResumeLayout from '../components/resume/ResumeLayout'
 export default ResumeLayout
 
 # Hello, World!