fix: batch server requests from posts list

2026-04-17 10:28:46 -04:00 · 2026-01-28 14:37:37 -05:00
parent 9d8e775fcd
commit 4dca81b58a
50 changed files with 160 additions and 143 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -35,3 +35,6 @@ yarn.lock
 # vercel
 .vercel
 .env*.local
+
+# next-agents-md
+.next-docs/
--- a/AGENTS.md
+++ b/AGENTS.md
--- a/app/analytics.tsx
+++ b/app/analytics.tsx
@@ -10,4 +10,4 @@ const Analytics = () => {
  );
 };

-export default Analytics;
+export { Analytics };
--- a/app/birthday/page.tsx
+++ b/app/birthday/page.tsx
@@ -1,7 +1,7 @@
 import { env } from "@/lib/env";
 import { JsonLd } from "react-schemaorg";
-import PageTitle from "@/components/layout/page-title";
-import Video from "@/components/video";
+import { PageTitle } from "@/components/layout/page-title";
+import { Video } from "@/components/video";
 import { createMetadata } from "@/lib/metadata";
 import type { VideoObject } from "schema-dts";

--- a/app/cli/page.mdx
+++ b/app/cli/page.mdx
@@ -1,4 +1,4 @@
-import PageTitle from "@/components/layout/page-title";
+import { PageTitle } from "@/components/layout/page-title";
 import { createMetadata } from "@/lib/metadata";

 export const metadata = createMetadata({
--- a/app/contact/page.tsx
+++ b/app/contact/page.tsx
@@ -1,5 +1,5 @@
-import PageTitle from "@/components/layout/page-title";
-import ContactForm from "@/components/contact-form";
+import { PageTitle } from "@/components/layout/page-title";
+import { ContactForm } from "@/components/contact-form";
 import { createMetadata } from "@/lib/metadata";

 export const metadata = createMetadata({
--- a/app/globals.css
+++ b/app/globals.css
@@ -193,9 +193,10 @@
  ::selection {
    @apply bg-selection text-selection-foreground;
  }
+  /* https://ui.shadcn.com/docs/components/button#cursor */
  button:not(:disabled),
  [role="button"]:not(:disabled) {
-    @apply cursor-pointer;
+    cursor: pointer;
  }
 }

--- a/app/hillary/page.tsx
+++ b/app/hillary/page.tsx
@@ -1,7 +1,7 @@
 import { env } from "@/lib/env";
 import { JsonLd } from "react-schemaorg";
-import PageTitle from "@/components/layout/page-title";
-import Video from "@/components/video";
+import { PageTitle } from "@/components/layout/page-title";
+import { Video } from "@/components/video";
 import { createMetadata } from "@/lib/metadata";
 import type { VideoObject } from "schema-dts";

--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,11 +1,11 @@
 import { ViewTransition } from "react";
 import { env } from "@/lib/env";
 import { JsonLd } from "react-schemaorg";
-import Providers from "@/components/providers";
-import Header from "@/components/layout/header";
-import Footer from "@/components/layout/footer";
+import { Providers } from "@/components/providers";
+import { Header } from "@/components/layout/header";
+import { Footer } from "@/components/layout/footer";
 import { Toaster } from "@/components/ui/sonner";
-import Analytics from "@/app/analytics";
+import { Analytics } from "@/app/analytics";
 import { defaultMetadata } from "@/lib/metadata";
 import { GeistSans, GeistMono } from "@/lib/fonts";
 import siteConfig from "@/lib/config/site";
--- a/app/leo/page.tsx
+++ b/app/leo/page.tsx
@@ -1,7 +1,7 @@
 import { env } from "@/lib/env";
 import { JsonLd } from "react-schemaorg";
-import PageTitle from "@/components/layout/page-title";
-import Video from "@/components/video";
+import { PageTitle } from "@/components/layout/page-title";
+import { Video } from "@/components/video";
 import { createMetadata } from "@/lib/metadata";
 import type { VideoObject } from "schema-dts";

--- a/app/license/page.mdx
+++ b/app/license/page.mdx
@@ -1,4 +1,4 @@
-import PageTitle from "@/components/layout/page-title";
+import { PageTitle } from "@/components/layout/page-title";
 import { createMetadata } from "@/lib/metadata";

 export const metadata = createMetadata({
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -1,5 +1,5 @@
 import { Button } from "@/components/ui/button";
-import Video from "@/components/video";
+import { Video } from "@/components/video";
 import Link from "next/link";
 import type { Metadata } from "next";

--- a/app/notes/[slug]/page.tsx
+++ b/app/notes/[slug]/page.tsx
@@ -3,10 +3,10 @@ import { Suspense } from "react";
 import Link from "next/link";
 import { JsonLd } from "react-schemaorg";
 import { CalendarDaysIcon, TagIcon, SquarePenIcon, EyeIcon, MessagesSquareIcon } from "lucide-react";
-import ViewCounter from "@/components/view-counter";
-import CommentCount from "@/components/comment-count";
-import Comments from "@/components/comments/comments";
-import CommentsSkeleton from "@/components/comments/comments-skeleton";
+import { ViewCounter } from "@/components/view-counter";
+import { CommentCount } from "@/components/comment-count";
+import { Comments } from "@/components/comments/comments";
+import { CommentsSkeleton } from "@/components/comments/comments-skeleton";
 import { getSlugs, getFrontMatter, POSTS_DIR } from "@/lib/posts";
 import { createMetadata } from "@/lib/metadata";
 import siteConfig from "@/lib/config/site";
--- a/app/notes/page.tsx
+++ b/app/notes/page.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link";
-import PageTitle from "@/components/layout/page-title";
-import PostStats from "@/components/post-stats";
+import { PageTitle } from "@/components/layout/page-title";
+import { PostStats, PostStatsProvider } from "@/components/post-stats";
 import { getFrontMatter, POSTS_DIR, type FrontMatter } from "@/lib/posts";
 import { createMetadata } from "@/lib/metadata";
 import authorConfig from "@/lib/config/author";
@@ -61,12 +61,12 @@ const PostsList = async () => {
                  {dateDisplay}
                </time>
              </span>
-              <div className="space-x-2.5">
+              <div className="space-x-2">
                {/* htmlTitle is sanitized by rehypeSanitize in lib/posts.ts with strict allowlist: only code, em, strong tags */}
                <Link
                  href={`/${POSTS_DIR}/${slug}`}
                  dangerouslySetInnerHTML={{ __html: htmlTitle || title }}
-                  className="underline-offset-4 hover:underline"
+                  className="mr-2.5 underline-offset-4 hover:underline"
                  style={{ viewTransitionName: `note-title-${slug}` }}
                />

@@ -87,7 +87,9 @@ const Page = async () => {
  return (
    <>
      <PageTitle canonical="/notes">Notes</PageTitle>
-      <PostsList />
+      <PostStatsProvider>
+        <PostsList />
+      </PostStatsProvider>
    </>
  );
 };
--- a/app/previously/page.mdx
+++ b/app/previously/page.mdx
@@ -1,5 +1,5 @@
-import PageTitle from "@/components/layout/page-title";
-import Marquee from "@/components/marquee";
+import { PageTitle } from "@/components/layout/page-title";
+import { Marquee } from "@/components/marquee";
 import { Win95Icon } from "@/components/icons";
 import { createMetadata } from "@/lib/metadata";
 import { PageStyles } from "./page-styles";
--- a/app/privacy/page.mdx
+++ b/app/privacy/page.mdx
@@ -1,4 +1,4 @@
-import PageTitle from "@/components/layout/page-title";
+import { PageTitle } from "@/components/layout/page-title";
 import { createMetadata } from "@/lib/metadata";

 export const metadata = createMetadata({
--- a/app/projects/page.tsx
+++ b/app/projects/page.tsx
@@ -3,9 +3,9 @@ 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 RelativeTime from "@/components/relative-time";
-import ActivityCalendar from "@/components/activity-calendar";
+import { PageTitle } from "@/components/layout/page-title";
+import { RelativeTime } from "@/components/relative-time";
+import { ActivityCalendar } from "@/components/activity-calendar";
 import { GitHubIcon } from "@/components/icons";
 import { cn } from "@/lib/utils";
 import { createMetadata } from "@/lib/metadata";
--- a/app/uses/page.mdx
+++ b/app/uses/page.mdx
@@ -1,4 +1,4 @@
-import PageTitle from "@/components/layout/page-title";
+import { PageTitle } from "@/components/layout/page-title";
 import { createMetadata } from "@/lib/metadata";

 export const metadata = createMetadata({
--- a/app/zip/page.mdx
+++ b/app/zip/page.mdx
@@ -1,4 +1,4 @@
-import PageTitle from "@/components/layout/page-title";
+import { PageTitle } from "@/components/layout/page-title";
 import { createMetadata } from "@/lib/metadata";

 import backgroundImg from "./sundar.jpg";
--- a/components/activity-calendar.tsx
+++ b/components/activity-calendar.tsx
@@ -1,10 +1,10 @@
 "use client";

-import { ActivityCalendar, type Activity } from "react-activity-calendar";
+import { ActivityCalendar as ActivityCalendarPrimitive, type Activity } from "react-activity-calendar";
 import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";

-const Calendar = ({
+const ActivityCalendar = ({
  data,
  noun = "thing",
  className,
@@ -24,7 +24,7 @@ const Calendar = ({
      )}
      {...rest}
    >
-      <ActivityCalendar
+      <ActivityCalendarPrimitive
        data={data}
        colorScheme="dark"
        theme={{
@@ -55,4 +55,4 @@ const Calendar = ({
  );
 };

-export default Calendar;
+export { ActivityCalendar };
--- a/components/code-block.tsx
+++ b/components/code-block.tsx
@@ -1,6 +1,6 @@
 import { codeToHtml } from "shiki";
 import { cacheLife } from "next/cache";
-import CopyButton from "@/components/copy-button";
+import { CopyButton } from "@/components/copy-button";
 import { cn } from "@/lib/utils";

 /**
@@ -72,4 +72,4 @@ const CodeBlock = async ({ children, className, showLineNumbers = true, ...props
  );
 };

-export default CodeBlock;
+export { CodeBlock };
--- a/components/comment-count.tsx
+++ b/components/comment-count.tsx
@@ -36,4 +36,4 @@ const CommentCount = ({ slug }: { slug: string }) => {
  );
 };

-export default CommentCount;
+export { CommentCount };
--- a/components/comments/comment-actions.tsx
+++ b/components/comments/comment-actions.tsx
@@ -10,7 +10,7 @@ import {
  DropdownMenuTrigger,
  DropdownMenuItem,
 } from "@/components/ui/dropdown-menu";
-import Form from "./comment-form";
+import { CommentForm } from "./comment-form";
 import { useSession } from "@/lib/auth-client";
 import { deleteComment, type CommentWithUser } from "@/lib/server/comments";

@@ -42,7 +42,7 @@ const CommentActions = ({ comment }: { comment: CommentWithUser }) => {
  return (
    <div className="mt-4">
      {isEditing ? (
-        <Form
+        <CommentForm
          slug={comment.pageSlug}
          initialContent={comment.content}
          commentId={comment.id}
@@ -81,7 +81,7 @@ const CommentActions = ({ comment }: { comment: CommentWithUser }) => {

      {isReplying && (
        <div className="mt-4">
-          <Form
+          <CommentForm
            slug={comment.pageSlug}
            parentId={comment.id}
            onCancel={() => setIsReplying(false)}
@@ -93,4 +93,4 @@ const CommentActions = ({ comment }: { comment: CommentWithUser }) => {
  );
 };

-export default CommentActions;
+export { CommentActions };
--- a/components/comments/comment-form.tsx
+++ b/components/comments/comment-form.tsx
@@ -193,4 +193,4 @@ const CommentForm = ({
  );
 };

-export default CommentForm;
+export { CommentForm };
--- a/components/comments/comment-single.tsx
+++ b/components/comments/comment-single.tsx
@@ -2,8 +2,8 @@ import { getImageProps } from "next/image";
 import Link from "next/link";
 import Markdown from "react-markdown";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import RelativeTime from "@/components/relative-time";
-import Actions from "./comment-actions";
+import { RelativeTime } from "@/components/relative-time";
+import { CommentActions } from "./comment-actions";
 import { remarkGfm, remarkSmartypants } from "@/lib/remark";
 import { rehypeExternalLinks } from "@/lib/rehype";
 import { cn } from "@/lib/utils";
@@ -66,11 +66,11 @@ const CommentSingle = ({ comment }: { comment: CommentWithUser }) => {
            </Markdown>
          </div>

-          <Actions comment={comment} />
+          <CommentActions comment={comment} />
        </div>
      </div>
    </div>
  );
 };

-export default CommentSingle;
+export { CommentSingle };
--- a/components/comments/comment-thread.tsx
+++ b/components/comments/comment-thread.tsx
@@ -1,4 +1,4 @@
-import Single from "./comment-single";
+import { CommentSingle } from "./comment-single";
 import { cn } from "@/lib/utils";
 import type { CommentWithUser } from "@/lib/server/comments";

@@ -18,7 +18,7 @@ const CommentThread = ({

  return (
    <>
-      <Single comment={comment} />
+      <CommentSingle comment={comment} />

      {replies.length > 0 && (
        <div className={cn("mt-6 space-y-6", level < maxLevel && "ml-6 border-l-2 pl-6")}>
@@ -37,4 +37,4 @@ const CommentThread = ({
  );
 };

-export default CommentThread;
+export { CommentThread };
--- a/components/comments/comments-skeleton.tsx
+++ b/components/comments/comments-skeleton.tsx
@@ -23,4 +23,4 @@ const CommentsSkeleton = () => {
  );
 };

-export default CommentsSkeleton;
+export { CommentsSkeleton };
--- a/components/comments/comments.tsx
+++ b/components/comments/comments.tsx
@@ -1,7 +1,7 @@
 import { headers } from "next/headers";
-import Form from "./comment-form";
-import Thread from "./comment-thread";
-import SignIn from "./sign-in";
+import { CommentForm } from "./comment-form";
+import { CommentThread } from "./comment-thread";
+import { SignIn } from "./sign-in";
 import { auth } from "@/lib/auth";
 import { getComments, type CommentWithUser } from "@/lib/server/comments";

@@ -29,7 +29,7 @@ const Comments = async ({ slug }: { slug: string }) => {
  return (
    <>
      {session ? (
-        <Form slug={slug} />
+        <CommentForm slug={slug} />
      ) : (
        <div className="bg-muted/40 flex flex-col items-center justify-center gap-y-4 rounded-lg p-6">
          <p className="text-center font-medium">Join the discussion by signing in:</p>
@@ -40,7 +40,7 @@ const Comments = async ({ slug }: { slug: string }) => {
      {rootComments.length > 0 ? (
        <div className="space-y-6">
          {rootComments.map((comment: CommentWithUser) => (
-            <Thread
+            <CommentThread
              key={comment.id}
              comment={comment}
              replies={commentsByParentId[comment.id] || []}
@@ -57,4 +57,4 @@ const Comments = async ({ slug }: { slug: string }) => {
  );
 };

-export default Comments;
+export { Comments };
--- a/components/comments/sign-in.tsx
+++ b/components/comments/sign-in.tsx
@@ -34,4 +34,4 @@ const SignIn = ({ callbackPath }: { callbackPath?: string }) => {
  );
 };

-export default SignIn;
+export { SignIn };
--- a/components/contact-form.tsx
+++ b/components/contact-form.tsx
@@ -163,4 +163,4 @@ const ContactForm = () => {
  );
 };

-export default ContactForm;
+export { ContactForm };
--- a/components/copy-button.tsx
+++ b/components/copy-button.tsx
@@ -67,4 +67,4 @@ function CopyButton({
  );
 }

-export default CopyButton;
+export { CopyButton };
--- a/components/count-up.ts
+++ b/components/count-up.ts
@@ -3,4 +3,4 @@
 // marking the library as a proper client component so that react doesn't complain about hydration whenever we use it in
 // a server component.
 // see: https://react.dev/reference/rsc/use-client#using-third-party-libraries
-export { default } from "react-countup";
+export { default as CountUp } from "react-countup";
--- a/components/heading-anchor.tsx
+++ b/components/heading-anchor.tsx
@@ -18,4 +18,4 @@ const HeadingAnchor = ({ id, title, className }: { id: string; title: string; cl
  );
 };

-export default HeadingAnchor;
+export { HeadingAnchor };
--- a/components/image-diff.tsx
+++ b/components/image-diff.tsx
@@ -127,4 +127,4 @@ const ImageDiff = ({ children, className }: { children: React.ReactElement[]; cl
  );
 };

-export default ImageDiff;
+export { ImageDiff };
--- a/components/layout/footer.tsx
+++ b/components/layout/footer.tsx
@@ -23,4 +23,4 @@ const Footer = () => {
  );
 };

-export default Footer;
+export { Footer };
--- a/components/layout/header.tsx
+++ b/components/layout/header.tsx
@@ -6,7 +6,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
-import Menu from "@/components/layout/menu";
+import { Menu } from "@/components/layout/menu";
 import { GitHubIcon } from "@/components/icons";
 import { cn } from "@/lib/utils";
 import authorConfig from "@/lib/config/author";
@@ -90,4 +90,4 @@ const Header = ({ className }: { className?: string }) => {
  );
 };

-export default Header;
+export { Header };
--- a/components/layout/menu.tsx
+++ b/components/layout/menu.tsx
@@ -87,4 +87,4 @@ const Menu = () => {
  );
 };

-export default Menu;
+export { Menu };
--- a/components/layout/page-title.tsx
+++ b/components/layout/page-title.tsx
@@ -21,4 +21,4 @@ const PageTitle = ({
  );
 };

-export default PageTitle;
+export { PageTitle };
--- a/components/marquee.tsx
+++ b/components/marquee.tsx
@@ -24,4 +24,4 @@ const Marquee = ({
  );
 };

-export default Marquee;
+export { Marquee };
--- a/components/post-stats.tsx
+++ b/components/post-stats.tsx
@@ -1,55 +1,86 @@
 "use client";

-import { useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
 import Link from "next/link";
 import { EyeIcon, MessagesSquareIcon } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
 import { env } from "@/lib/env";
-import { getViewCount } from "@/lib/server/views";
-import { getCommentCount } from "@/lib/server/comments";
+import { getAllViewCounts } from "@/lib/server/views";
+import { getAllCommentCounts } from "@/lib/server/comments";

 const numberFormatter = new Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE);

-const PostStats = ({ slug }: { slug: string }) => {
-  const [stats, setStats] = useState<{ views: number; comments: number } | null>(null);
+type Stats = {
+  views: Record<string, number>;
+  comments: Record<string, number>;
+  loaded: boolean;
+};
+
+const StatsContext = createContext<Stats>({ views: {}, comments: {}, loaded: false });
+
+/**
+ * Provider that fetches ALL post stats in a single batch (2 requests total).
+ * Wrap this around any component tree that contains PostStats components.
+ */
+export const PostStatsProvider = ({ children }: { children: ReactNode }) => {
+  const [stats, setStats] = useState<Stats>({ views: {}, comments: {}, loaded: false });

  useEffect(() => {
-    Promise.all([getViewCount(slug), getCommentCount(slug)])
+    Promise.all([getAllViewCounts(), getAllCommentCounts()])
      .then(([views, comments]) => {
-        setStats({ views, comments });
+        setStats({ views, comments, loaded: true });
      })
      .catch((err) => {
-        console.error("[post-stats] error:", err);
-        // Silently fail - just don't show stats
+        console.error("[post-stats] error fetching stats:", err);
+        setStats({ views: {}, comments: {}, loaded: true });
      });
-  }, [slug]);
+  }, []);

-  if (!stats) {
-    return null; // No loading state - badges just appear when ready
+  return <StatsContext.Provider value={stats}>{children}</StatsContext.Provider>;
+};
+
+/**
+ * Displays view/comment badges for a single post.
+ * Must be used within a PostStatsProvider.
+ */
+const PostStats = ({ slug }: { slug: string }) => {
+  const { views, comments, loaded } = useContext(StatsContext);
+
+  if (!loaded) {
+    return (
+      <>
+        <Skeleton className="inline-block h-5 w-12 rounded-full align-text-top" />
+        <Skeleton className="inline-block h-5 w-8 rounded-full align-text-top" />
+      </>
+    );
  }

+  const viewCount = views[slug] ?? 0;
+  const commentCount = comments[slug] ?? 0;
+
  return (
    <>
-      {stats.views > 0 && (
-        <span className="bg-muted text-foreground/65 inline-flex h-5 flex-nowrap items-center gap-1 rounded-md px-1.5 align-text-top text-xs font-semibold text-nowrap shadow select-none">
-          <EyeIcon className="inline-block size-4 shrink-0" aria-hidden="true" />
-          <span className="inline-block leading-none tabular-nums">{numberFormatter.format(stats.views)}</span>
-        </span>
+      {viewCount > 0 && (
+        <Badge variant="secondary" className="tabular-nums">
+          <EyeIcon className="text-foreground/85" aria-hidden="true" />
+          {numberFormatter.format(viewCount)}
+        </Badge>
      )}

-      {stats.comments > 0 && (
-        <Link
-          href={`/${slug}#comments`}
-          title={`${numberFormatter.format(stats.comments)} ${stats.comments === 1 ? "comment" : "comments"}`}
-          className="inline-flex hover:no-underline"
-        >
-          <span className="bg-muted text-foreground/65 inline-flex h-5 flex-nowrap items-center gap-1 rounded-md px-1.5 align-text-top text-xs font-semibold text-nowrap shadow select-none">
-            <MessagesSquareIcon className="inline-block size-3 shrink-0" aria-hidden="true" />
-            <span className="inline-block leading-none tabular-nums">{numberFormatter.format(stats.comments)}</span>
-          </span>
-        </Link>
+      {commentCount > 0 && (
+        <Badge variant="secondary" className="tabular-nums" asChild>
+          <Link
+            href={`/${slug}#comments`}
+            title={`${numberFormatter.format(commentCount)} ${commentCount === 1 ? "comment" : "comments"}`}
+          >
+            <MessagesSquareIcon className="text-foreground/85" aria-hidden="true" />
+            {numberFormatter.format(commentCount)}
+          </Link>
+        </Badge>
      )}
    </>
  );
 };

-export default PostStats;
+export { PostStats };
--- a/components/providers.tsx
+++ b/components/providers.tsx
@@ -10,4 +10,4 @@ const Providers = ({ children }: { children: React.ReactNode }) => {
  );
 };

-export default Providers;
+export { Providers };
--- a/components/relative-time.tsx
+++ b/components/relative-time.tsx
@@ -17,4 +17,4 @@ const RelativeTime = ({ ...rest }: React.ComponentProps<typeof TimeAgo>) => {
  );
 };

-export default RelativeTime;
+export { RelativeTime };
--- a/components/third-party/codepen.tsx
+++ b/components/third-party/codepen.tsx
@@ -28,4 +28,4 @@ const CodePen = ({
  );
 };

-export default CodePen;
+export { CodePen };
--- a/components/third-party/gist.tsx
+++ b/components/third-party/gist.tsx
@@ -52,4 +52,4 @@ const Gist = async ({
  );
 };

-export default Gist;
+export { Gist };
--- a/components/third-party/tweet.tsx
+++ b/components/third-party/tweet.tsx
@@ -57,4 +57,4 @@ const Tweet = async ({ id, className }: { id: string; className?: string }) => {
  return <TweetContent data={data} className={className} />;
 };

-export default Tweet;
+export { Tweet };
--- a/components/third-party/youtube.tsx
+++ b/components/third-party/youtube.tsx
@@ -8,4 +8,4 @@ const YouTube = ({ ...rest }: Omit<React.ComponentProps<typeof YouTubeEmbed>, "t
  return <YouTubeEmbed cookie={false} containerElement="div" title="" {...rest} />;
 };

-export default YouTube;
+export { YouTube };
--- a/components/video.tsx
+++ b/components/video.tsx
@@ -47,4 +47,4 @@ const Video = ({
  );
 };

-export default Video;
+export { Video };
--- a/components/view-counter.tsx
+++ b/components/view-counter.tsx
@@ -2,7 +2,7 @@

 import { useEffect, useState } from "react";
 import { env } from "@/lib/env";
-import CountUp from "@/components/count-up";
+import { CountUp } from "@/components/count-up";
 import { incrementViews } from "@/lib/server/views";

 const ViewCounter = ({ slug }: { slug: string }) => {
@@ -36,4 +36,4 @@ const ViewCounter = ({ slug }: { slug: string }) => {
  );
 };

-export default ViewCounter;
+export { ViewCounter };
--- a/mdx-components.tsx
+++ b/mdx-components.tsx
@@ -1,12 +1,12 @@
 import Image from "next/image";
 import Link from "next/link";
-import CodeBlock from "@/components/code-block";
-import Video from "@/components/video";
-import ImageDiff from "@/components/image-diff";
-import Tweet from "@/components/third-party/tweet";
-import YouTube from "@/components/third-party/youtube";
-import Gist from "@/components/third-party/gist";
-import CodePen from "@/components/third-party/codepen";
+import { CodeBlock } from "@/components/code-block";
+import { Video } from "@/components/video";
+import { ImageDiff } from "@/components/image-diff";
+import { Tweet } from "@/components/third-party/tweet";
+import { YouTube } from "@/components/third-party/youtube";
+import { Gist } from "@/components/third-party/gist";
+import { CodePen } from "@/components/third-party/codepen";
 import { cn } from "@/lib/utils";
 import type { MDXComponents } from "mdx/types";

--- a/next.config.ts
+++ b/next.config.ts
@@ -6,7 +6,6 @@ import "./lib/env";

 const nextConfig = {
  cacheComponents: true,
-  reactStrictMode: true,
  reactCompiler: true,
  pageExtensions: ["js", "jsx", "ts", "tsx", "md", "mdx"],
  images: {
@@ -45,30 +44,6 @@ const nextConfig = {
    },
  },
  headers: async () => [
-    {
-      // matches any path
-      source: "/(.*)",
-      headers: [
-        {
-          key: "strict-transport-security",
-          value: "max-age=63072000",
-        },
-        {
-          // 🥛 debugging
-          key: "x-got-milk",
-          value: "2%",
-        },
-      ],
-    },
-    {
-      source: "/api/auth/(.*)",
-      headers: [
-        {
-          key: "cache-control",
-          value: "private, max-age=0",
-        },
-      ],
-    },
    // https://community.torproject.org/onion-services/advanced/onion-location/
    ...(process.env.NEXT_PUBLIC_ONION_DOMAIN
      ? [
@@ -92,9 +67,12 @@ const nextConfig = {
      source: "/tweets/:path*",
      destination: "https://tweets-khaki.vercel.app/:path*",
    },
+    {
+      source: "/y2k/:path*",
+      destination: "https://y2k.pages.dev/:path*",
+    },
  ],
  redirects: async () => [
-    { source: "/y2k", destination: "https://y2k.pages.dev", permanent: false },
    {
      source: "/pubkey.asc",
      destination: