run prettier

2021-07-12 18:54:08 -07:00
parent 5df4c2baf4
commit d8655904fa
31 changed files with 1183 additions and 917 deletions
--- a/src/components/GalleryImage/GalleryImage.js
+++ b/src/components/GalleryImage/GalleryImage.js
@@ -1,5 +1,5 @@
-import React from 'react';
-import { graphql, navigate, Link } from 'gatsby';
+import React from "react";
+import { graphql, navigate, Link } from "gatsby";
 import {
  getAspectRatio,
  getMeta,
@@ -8,19 +8,21 @@ import {
  getVibrant,
  getVibrantToHelmetSafeBodyStyle,
  hasName,
-} from '../../utils';
-import { GatsbyImage, getImage } from 'gatsby-plugin-image';
-import { Helmet } from 'react-helmet';
-import classnames from 'classnames';
-import posthog from 'posthog-js';
-import MetadataItem from './MetadataItem';
+} from "../../utils";
+import { GatsbyImage, getImage } from "gatsby-plugin-image";
+import { Helmet } from "react-helmet";
+import classnames from "classnames";
+import posthog from "posthog-js";
+import MetadataItem from "./MetadataItem";

 const logKeyShortcut = (keyCode) => {
  try {
    // eslint-disable-next-line
-    posthog.capture('[key shortcut]', { keyCode });
-    window.plausible('KeyShortcut', {props: { keyCode }});
-  } catch (e) {/* do nothing */}
+    posthog.capture("[key shortcut]", { keyCode });
+    window.plausible("KeyShortcut", { props: { keyCode } });
+  } catch (e) {
+    /* do nothing */
+  }
 };

 const GalleryImage = ({ data, pageContext }) => {
@@ -29,32 +31,31 @@ const GalleryImage = ({ data, pageContext }) => {

  React.useEffect(() => {
    const keyListener = (e) => {
-      
      switch (e.code) {
-      case 'ArrowRight': {
-        logKeyShortcut(e.code);
-        if (pageContext.nextImage) {
-          navigate(`/photogallery/${pageContext.nextImage}/`);
+        case "ArrowRight": {
+          logKeyShortcut(e.code);
+          if (pageContext.nextImage) {
+            navigate(`/photogallery/${pageContext.nextImage}/`);
+          }
+          return;
        }
-        return;
-      }
-      case 'ArrowLeft': {
-        logKeyShortcut(e.code);
-        if (pageContext.prevImage) {
-          navigate(`/photogallery/${pageContext.prevImage}/`);
+        case "ArrowLeft": {
+          logKeyShortcut(e.code);
+          if (pageContext.prevImage) {
+            navigate(`/photogallery/${pageContext.prevImage}/`);
+          }
+          return;
+        }
+        case "Escape":
+        case "KeyG": {
+          logKeyShortcut(e.code);
+          navigate("/photogallery/");
        }
-        return;
-      }
-      case 'Escape':
-      case 'KeyG': {
-        logKeyShortcut(e.code);
-        navigate('/photogallery/');
-      }
      }
    };
-    document.addEventListener('keydown', keyListener);
+    document.addEventListener("keydown", keyListener);
    return () => {
-      document.removeEventListener('keydown', keyListener);
+      document.removeEventListener("keydown", keyListener);
    };
  }, [pageContext]);

@@ -62,128 +63,193 @@ const GalleryImage = ({ data, pageContext }) => {
  const meta = getMeta(image);
  let locationString;
  if (meta.iptc.city || meta.iptc.province_or_state) {
-    const location = [meta.iptc.city, meta.iptc.province_or_state].filter(Boolean);
-    locationString = location.join(', ');
+    const location = [meta.iptc.city, meta.iptc.province_or_state].filter(
+      Boolean
+    );
+    locationString = location.join(", ");
  }
  const vibrant = getVibrant(image, true);

-  const orientationClasses = ar > 1 ? 'flex-col mx-auto' : 'portrait:mx-auto landscape:mx-5 landscape:flex-row-reverse portrait:flex-col';
-  const shutterSpeed = React.useMemo(() => getShutterFractionFromExposureTime(meta.exif.ExposureTime || 0), [meta]);
+  const orientationClasses =
+    ar > 1
+      ? "flex-col mx-auto"
+      : "portrait:mx-auto landscape:mx-5 landscape:flex-row-reverse portrait:flex-col";
+  const shutterSpeed = React.useMemo(
+    () => getShutterFractionFromExposureTime(meta.exif.ExposureTime || 0),
+    [meta]
+  );
  const dateTaken = React.useMemo(() => new Date(meta.dateTaken), [meta]);
-  return (<>
-    <Helmet>
-      <title>{name} - Gallery | Chuck Dries</title>
-      <body
-        className="text-vibrant-light bg-vibrant-dark"
-        style={getVibrantToHelmetSafeBodyStyle(vibrant)}
-      />
-    </Helmet>
-    <div className="min-h-screen flex flex-col justify-between">
-      <nav className="mt-1 ml-1 text-lg mb-4">
-        <button
-          className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before  mr-1"
-          onClick={() => navigate(-1)}
-          type="button"
-        >back</button>
-        <Link
-          className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
-          to="/"
-        >home</Link>
-        <Link
-          className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
-          to="/photogallery/"
-        >gallery <span className="bg-gray-300 text-black">esc</span></Link>
-        {pageContext.prevImage && <Link
-          className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
-          to={`/photogallery/${pageContext.prevImage}/`}
-        >previous <span className="bg-gray-300 text-black">&#11104;</span></Link>}
-        {pageContext.nextImage && <Link
-          className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
-          to={`/photogallery/${pageContext.nextImage}/`}
-        >next <span className="bg-gray-300 text-black">&#11106;</span></Link>}
-      </nav>
-      <div className={classnames('flex', orientationClasses)}>
-        <div className="flex-grow-0">
-          <GatsbyImage
-            alt={name}
-            className=""
-            image={getImage(image)}
-            key={image.base}
-            loading="eager"
-            objectFit="contain"
-            style={{
-              maxWidth: `calc(max(90vh, 500px) * ${ar})`,
-              maxHeight: '90vh',
-              // minHeight: '500px',
-            }} />
-        </div>
-        <div className={classnames(
-          'flex-shrink-0 mx-2 flex flex-row portrait:items-end', ar <= 1
-            ? 'pt-5 flex-col flex-auto text-right'
-            : 'portrait:pt-5 portrait:flex-col portrait:text-right'
-        )}>
-          <div className="flex-auto mr-2">
-            <p className="text-muted-light font-mono text-sm m-0 mt-1">{image.base}</p>
-            {hasName(image) && <h1 className="text-4xl mt-0 font-serif">{name}</h1>}
-            <p className="landscape:mr-2">{meta.iptc.caption}</p>
+  return (
+    <>
+      <Helmet>
+        <title>{name} - Gallery | Chuck Dries</title>
+        <body
+          className="text-vibrant-light bg-vibrant-dark"
+          style={getVibrantToHelmetSafeBodyStyle(vibrant)}
+        />
+      </Helmet>
+      <div className="min-h-screen flex flex-col justify-between">
+        <nav className="mt-1 ml-1 text-lg mb-4">
+          <button
+            className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before  mr-1"
+            onClick={() => navigate(-1)}
+            type="button"
+          >
+            back
+          </button>
+          <Link
+            className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
+            to="/"
+          >
+            home
+          </Link>
+          <Link
+            className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
+            to="/photogallery/"
+          >
+            gallery <span className="bg-gray-300 text-black">esc</span>
+          </Link>
+          {pageContext.prevImage && (
+            <Link
+              className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
+              to={`/photogallery/${pageContext.prevImage}/`}
+            >
+              previous <span className="bg-gray-300 text-black">&#11104;</span>
+            </Link>
+          )}
+          {pageContext.nextImage && (
+            <Link
+              className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
+              to={`/photogallery/${pageContext.nextImage}/`}
+            >
+              next <span className="bg-gray-300 text-black">&#11106;</span>
+            </Link>
+          )}
+        </nav>
+        <div className={classnames("flex", orientationClasses)}>
+          <div className="flex-grow-0">
+            <GatsbyImage
+              alt={name}
+              className=""
+              image={getImage(image)}
+              key={image.base}
+              loading="eager"
+              objectFit="contain"
+              style={{
+                maxWidth: `calc(max(90vh, 500px) * ${ar})`,
+                maxHeight: "90vh",
+                // minHeight: '500px',
+              }}
+            />
+          </div>
+          <div
+            className={classnames(
+              "flex-shrink-0 mx-2 flex flex-row portrait:items-end",
+              ar <= 1
+                ? "pt-5 flex-col flex-auto text-right"
+                : "portrait:pt-5 portrait:flex-col portrait:text-right"
+            )}
+          >
+            <div className="flex-auto mr-2">
+              <p className="text-muted-light font-mono text-sm m-0 mt-1">
+                {image.base}
+              </p>
+              {hasName(image) && (
+                <h1 className="text-4xl mt-0 font-serif">{name}</h1>
+              )}
+              <p className="landscape:mr-2">{meta.iptc.caption}</p>
+            </div>
+            {
+              <div
+                className="portrait:border-t-2 border-muted-light portrait:mt-2 mr-2 portrait:mb-1"
+                style={{ width: 30 }}
+              ></div>
+            }
+            <MetadataItem
+              aspectRatio={ar}
+              data={dateTaken.toLocaleDateString()}
+              icon="calendar-sharp"
+              title="date taken"
+            />
+            <MetadataItem
+              aspectRatio={ar}
+              data={locationString}
+              icon="location-sharp"
+              title="location"
+            />
+            <MetadataItem
+              aspectRatio={ar}
+              data={shutterSpeed}
+              icon="stopwatch-sharp"
+              title="shutter speed"
+            />
+            <MetadataItem
+              aspectRatio={ar}
+              data={`f/${meta.exif.FNumber}`}
+              icon="aperture-sharp"
+              title="aperture"
+            />
+            <MetadataItem
+              aspectRatio={ar}
+              data={meta.exif.ISO}
+              icon="film-outline"
+              title="ISO"
+            />
          </div>
-          {<div className="portrait:border-t-2 border-muted-light portrait:mt-2 mr-2 portrait:mb-1" style={{width: 30}}></div>}
-          <MetadataItem aspectRatio={ar} data={dateTaken.toLocaleDateString()} icon="calendar-sharp" title="date taken"/>
-          <MetadataItem aspectRatio={ar} data={locationString} icon="location-sharp" title="location"/>
-          <MetadataItem aspectRatio={ar} data={shutterSpeed} icon="stopwatch-sharp" title="shutter speed" />
-          <MetadataItem aspectRatio={ar} data={`f/${meta.exif.FNumber}`} icon="aperture-sharp" title="aperture" />
-          <MetadataItem aspectRatio={ar} data={meta.exif.ISO} icon="film-outline" title="ISO" />
        </div>
+        <div></div>
      </div>
-      <div></div>
-    </div>
-  </>);
+    </>
+  );
 };

 export const query = graphql`
  query GalleryImage($imageFilename: String) {
-  allFile(filter: {sourceInstanceName: {eq: "gallery"}, base: {eq: $imageFilename}}) {
-    edges {
-      node {
-        base
-        childImageSharp{
-          fluid {
-            aspectRatio
+    allFile(
+      filter: {
+        sourceInstanceName: { eq: "gallery" }
+        base: { eq: $imageFilename }
+      }
+    ) {
+      edges {
+        node {
+          base
+          childImageSharp {
+            fluid {
+              aspectRatio
+            }
+            gatsbyImageData(
+              layout: CONSTRAINED
+              # placeholder: BLURRED
+              placeholder: DOMINANT_COLOR
+              # placeholder: TRACED_SVG
+              height: 2160
+            )
          }
-          gatsbyImageData(
-            layout: CONSTRAINED
-            # placeholder: BLURRED
-            placeholder: DOMINANT_COLOR
-            # placeholder: TRACED_SVG
-            height: 2160
-          )
-        }
-        fields {
-          imageMeta {
-            dateTaken
-            iptc {
-              caption
-              object_name
-              keywords
-              city
-              province_or_state
-            }
-            exif {
-              FNumber
-              ExposureTime
-              ISO
-            }
-            vibrant {
-              ...VibrantColors
+          fields {
+            imageMeta {
+              dateTaken
+              iptc {
+                caption
+                object_name
+                keywords
+                city
+                province_or_state
+              }
+              exif {
+                FNumber
+                ExposureTime
+                ISO
+              }
+              vibrant {
+                ...VibrantColors
+              }
            }
          }
        }
      }
    }
  }
-}
-
-
 `;

 export default GalleryImage;
--- a/src/components/GalleryImage/MetadataItem.js
+++ b/src/components/GalleryImage/MetadataItem.js
@@ -1,21 +1,20 @@
-import classNames from 'classnames';
-import React from 'react';
+import classNames from "classnames";
+import React from "react";

-const MetadataItem = ({
-  aspectRatio,
-  icon,
-  data,
-  title,
-}) => data ? (
-  <div className={classNames('flex items-baseline ml-2 text-lg',
-    aspectRatio <= 1 ? 'flex-row-reverse' : 'portrait:flex-row-reverse')}
-  title={title}
-  >
-    <span className="icon-offset mr-1">
-      <ion-icon name={icon}></ion-icon>
-    </span>
-    <span className="mr-1">{data}</span>
-  </div>
-) : null;
+const MetadataItem = ({ aspectRatio, icon, data, title }) =>
+  data ? (
+    <div
+      className={classNames(
+        "flex items-baseline ml-2 text-lg",
+        aspectRatio <= 1 ? "flex-row-reverse" : "portrait:flex-row-reverse"
+      )}
+      title={title}
+    >
+      <span className="icon-offset mr-1">
+        <ion-icon name={icon}></ion-icon>
+      </span>
+      <span className="mr-1">{data}</span>
+    </div>
+  ) : null;

-export default MetadataItem;
+export default MetadataItem;
--- a/src/components/Index/HeroLink.js
+++ b/src/components/Index/HeroLink.js
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import classnames from 'classnames';
+import * as React from "react";
+import classnames from "classnames";

 export const HeroA = ({
  href,
@@ -9,8 +9,14 @@ export const HeroA = ({
  ...linkProps
 }) => (
  <a
-    className={classnames('mx-2 underline', isClient && 'text-muted-light hover:text-vibrant-light', className)}
+    className={classnames(
+      "mx-2 underline",
+      isClient && "text-muted-light hover:text-vibrant-light",
+      className
+    )}
    href={href}
    {...linkProps}
-  >{children}</a>
-);
+  >
+    {children}
+  </a>
+);
--- a/src/components/MasonryGallery.js
+++ b/src/components/MasonryGallery.js
@@ -1,33 +1,41 @@
-import * as React from 'react';
-import { Link } from 'gatsby';
-import { GatsbyImage, getImage } from 'gatsby-plugin-image';
-import * as R from 'ramda';
-import { getAspectRatio, getName } from '../utils';
-import useBreakpoint from 'use-breakpoint';
+import * as React from "react";
+import { Link } from "gatsby";
+import { GatsbyImage, getImage } from "gatsby-plugin-image";
+import * as R from "ramda";
+import { getAspectRatio, getName } from "../utils";
+import useBreakpoint from "use-breakpoint";

-import themeBreakpoints from '../breakpoints';
+import themeBreakpoints from "../breakpoints";

 const MasonryGallery = ({ images, itemsPerRow: itemsPerRowByBreakpoint }) => {
-  const breakpoints = React.useMemo(() => 
-    R.pick(R.keys(itemsPerRowByBreakpoint), themeBreakpoints)
-  , [itemsPerRowByBreakpoint]);
+  const breakpoints = React.useMemo(
+    () => R.pick(R.keys(itemsPerRowByBreakpoint), themeBreakpoints),
+    [itemsPerRowByBreakpoint]
+  );

-  const { breakpoint } = useBreakpoint(breakpoints, 'sm');
+  const { breakpoint } = useBreakpoint(breakpoints, "sm");

-  const aspectRatios = React.useMemo(() => R.map(getAspectRatio, images), [images]);
-  const rowAspectRatioSumsByBreakpoint = React.useMemo(() => R.map(R.pipe(
-    R.splitEvery(R.__, aspectRatios),
-    R.map(R.sum)
-  ))(itemsPerRowByBreakpoint), [aspectRatios, itemsPerRowByBreakpoint]);
+  const aspectRatios = React.useMemo(
+    () => R.map(getAspectRatio, images),
+    [images]
+  );
+  const rowAspectRatioSumsByBreakpoint = React.useMemo(
+    () =>
+      R.map(R.pipe(R.splitEvery(R.__, aspectRatios), R.map(R.sum)))(
+        itemsPerRowByBreakpoint
+      ),
+    [aspectRatios, itemsPerRowByBreakpoint]
+  );

  const itemsPerRow = itemsPerRowByBreakpoint[breakpoint];
-  const rowAspectRatioSumsForCurrentBP = rowAspectRatioSumsByBreakpoint[breakpoint];
-  
+  const rowAspectRatioSumsForCurrentBP =
+    rowAspectRatioSumsByBreakpoint[breakpoint];
+
  return (
    <div
      className="w-full"
      style={{
-        position: 'relative',
+        position: "relative",
      }}
      // style={{ maxWidth: minWidth }}
    >
@@ -36,22 +44,24 @@ const MasonryGallery = ({ images, itemsPerRow: itemsPerRowByBreakpoint }) => {
        const rowAspectRatioSum = rowAspectRatioSumsForCurrentBP[rowIndex];
        // const width = ((getAspectRatio(image) / rowAspectRatioSum) * 100).toFixed(10);
        const ar = getAspectRatio(image);
-        const widthNumber = rowAspectRatioSum === ar
-          // image is only one in row
-          ? 100 / itemsPerRow
-          // image is one of several in row
-          : ((ar / rowAspectRatioSum) * 100).toFixed(5);
+        const widthNumber =
+          rowAspectRatioSum === ar
+            ? // image is only one in row
+              100 / itemsPerRow
+            : // image is one of several in row
+              ((ar / rowAspectRatioSum) * 100).toFixed(5);

        const width = `${widthNumber}%`;
        return (
-          <Link 
+          <Link
            className="inline-block"
            key={`${image.base}`}
-            state={{modal: true}}
+            state={{ modal: true }}
            style={{
              width,
              // marginLeft: '8px',
-            }} to={`/photogallery/${image.base}`}
+            }}
+            to={`/photogallery/${image.base}`}
          >
            <GatsbyImage
              alt={getName(image)}
@@ -63,7 +73,8 @@ const MasonryGallery = ({ images, itemsPerRow: itemsPerRowByBreakpoint }) => {
          </Link>
        );
      })}
-    </div>);
+    </div>
+  );
  // return null;
 };

--- a/src/components/resume/ResumeLayout.js
+++ b/src/components/resume/ResumeLayout.js
@@ -1,10 +1,10 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import { MDXProvider } from '@mdx-js/react';
+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 MyH1 = (props) => <h1 style={{ color: "tomato" }} {...props} />;
 // const MyParagraph = props => (
 //   <p style={{ fontSize: '18px', lineHeight: 1.6 }} {...props} />
 // );
@@ -14,12 +14,13 @@ const components = {
  // p: MyParagraph,
 };

-
 const ResumeLayout = ({ pageContext, children }) => {
-  console.log('pc', pageContext);
+  console.log("pc", pageContext);
  return (
    <MDXProvider components={components}>
-      <div className={classnames('font-serif container mx-auto resume')}>{children}</div>
+      <div className={classnames("font-serif container mx-auto resume")}>
+        {children}
+      </div>
    </MDXProvider>
  );
 };