Display GitHub star count in Navbar and MobileMenu

Author: richiemcilroy

apps/web/app/(site)/Navbar.tsx

@@ -112,7 +112,11 @@ const Links = [
 	},
 ];
 
-export const Navbar = () => {
+interface NavbarProps {
+	stars?: string;
+}
+
+export const Navbar = ({ stars }: NavbarProps) => {
 	const pathname = usePathname();
 	const [showMobileMenu, setShowMobileMenu] = useState(false);
 	const auth = useCurrentUser();
@@ -222,7 +226,7 @@ export const Navbar = () => {
 								size="sm"
 								className="w-full font-medium sm:w-auto"
 							>
-								Github
+								{`GitHub${stars ? ` (${stars})` : ""}`}
 							</Button>
 							<Suspense
 								fallback={
@@ -288,7 +292,11 @@ export const Navbar = () => {
 				</nav>
 			</header>
 			{showMobileMenu && (
-				<MobileMenu setShowMobileMenu={setShowMobileMenu} auth={auth} />
+				<MobileMenu
+					setShowMobileMenu={setShowMobileMenu}
+					auth={auth}
+					stars={stars}
+				/>
 			)}
 		</>
 	);

apps/web/app/(site)/layout.tsx

@@ -1,12 +1,16 @@
 import type { PropsWithChildren } from "react";
+import { formatStarCount, getGitHubStars } from "@/utils/github";
 import { Intercom } from "../Layout/Intercom";
 import { Footer } from "./Footer";
 import { Navbar } from "./Navbar";
 
-export default function Layout(props: PropsWithChildren) {
+export default async function Layout(props: PropsWithChildren) {
+	const starCount = await getGitHubStars();
+	const stars = formatStarCount(starCount);
+
 	return (
 		<>
-			<Navbar />
+			<Navbar stars={stars} />
 			{props.children}
 			<Footer />
 			<Intercom />

apps/web/components/ui/MobileMenu.tsx

@@ -5,6 +5,7 @@ import type { User } from "next-auth";
 interface MobileMenuProps {
 	setShowMobileMenu: (showMobileMenu: boolean) => void;
 	auth: User | null;
+	stars?: string;
 }
 
 interface NavLink {
@@ -55,7 +56,11 @@ const externalLinks: NavLink[] = [
 	},
 ];
 
-const MobileMenu: React.FC<MobileMenuProps> = ({ setShowMobileMenu, auth }) => {
+const MobileMenu: React.FC<MobileMenuProps> = ({
+	setShowMobileMenu,
+	auth,
+	stars,
+}) => {
 	return (
 		<div className="block overflow-auto fixed top-0 left-0 z-40 px-4 w-full h-full bg-gray-2">
 			<div className="pb-12">
@@ -84,7 +89,9 @@ const MobileMenu: React.FC<MobileMenuProps> = ({ setShowMobileMenu, auth }) => {
 									>
 										{link.icon}
 										<span className="ml-2 text-lg font-medium text-gray-11">
-											{link.text}
+											{link.text === "Open Source" && stars
+												? `${stars} Stars`
+												: link.text}
 										</span>
 									</Link>
 								</li>

apps/web/utils/github.ts

@@ -0,0 +1,33 @@
+interface GitHubRepoResponse {
+	stargazers_count: number;
+}
+
+export async function getGitHubStars(): Promise<number> {
+	const response = await fetch("https://api.github.com/repos/CapSoftware/Cap", {
+		headers: {
+			Accept: "application/vnd.github.v3+json",
+			"User-Agent": "Cap-Web",
+		},
+		next: {
+			revalidate: 172800,
+		},
+	});
+
+	if (!response.ok) {
+		return 0;
+	}
+
+	const data: GitHubRepoResponse = await response.json();
+	return data.stargazers_count;
+}
+
+export function formatStarCount(count: number): string {
+	if (count === 0) return "";
+	if (count >= 1000) {
+		const formatted = (count / 1000).toFixed(1);
+		return formatted.endsWith(".0")
+			? `${Math.floor(count / 1000)}k`
+			: `${formatted}k`;
+	}
+	return count.toString();
+}