Move gatsby data to top level

2021-06-18 19:13:24 -07:00
parent f8fe81cb8f
commit 7135ec1976
133 changed files with 16750 additions and 16693 deletions
--- a/src/breakpoints.js
+++ b/src/breakpoints.js
@@ -0,0 +1,10 @@
+import preval from 'babel-plugin-preval/macro';
+const themeBreakpoints = preval`
+const R = require('ramda')
+const resolveConfig = require('tailwindcss/resolveConfig');
+const tailwindConfig = require('../tailwind.config.js');
+const {theme} = resolveConfig(tailwindConfig);
+module.exports = R.map(size => parseInt(size, 10), theme.screens);
+`;
+
+export default themeBreakpoints;
--- a/src/components/GalleryImage.js
+++ b/src/components/GalleryImage.js
@@ -0,0 +1,112 @@
+import React from 'react';
+import { graphql, Link } from 'gatsby';
+import {
+  getAspectRatio,
+  getMeta,
+  getName,
+  getShutterFractionFromExposureTime,
+  getVibrant,
+  getVibrantToHelmetSafeBodyStyle,
+  hasName,
+} from '../utils';
+import { GatsbyImage, getImage } from 'gatsby-plugin-image';
+import { Helmet } from 'react-helmet';
+import classnames from 'classnames';
+
+const GalleryImage = ({ data }) => {
+  const image = data.allFile.edges[0].node;
+  const ar = getAspectRatio(image);
+
+  // TODO: metadata icons
+
+  const name = getName(image);
+  const meta = getMeta(image);
+  const vibrant = getVibrant(image, true);
+
+  const orientationClasses = ar > 1 ? 'flex-col mx-auto' : 'portrait:mx-auto landscape:mx-4 landscape:flex-row-reverse portrait:flex-col';
+  console.log(ar, orientationClasses);
+  const shutterSpeed = React.useMemo(() => getShutterFractionFromExposureTime(meta.exif.ExposureTime || 0), [meta]);
+  return (<>
+    <Helmet>
+      <title>{name} - Gallery | Chuck Dries</title>
+      <body
+        className="text-vibrant-light bg-vibrant-dark"
+        style={getVibrantToHelmetSafeBodyStyle(vibrant)}
+      />
+    </Helmet>
+    <Link className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before absolute" to="/photogallery">gallery</Link>
+    <div className="min-h-screen pt-4 flex flex-col justify-center">
+      <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', ar <= 1 && 'pt-4 flex-col flex-auto text-right')}>
+          <div className="flex-auto mr-1">
+            {hasName(image) && <h1 className="text-2xl mt-2 font-serif">{name}</h1>}
+            <p className="mr-1">{meta.iptc.caption}</p>
+          </div>
+          {shutterSpeed && <p className="mr-1">Shutter speed: {shutterSpeed}</p>}
+          {meta.exif.FNumber && <p className="mr-1">Aperture: f/{meta.exif.FNumber}</p>}
+          {meta.exif.ISO && <p className="mr-1">ISO: {meta.exif.ISO}</p>}
+        </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
+          }
+          gatsbyImageData(
+            layout: CONSTRAINED
+            # placeholder: BLURRED
+            placeholder: DOMINANT_COLOR
+            # placeholder: TRACED_SVG
+            height: 2160
+          )
+          fields {
+            imageMeta {
+              dateTaken
+              iptc {
+                caption
+                object_name
+                keywords
+              }
+              exif {
+                FNumber
+                ExposureTime
+                ISO
+              }
+              vibrant {
+                ...VibrantColors
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+
+`;
+
+export default GalleryImage;
--- a/src/components/IndexComponents.js
+++ b/src/components/IndexComponents.js
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import classnames from 'classnames';
+
+export const HeroA = ({
+  href,
+  children,
+  className,
+  isClient,
+  ...linkProps
+}) => (
+  <a
+    className={classnames('mx-1 underline', isClient && 'text-muted-light hover:text-vibrant-light', className)}
+    href={href}
+    {...linkProps}
+  >{children}</a>
+);
--- a/src/components/MasonryGallery.js
+++ b/src/components/MasonryGallery.js
@@ -0,0 +1,72 @@
+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';
+
+const MasonryGallery = ({ images, itemsPerRow: itemsPerRowByBreakpoint }) => {
+  const breakpoints = React.useMemo(() => 
+    R.pick(R.keys(itemsPerRowByBreakpoint), themeBreakpoints)
+  , [itemsPerRowByBreakpoint]);
+  console.log(breakpoints);
+
+  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 itemsPerRow = itemsPerRowByBreakpoint[breakpoint];
+  const rowAspectRatioSumsForCurrentBP = rowAspectRatioSumsByBreakpoint[breakpoint];
+  
+  return (
+    <div
+      className="w-full"
+      style={{
+        position: 'relative',
+      }}
+      // style={{ maxWidth: minWidth }}
+    >
+      {images.map((image, i) => {
+        const rowIndex = Math.floor(i / itemsPerRow);
+        const rowAspectRatioSum = rowAspectRatioSumsForCurrentBP[rowIndex];
+        // const width = ((getAspectRatio(image) / rowAspectRatioSum) * 100).toFixed(10);
+        const ar = getAspectRatio(image);
+        const widthNumber = ((ar / rowAspectRatioSum) * 100).toFixed(5);
+        const width = `${widthNumber}%`;
+        // const width = `${widthNumber}%`;
+        // console.log('ars', rowAspectRatioSum);
+        if (i === 0) {
+          // console.log(rowIndex, rowAspectRatioSum);
+          // console.log(getName(image), width);
+        }
+        return (
+          <Link 
+            className="inline-block"
+            key={`${image.base}`}
+            state={{modal: true}}
+            style={{
+              width,
+              // marginLeft: '8px',
+            }} to={`/photogallery/${image.base}`}
+          >
+            <GatsbyImage
+              alt={getName(image)}
+              className="w-full"
+              // style={{ width }}
+              image={getImage(image)}
+              objectFit="cover"
+            />
+          </Link>
+        );
+      })}
+    </div>);
+  // return null;
+};
+
+export default MasonryGallery;
--- a/src/components/resume/ExperienceSection.js
+++ b/src/components/resume/ExperienceSection.js
--- a/src/components/resume/ResumeLayout.js
+++ b/src/components/resume/ResumeLayout.js
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import { MDXProvider } from '@mdx-js/react';
+
+import '../../styles/resume.css';
+
+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,
+};
+
+
+const ResumeLayout = ({ pageContext, children }) => {
+  console.log('pc', pageContext);
+  return (
+    <MDXProvider components={components}>
+      <div className={classnames('font-serif container mx-auto resume')}>{children}</div>
+    </MDXProvider>
+  );
+};
+
+// TODO: can I use custom components for just this layout/page?
+
+export default ResumeLayout;
--- a/src/fragments.js
+++ b/src/fragments.js
@@ -0,0 +1,36 @@
+import { graphql } from 'gatsby';
+
+export const VibrantColorsFragment = graphql`
+  fragment VibrantColors on ImageSharpFieldsImageMetaVibrant {
+    DarkMuted {
+      titleTextColor
+      bodyTextColor
+      rgb
+    }
+    DarkVibrant {
+      titleTextColor
+      bodyTextColor
+      rgb
+    }
+    LightMuted {
+      titleTextColor
+      bodyTextColor
+      rgb
+    }
+    LightVibrant {
+      titleTextColor
+      bodyTextColor
+      rgb
+    }
+    Vibrant {
+      titleTextColor
+      bodyTextColor
+      rgb
+    }
+    Muted {
+      titleTextColor
+      bodyTextColor
+      rgb
+    }
+  }
+`;
--- a/src/images/icon.png
+++ b/src/images/icon.png
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { Link } from 'gatsby';
+
+// styles
+const pageStyles = {
+  color: '#232129',
+  padding: '96px',
+  fontFamily: '-apple-system, Roboto, sans-serif, serif',
+};
+const headingStyles = {
+  marginTop: 0,
+  marginBottom: 64,
+  maxWidth: 320,
+};
+
+const paragraphStyles = {
+  marginBottom: 48,
+};
+const codeStyles = {
+  color: '#8A6534',
+  padding: 4,
+  backgroundColor: '#FFF4DB',
+  fontSize: '1.25rem',
+  borderRadius: 4,
+};
+
+// markup
+const NotFoundPage = () => {
+  return (
+    <main style={pageStyles}>
+      <title>Not found</title>
+      <h1 style={headingStyles}>Page not found</h1>
+      <p style={paragraphStyles}>
+        Sorry{' '}
+        <span aria-label="Pensive emoji" role="img">
+          😔
+        </span>{' '}
+        we couldn’t find what you were looking for.
+        <br />
+        {process.env.NODE_ENV === 'development' ? (
+          <>
+            <br />
+            Try creating a page in <code style={codeStyles}>src/pages/</code>.
+            <br />
+          </>
+        ) : null}
+        <br />
+        <Link to="/">Go home</Link>.
+      </p>
+    </main>
+  );
+};
+
+export default NotFoundPage;
--- a/src/pages/asdf-resume.mdx
+++ b/src/pages/asdf-resume.mdx
@@ -0,0 +1,10 @@
+---
+title: Charles Dries Resume
+---
+
+import ResumeLayout from '../components/resume/ResumeLayout'
+export default ResumeLayout
+
+# Hello, World!
+
+<h2>{props.pageContext.frontmatter.title}</h2>
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -0,0 +1,130 @@
+import * as React from 'react';
+import { Link, graphql } from 'gatsby';
+import { GatsbyImage, getImage } from 'gatsby-plugin-image';
+import { getVibrantToHelmetSafeBodyStyle, getVibrant } from '../utils';
+import { Helmet } from 'react-helmet';
+import { take } from 'ramda';
+import classnames from 'classnames';
+
+import { HeroA } from '../components/IndexComponents';
+
+// TODO: better text colors in situations of low contrast
+
+const getDifferentRand = (range, lastNs, iterations = 0) => {
+  const n = Math.floor(Math.random() * range);
+  if (lastNs.findIndex(x => x === n) > -1 && iterations < 5) {
+    console.log('got dupe, trying again', n);
+    return getDifferentRand(range, lastNs, iterations + 1);
+  }
+  return n;
+};
+
+const IndexPage = ({ data: { allFile: { edges } } }) => {
+  const [isClient, setIsClient] = React.useState(false);
+  const images = React.useMemo(() => edges.map((edge) => edge.node), [edges]);
+  const image = React.useMemo(() => {
+    if (!isClient) {
+      return images[0];
+    }
+    const lastThreeImages = JSON.parse(localStorage.getItem('lastHeros')) || [];
+    const imageIndex = getDifferentRand(images.length, lastThreeImages);
+    localStorage.setItem('lastHeros', JSON.stringify(take(3, [imageIndex, ...lastThreeImages])));
+    return images[imageIndex];
+  }, [images, isClient]);
+  const vibrant = getVibrant(image);
+  React.useEffect(() => {
+    if (!isClient) {
+      setIsClient(true);
+    }
+  }, [isClient]);
+  return (<>
+    <Helmet>
+      <title>Chuck Dries</title>
+      <body
+        className={classnames(isClient ? 'bg-vibrant-dark' : '')}
+        style={getVibrantToHelmetSafeBodyStyle(vibrant)}
+      />
+    </Helmet>
+    <main
+      className="font-serif sm:block md:grid hero"
+    >
+      {isClient ? 
+        <GatsbyImage
+          alt=""
+          className={classnames(
+            'md:h-screen sm:h-two-thirds-vw',
+          )}
+          image={getImage(image)}
+          loading="eager"
+          style={{
+            gridArea: '1/1',
+          }} />
+        // 67vw = 1/1.49253731 = 1/aspect ratio of my camera lol
+        : <div className="md:h-screen sm:h-two-thirds-vw" style={{gridArea: '1/1' }}></div> }
+      <div className="relative grid place-items-center" style={{gridArea: '1/1'}}>
+        <div className="m-2 flex flex-col items-end">
+          <section className={classnames('rounded-xl py-5', isClient && ' bg-vibrant-dark-75')}>
+            <div className="mx-auto px-5">
+              <h1 className={classnames('font-black text-6xl', isClient && 'text-vibrant-light')}>Chuck Dries</h1>
+              <h2 className={classnames('italic text-2xl', isClient && 'text-vibrant')}>Full stack software engineer &amp; hobbyist photographer</h2>
+              <ul className={classnames(isClient && 'text-muted-light')}>
+                <li>Software Developer, <span className="italic">Axosoft</span></li>
+                <li><HeroA className="ml-0" href="mailto:chuck@chuckdries.com" isClient={isClient}>chuck@chuckdries.com</HeroA>/<span className="ml-1">602.618.0414</span></li>
+                <li>
+                  <HeroA className="ml-0" href="http://github.com/chuckdries" isClient={isClient}>Github</HeroA>/
+                  <HeroA href="https://www.linkedin.com/in/chuckdries/" isClient={isClient}>LinkedIn</HeroA>/
+                  <HeroA href="https://devpost.com/chuckdries" isClient={isClient}>Devpost</HeroA>/
+                  <HeroA href="/CharlesDriesResumeCurrent.pdf" isClient={isClient}>Resume [pdf]</HeroA>/
+                  <HeroA href="https://medium.com/@chuckdries" isClient={isClient}>Medium (blog)</HeroA>
+                </li>
+              </ul>
+            </div>
+          </section>
+          <Link
+            className={classnames(
+              'hover:underline inline-block p-2 px-4 my-2 text-lg rounded-md border-2 arrow-right-after font-bold font-serif',
+              isClient && 'text-muted-dark bg-muted-light border-muted-light')} 
+            to="/photogallery"
+          >
+            Photo Gallery</Link>
+        </div>
+      </div>
+    </main>
+  </>);
+};
+
+export const query = graphql`
+{
+  allFile(
+    filter: {
+      sourceInstanceName: {eq: "gallery"},
+      # base: {nin: ["DSC01699.jpg", "DSC02981.jpg", "_DSC4155.jpg", "DSC02538.jpg", "DSC05851.jpg"]}
+      # no vertical images
+      childrenImageSharp: {elemMatch: {fluid: {aspectRatio: {gte: 1.4}}}}
+      }
+  ) {
+    edges {
+      node {
+        relativePath
+        base
+        childImageSharp {
+          gatsbyImageData(
+            layout: FULL_WIDTH
+            placeholder: NONE
+            breakpoints: [750, 1080, 1366, 1920, 2560]
+          )
+          fields {
+            imageMeta {
+              vibrant {
+                ...VibrantColors
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+`;
+
+export default IndexPage;
--- a/src/pages/photogallery.js
+++ b/src/pages/photogallery.js
@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { graphql } from 'gatsby';
+import { Link } from 'gatsby';
+import { Helmet } from 'react-helmet';
+
+import MasonryGallery from '../components/MasonryGallery';
+
+// TODO: caption and title more images
+// TODO: more images
+
+const GalleryPage = ({ data }) => {
+  const images = React.useMemo(() =>
+    data.allFile.edges
+      .map(edge => edge.node, [data])
+  , [data]);
+
+  return (<>
+    <Helmet>
+      <title>Photo Gallery | Chuck Dries</title>
+      <body className="bg-black text-white" />
+    </Helmet>
+    <div className="bg-black min-h-screen 2xl:container">
+      <Link className="hover:underline hover:text-blue-200 text-blue-300 arrow-left-before" to="/">home</Link>
+      <h1 className="text-5xl mt-2 ml-4 font-serif font-black z-10 relative">Photo Gallery</h1>
+      <div className="mx-auto">
+        <MasonryGallery
+          images={images}
+          itemsPerRow={{
+            sm: 2,
+            md: 2,
+            lg: 3,
+            xl: 3,
+            '2xl': 4,
+          }}
+        />
+      </div>
+    </div>
+  </>);
+};
+
+export const query = graphql`
+query GalleryPageQuery {
+  allFile(filter: {
+    sourceInstanceName: { eq: "gallery" }}
+    sort: {order: DESC, fields: childrenImageSharp___fields___imageMeta___dateTaken}
+  ) {
+    edges {
+      node {
+      	relativePath,
+        base,
+        childImageSharp{
+          fluid {
+            aspectRatio
+          },
+          gatsbyImageData(
+            layout: CONSTRAINED,
+            height: 550
+          )
+          fields {
+            imageMeta {
+              dateTaken
+              iptc {
+                # caption
+                object_name
+              }
+              # exif {
+              #   FNumber
+              #   ExposureTime
+              #   ShutterSpeedValue
+              #   ISO
+              # }
+            }
+          }
+        }
+      }
+    }
+  }
+}`;
+
+export default GalleryPage;
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -0,0 +1,72 @@
+/* @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital@0;1&display=swap'); */
+/* black, bold, regular */
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* {
+  box-sizing: border-box;
+}
+/* .hero * {
+  transition: color .2s, background-color .2s;
+} */
+@layer utilities {
+  .scroll-snap-none {
+    scroll-snap-type: none;
+  }
+  .scroll-snap-x {
+    scroll-snap-type: x mandatory;
+  }
+  .scroll-snap-y {
+    scroll-snap-type: y mandatory;
+  }
+  .scroll-snap-start {
+    scroll-snap-align: start;
+  }
+  .scroll-padding-6 {
+    scroll-padding: theme('spacing.6');
+  }
+  @variants responsive {
+
+    .h-two-thirds-vw {
+      height: 67vw;
+    }
+  }
+}
+
+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;
+}
+
+.arrow-right-after:after {
+  content: "\279C";
+  margin-left: 3px;
+  transform: translate(0px);
+  display: inline-block;
+  transition: all .2s;
+}
+
+.arrow-left-before:before {
+  content: "\21AB";
+  margin-left: 3px;
+  transform: translate(0px);
+  display: inline-block;
+  /* transition: all .2s; */
+}
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -0,0 +1,3 @@
+/* main.hero {
+  
+} */
--- a/src/styles/resume.css
+++ b/src/styles/resume.css
@@ -0,0 +1,6 @@
+.resume {
+  h1 {
+    @apply text-3xl font-bold;
+  }
+}
+
--- a/src/utils.js
+++ b/src/utils.js
@@ -0,0 +1,52 @@
+// import kebabCase from 'lodash/kebabCase';
+
+export const getMeta = (image) => image.childImageSharp.fields.imageMeta;
+
+export const getName = (image) => getMeta(image)?.iptc.object_name || image.base;
+
+// some pleasing default colors for SSR and initial hydration
+export const getVibrant = (image) => getMeta(image)?.vibrant;
+
+export const hasName = (image) => Boolean(getMeta(image)?.iptc.object_name);
+
+export const getAspectRatio = (image) => image.childImageSharp.fluid.aspectRatio;
+
+export const getRgba = (palette, alpha) => `rgba(${palette[0]}, ${palette[1]}, ${palette[2]}, ${alpha || 1})`;
+
+// work around SSR bug in react-helmet
+export const getVibrantToHelmetSafeBodyStyle = (vibrant) => {
+  const style = {
+    '--muted': vibrant.Muted.rgb,
+    '--dark-muted': vibrant.DarkMuted.rgb,
+    '--light-muted': vibrant.LightMuted.rgb,
+    '--vibrant': vibrant.Vibrant.rgb,
+    '--dark-vibrant': vibrant.DarkVibrant.rgb,
+    '--light-vibrant': vibrant.LightVibrant.rgb,
+  };
+  if (typeof window === 'undefined') {
+    return style;
+  }
+  return Object.keys(style).map(key => `${(key)}: ${style[key]}`).join(';');
+};
+
+const gcd = (a, b) => {
+  if (b < 0.0000001) {
+    return a; // Since there is a limited precision we need to limit the value.
+  }
+
+  return gcd(b, Math.floor(a % b)); // Discard any fractions due to limitations in precision.
+};
+
+export const getShutterFractionFromExposureTime = (exposureTime) => {
+  let fraction = exposureTime;
+  var len = fraction.toString().length - 2;
+  
+  var denominator = Math.pow(10, len);
+  var numerator = fraction * denominator;
+  
+  var divisor = gcd(numerator, denominator);
+  
+  numerator /= divisor;
+  denominator /= divisor;
+  return `${numerator}/${denominator}`;
+};