more caching and error handling

components/Comments/Comments.tsx

@@ -18,7 +18,6 @@ const Comments = ({ title }: CommentsProps) => {
     return null;
   }
 
-  // TODO: use custom `<Loading />` spinner component during suspense
   return (
     <Giscus
       repo={config.githubRepo as GiscusProps["repo"]}

components/Image/Image.tsx

@@ -12,6 +12,7 @@ const Image = ({ src, height, width, placeholder, className, ...rest }: ImagePro
   const constrainWidth = (width?: number | `${number}`) => {
     if (!width) return MAX_WIDTH;
 
+    // ensure that the image width is not greater than the global maximum width
     return Math.min(typeof width === "string" ? parseInt(width, 10) : width, MAX_WIDTH);
   };
 

components/RelativeTime/RelativeTime.tsx

@@ -1,11 +1,8 @@
 "use client";
 
+import TimeAgo from "react-timeago";
+import Time from "../Time";
 import { useHasMounted } from "../../hooks";
-import { format, formatISO, formatDistanceToNowStrict } from "date-fns";
-import { enUS } from "date-fns/locale";
-import { tz } from "@date-fns/tz";
-import { utc } from "@date-fns/utc";
-import * as config from "../../lib/config";
 import type { ComponentPropsWithoutRef } from "react";
 
 export type RelativeTimeProps = ComponentPropsWithoutRef<"time"> & {
@@ -17,17 +14,11 @@ const RelativeTime = ({ date, ...rest }: RelativeTimeProps) => {
   // cause a react hydration mismatch error.
   const hasMounted = useHasMounted();
 
-  return (
-    <time
-      dateTime={formatISO(date, { in: utc })}
-      title={format(date, "MMM d, y, h:mm a O", { in: tz(config.timeZone), locale: enUS })}
-      {...rest}
-    >
-      {hasMounted
-        ? formatDistanceToNowStrict(date, { locale: enUS, addSuffix: true })
-        : `on ${format(date, "MMM d, y", { in: tz(config.timeZone), locale: enUS })}`}
-    </time>
-  );
+  if (!hasMounted) {
+    return <Time date={date} format="MMM d, y" {...rest} />;
+  }
+
+  return <TimeAgo date={date} {...rest} />;
 };
 
 export default RelativeTime;

components/Video/Video.module.css

@@ -1,14 +1,5 @@
 .player {
   margin: 0 auto;
-}
-
-.wrapper.responsive {
-  position: relative;
-  padding-top: 56.25%; /* ratio of 1280x720 */
-}
-
-.wrapper.responsive .player {
-  position: absolute;
-  top: 0;
-  left: 0;
+  width: 100%;
+  height: auto;
 }

components/Video/Video.tsx

@@ -7,43 +7,38 @@ export type VideoProps = Omit<Partial<ComponentPropsWithoutRef<"video">>, "src">
   src: string[];
   poster?: string;
   autoplay?: boolean;
-  responsive?: boolean;
 };
 
-const Video = ({ src, poster, autoplay = false, responsive = true, className, ...rest }: VideoProps) => {
+const Video = ({ src, poster, autoplay = false, className, ...rest }: VideoProps) => {
   return (
-    <div className={clsx(styles.wrapper, responsive && styles.responsive, className)}>
-      <video
-        width="100%"
-        height="100%"
-        className={styles.player}
-        poster={poster}
-        {...(autoplay
-          ? {
-              preload: "auto",
-              controls: false,
-              autoPlay: true,
-              playsInline: true, // safari autoplay workaround
-              loop: true,
-              muted: true,
-            }
-          : {
-              preload: "metadata",
-              controls: true,
-            })}
-        {...rest}
-      >
-        {src.map((file) => {
-          const extension = file.split(".").pop();
-
-          if (extension === "vtt") {
-            return <track key={file} kind="subtitles" src={file} srcLang="en" label="English" default />;
-          } else {
-            return <source key={file} src={file} type={`video/${extension}`} />;
+    <video
+      className={clsx(styles.player, className)}
+      poster={poster}
+      {...(autoplay
+        ? {
+            preload: "auto",
+            controls: false,
+            autoPlay: true,
+            playsInline: true, // safari autoplay workaround
+            loop: true,
+            muted: true,
           }
-        })}
-      </video>
-    </div>
+        : {
+            preload: "metadata",
+            controls: true,
+          })}
+      {...rest}
+    >
+      {src.map((file) => {
+        const extension = file.split(".").pop();
+
+        if (extension === "vtt") {
+          return <track key={file} kind="subtitles" src={file} srcLang="en" label="English" default />;
+        } else {
+          return <source key={file} src={file} type={`video/${extension}`} />;
+        }
+      })}
+    </video>
   );
 };