feat(docs): add animated GitHub stars button to sidebar

Add a star count button to the docs sidebar footer that fetches the
live GitHub star count via a cached API route and animates it with
NumberFlow. Polls every 60 seconds, links to the repo on click.

Also fix PostHog proxy 404s in local dev by mirroring the vercel.json
rewrites in next.config.mjs.

Author: Rednegniw

docs/next.config.mjs

@@ -29,6 +29,14 @@ const config = {
         source: "/docs/:path*.mdx",
         destination: "/llms.mdx/docs/:path*",
       },
+      {
+        source: "/ph/static/:path*",
+        destination: "https://us-assets.i.posthog.com/static/:path*",
+      },
+      {
+        source: "/ph/:path*",
+        destination: "https://us.i.posthog.com/:path*",
+      },
     ];
   },
 };

docs/src/app/api/github-stars/route.ts

@@ -0,0 +1,23 @@
+import { gitConfig } from "@/lib/layout.shared";
+
+export async function GET() {
+  const res = await fetch(`https://api.github.com/repos/${gitConfig.user}/${gitConfig.repo}`, {
+    next: { revalidate: 300 },
+  });
+
+  if (!res.ok) {
+    return Response.json({ stars: null }, { status: 502 });
+  }
+
+  const data = await res.json();
+  const stars = data.stargazers_count;
+
+  return Response.json(
+    { stars },
+    {
+      headers: {
+        "Cache-Control": "public, s-maxage=300, stale-while-revalidate=600",
+      },
+    },
+  );
+}

docs/src/app/docs/layout.tsx

@@ -5,6 +5,7 @@ import {
   AnimatedSidebarSeparator,
   SidebarHoverProvider,
 } from "@/components/docs-sidebar";
+import { GitHubStarsButton } from "@/components/github-stars-button";
 import { baseOptions } from "@/lib/layout.shared";
 import { source } from "@/lib/source";
 
@@ -15,6 +16,7 @@ export default function Layout({ children }: LayoutProps<"/docs">) {
         tree={source.getPageTree()}
         {...baseOptions()}
         sidebar={{
+          footer: <GitHubStarsButton />,
           components: {
             Item: AnimatedSidebarItem,
             Separator: AnimatedSidebarSeparator,

docs/src/app/global.css

@@ -81,6 +81,14 @@ figure.shiki {
   @apply md:border-0!;
 }
 
+/* Sidebar footer: place icon links and star button on the same row */
+#nd-sidebar > div:last-child {
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
 #nd-page {
   max-width: 1050px;
 }

docs/src/components/github-stars-button.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { Star } from "lucide-react";
+import dynamic from "next/dynamic";
+import { useEffect, useState } from "react";
+import { gitConfig } from "@/lib/layout.shared";
+
+const POLL_INTERVAL = 60_000;
+const GITHUB_URL = `https://github.com/${gitConfig.user}/${gitConfig.repo}`;
+
+const AnimatedCount = dynamic(() => import("./github-stars-count"), {
+  ssr: false,
+});
+
+export function GitHubStarsButton() {
+  const [stars, setStars] = useState<number | null>(null);
+
+  useEffect(() => {
+    const controller = new AbortController();
+
+    async function fetchStars() {
+      try {
+        const res = await fetch("/api/github-stars", { signal: controller.signal });
+        if (!res.ok) return;
+        const data = await res.json();
+        if (typeof data.stars === "number") setStars(data.stars);
+      } catch {
+        // Silently ignore aborts and network errors
+      }
+    }
+
+    fetchStars();
+    const id = setInterval(fetchStars, POLL_INTERVAL);
+
+    return () => {
+      controller.abort();
+      clearInterval(id);
+    };
+  }, []);
+
+  const label = stars !== null ? `Star on GitHub (${stars} stars)` : "Star on GitHub";
+
+  return (
+    <a
+      href={GITHUB_URL}
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label={label}
+      className="group ms-auto inline-flex items-center gap-1.5 rounded-md border mt-1 border-white/[0.08] bg-white/[0.03] px-2 py-1.5 text-xs text-fd-muted-foreground transition-colors hover:border-[var(--brand-accent)]/30 hover:bg-[var(--brand-accent)]/[0.04] hover:text-fd-foreground"
+    >
+      <Star className="size-3.5 fill-[var(--brand-accent)] text-[var(--brand-accent)] transition-transform group-hover:scale-110" />
+
+      {stars !== null && (
+        <span className="tabular-nums">
+          <AnimatedCount stars={stars} />
+        </span>
+      )}
+    </a>
+  );
+}

docs/src/components/github-stars-count.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import "@/lib/rn-web-polyfills";
+
+import { NumberFlow } from "number-flow-react-native";
+
+export default function GitHubStarsCount({ stars }: { stars: number }) {
+  return (
+    <NumberFlow
+      value={stars}
+      style={{ fontSize: 12, color: "inherit" }}
+      format={{ useGrouping: true }}
+      trend={1}
+    />
+  );
+}