fix: render GitHub stars server-side with revalidation cache (#40)

The stars count in the docs nav was fetched client-side from
api.github.com on every visit, occasionally rendering "NaNk" when
GitHub rate-limited the unauthenticated request.

Move the fetch to the server layout using Next.js's data cache
(revalidate: 3600) so the value is baked into the SSR'd HTML and
only one upstream request is made per hour for the whole site.
Add a typed stars prop on DocsLayout and a numeric fallback so the
formatter can no longer produce NaN.

Author: nibzard

app/(home)/layout.tsx

@@ -1,11 +1,13 @@
 import type { ReactNode } from 'react';
 import { baseOptions } from '@/app/layout.config';
 import { DocsLayout } from '@/components/layouts/docs';
+import { getSteelBrowserStars } from '@/lib/github-stars';
 import { source } from '@/lib/source';
 
-export default function Layout({ children }: { children: ReactNode }) {
+export default async function Layout({ children }: { children: ReactNode }) {
+  const stars = await getSteelBrowserStars();
   return (
-    <DocsLayout {...baseOptions} tree={source.pageTree}>
+    <DocsLayout {...baseOptions} tree={source.pageTree} stars={stars}>
       {children}
     </DocsLayout>
   );

app/[...slug]/layout.tsx

@@ -1,11 +1,13 @@
 import type { ReactNode } from 'react';
 import { baseOptions } from '@/app/layout.config';
 import { DocsLayout } from '@/components/layouts/docs';
+import { getSteelBrowserStars } from '@/lib/github-stars';
 import { source } from '@/lib/source';
 
-export default function Layout({ children }: { children: ReactNode }) {
+export default async function Layout({ children }: { children: ReactNode }) {
+  const stars = await getSteelBrowserStars();
   return (
-    <DocsLayout {...baseOptions} tree={source.pageTree}>
+    <DocsLayout {...baseOptions} tree={source.pageTree} stars={stars}>
       {children}
     </DocsLayout>
   );

components/layouts/docs.tsx

@@ -24,9 +24,14 @@ import { renderNavItem } from './links';
 export interface DocsLayoutProps {
   tree: PageTree.Root;
   children: ReactNode;
+  stars: number;
 }
 
-export function DocsLayout({ tree, children }: DocsLayoutProps) {
+function formatStars(count: number): string {
+  return `${(Math.round(count / 100) / 10).toFixed(1)}k`;
+}
+
+export function DocsLayout({ tree, children, stars }: DocsLayoutProps) {
   const [isScrolled, setIsScrolled] = React.useState(false);
   // const { registerShortcut } = useKeyboardShortcuts();
   const { collapsed } = useSidebar();
@@ -43,7 +48,6 @@ export function DocsLayout({ tree, children }: DocsLayoutProps) {
     width: 0,
     visible: false,
   });
-  const [stars, setStars] = React.useState<number>(5.5);
 
   React.useEffect(() => {
     const handleScroll = () => {
@@ -82,12 +86,6 @@ export function DocsLayout({ tree, children }: DocsLayoutProps) {
     };
   }, [pathname, localizedLinks]);
 
-  React.useEffect(() => {
-    fetch(`https://api.github.com/repos/steel-dev/steel-browser`)
-      .then((res) => res.json())
-      .then((data) => setStars((Math.round(data.stargazers_count / 100) * 100) / 1000));
-  }, []);
-
   return (
     <MobileMenuProvider>
       <TreeContextProvider tree={tree}>
@@ -145,7 +143,7 @@ export function DocsLayout({ tree, children }: DocsLayoutProps) {
                   className="text-xs font-mono flex items-center gap-2 transition-colors"
                   color="#A1A0A7"
                 >
-                  <Github fill="#A1A0A7" width="16" /> {stars}k
+                  <Github fill="#A1A0A7" width="16" /> {formatStars(stars)}
                 </Link>
                 <div className="w-px h-6 bg-zinc-700"></div>
                 {/*<CopyLLMSButton />*/}

lib/github-stars.ts

@@ -0,0 +1,16 @@
+const STEEL_BROWSER_REPO = 'steel-dev/steel-browser';
+const FALLBACK_STARS = 7000;
+const REVALIDATE_SECONDS = 3600;
+
+export async function getSteelBrowserStars(): Promise<number> {
+  try {
+    const res = await fetch(`https://api.github.com/repos/${STEEL_BROWSER_REPO}`, {
+      next: { revalidate: REVALIDATE_SECONDS },
+    });
+    if (!res.ok) return FALLBACK_STARS;
+    const data = await res.json();
+    return typeof data?.stargazers_count === 'number' ? data.stargazers_count : FALLBACK_STARS;
+  } catch {
+    return FALLBACK_STARS;
+  }
+}