feat: add notable contributors section

src/lib/components/functional/ConversionPanel.svelte

@@ -5,7 +5,6 @@
 	import Dropdown from "./Dropdown.svelte";
 	import Tooltip from "../visual/Tooltip.svelte";
 	import ProgressBar from "../visual/ProgressBar.svelte";
-	import { fade } from "$lib/animation";
 
 	const length = $derived(files.files.length);
 	const progress = $derived(files.files.filter((f) => f.result).length);

src/lib/sections/about/Credits.svelte

@@ -3,7 +3,7 @@
 	import { HeartHandshakeIcon } from "lucide-svelte";
 	import { GITHUB_URL_VERT } from "$lib/consts";
 
-	let { mainContribs, ghContribs } = $props();
+	let { mainContribs, notableContribs, ghContribs } = $props();
 </script>
 
 {#snippet contributor(
@@ -11,8 +11,9 @@
 	github: string,
 	avatar: string,
 	role?: string,
+	smaller?: boolean,
 )}
-	<div class="flex items-center gap-4">
+	<div class="flex items-center gap-4" class:gap-1={smaller}>
 		<a
 			href={github}
 			target="_blank"
@@ -23,14 +24,22 @@
 				src={avatar}
 				alt={name}
 				title={name}
-				class="{role
+				class="{smaller
-					? 'w-14 h-14 hoverable-md'
+					? 'w-12 h-12 hoverable'
-					: 'w-10 h-10 hoverable-lg'} rounded-full"
+					: role
+						? 'w-14 h-14 hoverable-md'
+						: 'w-10 h-10 hoverable-lg'} rounded-full"
 			/>
 		</a>
 		{#if role}
 			<div class="flex flex-col gap-1">
-				<p class="text-xl font-semibold">{name}</p>
+				<p
+					class="font-semibold"
+					class:text-xl={!smaller}
+					class:text-base={smaller}
+				>
+					{name}
+				</p>
 				<p class="text-sm font-normal text-muted">{role}</p>
 			</div>
 		{/if}
@@ -60,55 +69,75 @@
 		</div>
 	</div>
 
-	<!-- GitHub contributors -->
+	<!-- Notable contributors -->
 	<div class="flex flex-col gap-4">
 		<div class="flex flex-col gap-1">
-			<h2 class="text-base font-bold">GitHub contributors</h2>
+			<h2 class="text-base font-bold">Notable contributors</h2>
-			{#if ghContribs && ghContribs.length > 0}
+			<div class="flex flex-col gap-2">
 				<p class="text-base text-muted font-normal">
-					Big <a
+					We'd like to thank these people for their major
-						class="text-black dynadark:text-white"
+					contributions to VERT.
-						href="/jpegify">thanks</a
-					>
-					to all these people for helping out!
-					<a
-						class="text-blue-500 font-normal hover:underline"
-						href={GITHUB_URL_VERT}
-						target="_blank"
-						rel="noopener noreferrer"
-					>
-						Want to help too?
-					</a>
 				</p>
-			{:else}
+				<div class="flex flex-col gap-2">
-				<p class="text-base text-muted font-normal italic">
+					{#each notableContribs as contrib}
-					Seems like no one has contributed yet...
+						{@const { name, github, avatar, role } = contrib}
-					<a
+						{@render contributor(name, github, avatar, role, true)}
-						class="text-blue-500 font-normal hover:underline"
+					{/each}
-						href={GITHUB_URL_VERT}
+				</div>
-						target="_blank"
+			</div>
-						rel="noopener noreferrer"
-					>
-						be the first to contribute!
-					</a>
-				</p>
-			{/if}
 		</div>
 
-		{#if ghContribs && ghContribs.length > 0}
+		<!-- GitHub contributors -->
-			<div class="flex flex-row flex-wrap gap-2">
+		<div class="flex flex-col gap-4">
-				{#each ghContribs as contrib}
+			<div class="flex flex-col gap-1">
-					{@const { name, github, avatar } = contrib}
+				<h2 class="text-base font-bold">GitHub contributors</h2>
-					{@render contributor(name, github, avatar)}
+				{#if ghContribs && ghContribs.length > 0}
-				{/each}
+					<p class="text-base text-muted font-normal">
+						Big <a
+							class="text-black dynadark:text-white"
+							href="/jpegify">thanks</a
+						>
+						to all these people for helping out!
+						<a
+							class="text-blue-500 font-normal hover:underline"
+							href={GITHUB_URL_VERT}
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							Want to help too?
+						</a>
+					</p>
+				{:else}
+					<p class="text-base text-muted font-normal italic">
+						Seems like no one has contributed yet...
+						<a
+							class="text-blue-500 font-normal hover:underline"
+							href={GITHUB_URL_VERT}
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							be the first to contribute!
+						</a>
+					</p>
+				{/if}
 			</div>
-		{/if}
 
-		<h2 class="mt-2 -mb-2">Libraries</h2>
+			{#if ghContribs && ghContribs.length > 0}
-		<p class="font-normal">
+				<div class="flex flex-row flex-wrap gap-2">
-			A big thanks to FFmpeg (audio, video), libvips (images) and Pandoc
+					{#each ghContribs as contrib}
-			(documents) for maintaining such excellent libraries for so many
+						{@const { name, github, avatar } = contrib}
-			years. VERT relies on them to provide you with your conversions.
+						{@render contributor(name, github, avatar)}
-		</p>
+					{/each}
-	</div>
+				</div>
-</Panel>
+			{/if}
+
+			<h2 class="mt-2 -mb-2">Libraries</h2>
+			<p class="font-normal">
+				A big thanks to FFmpeg (audio, video), libvips (images) and
+				Pandoc (documents) for maintaining such excellent libraries for
+				so many years. VERT relies on them to provide you with your
+				conversions.
+			</p>
+		</div>
+	</div></Panel
+>

src/routes/about/+page.svelte

@@ -6,10 +6,12 @@
 	import avatarNullptr from "$lib/assets/avatars/nullptr.jpg";
 	import avatarLiam from "$lib/assets/avatars/liam.jpg";
 	import avatarJovannMC from "$lib/assets/avatars/jovannmc.jpg";
+	import avatarRealmy from "$lib/assets/avatars/realmy.jpg";
+	import avatarAzurejelly from "$lib/assets/avatars/azurejelly.jpg";
 	import { GITHUB_API_URL } from "$lib/consts";
 	import { addToast } from "$lib/store/ToastProvider";
-	import { dev } from "$app/environment";
+	// import { dev } from "$app/environment";
-	import { page } from "$app/state";
+	// import { page } from "$app/state";
 
 	/* interface Donator {
 		name: string;
@@ -47,6 +49,21 @@
 		},
 	];
 
+	const notableContribs: Contributor[] = [
+		{
+			name: "azurejelly",
+			github: "https://github.com/azurejelly",
+			role: "Maintaining Docker & CI support",
+			avatar: avatarAzurejelly,
+		},
+		{
+			name: "realmy",
+			github: "https://github.com/RealmyTheMan",
+			role: "Former designer & co-founder",
+			avatar: avatarRealmy,
+		}
+	];
+
 	let ghContribs: Contributor[] = [];
 
 	onMount(async () => {
@@ -66,13 +83,15 @@
 			}
 			const allContribs = await response.json();
 
-			// Filter out main contributors
+			// Filter out main and notable contributors
-			const mainContribNames = mainContribs.map((contrib) =>
+			const excludedNames = new Set([
-				contrib.github.split("/").pop(),
+				...mainContribs.map((c) => c.github.split("/").pop()),
-			);
+				...notableContribs.map((c) => c.github.split("/").pop()),
+			]);
+
 			const filteredContribs = allContribs.filter(
 				(contrib: { login: string }) =>
-					!mainContribNames.includes(contrib.login),
+					!excludedNames.has(contrib.login),
 			);
 
 			// Fetch and cache avatar images as Base64
@@ -135,7 +154,7 @@
 		<!-- Resources & Donate to VERT -->
 		<div class="flex flex-col gap-4 flex-1">
 			<About.Resources />
-			<About.Credits {mainContribs} {ghContribs} />
+			<About.Credits {mainContribs} {notableContribs} {ghContribs} />
 			{#if donationsEnabled}
 				<About.Vertd />
 			{/if}