fix: remove /previously stylesheet from DOM when navigating away

app/globals.css

@@ -170,4 +170,9 @@
 
 @layer components {
   @import "react-lite-youtube-embed/dist/LiteYouTubeEmbed.css";
+
+  /* styles for wrapper around generated markdown content */
+  .generated {
+    @apply text-[0.925rem] leading-relaxed first:mt-0 last:mb-0 md:text-base [&_p]:my-5;
+  }
 }

app/previously/page-styles.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useEffect } from "react";
+import { ComicNeue } from "@/lib/fonts";
+
+export const PageStyles = () => {
+  useEffect(() => {
+    // Create a style element
+    const styleElement = document.createElement("style");
+    styleElement.id = "previously-page-styles";
+    styleElement.textContent = `
+      body {
+        cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAZklEQVR4AWIAgn/uBT6A9uoAAwAQiIJo97/0Rgy0ANoJH8MPeEgtqwPQEACqCoQHAKECQKgAECoAhAoAoQJAqAAQxh1oPQfcW3kJpxHtL1AAHAwEwwdYiH8BIEgBTBRAAAEEEEAAG7mRt30hEhoLAAAAAElFTkSuQmCC") 2 1, auto;
+      }
+      a, button {
+        cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAgMAAAAOFJJnAAAACVBMVEVHcEwAAAD///8W1S+BAAAAAXRSTlMAQObYZgAAAEdJREFUeAFjoAVghTGkHIhghMAYmQEwxlIYYxlYlSiQMQEsELUKyli1ahWYwQZjMGIwGLKQGA4QA1EYEP0rGVAZrKGhSF4BAHw/HsVwshytAAAAAElFTkSuQmCC") 16 12, auto;
+      }
+      main {
+        font-family: ${ComicNeue.style.fontFamily}, var(--font-sans);
+        font-weight: 700;
+        font-size: 1em;
+        text-align: center;
+      }
+      main iframe + p em,
+      main img + em {
+        display: block;
+        text-align: center;
+        font-style: normal;
+        font-size: 0.95em;
+        font-weight: 700;
+      }
+    `;
+
+    // Append to head
+    document.head.appendChild(styleElement);
+
+    // Cleanup function to remove styles when component unmounts
+    return () => {
+      const existingStyle = document.getElementById("previously-page-styles");
+      if (existingStyle) {
+        existingStyle.remove();
+      }
+    };
+  }, []);
+
+  return null;
+};

app/previously/page.mdx

@@ -2,7 +2,7 @@ import PageTitle from "@/components/layout/page-title";
 import Marquee from "@/components/marquee";
 import { Win95Icon } from "@/components/icons";
 import { createMetadata } from "@/lib/metadata";
-import { ComicNeue } from "@/lib/fonts";
+import { PageStyles } from "./page-styles";
 
 export const metadata = createMetadata({
   title: "Previously on...",
@@ -22,33 +22,6 @@ export const WarningMarquee = () => (
   </Marquee>
 );
 
-export const PageStyles = () => (
-  <style>
-    {`
-      body {
-        cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAZklEQVR4AWIAgn/uBT6A9uoAAwAQiIJo97/0Rgy0ANoJH8MPeEgtqwPQEACqCoQHAKECQKgAECoAhAoAoQJAqAAQxh1oPQfcW3kJpxHtL1AAHAwEwwdYiH8BIEgBTBRAAAEEEEAAG7mRt30hEhoLAAAAAElFTkSuQmCC") 2 1, auto;
-      }
-      a, button {
-        cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAgMAAAAOFJJnAAAACVBMVEVHcEwAAAD///8W1S+BAAAAAXRSTlMAQObYZgAAAEdJREFUeAFjoAVghTGkHIhghMAYmQEwxlIYYxlYlSiQMQEsELUKyli1ahWYwQZjMGIwGLKQGA4QA1EYEP0rGVAZrKGhSF4BAHw/HsVwshytAAAAAElFTkSuQmCC") 16 12, auto;
-      }
-      main {
-        font-family: ${ComicNeue.style.fontFamily}, var(--font-sans);
-        font-weight: 700;
-        font-size: 1em;
-        text-align: center;
-      }
-      main iframe + p em,
-      main img + em {
-        display: block;
-        text-align: center;
-        font-style: normal;
-        font-size: 0.95em;
-        font-weight: 700;
-      }
-    `}
-  </style>
-);
-
 <PageStyles />
 
 <PageTitle canonical="/previously" className="font-semibold">

app/projects/page.tsx

@@ -2,6 +2,7 @@ import { env } from "@/lib/env";
 import { Suspense } from "react";
 import { notFound } from "next/navigation";
 import { GitForkIcon, StarIcon } from "lucide-react";
+import Skeleton from "@/components/ui/skeleton";
 import PageTitle from "@/components/layout/page-title";
 import Link from "@/components/link";
 import RelativeTime from "@/components/relative-time";
@@ -41,7 +42,7 @@ const Page = async () => {
         </Link>
       </h2>
 
-      <Suspense fallback={<p>Failed to generate activity calendar.</p>}>
+      <Suspense fallback={<Skeleton className="h-40 w-full" />}>
         {contributions.length > 0 ? (
           <div className={cn("mx-auto mt-4 mb-8")}>
             <ActivityCalendar data={contributions} noun="contribution" />
@@ -106,7 +107,7 @@ const Page = async () => {
                 )}
 
                 <div className="text-muted-foreground whitespace-nowrap">
-                  <Suspense fallback={<span>Updated recently</span>}>
+                  <Suspense fallback={null}>
                     <span>
                       Updated <RelativeTime date={repo!.pushedAt} />
                     </span>

next.config.ts

@@ -157,12 +157,7 @@ const nextPlugins: Array<
       rehypePlugins: [
         "rehype-unwrap-images",
         "rehype-slug",
-        [
-          "rehype-wrapper",
-          {
-            className: "text-[0.925rem] leading-relaxed first:mt-0 last:mb-0 md:text-base [&_p]:my-5",
-          },
-        ],
+        ["rehype-wrapper", { className: "generated" }],
         "rehype-mdx-code-props",
         "rehype-mdx-import-media",
       ],