feat: credits page

src/lib/components/atoms/ContributorButton.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	export let username: String;
-	let href = `https://github.com/${username}`
-	let src = `https://github.com/${username}.png`
+	export let username: string;
+	export let pfp: string;
+	export let url: string;
 	let alt = `${username}'s contributor profile picture`
 </script>
 
-<a {href}>
+<a href={url} target="_blank">
 	<button>
-		<img {src} {alt}><slot/>
+		<img src={pfp} alt={alt}><slot/>
 	</button>
 	<h2>{username}</h2>
 </a>
@@ -17,6 +17,9 @@
 		color: var(--white);
 		text-decoration: none;
 		text-align: center;
+		padding: 0.5rem;
+		border-radius: 12px;
+		transition: all 0.3s var(--bezier-one);
 	} 
 
 	button {
@@ -24,9 +27,8 @@
 		border-radius: 200px;
 		overflow: hidden;
         border: 0;
-		/* padding: 5px 5px; */
-        width:86px;
-        height:86px;
+        width:45px;
+        height:45px;
         max-height: 86px;
         max-width: 86px;
 		cursor: pointer;
@@ -36,8 +38,12 @@
 		user-select: none;
 	}
 
-	a:hover > button {
-		transform: translateY(-5%);
+	a:hover  {
+		background-color: var(--grey-one);
+	}
+
+	h2 {
+		font-size: 1rem;
 	}
 
 	img {

src/lib/components/molecules/ContributorHost.svelte

@@ -1,29 +1,57 @@
 <script lang="ts">
+    import ContributorsStore from "../../stores/ContributorsStore.js";
     import ContributorButton from "../atoms/ContributorButton.svelte";
-    export let peoples: Array<String>;
+    import { onMount } from "svelte";
+    import { fly } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
+   
+    let contribs;
+    export let repo: string;
 
-    import { onMount } from 'svelte';
-    
-	onMount(async () => {
-		const response = await fetch('https://releases.rvcd.win/contributors');
-		const json = await response.json();
-        console.log(json);
-	});
+    onMount (() => {
+        ContributorsStore.subscribe(async (data) => {
+            contribs = await data;
+            contribs = contribs[repo]
+        });
+    });
 
+    let usersIwantToExplodeSoBadly = [
+        'semantic-release-bot',
+    ]
 </script>
 
-<div class="social-host">
-    {#each peoples as person}
-        <ContributorButton username={person}></ContributorButton>
-    {/each}
-</div>
+{#if contribs}
+    <div class="container" in:fly="{{ y: 10, easing: quintOut, duration: 700 }}">
+        <h2>
+            ReVanced {repo === 'cli' ? 'CLI' : repo.charAt(0).toUpperCase() + repo.slice(1)}
+        </h2>
+
+        <div class="contrib-host">    
+            {#each contribs as contrib}
+                {#if !usersIwantToExplodeSoBadly.includes(contrib.login)}
+                    <ContributorButton username={contrib.login} pfp={contrib.avatar_url} url={contrib.html_url} />
+                {/if}
+            {/each}
+        </div>
+    </div>
+{/if}
 
 <style>
-    .social-host {
-        gap: 2rem;
-        width: 100;
+    h2 {
+        margin-bottom: 1rem;
+    }
+    .contrib-host {
+        gap: 1.5rem;
         display: grid;
 		align-items: center;
-        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+        background-color: var(--grey-six);
+        padding: 1.5rem;
+        border-radius: 28px;
+    }
+
+    /* temporary, put into main wrapper when homepage is more fleshed out */
+    .container {
+        margin-bottom: 3rem;
     }
 </style>

src/lib/stores/ContributorsStore.js

@@ -0,0 +1,26 @@
+import { readable } from "svelte/store";
+
+const fetchContributors = async () => {
+    let cli,
+        patcher,
+        patches,
+        integrations,
+        manager;
+        
+    const response = await fetch('https://releases.rvcd.win/contributors');
+    const json = await response.json();
+
+    ({ 0: cli, 1: patcher, 2: patches, 3: integrations, 4: manager } = json.repositories);
+
+    cli = cli.contributors
+    patcher = patcher.contributors
+    patches = patches.contributors
+    integrations = integrations.contributors
+    manager = manager.contributors
+
+    return {cli, patcher, patches, integrations, manager};
+     
+};
+
+const ContributorsStore = readable(fetchContributors());
+export default ContributorsStore;