refactor: dynamically create credit repos

src/lib/components/atoms/ContributorPerson.svelte

@@ -6,8 +6,8 @@
 </script>
 
 <a href={url} target="_blank">
-	<button>
+	<button tabindex="-1">
-		<img src={pfp} alt={alt}><slot/>
+		<img src={pfp} {alt}>
 	</button>
 	<h2>{name}</h2>
 </a>

src/lib/components/molecules/ContributorHost.svelte

@@ -1,21 +1,16 @@
 <script lang="ts">
-    import ContributorsStore from "../../stores/ContributorsStore.js";
+    import ContributorButton from "../atoms/ContributorPerson.svelte";
-    import ContributorButton from "../atoms/ContributorButton.svelte";
-    import { onMount } from "svelte";
     import { fly } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
    
-    let contribs: Object;
+    export let contribs;
-    let repo_link: string;
     export let repo: string;
-
+    
-    onMount (() => {
+    let repo_name = repo.replace(/-/g, ' ')
-        ContributorsStore.subscribe(async (e) => {
+        .replace(/revanced\/revanced/g, 'ReVanced')
-            let data = await e;
+        .replace(/cli/g, 'CLI')
-            repo_link = 'https://github.com/' + data[repo].name;
+        .replace(/api/g, 'API')
-            contribs = data[repo].contributors
+        .replace(/(?:^|\s)\S/g, x => x.toUpperCase())
-        });
-    });
 
     let usersIwantToExplodeSoBadly = [
         'semantic-release-bot',
@@ -24,10 +19,14 @@
 </script>
 
 {#if contribs}
-    <div class="container" in:fly="{{ y: 10, easing: quintOut, duration: 700 }}">
+    <div 
-        <a href={repo_link} target="_blank">
+        class="container" 
-            <h2>ReVanced {repo === 'cli' ? 'CLI' : repo.charAt(0).toUpperCase() + repo.slice(1)}</h2>
+        in:fly="{{ y: 10, easing: quintOut, duration: 700 }}"
+    >
+        <a href='https://github.com/{repo}' target="_blank">
+            <h2>{repo_name}</h2>
         </a>
+
         <div class="contrib-host">    
             {#each contribs as contrib}
                 {#if !usersIwantToExplodeSoBadly.includes(contrib.login)}
@@ -39,6 +38,7 @@
                 {/if}
             {/each}
         </div>
+
     </div>
 {/if}
 

src/lib/stores/ContributorsStore.js

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

src/routes/credits/+page.svelte

@@ -1,13 +1,24 @@
 <script lang="ts">
     import ContributorHost from '$lib/components/molecules/ContributorHost.svelte';
+    import ContributorsStore from '../../lib/stores/ContributorsStore.js';
+    import { onMount } from "svelte";
+
+    let data;
+
+    onMount (() => {
+        ContributorsStore.subscribe(async (e) => {
+            data = await e;
+            console.log(data);
+        });
+    });
 </script>
 
 <div class="wrapper contrib-grid">
-    <ContributorHost repo="cli"/>
+    {#if data}
-    <ContributorHost repo="patcher"/>
+        {#each data.repositories as { contributors, name }}
-    <ContributorHost repo="patches"/>
+            <ContributorHost contribs={contributors} repo={name}/>
-    <ContributorHost repo="integrations"/>
+        {/each}
-    <ContributorHost repo="manager"/>
+    {/if}
 </div>
 
 <style>