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/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 });
+};