fix: batch server requests from posts list

.gitignore

@@ -35,3 +35,6 @@ yarn.lock
 # vercel
 .vercel
 .env*.local
+
+# next-agents-md
+.next-docs/

AGENTS.md

@@ -159,3 +159,5 @@ notes/            # MDX blog content files
 - **Better Auth** for GitHub OAuth authentication
 - **Zod** for schema validation
 - **MDX** for blog content with remark/rehype plugins
+
+<!-- NEXT-AGENTS-MD-START -->[Next.js Docs Index]|root: ./.next-docs|STOP. What you remember about Next.js is WRONG for this project. Always search docs and read before any task.|If docs missing, run this command first: npx @next/codemod agents-md --output AGENTS.md|01-app:{04-glossary.mdx}|01-app/01-getting-started:{01-installation.mdx,02-project-structure.mdx,03-layouts-and-pages.mdx,04-linking-and-navigating.mdx,05-server-and-client-components.mdx,06-cache-components.mdx,07-fetching-data.mdx,08-updating-data.mdx,09-caching-and-revalidating.mdx,10-error-handling.mdx,11-css.mdx,12-images.mdx,13-fonts.mdx,14-metadata-and-og-images.mdx,15-route-handlers.mdx,16-proxy.mdx,17-deploying.mdx,18-upgrading.mdx}|01-app/02-guides:{analytics.mdx,authentication.mdx,backend-for-frontend.mdx,caching.mdx,ci-build-caching.mdx,content-security-policy.mdx,css-in-js.mdx,custom-server.mdx,data-security.mdx,debugging.mdx,draft-mode.mdx,environment-variables.mdx,forms.mdx,incremental-static-regeneration.mdx,instrumentation.mdx,internationalization.mdx,json-ld.mdx,lazy-loading.mdx,local-development.mdx,mcp.mdx,mdx.mdx,memory-usage.mdx,multi-tenant.mdx,multi-zones.mdx,open-telemetry.mdx,package-bundling.mdx,prefetching.mdx,production-checklist.mdx,progressive-web-apps.mdx,public-static-pages.mdx,redirecting.mdx,sass.mdx,scripts.mdx,self-hosting.mdx,single-page-applications.mdx,static-exports.mdx,tailwind-v3-css.mdx,third-party-libraries.mdx,videos.mdx}|01-app/02-guides/migrating:{app-router-migration.mdx,from-create-react-app.mdx,from-vite.mdx}|01-app/02-guides/testing:{cypress.mdx,jest.mdx,playwright.mdx,vitest.mdx}|01-app/02-guides/upgrading:{codemods.mdx,version-14.mdx,version-15.mdx,version-16.mdx}|01-app/03-api-reference:{07-edge.mdx,08-turbopack.mdx}|01-app/03-api-reference/01-directives:{use-cache-private.mdx,use-cache-remote.mdx,use-cache.mdx,use-client.mdx,use-server.mdx}|01-app/03-api-reference/02-components:{font.mdx,form.mdx,image.mdx,link.mdx,script.mdx}|01-app/03-api-reference/03-file-conventions/01-metadata:{app-icons.mdx,manifest.mdx,opengraph-image.mdx,robots.mdx,sitemap.mdx}|01-app/03-api-reference/03-file-conventions:{default.mdx,dynamic-routes.mdx,error.mdx,forbidden.mdx,instrumentation-client.mdx,instrumentation.mdx,intercepting-routes.mdx,layout.mdx,loading.mdx,mdx-components.mdx,not-found.mdx,page.mdx,parallel-routes.mdx,proxy.mdx,public-folder.mdx,route-groups.mdx,route-segment-config.mdx,route.mdx,src-folder.mdx,template.mdx,unauthorized.mdx}|01-app/03-api-reference/04-functions:{after.mdx,cacheLife.mdx,cacheTag.mdx,connection.mdx,cookies.mdx,draft-mode.mdx,fetch.mdx,forbidden.mdx,generate-image-metadata.mdx,generate-metadata.mdx,generate-sitemaps.mdx,generate-static-params.mdx,generate-viewport.mdx,headers.mdx,image-response.mdx,next-request.mdx,next-response.mdx,not-found.mdx,permanentRedirect.mdx,redirect.mdx,refresh.mdx,revalidatePath.mdx,revalidateTag.mdx,unauthorized.mdx,unstable_cache.mdx,unstable_noStore.mdx,unstable_rethrow.mdx,updateTag.mdx,use-link-status.mdx,use-params.mdx,use-pathname.mdx,use-report-web-vitals.mdx,use-router.mdx,use-search-params.mdx,use-selected-layout-segment.mdx,use-selected-layout-segments.mdx,userAgent.mdx}|01-app/03-api-reference/05-config/01-next-config-js:{adapterPath.mdx,allowedDevOrigins.mdx,appDir.mdx,assetPrefix.mdx,authInterrupts.mdx,basePath.mdx,browserDebugInfoInTerminal.mdx,cacheComponents.mdx,cacheHandlers.mdx,cacheLife.mdx,compress.mdx,crossOrigin.mdx,cssChunking.mdx,devIndicators.mdx,distDir.mdx,env.mdx,expireTime.mdx,exportPathMap.mdx,generateBuildId.mdx,generateEtags.mdx,headers.mdx,htmlLimitedBots.mdx,httpAgentOptions.mdx,images.mdx,incrementalCacheHandlerPath.mdx,inlineCss.mdx,isolatedDevBuild.mdx,logging.mdx,mdxRs.mdx,onDemandEntries.mdx,optimizePackageImports.mdx,output.mdx,pageExtensions.mdx,poweredByHeader.mdx,productionBrowserSourceMaps.mdx,proxyClientMaxBodySize.mdx,reactCompiler.mdx,reactMaxHeadersLength.mdx,reactStrictMode.mdx,redirects.mdx,rewrites.mdx,sassOptions.mdx,serverActions.mdx,serverComponentsHmrCache.mdx,serverExternalPackages.mdx,staleTimes.mdx,staticGeneration.mdx,taint.mdx,trailingSlash.mdx,transpilePackages.mdx,turbopack.mdx,turbopackFileSystemCache.mdx,typedRoutes.mdx,typescript.mdx,urlImports.mdx,useLightningcss.mdx,viewTransition.mdx,webVitalsAttribution.mdx,webpack.mdx}|01-app/03-api-reference/05-config:{02-typescript.mdx,03-eslint.mdx}|01-app/03-api-reference/06-cli:{create-next-app.mdx,next.mdx}|02-pages/01-getting-started:{01-installation.mdx,02-project-structure.mdx,04-images.mdx,05-fonts.mdx,06-css.mdx,11-deploying.mdx}|02-pages/02-guides:{analytics.mdx,authentication.mdx,babel.mdx,ci-build-caching.mdx,content-security-policy.mdx,css-in-js.mdx,custom-server.mdx,debugging.mdx,draft-mode.mdx,environment-variables.mdx,forms.mdx,incremental-static-regeneration.mdx,instrumentation.mdx,internationalization.mdx,lazy-loading.mdx,mdx.mdx,multi-zones.mdx,open-telemetry.mdx,package-bundling.mdx,post-css.mdx,preview-mode.mdx,productiLine truncated

app/analytics.tsx

@@ -10,4 +10,4 @@ const Analytics = () => {
   );
 };
 
