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

components/NoteMeta/NoteMeta.tsx

@@ -1,8 +1,8 @@
 import Link from "next/link";
-import { format } from "date-fns";
 import HitCounter from "../HitCounter";
 import NoteTitle from "../NoteTitle";
 import { DateIcon, TagIcon, EditIcon, ViewsIcon } from "../Icons";
+import { formatDateTZ } from "../../lib/helpers/format-date";
 import { styled } from "../../lib/styles/stitches.config";
 import * as config from "../../lib/config";
 import type { NoteType } from "../../types";
@@ -66,7 +66,7 @@ const NoteMeta = ({ slug, date, title, htmlTitle, tags = [] }: NoteMetaProps) =>
             <span>
               <Icon as={DateIcon} />
             </span>
-            <span title={format(new Date(date), "PPppp")}>{format(new Date(date), "MMMM d, yyyy")}</span>
+            <span title={formatDateTZ(date)}>{formatDateTZ(date, "MMMM d, yyyy")}</span>
           </MetaLink>
         </Link>
       </MetaItem>