RomanNum3ral
/
vert
mirror of https://github.com/VERT-sh/VERT.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
src/lib/sections/about/Credits.svelte
View File

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

182
src/lib/sections/about/Donate.svelte
View File

@ -1,8 +1,13 @@
<script lang="ts"> <script lang="ts">
import Panel from "$lib/components/visual/Panel.svelte"; 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> </script>
{#snippet donor(name: string, amount: number | string, avatar: string)} {#snippet donor(name: string, amount: number | string, avatar: string)}
@ -18,96 +23,95 @@
{/snippet} {/snippet}
<Panel class="flex flex-col gap-8 p-6"> <Panel class="flex flex-col gap-8 p-6">
<div class="flex flex-col gap-3"> <div class="flex flex-col gap-3">
<h2 class="text-2xl font-bold"> <h2 class="text-2xl font-bold">
<HeartIcon <HeartIcon
size="40" size="40"
class="inline-block -mt-1 mr-2 bg-rose-300 p-1.5 rounded-full" class="inline-block -mt-1 mr-2 bg-rose-300 p-1.5 rounded-full"
color="black" color="black"
/> />
Donate to VERT Donate to VERT
</h2> </h2>
<p class="text-base font-normal"> <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>
</p> </div>
</div>
<div class="flex flex-col gap-3 w-full"> <div class="flex flex-col gap-3 w-full">
<div class="flex gap-2 w-full"> <div class="flex gap-2 w-full">
<button <button
class="flex-1 p-4 rounded-lg bg-rose-300 text-black flex items-center justify-center" 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" One-time
class="inline-block mr-2" </button>
/>
One-time
</button>
<button <button
class="flex-1 p-4 rounded-lg bg-button text-black dynadark:text-white flex items-center justify-center" 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" Monthly
class="inline-block mr-2" </button>
/> </div>
Monthly <div class="flex gap-3 w-full">
</button> <button class="bg-rose-300 text-black p-4 rounded-lg flex-1"
</div> >$1 USD</button
<div class="flex gap-3 w-full"> >
<button <button
class="bg-rose-300 text-black p-4 rounded-lg flex-1" class="bg-button text-black dynadark:text-white p-4 rounded-lg flex-1"
>$1 USD</button >$5 USD</button
> >
<button <button
class="bg-button text-black dynadark:text-white p-4 rounded-lg flex-1" class="bg-button text-black dynadark:text-white p-4 rounded-lg flex-1"
>$5 USD</button >$10 USD</button
> >
<button <div class="relative flex items-center flex-[2]">
class="bg-button text-black dynadark:text-white p-4 rounded-lg flex-1" <span class="absolute left-3 text-gray-500">$</span>
>$10 USD</button <input
> type="number"
<div class="relative flex items-center flex-[2]"> 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"
<span class="absolute left-3 text-gray-500">$</span> placeholder="Custom"
<input />
type="number" </div>
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" </div>
placeholder="Custom" </div>
/>
</div>
</div>
</div>
<div class="flex flex-row justify-center w-full"> <div class="flex flex-row justify-center w-full">
<p class="text-muted text-sm flex-[4] flex items-center"> <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>
</p>
<button <button
class="flex-1 p-3 rounded-3xl bg-rose-300 text-black flex items-center justify-center" 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" /> <WalletIcon size="24" class="inline-block mr-2" />
Pay Now Pay Now
</button> </button>
</div> </div>
<!-- top donors --> <div class="flex flex-col gap-4">
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-1">
<div class="flex flex-col gap-1"> <h2 class="text-base font-bold">Our top donors</h2>
<h2 class="text-base font-bold">Our top donors</h2> {#if donors && donors.length > 0}
<p class="text-base text-muted font-normal"> <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> </p>
</div> {: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"> {#if donors && donors.length > 0}
{#each donors as dono} <div class="flex flex-row flex-wrap gap-2">
{@const { name, amount, avatar } = dono} {#each donors as dono}
{@render donor(name, amount, avatar)} {@const { name, amount, avatar } = dono}
{/each} {@render donor(name, amount, avatar)}
</div> {/each}
</div> </div>
</Panel> {/if}
</div>
</Panel>

61
src/lib/sections/about/Resources.svelte
View File

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

8
src/lib/sections/about/index.ts
View File

@ -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";

10
src/routes/+layout.svelte
View File

@ -189,15 +189,15 @@
<div class="flex-grow"> <div class="flex-grow">
{@render children()} {@render children()}
</div> </div>
<div <div class="w-full h-14 border-t border-separator relative">
class="w-full h-14 border-t border-separator relative"
>
<Footer <Footer
class="w-full h-full" class="w-full h-full"
items={{ items={{
"Privacy policy": "#", "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> </div>