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

@@ -1,7 +1,9 @@
-import { intlFormat, formatDistanceToNowStrict } from "date-fns";
 import Link from "../Link";
 import { StarOcticon, ForkOcticon } from "../Icons";
+import { useHasMounted } from "../../hooks/use-has-mounted";
+import { formatDateTZ, formatTimeAgo } from "../../lib/helpers/format-date";
 import { styled } from "../../lib/styles/stitches.config";
+import { siteLocale } from "../../lib/config";
 import type { RepositoryType } from "../../types";
 
 const Wrapper = styled("div", {
@@ -80,68 +82,58 @@ const RepositoryCard = ({
   forks,
   updatedAt,
   className,
-}: RepositoryCardProps) => (
-  <Wrapper className={className}>
-    <Name href={url}>{name}</Name>
+}: RepositoryCardProps) => {
+  const hasMounted = useHasMounted();
 
-    {description && <Description>{description}</Description>}
+  return (
+    <Wrapper className={className}>
+      <Name href={url}>{name}</Name>
 
-    <Meta>
-      {language && (
-        <MetaItem>
-          <LanguageCircle css={{ backgroundColor: language.color }} />
-          <span>{language.name}</span>
-        </MetaItem>
-      )}
+      {description && <Description>{description}</Description>}
 
-      {stars > 0 && (
-        <MetaItem>
-          <MetaLink
-            href={`${url}/stargazers`}
-            title={`${stars.toLocaleString("en-US")} ${stars === 1 ? "star" : "stars"}`}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <MetaIcon as={StarOcticon} />
-            <span>{stars.toLocaleString("en-US")}</span>
-          </MetaLink>
-        </MetaItem>
-      )}
-
-      {forks > 0 && (
-        <MetaItem>
-          <MetaLink
-            href={`${url}/network/members`}
-            title={`${forks.toLocaleString("en-US")} ${forks === 1 ? "fork" : "forks"}`}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <MetaIcon as={ForkOcticon} />
-            <span>{forks.toLocaleString("en-US")}</span>
-          </MetaLink>
-        </MetaItem>
-      )}
-
-      <MetaItem
-        title={intlFormat(
-          new Date(updatedAt),
-          {
-            year: "numeric",
-            month: "short",
-            day: "numeric",
-            hour: "numeric",
-            minute: "numeric",
-            timeZoneName: "short",
-          },
-          {
-            locale: "en-US",
-          }
+      <Meta>
+        {language && (
+          <MetaItem>
+            <LanguageCircle css={{ backgroundColor: language.color }} />
+            <span>{language.name}</span>
+          </MetaItem>
         )}
-      >
-        <span>Updated {formatDistanceToNowStrict(new Date(updatedAt), { addSuffix: true })}</span>
-      </MetaItem>
-    </Meta>
-  </Wrapper>
-);
+
+        {stars > 0 && (
+          <MetaItem>
+            <MetaLink
+              href={`${url}/stargazers`}
+              title={`${stars.toLocaleString(siteLocale)} ${stars === 1 ? "star" : "stars"}`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <MetaIcon as={StarOcticon} />
+              <span>{stars.toLocaleString(siteLocale)}</span>
+            </MetaLink>
+          </MetaItem>
+        )}
+
+        {forks > 0 && (
+          <MetaItem>
+            <MetaLink
+              href={`${url}/network/members`}
+              title={`${forks.toLocaleString(siteLocale)} ${forks === 1 ? "fork" : "forks"}`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <MetaIcon as={ForkOcticon} />
+              <span>{forks.toLocaleString(siteLocale)}</span>
+            </MetaLink>
+          </MetaItem>
+        )}
+
+        {/* only use relative "time ago" on client side, since it'll be outdated via SSG and cause hydration errors */}
+        <MetaItem title={formatDateTZ(updatedAt)}>
+          <span>Updated {hasMounted ? formatTimeAgo(updatedAt) : `on ${formatDateTZ(updatedAt, "PP")}`}</span>
+        </MetaItem>
+      </Meta>
+    </Wrapper>
+  );
+};
 
 export default RepositoryCard;