refactor: prettier'ed

src/lib/components/atoms/Button.svelte

@@ -7,11 +7,8 @@
 </script>
 
 <a {href}>
-	<div 
+	<div class={type} style="width: {width ? '100%' : 'max-width'}">
-		class={type} 
+		<img src="icons/{icon}.svg" alt={icon} />
-		style="width: {width ? '100%' : 'max-width'}" 
-	>
-		<img src="icons/{icon}.svg" alt="{icon}"/>
 		<slot />
 	</div>
 </a>
@@ -22,7 +19,8 @@
 		border-radius: 16px;
 	}
 
-	div, .button-secondary {
+	div,
+	.button-secondary {
 		font-size: 1.1rem;
 		height: 60px;
 		color: var(--white);
@@ -40,12 +38,12 @@
 	.button-primary {
 		background-color: var(--accent-color);
 		box-shadow: 0px 0px 32px 1px var(--accent-color-glow);
-		color: var(--grey-four)
+		color: var(--grey-four);
 	}
 
 	div:hover {
 		transform: translateY(-4%);
-		filter: brightness(90%)
+		filter: brightness(90%);
 	}
 
 	div,
@@ -53,7 +51,7 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		gap: 0.5rem
+		gap: 0.5rem;
 	}
 
 	img {

src/lib/components/atoms/ContributorPerson.svelte

@@ -2,12 +2,12 @@
 	export let name: string;
 	export let pfp: string;
 	export let url: string;
-	let alt = `${name}'s profile picture`
+	let alt = `${name}'s profile picture`;
 </script>
 
 <a href={url} target="_blank">
 	<button tabindex="-1">
-		<img src={pfp} {alt}>
+		<img src={pfp} {alt} />
 	</button>
 	<h2>{name}</h2>
 </a>

src/lib/components/atoms/HeroImage.svelte

@@ -2,10 +2,7 @@
 </script>
 
 <div class="hero-img">
-	<img 
+	<img src="/manager.png" alt="Screenshot of ReVanced Manager" />
-		src="/manager.png" 
-		alt="Screenshot of ReVanced Manager" 
-	/>
 </div>
 
 <style>

src/lib/components/atoms/HeroTitle.svelte

@@ -3,7 +3,6 @@
 </h1>
 
 <style>
-
 	span {
 		color: var(--accent-color);
 	}

src/lib/components/atoms/NavButton.svelte

@@ -1,11 +1,11 @@
 <script>
 	import { page } from '$app/stores';
 	export let href = '/';
-	$: current = (href === $page.url.pathname);
+	$: current = href === $page.url.pathname;
 </script>
 
 <a {href}>
-	<li class:selected="{current === true}">
+	<li class:selected={current === true}>
 		<slot />
 	</li>
 </a>
@@ -42,6 +42,6 @@
 
 	li.selected {
 		background-color: var(--grey-three);
-		color: var(--accent-color)
+		color: var(--accent-color);
 	}
 </style>

src/lib/components/atoms/Patch.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { onMount } from "svelte";
+	import { onMount } from 'svelte';
 	import { fly } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
 
@@ -12,14 +12,13 @@
 	function handleClick() {
 		const el = document.getElementById('arrow');
 		if (!el) return;
-        el!.style.transform = "rotate(180deg)"
+		el!.style.transform = 'rotate(180deg)';
 	}
-    
 </script>
 
 <div
 	class="patch-container {hasPatchOptions ? 'expanded' : ''}"
-    on:click={hasPatchOptions ? handleClick : ''}
+	on:click={hasPatchOptions ? handleClick : null}
 >
 	<div class="things">
 		<div class="title">
@@ -28,7 +27,7 @@
 		</div>
 
 		{#if hasPatchOptions}
-            <img id="arrow" src="/icons/arrow.svg" alt="dropdown">
+			<img id="arrow" src="/icons/arrow.svg" alt="dropdown" />
 		{/if}
 	</div>
 	<!-- <h3>{pkgName}</h3> -->
@@ -53,7 +52,6 @@
 		color: var(--grey-five);
 		font-size: 0.8rem;
 		font-weight: 400;
-
 	}
 
 	.patch-container {
@@ -65,7 +63,6 @@
 	.title {
 		display: flex;
 		align-items: center;
-
 	}
 
 	.things {
@@ -78,8 +75,5 @@
 	}
 
 	.expanded {
-
 	}
-
 </style>
-

src/lib/components/atoms/SocialButton.svelte

@@ -5,7 +5,7 @@
 
 <a {href}>
 	<div>
-		<img src='socials/{src}.svg' alt={src} />
+		<img src="socials/{src}.svg" alt={src} />
 	</div>
 </a>
 

src/lib/components/atoms/Wave.svelte

@@ -26,27 +26,27 @@
 	@keyframes wave-anim {
 		0% {
 			d: path(
-        "M 0,500 C 0,500 0,250 0,250 C 176.53333333333336,300.1333333333333 353.0666666666667,350.2666666666667 496,325 C 638.9333333333333,299.7333333333333 748.2666666666667,199.06666666666666 900,174 C 1051.7333333333333,148.93333333333334 1245.8666666666668,199.46666666666667 1440,250 C 1440,250 1440,500 1440,500 Z"
+				'M 0,500 C 0,500 0,250 0,250 C 176.53333333333336,300.1333333333333 353.0666666666667,350.2666666666667 496,325 C 638.9333333333333,299.7333333333333 748.2666666666667,199.06666666666666 900,174 C 1051.7333333333333,148.93333333333334 1245.8666666666668,199.46666666666667 1440,250 C 1440,250 1440,500 1440,500 Z'
 			);
 		}
 		25% {
 			d: path(
-        "M 0,500 C 0,500 0,250 0,250 C 154.13333333333333,219.20000000000002 308.26666666666665,188.40000000000003 449,209 C 589.7333333333333,229.59999999999997 717.0666666666668,301.59999999999997 880,317 C 1042.9333333333332,332.40000000000003 1241.4666666666667,291.20000000000005 1440,250 C 1440,250 1440,500 1440,500 Z"
+				'M 0,500 C 0,500 0,250 0,250 C 154.13333333333333,219.20000000000002 308.26666666666665,188.40000000000003 449,209 C 589.7333333333333,229.59999999999997 717.0666666666668,301.59999999999997 880,317 C 1042.9333333333332,332.40000000000003 1241.4666666666667,291.20000000000005 1440,250 C 1440,250 1440,500 1440,500 Z'
 			);
 		}
 		50% {
 			d: path(
-        "M 0,500 C 0,500 0,250 0,250 C 132.8,242.93333333333334 265.6,235.86666666666667 414,246 C 562.4,256.1333333333333 726.3999999999999,283.46666666666664 900,287 C 1073.6000000000001,290.53333333333336 1256.8000000000002,270.26666666666665 1440,250 C 1440,250 1440,500 1440,500 Z"
+				'M 0,500 C 0,500 0,250 0,250 C 132.8,242.93333333333334 265.6,235.86666666666667 414,246 C 562.4,256.1333333333333 726.3999999999999,283.46666666666664 900,287 C 1073.6000000000001,290.53333333333336 1256.8000000000002,270.26666666666665 1440,250 C 1440,250 1440,500 1440,500 Z'
 			);
 		}
 		75% {
 			d: path(
-        "M 0,500 C 0,500 0,250 0,250 C 151.33333333333331,206.66666666666669 302.66666666666663,163.33333333333334 472,176 C 641.3333333333334,188.66666666666666 828.6666666666667,257.3333333333333 993,279 C 1157.3333333333333,300.6666666666667 1298.6666666666665,275.33333333333337 1440,250 C 1440,250 1440,500 1440,500 Z"
+				'M 0,500 C 0,500 0,250 0,250 C 151.33333333333331,206.66666666666669 302.66666666666663,163.33333333333334 472,176 C 641.3333333333334,188.66666666666666 828.6666666666667,257.3333333333333 993,279 C 1157.3333333333333,300.6666666666667 1298.6666666666665,275.33333333333337 1440,250 C 1440,250 1440,500 1440,500 Z'
 			);
 		}
 		100% {
 			d: path(
-        "M 0,500 C 0,500 0,250 0,250 C 176.53333333333336,300.1333333333333 353.0666666666667,350.2666666666667 496,325 C 638.9333333333333,299.7333333333333 748.2666666666667,199.06666666666666 900,174 C 1051.7333333333333,148.93333333333334 1245.8666666666668,199.46666666666667 1440,250 C 1440,250 1440,500 1440,500 Z"
+				'M 0,500 C 0,500 0,250 0,250 C 176.53333333333336,300.1333333333333 353.0666666666667,350.2666666666667 496,325 C 638.9333333333333,299.7333333333333 748.2666666666667,199.06666666666666 900,174 C 1051.7333333333333,148.93333333333334 1245.8666666666668,199.46666666666667 1440,250 C 1440,250 1440,500 1440,500 Z'
 			);
 		}
 	}

src/lib/components/molecules/ContributorHost.svelte

@@ -1,29 +1,22 @@
 <script lang="ts">
-    import ContributorButton from "../atoms/ContributorPerson.svelte";
+	import ContributorButton from '../atoms/ContributorPerson.svelte';
-    import { fly } from 'svelte/transition';
-	import { quintOut } from 'svelte/easing';
 
 	export let contribs;
 	export let repo: string;
 
-    let repo_name = repo.replace(/-/g, ' ')
+	let repo_name = repo
+		.replace(/-/g, ' ')
 		.replace(/revanced\/revanced/g, 'ReVanced')
 		.replace(/cli/g, 'CLI')
 		.replace(/api/g, 'API')
-        .replace(/(?:^|\s)\S/g, x => x.toUpperCase())
+		.replace(/(?:^|\s)\S/g, (x) => x.toUpperCase());
-
-    let usersIwantToExplodeSoBadly = [
-        'semantic-release-bot',
-    ]
 
+	let usersIwantToExplodeSoBadly = ['semantic-release-bot'];
 </script>
 
 {#if contribs}
-    <div 
+	<div class="container">
-        class="container" 
+		<a href="https://github.com/{repo}" target="_blank">
-        in:fly="{{ y: 10, easing: quintOut, duration: 700 }}"
-    >
-        <a href='https://github.com/{repo}' target="_blank">
 			<h2>{repo_name}</h2>
 		</a>
 
@@ -38,7 +31,6 @@
 				{/if}
 			{/each}
 		</div>
-
 	</div>
 {/if}
 

src/lib/components/molecules/Navigation.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
 	import Navigation from '../atoms/NavButton.svelte';
-	import { fly } from 'svelte/transition';
-	import {quintOut} from 'svelte/easing';
 	import { onMount } from 'svelte';
 	import { page } from '$app/stores';
 
@@ -42,9 +40,8 @@
 </nav>
 
 <style>
-
 	nav {
-		padding: 0% 1rem 0% 2rem;
+		padding: 0 1rem 0 2rem;
 		top: 0;
 		position: fixed;
 		display: flex;
@@ -64,7 +61,6 @@
 		align-items: center;
 	}
 
-
 	a {
 		text-decoration: none;
 	}

src/lib/components/organisms/Home.svelte

@@ -13,7 +13,7 @@
 
 		<div class="hero-buttons">
 			<Button icon="download" kind="primary" href="download" width="100%">Download</Button>
-			<Button icon="docs" href="docs" width='true' >Read The Docs</Button>
+			<Button icon="docs" href="docs" width="true">Read The Docs</Button>
 		</div>
 	</div>
 </section>
@@ -55,7 +55,5 @@
 		.hero-buttons {
 			flex-direction: column;
 		}
-		
 	}
-	
 </style>

src/routes/+page.svelte

@@ -30,7 +30,7 @@
 	}
 	@media (max-width: 1700px) {
 		.wrappezoid {
-			justify-content: space-between;;
+			justify-content: space-between;
 		}
 	}
 	@media (max-width: 1052px) {

src/routes/credits/+page.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
 	import ContributorHost from '$lib/components/molecules/ContributorHost.svelte';
 	import ContributorsStore from '../../lib/stores/ContributorsStore.js';
-    import { onMount } from "svelte";
+	import { onMount } from 'svelte';
+	import { fly } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
 
 	let data;
 
@@ -15,7 +17,9 @@
 <div class="wrapper contrib-grid">
 	{#if data}
 		{#each data.repositories as { contributors, name }}
+			<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
 				<ContributorHost contribs={contributors} repo={name} />
+			</div>
 		{/each}
 	{/if}
 </div>

src/routes/docs/+page.svelte

@@ -1,10 +1,10 @@
 <script>
-    import Button from "$lib/components/atoms/Button.svelte";
+	import Button from '$lib/components/atoms/Button.svelte';
 	import { fly } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
 </script>
 
-<section in:fly="{{ y: 10, easing: quintOut, duration: 700 }}">
+<section in:fly={{ y: 10, easing: quintOut, duration: 700 }}>
 	<div class="menu">
 		<div class="doc-section-selected">
 			<h3>Prerequisites</h3>
@@ -23,16 +23,32 @@
 				<li>x86/x86_64 host architecture</li>
 				<li>Zulu JDK 17</li>
 				<li>Latest Android SDK if you plan to build the integrations from the source</li>
-                <li>The APK file you want to patch (e.g. YouTube v17.36.37 or YouTube Music v5.23.50). If you want to mount patched applications as root, make sure the same version is installed on your device.</li>
+				<li>
-                <li>You can continue by either building everything from source or downloading the prebuilt packages.</li>
+					The APK file you want to patch (e.g. YouTube v17.36.37 or YouTube Music v5.23.50). If you
+					want to mount patched applications as root, make sure the same version is installed on
+					your device.
+				</li>
+				<li>
+					You can continue by either building everything from source or downloading the prebuilt
+					packages.
+				</li>
 			</ul>
 			<br />
-            You can continue by either <a href="https://github.com/revanced/revanced-documentation/wiki/Building-from-source">building everything from source</a> or <a href="https://github.com/revanced/revanced-documentation/wiki/Downloading-prebuilt-packages">downloading the prebuilt packages</a>.
+			You can continue by either
+			<a href="https://github.com/revanced/revanced-documentation/wiki/Building-from-source"
+				>building everything from source</a
+			>
+			or
+			<a
+				href="https://github.com/revanced/revanced-documentation/wiki/Downloading-prebuilt-packages"
+				>downloading the prebuilt packages</a
+			>.
 		</h5>
 		<br />
 		<br />
 		<div class="button-wrapper">
-            <Button kind="secondary" fontsize="1rem">Using ReVanced CLI and installing ReVanced -></Button>
+			<Button kind="secondary">Using ReVanced CLI and installing ReVanced -></Button
+			>
 		</div>
 	</div>
 </section>
@@ -54,10 +70,11 @@
 	a:hover {
 		background-color: var(--accent-color);
 		border-radius: 6px;
-        color: var(--grey-four)
+		color: var(--grey-four);
 	}
 
-    .menu, .content {
+	.menu,
+	.content {
 		height: 100vh;
 		width: 100%;
 	}

src/routes/patches/+page.svelte

@@ -25,12 +25,8 @@
                 });
             };
         })
-
-
-
     });
     
-    
 </script>
 
 <section>
@@ -53,6 +49,7 @@
         </div>
         {/if}
     </div>
+
     {#if patches}
         <div class="patches-list patches-container">
             {#each patches as patch, i}