feat(web): update sponsors logic

Author: AmanVarshney01

apps/web/src/app/(home)/_components/sponsors-section.tsx

@@ -2,6 +2,7 @@ export const dynamic = "force-static";
 
 import { api } from "@better-t-stack/backend/convex/_generated/api";
 import { fetchQuery } from "convex/nextjs";
+import { fetchSponsors } from "@/lib/sponsors";
 import CommandSection from "./_components/command-section";
 import Footer from "./_components/footer";
 import HeroSection from "./_components/hero-section";
@@ -10,7 +11,7 @@ import StatsSection from "./_components/stats-section";
 import Testimonials from "./_components/testimonials";
 
 export default async function HomePage() {
-	const sponsors = await fetchQuery(api.sponsors.getSponsors);
+	const sponsorsData = await fetchSponsors();
 	const fetchedTweets = await fetchQuery(api.testimonials.getTweets);
 	const fetchedVideos = await fetchQuery(api.testimonials.getVideos);
 	const videos = fetchedVideos.map((v) => ({
@@ -31,7 +32,7 @@ export default async function HomePage() {
 				<HeroSection />
 				<CommandSection />
 				<StatsSection analyticsData={minimalAnalyticsData} />
-				<SponsorsSection sponsors={sponsors} />
+				<SponsorsSection sponsorsData={sponsorsData} />
 				<Testimonials tweets={tweets} videos={videos} />
 			</div>
 			<Footer />

apps/web/src/app/(home)/page.tsx

@@ -8,30 +8,24 @@ import {
 	HoverCardTrigger,
 } from "@/components/ui/hover-card";
 import {
-	filterCurrentSponsors,
-	filterSpecialSponsors,
 	formatSponsorUrl,
 	getSponsorUrl,
 	sortSpecialSponsors,
 } from "@/lib/sponsor-utils";
-import type { Sponsor } from "@/lib/types";
+import type { Sponsor, SponsorsData } from "@/lib/types";
 
 export function SpecialSponsorBanner() {
 	const [specialSponsors, setSpecialSponsors] = useState<Sponsor[]>([]);
 	const [loading, setLoading] = useState(true);
 
 	useEffect(() => {
-		fetch("https://sponsors.amanv.dev/sponsors.json")
+		fetch("https://sponsors.better-t-stack.dev/sponsors.json")
 			.then((res) => {
 				if (!res.ok) throw new Error("Failed to fetch sponsors");
 				return res.json();
 			})
-			.then((data) => {
-				const sponsorsData = Array.isArray(data) ? data : [];
-				const currentSponsors = filterCurrentSponsors(sponsorsData);
-				const specials = sortSpecialSponsors(
-					filterSpecialSponsors(currentSponsors),
-				);
+			.then((data: SponsorsData) => {
+				const specials = sortSpecialSponsors(data.specialSponsors);
 				setSpecialSponsors(specials);
 				setLoading(false);
 			})
@@ -63,30 +57,21 @@ export function SpecialSponsorBanner() {
 		<div>
 			<div className="no-scrollbar grid grid-cols-4 items-center gap-2 overflow-x-auto whitespace-nowrap py-1">
 				{specialSponsors.map((entry) => {
-					const displayName = entry.sponsor.name || entry.sponsor.login;
-					const imgSrc = entry.sponsor.customLogoUrl || entry.sponsor.avatarUrl;
-					const since = new Date(entry.createdAt).toLocaleDateString(
-						undefined,
-						{
-							year: "numeric",
-							month: "short",
-						},
-					);
 					const sponsorUrl = getSponsorUrl(entry);
 
 					return (
-						<HoverCard key={entry.sponsor.login}>
+						<HoverCard key={entry.githubId}>
 							<HoverCardTrigger asChild>
 								<a
-									href={entry.sponsor.websiteUrl || sponsorUrl}
+									href={entry.websiteUrl || sponsorUrl}
 									target="_blank"
 									rel="noopener noreferrer"
-									aria-label={displayName}
+									aria-label={entry.name}
 									className="inline-flex"
 								>
 									<Image
-										src={imgSrc}
-										alt={displayName}
+										src={entry.avatarUrl}
+										alt={entry.name}
 										width={66}
 										height={66}
 										className="size-12 rounded border border-border"
@@ -105,13 +90,13 @@ export function SpecialSponsorBanner() {
 										<div className="ml-auto text-muted-foreground text-xs">
 											<span>SPECIAL</span>
 											<span className="px-1">•</span>
-											<span>SINCE {since.toUpperCase()}</span>
+											<span>{entry.sinceWhen.toUpperCase()}</span>
 										</div>
 									</div>
 									<div className="flex gap-3">
 										<Image
-											src={imgSrc}
-											alt={displayName}
+											src={entry.avatarUrl}
+											alt={entry.name}
 											width={80}
 											height={80}
 											className="rounded border border-border"
@@ -120,7 +105,7 @@ export function SpecialSponsorBanner() {
 										<div className="grid grid-cols-1 grid-rows-[1fr_auto]">
 											<div>
 												<h3 className="truncate font-semibold text-sm">
-													{displayName}
+													{entry.name}
 												</h3>
 												{entry.tierName ? (
 													<p className="text-primary text-xs">
@@ -130,17 +115,15 @@ export function SpecialSponsorBanner() {
 											</div>
 											<div className="flex flex-col gap-1">
 												<a
-													href={`https://github.com/${entry.sponsor.login}`}
+													href={entry.githubUrl}
 													target="_blank"
 													rel="noopener noreferrer"
 													className="group flex items-center gap-2 text-muted-foreground text-xs transition-colors hover:text-primary"
 												>
 													<Github className="h-4 w-4" />
-													<span className="truncate">
-														{entry.sponsor.login}
-													</span>
+													<span className="truncate">{entry.githubId}</span>
 												</a>
-												{entry.sponsor.websiteUrl || entry.sponsor.linkUrl ? (
+												{entry.websiteUrl ? (
 													<a
 														href={sponsorUrl}
 														target="_blank"

apps/web/src/components/special-sponsor-banner.tsx

@@ -3,67 +3,30 @@ import type { Sponsor } from "@/lib/types";
 export const SPECIAL_SPONSOR_THRESHOLD = 100;
 
 export const getSponsorAmount = (sponsor: Sponsor): number => {
-	// For past sponsors, return 0
-	if (sponsor.monthlyDollars === -1) {
-		return 0;
+	// If totalProcessedAmount exists, use it, otherwise parse from tierName
+	if (sponsor.totalProcessedAmount !== undefined) {
+		return sponsor.totalProcessedAmount;
 	}
 
-	// For one-time sponsors, parse the actual amount from tierName
-	if (sponsor.isOneTime && sponsor.tierName) {
-		const match = sponsor.tierName.match(/\$(\d+(?:\.\d+)?)/);
-		return match ? Number.parseFloat(match[1]) : sponsor.monthlyDollars;
-	}
-
-	// For monthly sponsors, use monthlyDollars
-	return sponsor.monthlyDollars;
+	// Parse amount from tierName as fallback
+	const match = sponsor.tierName.match(/\$(\d+(?:\.\d+)?)/);
+	return match ? Number.parseFloat(match[1]) : 0;
 };
 
 export const calculateLifetimeContribution = (sponsor: Sponsor): number => {
-	// For past sponsors, return 0
-	if (sponsor.monthlyDollars === -1) {
-		return 0;
-	}
-
-	// For one-time sponsors, return the one-time amount
-	if (sponsor.isOneTime && sponsor.tierName) {
-		const match = sponsor.tierName.match(/\$(\d+(?:\.\d+)?)/);
-		return match ? Number.parseFloat(match[1]) : 0;
+	// If totalProcessedAmount exists, use it, otherwise parse from tierName
+	if (sponsor.totalProcessedAmount !== undefined) {
+		return sponsor.totalProcessedAmount;
 	}
 
-	// For monthly sponsors, calculate total contribution since they started
-	const startDate = new Date(sponsor.createdAt);
-	const currentDate = new Date();
-	const monthsSinceStart = Math.max(
-		1,
-		Math.floor(
-			(currentDate.getTime() - startDate.getTime()) /
-				(1000 * 60 * 60 * 24 * 30.44),
-		),
-	);
-
-	return sponsor.monthlyDollars * monthsSinceStart;
+	// Parse amount from tierName as fallback
+	const match = sponsor.tierName.match(/\$(\d+(?:\.\d+)?)/);
+	return match ? Number.parseFloat(match[1]) : 0;
 };
 
 export const shouldShowLifetimeTotal = (sponsor: Sponsor): boolean => {
-	// Don't show for past sponsors
-	if (sponsor.monthlyDollars === -1) {
-		return false;
-	}
-
-	// Don't show for one-time sponsors
-	if (sponsor.isOneTime) {
-		return false;
-	}
-
-	// Don't show for first month sponsors
-	const startDate = new Date(sponsor.createdAt);
-	const currentDate = new Date();
-	const monthsSinceStart = Math.floor(
-		(currentDate.getTime() - startDate.getTime()) /
-			(1000 * 60 * 60 * 24 * 30.44),
-	);
-
-	return monthsSinceStart > 1;
+	// Only show lifetime total if totalProcessedAmount exists
+	return sponsor.totalProcessedAmount !== undefined;
 };
 
 export const filterVisibleSponsors = (sponsors: Sponsor[]): Sponsor[] => {
@@ -87,69 +50,27 @@ export const sortSponsors = (sponsors: Sponsor[]): Sponsor[] => {
 	return sponsors.sort((a, b) => {
 		const aAmount = getSponsorAmount(a);
 		const bAmount = getSponsorAmount(b);
-		const aLifetime = calculateLifetimeContribution(a);
-		const bLifetime = calculateLifetimeContribution(b);
-		const aIsPast = a.monthlyDollars === -1;
-		const bIsPast = b.monthlyDollars === -1;
 		const aIsSpecial = isSpecialSponsor(a);
 		const bIsSpecial = isSpecialSponsor(b);
-		const aIsLifetimeSpecial = isLifetimeSpecialSponsor(a);
-		const bIsLifetimeSpecial = isLifetimeSpecialSponsor(b);
 
-		// 1. Special sponsors (>=$100 current) come first
+		// 1. Special sponsors (>=$100) come first
 		if (aIsSpecial && !bIsSpecial) return -1;
 		if (!aIsSpecial && bIsSpecial) return 1;
 		if (aIsSpecial && bIsSpecial) {
 			if (aAmount !== bAmount) {
 				return bAmount - aAmount;
 			}
-			// If amounts equal, prefer monthly over one-time
-			if (a.isOneTime && !b.isOneTime) return 1;
-			if (!a.isOneTime && b.isOneTime) return -1;
-			// Then by creation date (oldest first)
-			return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
-		}
-
-		// 2. Lifetime special sponsors (>=$100 total) come next
-		if (aIsLifetimeSpecial && !bIsLifetimeSpecial) return -1;
-		if (!aIsLifetimeSpecial && bIsLifetimeSpecial) return 1;
-		if (aIsLifetimeSpecial && bIsLifetimeSpecial) {
-			if (aLifetime !== bLifetime) {
-				return bLifetime - aLifetime;
-			}
-			// If lifetime amounts equal, prefer monthly over one-time
-			if (a.isOneTime && !b.isOneTime) return 1;
-			if (!a.isOneTime && b.isOneTime) return -1;
-			// Then by creation date (oldest first)
-			return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
+			// If amounts equal, sort by name
+			return a.name.localeCompare(b.name);
 		}
 
-		// 3. Current sponsors come before past sponsors
-		if (!aIsPast && bIsPast) return -1;
-		if (aIsPast && !bIsPast) return 1;
-
-		// 4. For current sponsors, sort by lifetime contribution (highest first)
-		if (!aIsPast && !bIsPast) {
-			if (aLifetime !== bLifetime) {
-				return bLifetime - aLifetime;
-			}
-			// If lifetime amounts equal, prefer monthly over one-time
-			if (a.isOneTime && !b.isOneTime) return 1;
-			if (!a.isOneTime && b.isOneTime) return -1;
-			// Then by creation date (oldest first)
-			return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
+		// 2. Regular sponsors sorted by amount (highest first)
+		if (aAmount !== bAmount) {
+			return bAmount - aAmount;
 		}
 
-		// 5. For past sponsors, sort by lifetime contribution (highest first)
-		if (aIsPast && bIsPast) {
-			if (aLifetime !== bLifetime) {
-				return bLifetime - aLifetime;
-			}
-			// Then by creation date (newest first)
-			return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
-		}
-
-		return 0;
+		// 3. If amounts equal, sort by name
+		return a.name.localeCompare(b.name);
 	});
 };
 
@@ -158,33 +79,24 @@ export const sortSpecialSponsors = (sponsors: Sponsor[]): Sponsor[] => {
 		const aLifetime = calculateLifetimeContribution(a);
 		const bLifetime = calculateLifetimeContribution(b);
 
-		// First, prioritize current special sponsors
-		const aIsSpecial = isSpecialSponsor(a);
-		const bIsSpecial = isSpecialSponsor(b);
-
-		if (aIsSpecial && !bIsSpecial) return -1;
-		if (!aIsSpecial && bIsSpecial) return 1;
-
-		// Then sort by lifetime contribution (highest first)
+		// Sort by lifetime contribution (highest first)
 		if (aLifetime !== bLifetime) {
 			return bLifetime - aLifetime;
 		}
 
-		// If lifetime amounts equal, prefer monthly over one-time
-		if (a.isOneTime && !b.isOneTime) return 1;
-		if (!a.isOneTime && b.isOneTime) return -1;
-
-		// Then by creation date (oldest first)
-		return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
+		// If amounts equal, sort by name
+		return a.name.localeCompare(b.name);
 	});
 };
 
 export const filterCurrentSponsors = (sponsors: Sponsor[]): Sponsor[] => {
-	return sponsors.filter((sponsor) => sponsor.monthlyDollars !== -1);
+	// In the new structure, all sponsors in the main arrays are current
+	return sponsors;
 };
 
-export const filterPastSponsors = (sponsors: Sponsor[]): Sponsor[] => {
-	return sponsors.filter((sponsor) => sponsor.monthlyDollars === -1);
+export const filterPastSponsors = (_sponsors: Sponsor[]): Sponsor[] => {
+	// Past sponsors are handled separately in the new structure
+	return [];
 };
 
 export const filterSpecialSponsors = (sponsors: Sponsor[]): Sponsor[] => {
@@ -196,11 +108,7 @@ export const filterRegularSponsors = (sponsors: Sponsor[]): Sponsor[] => {
 };
 
 export const getSponsorUrl = (sponsor: Sponsor): string => {
-	return (
-		sponsor.sponsor.websiteUrl ||
-		sponsor.sponsor.linkUrl ||
-		`https://github.com/${sponsor.sponsor.login}`
-	);
+	return sponsor.websiteUrl || sponsor.githubUrl;
 };
 
 export const formatSponsorUrl = (url: string): string => {

apps/web/src/lib/sponsor-utils.ts

@@ -0,0 +1,35 @@
+import type { SponsorsData } from "./types";
+
+const SPONSORS_URL = "https://sponsors.better-t-stack.dev/sponsors.json";
+
+export async function fetchSponsors(): Promise<SponsorsData> {
+	try {
+		const response = await fetch(SPONSORS_URL, {
+			next: { revalidate: 3600 },
+		});
+
+		if (!response.ok) {
+			throw new Error(`Failed to fetch sponsors: ${response.status}`);
+		}
+
+		const data = await response.json();
+		return data as SponsorsData;
+	} catch (error) {
+		console.error("Error fetching sponsors:", error);
+		return {
+			generated_at: new Date().toISOString(),
+			summary: {
+				total_sponsors: 0,
+				total_lifetime_amount: 0,
+				total_current_monthly: 0,
+				special_sponsors: 0,
+				current_sponsors: 0,
+				past_sponsors: 0,
+				top_sponsor: { name: "", amount: 0 },
+			},
+			specialSponsors: [],
+			sponsors: [],
+			pastSponsors: [],
+		};
+	}
+}