From 25311a07bde8c952fa0701c1411f594c308c38a9 Mon Sep 17 00:00:00 2001
From: Kingkor Roy Tirtho <krtirtho@gmail.com>
Date: Fri, 9 Feb 2024 13:43:07 +0600
Subject: [PATCH] feat: add supporters and footer

---
 website/src/components/navbar/navbar.svelte |  4 +--
 website/src/routes/+layout.svelte           | 30 +++++++++++++++++
 website/src/routes/+page.svelte             | 36 +++++++++++++++++++--
 website/src/routes/+page.ts                 | 34 +++++++++++++++++++
 4 files changed, 99 insertions(+), 5 deletions(-)
 create mode 100644 website/src/routes/+page.ts

diff --git a/website/src/components/navbar/navbar.svelte b/website/src/components/navbar/navbar.svelte
index 9f11e0ca..59a8d4b1 100644
--- a/website/src/components/navbar/navbar.svelte
+++ b/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>
diff --git a/website/src/routes/+layout.svelte b/website/src/routes/+layout.svelte
index 5fd060b6..2eb70073 100644
--- a/website/src/routes/+layout.svelte
+++ b/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>
diff --git a/website/src/routes/+page.svelte b/website/src/routes/+page.svelte
index a6f5a06e..976d8cc7 100644
--- a/website/src/routes/+page.svelte
+++ b/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">
-	<div class="ps-4 pt-16 md:ps-24 md:pt-24">
+<section class="flex flex-col gap-4 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>
diff --git a/website/src/routes/+page.ts b/website/src/routes/+page.ts
new file mode 100644
index 00000000..5d50a467
--- /dev/null
+++ b/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)
+		}
+	};
+};