Add a list of sponsors ❤️

src/app/pages/Home.tsx

@@ -35,6 +35,7 @@ export function Home({}: Props) {
 					<Tools />
 				</div>}
 			</div>
+			<Sponsors />
 			<Giscus />
 			<Footer />
 		</div>
@@ -125,3 +126,20 @@ function Changelog() {
 		{latestChanges?.map(change => <ChangelogEntry minimal={!hugeScreen} short={true} change={change} />)}
 	</ToolGroup>
 }
+
+function Sponsors() {
+	const { value } = useAsync(() => {
+		return fetch('https://ghs.vercel.app/sponsors/misode').then(r => r.json())
+	}, [])
+
+	return <div class="sponsors">
+		<h3>Sponsored by</h3>
+		<div class="sponsors-list">
+			{value?.sponsors?.map((s: any) =>
+				<a class="tooltipped tip-se" href={s.profile} target="_blank" aria-label={`@${s.handle}`}>
+					<img width={48} height={48} src={s.avatar} alt={`@${s.handle}`} />
+				</a>
+			)}
+		</div>
+	</div>
+}

src/styles/global.css

@@ -1970,6 +1970,42 @@ hr {
 	background-color: var(--selection) !important;
 }
 
+.sponsors {
+	margin: 40px auto;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.sponsors h3 {
+	margin-bottom: 10px;
+	font-weight: normal;
+	color: var(--text-2);
+}
+
+.sponsors-list {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+}
+
+.sponsors-list > * {
+	margin: 3px;
+	border-radius: 50%;
+	background-color: var(--background-2);
+	width: 48px;
+	height: 48px;
+	transition: background-color 200ms;
+}
+
+.sponsors-list > * img {
+	border-radius: 50%;
+}
+
+.sponsors-list > *:hover {
+	background-color: var(--background-3);
+}
+
 .giscus-container {
 	margin-top: 16px;
 	min-height: 325.667px;