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

@@ -1,17 +1,19 @@
 import ReactPlayer from "react-player/youtube";
+import { useHasMounted } from "../../hooks/use-has-mounted";
 import { styled } from "../../lib/styles/stitches.config";
 import type { YouTubePlayerProps } from "react-player/youtube";
 
 const Wrapper = styled("div", {
   position: "relative",
   paddingTop: "56.25%",
+});
 
-  "& > div": {
-    position: "absolute",
-    top: 0,
-    left: 0,
-  },
+const Player = styled(ReactPlayer, {
+  position: "absolute",
+  top: 0,
+  left: 0,
 
+  // target both the lazy thumbnail preview *and* the actual YouTube embed
   "& .react-player__preview, & iframe": {
     borderRadius: "$rounded",
   },
@@ -22,17 +24,24 @@ export type YouTubeEmbedProps = Partial<YouTubePlayerProps> & {
   className?: string;
 };
 
-const YouTubeEmbed = ({ id, className, ...rest }: YouTubeEmbedProps) => (
-  <Wrapper className={className}>
-    <ReactPlayer
-      width="100%"
-      height="100%"
-      url={`https://www.youtube-nocookie.com/watch?v=${id}`}
-      light={`https://i.ytimg.com/vi/${id}/hqdefault.jpg`}
-      controls
-      {...rest}
-    />
-  </Wrapper>
-);
+const YouTubeEmbed = ({ id, className, ...rest }: YouTubeEmbedProps) => {
+  // fix hydration issues: https://github.com/cookpete/react-player/issues/1428
+  const hasMounted = useHasMounted();
+
+  return (
+    <Wrapper className={className}>
+      {hasMounted && (
+        <Player
+          width="100%"
+          height="100%"
+          url={`https://www.youtube-nocookie.com/watch?v=${id}`}
+          light={`https://i.ytimg.com/vi/${id}/hqdefault.jpg`}
+          controls
+          {...rest}
+        />
+      )}
+    </Wrapper>
+  );
+};
 
 export default YouTubeEmbed;