feat: add live github star link

Author: thymikee

landing/src/components/github-star-link.tsx

@@ -0,0 +1,58 @@
+import Link from "next/link";
+
+import { PixelIcon } from "@/components/pixel-icon";
+import {
+  formatStarCount,
+  getGitHubRepoStats,
+  githubRepoUrl,
+} from "@/lib/github";
+import { cn } from "@/lib/utils";
+
+type GitHubStarLinkProps = {
+  className?: string;
+};
+
+const baseClassName =
+  "inline-flex h-10 items-center gap-3 rounded-[4px] border border-white/15 bg-white/[0.04] px-3 text-sm font-medium leading-none text-white transition hover:border-white/30 hover:bg-white/[0.08] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#8232ff] focus-visible:ring-offset-2 focus-visible:ring-offset-black";
+
+export async function GitHubStarLink({ className }: GitHubStarLinkProps) {
+  const stats = await getGitHubRepoStats();
+  const starLabel = stats ? formatStarCount(stats.stars) : null;
+  const ariaLabel = stats
+    ? `Open Agent Device on GitHub, ${stats.stars.toLocaleString("en-US")} stars`
+    : "Open Agent Device on GitHub";
+
+  return (
+    <Link
+      aria-label={ariaLabel}
+      className={cn(baseClassName, className)}
+      href={githubRepoUrl}
+      rel="noreferrer"
+      target="_blank"
+    >
+      <span>GitHub</span>
+      <span className="flex items-center gap-1.5 text-white/65">
+        <PixelIcon name="star" className="size-4 text-[#8232ff]" />
+        <span>{starLabel ?? "Stars"}</span>
+      </span>
+    </Link>
+  );
+}
+
+export function GitHubStarLinkFallback({ className }: GitHubStarLinkProps) {
+  return (
+    <Link
+      aria-label="Open Agent Device on GitHub"
+      className={cn(baseClassName, className)}
+      href={githubRepoUrl}
+      rel="noreferrer"
+      target="_blank"
+    >
+      <span>GitHub</span>
+      <span className="flex items-center gap-1.5 text-white/65">
+        <PixelIcon name="star" className="size-4 text-[#8232ff]" />
+        <span>Stars</span>
+      </span>
+    </Link>
+  );
+}

landing/src/components/pixel-icon.tsx

@@ -25,6 +25,7 @@ import { Search } from "pixelarticons/react/Search";
 import { Ship } from "pixelarticons/react/Ship";
 import { Shuffle } from "pixelarticons/react/Shuffle";
 import { Smartphone } from "pixelarticons/react/Smartphone";
+import { Star } from "pixelarticons/react/Star";
 import { Terminal } from "pixelarticons/react/Terminal";
 import { Users } from "pixelarticons/react/Users";
 import { Video } from "pixelarticons/react/Video";
@@ -59,6 +60,7 @@ export type PixelIconName =
   | "ship"
   | "shuffle"
   | "snapshot"
+  | "star"
   | "terminal"
   | "video";
 
@@ -92,6 +94,7 @@ const iconComponents: Record<PixelIconName, IconComponent> = {
   ship: Ship,
   shuffle: Shuffle,
   snapshot: Image,
+  star: Star,
   terminal: Terminal,
   video: Video,
 };

landing/src/components/site-header.tsx

@@ -1,5 +1,7 @@
 import Link from "next/link";
+import { Suspense } from "react";
 
+import { GitHubStarLink, GitHubStarLinkFallback } from "@/components/github-star-link";
 import { ButtonLink } from "@/components/ui/button";
 import { navigationPages } from "@/lib/seo";
 
@@ -24,9 +26,14 @@ export function SiteHeader() {
             </Link>
           ))}
         </nav>
-        <ButtonLink href="#get-started" size="compact" className="hidden lg:inline-flex">
-          Get Started
-        </ButtonLink>
+        <div className="hidden items-center gap-3 lg:flex">
+          <Suspense fallback={<GitHubStarLinkFallback />}>
+            <GitHubStarLink />
+          </Suspense>
+          <ButtonLink href="#get-started" size="compact">
+            Get Started
+          </ButtonLink>
+        </div>
         <ButtonLink
           href="#get-started"
           size="compact"

landing/src/lib/github.ts

@@ -0,0 +1,54 @@
+const repoApiUrl = "https://api.github.com/repos/callstackincubator/agent-device";
+
+type GitHubRepoResponse = {
+  stargazers_count?: number;
+};
+
+export type GitHubRepoStats = {
+  stars: number;
+};
+
+export const githubRepoUrl = "https://github.com/callstackincubator/agent-device";
+
+export async function getGitHubRepoStats(): Promise<GitHubRepoStats | null> {
+  try {
+    const token = process.env.GITHUB_TOKEN;
+    const response = await fetch(repoApiUrl, {
+      headers: {
+        Accept: "application/vnd.github+json",
+        ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      },
+      next: {
+        revalidate: 60 * 60 * 4,
+      },
+    });
+
+    if (!response.ok) {
+      return null;
+    }
+
+    const repo = await response.json() as GitHubRepoResponse;
+
+    if (typeof repo.stargazers_count !== "number") {
+      return null;
+    }
+
+    return {
+      stars: repo.stargazers_count,
+    };
+  } catch {
+    return null;
+  }
+}
+
+export function formatStarCount(stars: number) {
+  if (stars >= 1_000_000) {
+    return `${(stars / 1_000_000).toFixed(1).replace(/\.0$/, "")}M`;
+  }
+
+  if (stars >= 1_000) {
+    return `${(stars / 1_000).toFixed(1).replace(/\.0$/, "")}K`;
+  }
+
+  return new Intl.NumberFormat("en-US").format(stars);
+}