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/Selfie/Selfie.tsx

@@ -6,23 +6,16 @@ import type { ComponentProps } from "react";
 
 import selfieJpg from "../../public/static/images/selfie.jpg";
 
-const ConstrainImage = styled("div", {
+const Image = styled(NextImage, {
+  display: "block",
   width: "50px",
   height: "50px",
-  lineHeight: 0,
-  padding: 0,
-
-  "@medium": {
-    width: "70px",
-    height: "70px",
-  },
-});
-
-const Image = styled(NextImage, {
   border: "1px solid $light !important",
   borderRadius: "50%",
 
   "@medium": {
+    width: "70px",
+    height: "70px",
     borderWidth: "2px !important",
   },
 });
@@ -60,17 +53,7 @@ export type SelfieProps = ComponentProps<typeof Link>;
 const Selfie = ({ ...rest }: SelfieProps) => (
   <NextLink href="/" passHref={true}>
     <Link {...rest}>
-      <ConstrainImage>
-        <Image
-          src={selfieJpg}
-          alt="Photo of Jake Jarvis"
-          width={70}
-          height={70}
-          quality={60}
-          layout="intrinsic"
-          priority
-        />
-      </ConstrainImage>
+      <Image src={selfieJpg} alt="Photo of Jake Jarvis" width={50} height={50} quality={60} layout="raw" priority />
       <Name>Jake Jarvis</Name>
     </Link>
   </NextLink>