feat: Add site background

gatsby-config.js

@@ -31,9 +31,10 @@ module.exports = {
       // This plugin allows us to alias common import paths to short names.
       resolve: "gatsby-plugin-root-import",
       options: {
-        "@components": path.resolve(__dirname, "src/components"),
-        "@utils": path.resolve(__dirname, "src/utils"),
-        "@styles": path.resolve(__dirname, "src/styles"),
+        "@components": path.resolve(__dirname, "src", "components"),
+        "@utils": path.resolve(__dirname, "src", "utils"),
+        "@images": path.resolve(__dirname, "src", "images"),
+        "@styles": path.resolve(__dirname, "src", "styles"),
         "@wip": path.resolve(__dirname, "wip")
       }
     },
@@ -53,24 +54,34 @@ module.exports = {
       resolve: "gatsby-source-filesystem",
       options: {
         name: "src",
-        path: `${__dirname}/src`
+        path: path.resolve(__dirname, 'src')
+      }
+    },
+    {
+      resolve: "gatsby-source-filesystem",
+      options: {
+        name: "images",
+        path: path.resolve(__dirname, 'src', 'images')
       }
     },
 
     {
-      resolve: `gatsby-plugin-manifest`,
+      resolve: "gatsby-plugin-manifest",
       options: {
         name: "a web site",
         short_name: "site",
         start_url: "/",
         background_color: "#6b37bf",
         theme_color: "#6b37bf",
         display: "minimal-ui",
-        icon: 'src/images/logo_black.svg'
+        icon: path.resolve(__dirname, "src", "images", "logo_black.svg")
       }
     },
     "gatsby-plugin-offline",
     "gatsby-plugin-react-helmet",
-    "gatsby-plugin-eslint"
+    "gatsby-plugin-eslint",
+    "gatsby-plugin-image",
+    "gatsby-plugin-sharp",
+    "gatsby-transformer-sharp",
   ]
 };

package.json

@@ -44,12 +44,15 @@
     "gatsby-plugin-catch-links": "^4.19.0",
     "gatsby-plugin-emotion": "^7.19.0",
     "gatsby-plugin-eslint": "^4.0.2",
+    "gatsby-plugin-image": "^2.19.0",
     "gatsby-plugin-manifest": "^4.19.0",
     "gatsby-plugin-offline": "^5.19.0",
     "gatsby-plugin-react-helmet": "^5.19.0",
     "gatsby-plugin-root-import": "^2.0.5",
+    "gatsby-plugin-sharp": "^4.19.0",
     "gatsby-plugin-theme-ui": "^0.14.7",
     "gatsby-source-filesystem": "^4.19.0",
+    "gatsby-transformer-sharp": "^4.19.0",
     "gray-percentage": "^2.0.0",
     "http-proxy-middleware": "^2.0.0",
     "netlify-lambda": "^2.0.1",

src/components/MainLayout.jsx

@@ -1,10 +1,10 @@
 /** @jsxImportSource theme-ui */
 import { Global } from "@emotion/react";
-import { Container } from "theme-ui";
+import { Box, Container } from "theme-ui";
 import { Helmet } from "react-helmet";
 import { StaticQuery, graphql } from "gatsby";
 
