Add fallback messages, formatting

Adds fallback messages to github contributors and top donors

format files
This commit is contained in:
JovannMC 2024-12-31 16:05:57 +03:00
parent f8d4d546a8
commit 2a460c4275
No known key found for this signature in database
5 changed files with 195 additions and 177 deletions

View File

@ -2,7 +2,7 @@
import Panel from "$lib/components/visual/Panel.svelte";
import { HeartHandshakeIcon } from "lucide-svelte";
let { mainContribs, ghContribs } = $props();
let { mainContribs, ghContribs } = $props();
</script>
{#snippet contributor(name: string, role: string, avatar: string)}
@ -21,51 +21,68 @@
{/snippet}
<Panel class="flex flex-col gap-8 p-6">
<h2 class="text-2xl font-bold">
<HeartHandshakeIcon
size="40"
class="inline-block -mt-1 mr-2 bg-blue-300 p-1.5 rounded-full"
color="black"
/>
Credits
</h2>
<h2 class="text-2xl font-bold">
<HeartHandshakeIcon
size="40"
class="inline-block -mt-1 mr-2 bg-blue-300 p-1.5 rounded-full"
color="black"
/>
Credits
</h2>
<!-- Main Contributors -->
<div class="flex flex-col gap-4">
<div class="flex flex-row flex-wrap gap-2">
{#each mainContribs as contrib}
{@const { name, role, avatar } = contrib}
{@render contributor(name, role, avatar)}
{/each}
</div>
</div>
<!-- Main Contributors -->
<div class="flex flex-col gap-4">
<div class="flex flex-row flex-wrap gap-2">
{#each mainContribs as contrib}
{@const { name, role, avatar } = contrib}
{@render contributor(name, role, avatar)}
{/each}
</div>
</div>
<!-- GitHub Contributors -->
<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">
Big thanks to all these people for helping out!
<a
class="text-blue-500 font-normal hover:underline"
href="https://github.com/not-nullptr/VERT"
target="_blank"
rel="noopener noreferrer"
>
Want to help too?
</a>
</p>
</div>
<div class="flex flex-row flex-wrap gap-2">
{#each ghContribs as contrib}
{@const { name, avatar } = contrib}
<img
src={avatar}
alt={name}
title={name}
class="w-10 h-10 rounded-full"
/>
{/each}
</div>
</div>
</Panel>
<!-- GitHub Contributors -->
<div class="flex flex-col gap-4">
<div class="flex flex-col gap-1">
<h2 class="text-base font-bold">GitHub Contributors</h2>
{#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"
href="https://github.com/not-nullptr/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="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}
<img
src={avatar}
alt={name}
title={name}
class="w-10 h-10 rounded-full"
/>
{/each}
</div>
{/if}
</div>
</Panel>

View File

@ -1,8 +1,13 @@
<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();
let { donors } = $props();
</script>
{#snippet donor(name: string, amount: number | string, avatar: string)}
@ -18,96 +23,95 @@
{/snippet}
<Panel class="flex flex-col gap-8 p-6">
<div class="flex flex-col gap-3">
<h2 class="text-2xl font-bold">
<HeartIcon
size="40"
class="inline-block -mt-1 mr-2 bg-rose-300 p-1.5 rounded-full"
color="black"
/>
Donate to VERT
</h2>
<p class="text-base font-normal">
With your support, we can keep maintaining and improving
VERT.
</p>
</div>
<div class="flex flex-col gap-3">
<h2 class="text-2xl font-bold">
<HeartIcon
size="40"
class="inline-block -mt-1 mr-2 bg-rose-300 p-1.5 rounded-full"
color="black"
/>
Donate to VERT
</h2>
<p class="text-base font-normal">
With your support, we can keep maintaining and improving VERT.
</p>
</div>
<div class="flex flex-col gap-3 w-full">
<div class="flex gap-2 w-full">
<button
class="flex-1 p-4 rounded-lg bg-rose-300 text-black flex items-center justify-center"
>
<HandCoinsIcon
size="24"
class="inline-block mr-2"
/>
One-time
</button>
<div class="flex flex-col gap-3 w-full">
<div class="flex gap-2 w-full">
<button
class="flex-1 p-4 rounded-lg bg-rose-300 text-black flex items-center justify-center"
>
<HandCoinsIcon 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
size="24"
class="inline-block mr-2"
/>
Monthly
</button>
</div>
<div class="flex gap-3 w-full">
<button
class="bg-rose-300 text-black p-4 rounded-lg flex-1"
>$1 USD</button
>
<button
class="bg-button text-black dynadark:text-white p-4 rounded-lg flex-1"
>$5 USD</button
>
<button
class="bg-button text-black dynadark:text-white p-4 rounded-lg flex-1"
>$10 USD</button
>
<div class="relative flex items-center flex-[2]">
<span class="absolute left-3 text-gray-500">$</span>
<input
type="number"
class="pl-8 pr-2 rounded-lg border border-gray-300 dynadark:border-gray-500 w-full h-full bg-button text-black dynadark:text-white"
placeholder="Custom"
/>
</div>
</div>
</div>
<button
class="flex-1 p-4 rounded-lg bg-button text-black dynadark:text-white flex items-center justify-center"
>
<CalendarHeartIcon size="24" class="inline-block mr-2" />
Monthly
</button>
</div>
<div class="flex gap-3 w-full">
<button class="bg-rose-300 text-black p-4 rounded-lg flex-1"
>$1 USD</button
>
<button
class="bg-button text-black dynadark:text-white p-4 rounded-lg flex-1"
>$5 USD</button
>
<button
class="bg-button text-black dynadark:text-white p-4 rounded-lg flex-1"
>$10 USD</button
>
<div class="relative flex items-center flex-[2]">
<span class="absolute left-3 text-gray-500">$</span>
<input
type="number"
class="pl-8 pr-2 rounded-lg border border-gray-300 dynadark:border-gray-500 w-full h-full bg-button text-black dynadark:text-white"
placeholder="Custom"
/>
</div>
</div>
</div>
<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
Liberapay
</p>
<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 Liberapay
</p>
<button
class="flex-1 p-3 rounded-3xl bg-rose-300 text-black flex items-center justify-center"
>
<WalletIcon size="24" class="inline-block mr-2" />
Pay Now
</button>
</div>
<button
class="flex-1 p-3 rounded-3xl bg-rose-300 text-black flex items-center justify-center"
>
<WalletIcon size="24" class="inline-block mr-2" />
Pay Now
</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>
<p class="text-base text-muted font-normal">
People like these fuel the things we love to do.
Thank you so much!
</p>
</div>
<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. Thank you
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>
<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>
</div>
</Panel>
{#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>

View File

@ -4,35 +4,32 @@
</script>
<Panel class="flex flex-col gap-4 p-6">
<h2 class="text-2xl font-bold">
<LinkIcon
size="40"
class="inline-block -mt-1 mr-2 bg-violet-400 bg- p-1.5 rounded-full"
color="black"
/>
Resources
</h2>
<div class="flex gap-3">
<a
href="https://discord.gg/kqevGxYPak"
target="_blank"
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
size="24"
class="inline-block mr-2"
/>
Discord server
</a>
<a
href="https://github.com/not-nullptr/VERT"
target="_blank"
rel="noopener noreferrer"
class="flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center"
>
<GithubIcon size="24" class="inline-block mr-2" />
Source code
</a>
</div>
</Panel>
<h2 class="text-2xl font-bold">
<LinkIcon
size="40"
class="inline-block -mt-1 mr-2 bg-violet-400 bg- p-1.5 rounded-full"
color="black"
/>
Resources
</h2>
<div class="flex gap-3">
<a
href="https://discord.gg/kqevGxYPak"
target="_blank"
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 size="24" class="inline-block mr-2" />
Discord server
</a>
<a
href="https://github.com/not-nullptr/VERT"
target="_blank"
rel="noopener noreferrer"
class="flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center"
>
<GithubIcon size="24" class="inline-block mr-2" />
Source code
</a>
</div>
</Panel>

View File

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

View File

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