feat: show repo star on site-header (#27)

* feat: show repo star on site-header

* feat: add GITHUB_OAUTH_TOKEN to environment configuration

* feat: remove comment

* feat: show star counter only in website

web/.env.example

@@ -14,3 +14,7 @@
 # NEXT_PUBLIC_CLIENTVAR="bar"
 
 NEXT_PUBLIC_API_URL=http://localhost:8000/api
+
+# Github
+GITHUB_OAUTH_TOKEN=xxxx
+

web/src/app/chat/components/site-header.tsx

@@ -0,0 +1,80 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
+import { StarFilledIcon, GitHubLogoIcon } from "@radix-ui/react-icons";
+import Link from "next/link";
+
+import { Button } from "~/components/ui/button";
+import { env } from "~/env";
+
+export async function SiteHeader() {
+  return (
+    <header className="supports-backdrop-blur:bg-background/80 bg-background/40 sticky top-0 left-0 z-40 flex h-15 w-full flex-col items-center backdrop-blur-lg">
+      <div className="container flex h-15 items-center justify-between px-3">
+        <div className="text-xl font-medium">
+          <span className="mr-1 text-2xl">🦌</span>
+          <span>DeerFlow</span>
+        </div>
+        <div className="relative flex items-center">
+          <div
+            className="pointer-events-none absolute inset-0 z-0 h-full w-full rounded-full opacity-60 blur-2xl"
+            style={{
+              background: "linear-gradient(90deg, #ff80b5 0%, #9089fc 100%)",
+              filter: "blur(32px)",
+            }}
+          />
+          <Button
+            variant="outline"
+            size="sm"
+            asChild
+            className="group relative z-10"
+          >
+            <Link href="https://github.com/bytedance/deer-flow" target="_blank">
+              <GitHubLogoIcon className="size-4" />
+              Star on GitHub
+              {env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY &&
+                env.GITHUB_OAUTH_TOKEN && <StarCounter />}
+            </Link>
+          </Button>
+        </div>
+      </div>
+      <hr className="from-border/0 via-border/70 to-border/0 m-0 h-px w-full border-none bg-gradient-to-r" />
+    </header>
+  );
+}
+
+export async function StarCounter() {
+  let stars = 1000; // Default value
+
+  try {
+    const response = await fetch(
+      "https://api.github.com/repos/bytedance/deer-flow",
+      {
+        headers: env.GITHUB_OAUTH_TOKEN
+          ? {
+              Authorization: `Bearer ${env.GITHUB_OAUTH_TOKEN}`,
+              "Content-Type": "application/json",
+            }
+          : {},
+        next: {
+          revalidate: 3600,
+        },
+      },
+    );
+
+    if (response.ok) {
+      const data = await response.json();
+      stars = data.stargazers_count ?? stars; // Update stars if API response is valid
+    }
+  } catch (error) {
+    console.error("Error fetching GitHub stars:", error);
+  }
+  return (
+    <>
+      <StarFilledIcon className="size-4 transition-colors duration-300 group-hover:text-yellow-500" />
+      <span className="font-mono tabular-nums">
+        {stars !== null ? stars.toLocaleString() : "—"}
+      </span>
+    </>
+  );
+}

web/src/app/page.tsx

@@ -1,12 +1,9 @@
 // Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
 // SPDX-License-Identifier: MIT
 
-import { GithubOutlined } from "@ant-design/icons";
-import Link from "next/link";
 import { useMemo } from "react";
 
-import { Button } from "~/components/ui/button";
+import { SiteHeader } from "./chat/components/site-header";
-
 import { Jumbotron } from "./landing/components/jumbotron";
 import { Ray } from "./landing/components/ray";
 import { CaseStudySection } from "./landing/sections/case-study-section";
@@ -17,7 +14,7 @@ import { MultiAgentSection } from "./landing/sections/multi-agent-section";
 export default function HomePage() {
   return (
     <div className="flex flex-col items-center">
-      <Header />
+      <SiteHeader />
       <main className="container flex flex-col items-center justify-center gap-56">
         <Jumbotron />
         <CaseStudySection />
@@ -31,28 +28,6 @@ export default function HomePage() {
   );
 }
 
-function Header() {
-  return (
-    <header className="supports-backdrop-blur:bg-background/80 bg-background/40 sticky top-0 left-0 z-40 flex h-15 w-full flex-col items-center backdrop-blur-lg">
-      <div className="container flex h-15 items-center justify-between px-3">
-        <div className="text-xl font-medium">
-          <span className="mr-1 text-2xl">🦌</span>
-          <span>DeerFlow</span>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button variant="outline" size="sm" asChild>
-            <Link href="https://github.com/bytedance/deer-flow" target="_blank">
-              <GithubOutlined />
-              Star on GitHub
-            </Link>
-          </Button>
-        </div>
-      </div>
-      <hr className="from-border/0 via-border/70 to-border/0 m-0 h-px w-full border-none bg-gradient-to-r" />
-    </header>
-  );
-}
-
 function Footer() {
   const year = useMemo(() => new Date().getFullYear(), []);
   return (

web/src/env.js

@@ -12,6 +12,7 @@ export const env = createEnv({
   server: {
     NODE_ENV: z.enum(["development", "test", "production"]),
     AMPLITUDE_API_KEY: z.string().optional(),
+    GITHUB_OAUTH_TOKEN: z.string().optional(),
   },
 
   /**
@@ -34,6 +35,7 @@ export const env = createEnv({
     NEXT_PUBLIC_STATIC_WEBSITE_ONLY:
       process.env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true",
     AMPLITUDE_API_KEY: process.env.AMPLITUDE_API_KEY,
+    GITHUB_OAUTH_TOKEN: process.env.GITHUB_OAUTH_TOKEN,
   },
   /**
    * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially