React 18 (#863)

* gymnastics to make theme script work with react 18 hydration

* try next 12.1.3 canary to fix SSG head tags?

* revert theme script changes

* next 12.1.3-canary.3

* double-revert some of the use-theme.tsx changes

* separate theme restoration script & move to _document

* bump next

* bump next (again)

* clean up some theme stuff

* use hashed image URLs in webmanifest and feeds

* text experimental react config

* Update ThemeScript.tsx

* switch selfie image to `layout="raw"`

* use `layout="raw"` for all non-imported images

* revert raw images in some places, messes up responsiveness

* fix nitpicky "no divs inside buttons" html validation error

* fix react-player hydration errors

* fix hydration errors from server/client time zone differences

* clean up hydration fixes

* Update format-date.ts

* last-minute cleanup

lib/config/index.js

@@ -3,7 +3,8 @@ module.exports = {
   // Site info
   siteName: "Jake Jarvis",
   siteDomain: "jarv.is",
-  siteLocale: "en_us",
+  siteLocale: "en-US",
+  timeZone: "America/New_York", // https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List
   baseUrl:
     process.env.NEXT_PUBLIC_VERCEL_ENV === "production"
       ? "https://jarv.is"

lib/config/seo.ts

@@ -1,10 +1,16 @@
 import * as config from ".";
 
+// favicons (some used here, some re-exported and used elsewhere)
 import faviconIco from "../../public/static/favicons/favicon.ico";
 import faviconPng from "../../public/static/favicons/favicon.png";
 import appleTouchIconPng from "../../public/static/favicons/apple-touch-icon.png";
+import chrome512Png from "../../public/static/favicons/android-chrome-512x512.png";
+import chrome192Png from "../../public/static/favicons/android-chrome-192x192.png";
+import maskable512Png from "../../public/static/favicons/maskable-512x512.png";
+import maskable192Png from "../../public/static/favicons/maskable-192x192.png";
 import meJpg from "../../public/static/images/me.jpg";
 
+import type { StaticImageData } from "next/image";
 import type { DefaultSeoProps, SocialProfileJsonLdProps, ArticleJsonLdProps } from "next-seo";
 
 // Most of this file simply takes the data already defined in ./config.js and translates it into objects that are
@@ -17,7 +23,7 @@ export const defaultSeo: DefaultSeoProps = {
   openGraph: {
     site_name: config.siteName,
     title: `${config.siteName} – ${config.shortDescription}`,
-    locale: config.siteLocale,
+    locale: config.siteLocale?.replace("-", "_"),
     type: "website",
     images: [
       {
@@ -126,3 +132,15 @@ export const articleJsonLd: Pick<ArticleJsonLdProps, "authorName" | "publisherNa
   publisherName: config.siteName,
   publisherLogo: `${config.baseUrl}${meJpg.src}`,
 };
+
+// Re-export icons to use their static image data elsewhere
+export const favicons: Record<string, StaticImageData> = {
+  faviconIco,
+  faviconPng,
+  appleTouchIconPng,
+  chrome512Png,
+  chrome192Png,
+  maskable512Png,
+  maskable192Png,
+  meJpg,
+};

lib/helpers/build-feed.ts

@@ -2,6 +2,7 @@ import { Feed } from "feed";
 import { getAllNotes } from "./parse-notes";
 import * as config from "../config";
 import { RELEASE_DATE } from "../config/constants";
+import { favicons } from "../config/seo";
 import type { GetServerSidePropsContext, PreviewData } from "next";
 import type { ParsedUrlQuery } from "querystring";
 
@@ -22,7 +23,7 @@ export const buildFeed = (
     description: config.longDescription,
     copyright: "https://creativecommons.org/licenses/by/4.0/",
     updated: new Date(RELEASE_DATE),
-    image: `${config.baseUrl}/static/images/me.jpg`,
+    image: `${config.baseUrl}${favicons.meJpg.src}`,
     feedLinks: {
       rss: `${config.baseUrl}/feed.xml`,
       atom: `${config.baseUrl}/feed.atom`,

lib/helpers/format-date.ts

@@ -0,0 +1,15 @@
+import { formatDistanceToNowStrict } from "date-fns";
+import { formatInTimeZone } from "date-fns-tz";
+import enUS from "date-fns/locale/en-US";
+import { timeZone } from "../config";
+
+// normalize timezone across the site, both server and client side, to prevent hydration errors.
+// format defaults to "Apr 4, 2022, 3:04 PM EDT", see https://date-fns.org/v2.28.0/docs/format
+export const formatDateTZ = (date: string | number | Date, formatStr = "PPp zzz", options = {}) => {
+  return formatInTimeZone(new Date(date), timeZone, formatStr, { locale: enUS, ...options });
+};
+
+// returns "5 minutes ago", "1 year ago", etc.
+export const formatTimeAgo = (date: string | number | Date, options = {}) => {
+  return formatDistanceToNowStrict(new Date(date), { addSuffix: true, locale: enUS, ...options });
+};

lib/styles/helpers/themes.ts

@@ -0,0 +1,22 @@
+import { theme, darkTheme } from "../stitches.config";
+
+// theme classnames are generated dynamically by stitches, so have ThemeProvider pull them from there
+export const themeClassNames = {
+  light: theme.className,
+  dark: darkTheme.className,
+};
+
+// colors used for `<meta name="theme-color" .../>` (see components/Layout/Layout.tsx)
+export const themeColors = {
+  light: theme.colors.backgroundOuter?.value,
+  dark: darkTheme.colors.backgroundOuter?.value,
+};
+
+// default to a simple light or dark binary option
+export const colorSchemes = ["light", "dark"];
+
+// https://web.dev/prefers-color-scheme/#the-prefers-color-scheme-media-query
+export const darkModeQuery = "(prefers-color-scheme: dark)";
+
+// local storage key
+export const themeStorageKey = "theme";

lib/styles/stitches.config.ts

@@ -1,7 +1,7 @@
 import { createStitches, defaultThemeMap } from "@stitches/react";
 
 // modified modern-normalize.css in object form:
-// https://github.com/jakejarvis/stitches-normalize/blob/main/index.js
+// https://github.com/jakejarvis/stitches-normalize/blob/main/src/index.ts
 import normalizeCss from "stitches-normalize";
 
 // web fonts