diff --git a/packages/stats/app/src/routes/index.tsx b/packages/stats/app/src/routes/index.tsx index b2ad4a82a6..ad039b071c 100644 --- a/packages/stats/app/src/routes/index.tsx +++ b/packages/stats/app/src/routes/index.tsx @@ -37,6 +37,17 @@ const headerLinks = [ { href: "#token-cost", label: "Token Cost" }, { href: "#session-cost", label: "Session Cost" }, ] as const +const githubLink = { + href: "https://github.com/anomalyco/opencode", + apiHref: "https://api.github.com/repos/anomalyco/opencode", + label: "GitHub", + fallbackStars: "150K", + ariaLabel: "Star OpenCode on GitHub", +} +const compactNumberFormatter = new Intl.NumberFormat("en", { + notation: "compact", + maximumFractionDigits: 1, +}) const usageColors = [ "#ed6aff", "#a684ff", @@ -61,12 +72,30 @@ const getData = query(async () => { return runtime.runPromise(getStatsHomeData()) }, "getStatsHomeData") +const getGitHubStars = query(async () => { + "use server" + return fetch(githubLink.apiHref, { + headers: { + Accept: "application/vnd.github+json", + "X-GitHub-Api-Version": "2022-11-28", + }, + }) + .then((response) => (response.ok ? response.json() : undefined)) + .then((body: unknown) => + body && typeof body === "object" && "stargazers_count" in body && typeof body.stargazers_count === "number" + ? compactNumberFormatter.format(body.stargazers_count) + : githubLink.fallbackStars, + ) + .catch(() => githubLink.fallbackStars) +}, "getGitHubStars") + export default function StatsHome() { getRequestEvent()?.response.headers.set( "Cache-Control", "public, max-age=60, s-maxage=300, stale-while-revalidate=86400", ) const data = createAsync(() => getData()) + const githubStars = createAsync(() => getGitHubStars()) return (
@@ -76,7 +105,7 @@ export default function StatsHome() { -
+
}> @@ -1211,7 +1240,7 @@ function formatSessionCost(value: number) { return `$${value.toFixed(4)}` } -function Header() { +function Header(props: { githubStars: string }) { const [menuOpen, setMenuOpen] = createSignal(false) const [menuViewport, setMenuViewport] = createSignal(false) @@ -1264,12 +1293,13 @@ function Header() { - GitHub - [150K] + {githubLink.label} + [{props.githubStars}] Try OpenCode @@ -1294,12 +1324,13 @@ function Header() { - GitHub - [150K] + {githubLink.label} + [{props.githubStars}] {(link) => ( @@ -1379,7 +1410,7 @@ function Footer() { { href: "mailto:hello@opencode.ai", label: "Contact us" }, { href: "https://opencode.ai/discord", label: "Community" }, { href: "https://x.com/opencode", label: "X" }, - { href: "https://github.com/anomalyco/opencode", label: "GitHub" }, + githubLink, { href: "https://www.youtube.com/@anomaly-co", label: "YouTube" }, ]