Add fallback messages, formatting

Adds fallback messages to github contributors and top donors

format files

src/lib/sections/about/Credits.svelte

@@ -44,7 +44,8 @@
 	<div class="flex flex-col gap-4">
 		<div class="flex flex-col gap-1">
 			<h2 class="text-base font-bold">GitHub Contributors</h2>
-            <p class="text-sm text-muted font-normal">
+			{#if ghContribs && ghContribs.length > 0}
+				<p class="text-base text-muted font-normal">
 					Big thanks to all these people for helping out!
 					<a
 						class="text-blue-500 font-normal hover:underline"
@@ -55,7 +56,22 @@
 						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="https://github.com/not-nullptr/VERT"
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						be the first to contribute!
+					</a>
+				</p>
+			{/if}
 		</div>
+
+		{#if ghContribs && ghContribs.length > 0}
 			<div class="flex flex-row flex-wrap gap-2">
 				{#each ghContribs as contrib}
 					{@const { name, avatar } = contrib}
@@ -67,5 +83,6 @@
 					/>
 				{/each}
 			</div>
+		{/if}
 	</div>
 </Panel>

src/lib/sections/about/Donate.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
 	import Panel from "$lib/components/visual/Panel.svelte";
-	import { CalendarHeartIcon, HandCoinsIcon, HeartIcon, WalletIcon } from "lucide-svelte";
+	import {
+		CalendarHeartIcon,
+		HandCoinsIcon,
+		HeartIcon,
+		WalletIcon,
+	} from "lucide-svelte";
 
 	let { donors } = $props();
 </script>
@@ -28,8 +33,7 @@
 			Donate to VERT
 		</h2>
 		<p class="text-base font-normal">
-            With your support, we can keep maintaining and improving
+			With your support, we can keep maintaining and improving VERT.
-            VERT.
 		</p>
 	</div>
 
@@ -38,26 +42,19 @@
 			<button
 				class="flex-1 p-4 rounded-lg bg-rose-300 text-black flex items-center justify-center"
 			>
-                <HandCoinsIcon
+				<HandCoinsIcon size="24" class="inline-block mr-2" />
-                    size="24"
-                    class="inline-block mr-2"
-                />
 				One-time
 			</button>
 
 			<button
 				class="flex-1 p-4 rounded-lg bg-button text-black dynadark:text-white flex items-center justify-center"
 			>
-                <CalendarHeartIcon
+				<CalendarHeartIcon size="24" class="inline-block mr-2" />
-                    size="24"
-                    class="inline-block mr-2"
-                />
 				Monthly
 			</button>
 		</div>
 		<div class="flex gap-3 w-full">
-            <button
+			<button class="bg-rose-300 text-black p-4 rounded-lg flex-1"
-                class="bg-rose-300 text-black p-4 rounded-lg flex-1"
 				>$1 USD</button
 			>
 			<button
@@ -81,8 +78,7 @@
 
 	<div class="flex flex-row justify-center w-full">
 		<p class="text-muted text-sm flex-[4] flex items-center">
-            Payments and subscription management <br /> are handled through
+			Payments and subscription management <br /> are handled through Liberapay
-            Liberapay
 		</p>
 
 		<button
@@ -93,21 +89,29 @@
 		</button>
 	</div>
 
-    <!-- top donors -->
 	<div class="flex flex-col gap-4">
 		<div class="flex flex-col gap-1">
 			<h2 class="text-base font-bold">Our top donors</h2>
+			{#if donors && donors.length > 0}
 				<p class="text-base text-muted font-normal">
-                People like these fuel the things we love to do.
+					People like these fuel the things we love to do. Thank you
-                Thank you so much!
+					so much!
 				</p>
+			{:else}
+				<p class="text-base text-muted font-normal italic">
+					Seems like no one has donated yet... so if you do, you will
+					pop up here!
+				</p>
+			{/if}
 		</div>
 
+		{#if donors && donors.length > 0}
 			<div class="flex flex-row flex-wrap gap-2">
 				{#each donors as dono}
 					{@const { name, amount, avatar } = dono}
 					{@render donor(name, amount, avatar)}
 				{/each}
 			</div>
+		{/if}
 	</div>
 </Panel>

src/lib/sections/about/Resources.svelte

@@ -19,10 +19,7 @@
 			rel="noopener noreferrer"
 			class="flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center"
 		>
-            <MessageCircleMoreIcon
+			<MessageCircleMoreIcon size="24" class="inline-block mr-2" />
-                size="24"
-                class="inline-block mr-2"
-            />
 			Discord server
 		</a>
 		<a

src/lib/sections/about/index.ts

@@ -1,4 +1,4 @@
-export { default as Credits } from './Credits.svelte';
+export { default as Credits } from "./Credits.svelte";
-export { default as Donate } from './Donate.svelte';
+export { default as Donate } from "./Donate.svelte";
-export { default as Resources } from './Resources.svelte';
+export { default as Resources } from "./Resources.svelte";
-export { default as Why } from './Why.svelte';
+export { default as Why } from "./Why.svelte";

src/routes/+layout.svelte

@@ -189,15 +189,15 @@
 					<div class="flex-grow">
 						{@render children()}
 					</div>
-					<div
+					<div class="w-full h-14 border-t border-separator relative">
-						class="w-full h-14 border-t border-separator relative"
-					>
 						<Footer
 							class="w-full h-full"
 							items={{
 								"Privacy policy": "#",
-								"Source code": "https://github.com/not-nullptr/VERT",
+								"Source code":
-								"Discord server": "https://discord.gg/kqevGxYPak",
+									"https://github.com/not-nullptr/VERT",
+								"Discord server":
+									"https://discord.gg/kqevGxYPak",
 							}}
 						/>
 					</div>