-
-
-
- Star
-
- {starCount !== null && (
-
- {starCount.toLocaleString("en-US")}
-
- )}
-
+
;
+
+ return typeof cached.count === "number" &&
+ typeof cached.fetchedAt === "number" &&
+ Date.now() - cached.fetchedAt < CACHE_MAX_AGE_MS
+ ? cached.count
+ : null;
+ } catch {
+ return null;
+ }
+}
+
+function writeCachedCount(count: number): void {
+ try {
+ const cached: CachedStarCount = { count, fetchedAt: Date.now() };
+
+ window.sessionStorage.setItem(CACHE_KEY, JSON.stringify(cached));
+ } catch {
+ // Session storage can be unavailable; the count is simply fetched again on
+ // the next page load.
+ }
+}
+
+async function fetchStarCount(signal: AbortSignal): Promise
{
+ try {
+ const response = await fetch(GITHUB_REPO_API, {
+ headers: { Accept: "application/vnd.github+json" },
+ signal,
+ });
+
+ if (!response.ok) {
+ return null;
+ }
+
+ const data = (await response.json()) as { stargazers_count?: number };
+
+ return typeof data.stargazers_count === "number"
+ ? data.stargazers_count
+ : null;
+ } catch {
+ return null;
+ }
+}
+
+async function resolveStarCount(signal: AbortSignal): Promise {
+ const cached = readCachedCount();
+
+ if (cached !== null) {
+ return cached;
+ }
+
+ const liveCount = await fetchStarCount(signal);
+
+ if (liveCount !== null) {
+ writeCachedCount(liveCount);
+ }
+
+ return liveCount;
+}
+
+interface GitHubStarButtonProps {
+ readonly initialCount: number | null;
+}
+
+export function GitHubStarButton({ initialCount }: GitHubStarButtonProps) {
+ const [count, setCount] = useState(initialCount);
+
+ useEffect(() => {
+ const controller = new AbortController();
+
+ void resolveStarCount(controller.signal).then((resolved) => {
+ if (resolved !== null && !controller.signal.aborted) {
+ setCount(resolved);
+ }
+ });
+
+ return () => controller.abort();
+ }, []);
+
+ return (
+
+
+
+ Star
+
+ {count !== null && (
+
+ {count.toLocaleString("en-US")}
+
+ )}
+
+ );
+}