-export default Analytics;
+export { Analytics };

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";
 

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({

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({

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;
   }
 }
 

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";
 

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";

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";
 

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({

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";
 

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";

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>
     </>
   );
 };

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";

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({

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";

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({

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";

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 };

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 };

components/comment-count.tsx

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

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 };

components/comments/comment-form.tsx

@@ -193,4 +193,4 @@ const CommentForm = ({
   );
 };
 
-export default CommentForm;
+export { CommentForm };

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 };

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 };

components/comments/comments-skeleton.tsx

@@ -23,4 +23,4 @@ const CommentsSkeleton = () => {
   );
 };
 
-export default CommentsSkeleton;
+export { CommentsSkeleton };

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 };

components/comments/sign-in.tsx

@@ -34,4 +34,4 @@ const SignIn = ({ callbackPath }: { callbackPath?: string }) => {
   );
 };
 
-export default SignIn;
+export { SignIn };

components/contact-form.tsx

@@ -163,4 +163,4 @@ const ContactForm = () => {
   );
 };
 
-export default ContactForm;
+export { ContactForm };

components/copy-button.tsx

@@ -67,4 +67,4 @@ function CopyButton({
   );
 }
 
-export default CopyButton;
+export { CopyButton };

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";

components/heading-anchor.tsx

@@ -18,4 +18,4 @@ const HeadingAnchor = ({ id, title, className }: { id: string; title: string; cl
   );
 };
 
-export default HeadingAnchor;
+export { HeadingAnchor };

components/image-diff.tsx

@@ -127,4 +127,4 @@ const ImageDiff = ({ children, className }: { children: React.ReactElement[]; cl
   );
 };
 
-export default ImageDiff;
+export { ImageDiff };

components/layout/footer.tsx

@@ -23,4 +23,4 @@ const Footer = () => {
   );
 };
 
-export default Footer;
+export { Footer };

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 };

components/layout/menu.tsx

@@ -87,4 +87,4 @@ const Menu = () => {
   );
 };
 
-export default Menu;
+export { Menu };

components/layout/page-title.tsx

@@ -21,4 +21,4 @@ const PageTitle = ({
   );
 };
 
-export default PageTitle;
+export { PageTitle };

components/marquee.tsx

@@ -24,4 +24,4 @@ const Marquee = ({
   );
 };
 
-export default Marquee;
+export { Marquee };

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 };

components/providers.tsx

@@ -10,4 +10,4 @@ const Providers = ({ children }: { children: React.ReactNode }) => {
   );
 };
 
-export default Providers;
+export { Providers };

components/relative-time.tsx

@@ -17,4 +17,4 @@ const RelativeTime = ({ ...rest }: React.ComponentProps<typeof TimeAgo>) => {
   );
 };
 
-export default RelativeTime;
+export { RelativeTime };

components/third-party/codepen.tsx

@@ -28,4 +28,4 @@ const CodePen = ({
   );
 };
 
-export default CodePen;
+export { CodePen };

components/third-party/gist.tsx

@@ -52,4 +52,4 @@ const Gist = async ({
   );
 };
 
-export default Gist;
+export { Gist };

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 };

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 };

components/video.tsx

@@ -47,4 +47,4 @@ const Video = ({
   );
 };
 
-export default Video;
+export { Video };

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 };

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";
 

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: