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,
+};