-export default function MainLayout({ children }) {
+export default function MainLayout({ children, Background = Box }) {
   return (
     <StaticQuery
       query={graphql`
@@ -18,35 +18,41 @@ export default function MainLayout({ children }) {
       `}
       render={function render(data) {
         return (
-          <Container
-            sx={{
-              position: "absolute",
-              height: "auto",
-              top: 0,
-              left: 0,
-              bottom: 0,
-              right: 0
-            }}
-          >
-            {/* TODO Due to a bug whose fix is not yet published, I need to use the
+          <>
+            <Background />
+            <Container
+              sx={{
+                position: "absolute",
+                height: "auto",
+                top: 0,
+                left: 0,
+                bottom: 0,
+                right: 0
+              }}
+            >
+              {/* TODO Due to a bug whose fix is not yet published, I need to use the
                  props method of passing children to Helmet: I run into this stack
                  overflow if I scroll through posts too fast.
                  https://github.com/nfl/react-helmet/issues/373 */}
-            <Helmet
-              meta={[{ charSet: "utf-8" }]}
-              title={data.site.siteMetadata.title}
-              link={[{ href: "https://daniel13rady.com/", rel: "canonical" }]}
-            />
-            <Global
-              styles={{
-                html: { height: "-webkit-fill-available" },
-                body: {
-                  minHeight: "100vh; min-height: -webkit-fill-available"
-                }
-              }}
-            />
-            {children}
-          </Container>
+              <Helmet
+                meta={[{ charSet: "utf-8" }]}
+                title={data.site.siteMetadata.title}
+                link={[{ href: "https://daniel13rady.com/", rel: "canonical" }]}
+              />
+              <Global
+                styles={{
+                  html: {
+                    height: "-webkit-fill-available",
+                  },
+                  body: {
+                    minHeight: "100vh; min-height: -webkit-fill-available",
+                    margin: 0,
+                  }
+                }}
+              />
+              {children}
+            </Container>
+          </>
         );
       }}
     />

src/components/Signpost.jsx

@@ -0,0 +1,78 @@
+/** @jsxImportSource theme-ui */
+
+import React, { useCallback, useState } from "react";
+import { graphql, useStaticQuery } from 'gatsby';
+import { GatsbyImage, getImage } from 'gatsby-plugin-image';
+
+import useSystemTheme, { Modes } from '@utils/hooks/useSystemTheme';
+
+export default function Signpost() {
+  var { unlitSignpost, litSignpost } = useStaticQuery(graphql`
+      query {
+        unlitSignpost: file(relativePath: { eq: "images/full_signpost_unlit.png" }) {
+          childImageSharp {
+            gatsbyImageData(
+              quality: 100,
+              placeholder: BLURRED,
+              layout: FULL_WIDTH
+            )
+          }
+        }
+        litSignpost: file(relativePath: { eq: "images/full_signpost_lit.png" }) {
+          childImageSharp {
+            gatsbyImageData(
+              quality: 100,
+              placeholder: BLURRED,
+              layout: FULL_WIDTH
+            )
+          }
+        }
+      }
+    `);
+
+  var [backgroundImage, setBackgroundImage] = useState(unlitSignpost);
+  useSystemTheme(useCallback(function selectImage(mode) {
+    switch(mode) {
+      case Modes.DARK: {
+        if ( backgroundImage != litSignpost ) {
+          setBackgroundImage(litSignpost);
+        }
+        return;
+      }
+      case Modes.LIGHT: {
+        if ( backgroundImage != unlitSignpost ) {
+          setBackgroundImage(unlitSignpost);
+        }
+        return;
+      }
+      default: break;
+    }
+  }, [backgroundImage, setBackgroundImage, unlitSignpost, litSignpost]));
+
+  return (
+    <GatsbyImage
+      image={getImage(backgroundImage)}
+      alt=''
+      sx={{
+        height: '100%',
+        width: [ 'calc(100vw * 2)', '100vw' ],
+        opacity: backgroundImage == unlitSignpost ?
+          // NOTE(dabrady) The 'unlit signpost' image has a blanket impact on readability, so I'm
+          // drastically lowering its opacity across the board.
+          [ '0.125 !important' ]
+          : [ '1 !important' ],
+        position: 'absolute',
+        margin: 0,
+        top: 0,
+        right: 0,
+        img: {
+          objectPosition: 'top right'
+        },
+        // NOTE(dabrady) At some breakpoints the image is a bit to far off-screen, so I'm adjusting
+        // the position a bit to compensate.
+        marginRight: [ '-6em', 0 ],
+        overflow: 'hidden',
+      }}
+    />
+  );
+}

src/pages/index.jsx

@@ -12,14 +12,15 @@ import {
   IconLinkedIn,
   IconNomadList
 } from "@components/Icons";
+import Signpost from '@components/Signpost';
 import useThemeToggle from "@utils/hooks/useThemeToggle";
 
 export default function Home() {
   // Manual theme toggle (easter egg)
   var toggleTheme = useThemeToggle();
 
   return (
-    <MainLayout>
+    <MainLayout Background={Signpost}>
       {/* <SEO title="Home" keywords={[`gatsby`, `application`, `react`]} /> */}
       <Box
         sx={{

src/styles/theme.js

@@ -123,9 +123,9 @@ export default {
 
   /* For styling MDX content */
   breakpoints: ["40rem", "42rem", "56rem"],
-  // fontSizes: T.FONT_SIZES,
+  fontSizes: T.FONT_SIZES,
   // TODO(dabrady) Add a "small text" size (~0.875rem) and slightly larger normal text size (~1.3rem)
-  fontSizes: ["1rem", "2.2rem", "4rem", "4.4rem", "5rem"],
+  // fontSizes: ["1rem", "2.2rem", "4rem", "4.4rem", "5rem"],
   space: T.SPACES,
   styles: {},
 

src/utils/hooks/useSystemTheme.js

@@ -0,0 +1,30 @@
+import { useEffect } from "react";
+
+export const Modes = {
+  DARK: 'dark',
+  LIGHT: 'light',
+};
+
+/** React to users' system theme change. **/
+export default function useSystemTheme(memoizedReaction) {
+  useEffect(function syncThemeWithSystem() {
+    function react(darkModeQuery) {
+      if ( darkModeQuery.matches ) {
+        memoizedReaction(Modes.DARK);
+      } else {
+        memoizedReaction(Modes.LIGHT);
+      }
+    }
+
+    var darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    // React on first render.
+    react(darkModeMediaQuery);
+    // React when browser detects system theme has changed.
+    darkModeMediaQuery.addEventListener('change', react);
+
+    // Stop monitoring system theme when component is unmounted.
+    return function stopSwitchingModes() {
+      darkModeMediaQuery.removeEventListener('change', react);
+    };
+  }, [memoizedReaction]);
+}

src/utils/typography.js

@@ -1,8 +1,17 @@
 export const BASE_FONT_SIZE = 16; // px
 export const BASE_LINE_HEIGHT = 1.5;
 export const BASELINE = BASE_FONT_SIZE * BASE_LINE_HEIGHT;
-// A 'golden ratio'
-export const SCALE_RATIO = 1.618;
+export const Scales = {
+  GOLDEN: 1.618,
+  PERFECT_FIFTH: 1.500,
+  AUGMENTED_FOURTH: 1.414,
+  PERFECT_FOURTH: 1.333,
+  MAJOR_THIRD: 1.250,
+  MINOR_THIRD: 1.200,
+  MAJOR_SECOND: 1.125,
+  MINOR_SECOND: 1.067
+}
+export const SCALE_RATIO = Scales.AUGMENTED_FOURTH; // Looks nice with site background.
 
 // Scale of font sizes and spaces (for margin and padding) based on a common ratio.
 export const FONT_SIZES = _modularScale().map(f => `${f}em`);