feat: add supporters and footer

website/src/components/navbar/navbar.svelte

@@ -9,7 +9,7 @@
 	const drawerStore = getDrawerStore();
 </script>
 
-<section class="flex justify-between">
+<header class="flex justify-between">
 	<div class="flex items-center justify-between w-full">
 		<div class="flex items-center gap-2">
 			<button
@@ -49,4 +49,4 @@
 			</a>
 		{/each}
 	</nav>
-</section>
+</header>

website/src/routes/+layout.svelte

@@ -24,6 +24,8 @@
 
 	import { initializeStores } from '@skeletonlabs/skeleton';
 	import NavDrawer from '../components/navdrawer/navdrawer.svelte';
+	import Fa from 'svelte-fa';
+	import { faGithub } from '@fortawesome/free-brands-svg-icons';
 	initializeStores();
 
 	const drawerStore = getDrawerStore();
@@ -37,4 +39,32 @@
 	</Drawer>
 	<Navbar />
 	<slot />
+	<br /><br />
 </main>
+<footer class="w-full bg-surface-200/40 p-4 flex justify-between">
+	<div>
+		<h3 class="h3">Spotube</h3>
+		<p>
+			Copyright © {new Date().getFullYear()} Spotube
+		</p>
+	</div>
+	<ul>
+		<li>
+			<a href="https://github.com/KRTirtho/spotube">
+				<Fa class="inline mr-1" icon={faGithub} size="lg" />
+				Github
+			</a>
+		</li>
+		<li>
+			<a href="https://opencollective.org/spotube">
+				<img
+					src="https://avatars0.githubusercontent.com/u/13403593?v=4"
+					height="20"
+					width="20"
+					class="inline mr-1"
+				/>
+				OpenCollective
+			</a>
+		</li>
+	</ul>
+</footer>

website/src/routes/+page.svelte

@@ -7,11 +7,15 @@
 		faLinux
 	} from '@fortawesome/free-brands-svg-icons/index';
 	import Fa from 'svelte-fa';
-	import { Download } from 'lucide-svelte';
+	import { Download, Heart } from 'lucide-svelte';
+	import type { PageData } from './$types';
+	import { Avatar } from '@skeletonlabs/skeleton';
+
+	export let data: PageData;
 </script>
 
-<section class="flex flex-col gap-4">
+<section class="flex flex-col gap-4 ps-4 pt-16 md:ps-24 md:pt-24">
-	<div class="ps-4 pt-16 md:ps-24 md:pt-24">
+	<div>
 		<h1 class="h1">Spotube</h1>
 		<br />
 		<h3 class="h3">
@@ -35,4 +39,30 @@
 			<Download />
 		</a>
 	</div>
+
+	<br /><br />
+
+	<h2 class="h2">
+		Supporters
+		<Heart class="inline-block" color="red" />
+	</h2>
+	<p class="text-surface-500">
+		We are grateful for the support of individuals and organizations who have made Spotube possible.
+	</p>
+
+	<div class="flex flex-wrap gap-4">
+		{#each data.props.members as member}
+			<a href={member.profile} target="_blank">
+				<div
+					class="flex flex-col items-center gap-2 overflow-ellipsis w-40 btn variant-ghost-secondary rounded-lg"
+				>
+					<Avatar src={member.image} alt={member.name} title={member.name} class="w-12 h-12" />
+					<p>{member.name}</p>
+					<p class="capitalize text-sm underline decoration-dotted">
+						({member.role.toLowerCase()})
+					</p>
+				</div>
+			</a>
+		{/each}
+	</div>
 </section>

website/src/routes/+page.ts

@@ -0,0 +1,34 @@
+interface Member {
+	MemberId: number;
+	createdAt: string;
+	type: string;
+	role: string;
+	isActive: boolean;
+	totalAmountDonated: number;
+	currency?: string;
+	lastTransactionAt: string;
+	lastTransactionAmount: number;
+	profile: string;
+	name: string;
+	company?: string;
+	description?: string;
+	image?: string;
+	email?: string;
+	twitter?: string;
+	github?: string;
+	website?: string;
+	tier?: string;
+}
+
+export const load = async () => {
+	const res = await fetch('https://opencollective.com/spotube/members/all.json');
+	const members = (await res.json()) as Member[];
+
+	return {
+		props: {
+			members: members
+				.filter((m) => m.totalAmountDonated > 0)
+				.sort((a, b) => b.totalAmountDonated - a.totalAmountDonated)
+		}
+	};
+};