feat: polling init

src/app.css

@@ -30,9 +30,13 @@ body {
 .wrapper {
     margin-inline: auto;
     width: min(90%, 100rem);
-    margin-top: 7rem;
+    margin-top: 4rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
 }
 
+
 :root {
     --white: #fff;
     --accent-color: #9fd5ff;

src/lib/components/atoms/Button.svelte

@@ -9,7 +9,9 @@
 
 <a {href} {target}>
 	<div class={type} style="width: {maxWidth ? '100%' : 'max-content'}">
-		<img src="../icons/{icon}.svg" alt={icon} />
+		{#if icon}
+			<img src="../icons/{icon}.svg" alt={icon} />
+		{/if}
 		<slot />
 	</div>
 </a>
@@ -46,8 +48,6 @@
 		filter: brightness(85%);
 	}
 
-
-
 	div,
 	.button-secondary {
 		display: flex;

src/lib/components/atoms/ContributorPerson.svelte

@@ -2,10 +2,13 @@
 	export let name: string;
 	export let pfp: string;
 	export let url: string;
-	let alt = `${name}'s profile picture`;
+	let alt = `h`;
+
+	let clicked = false;
+	
 </script>
 
-<a href={url} rel="noreferrer" target="_blank">
+<a href={url} rel="noreferrer" target="_blank" on:click={() => (clicked = !clicked)} class:clicked>
 	<img src={pfp} {alt} />
 	<h2>{name}</h2>
 </a>
@@ -14,24 +17,20 @@
 	a {
 		color: var(--white);
 		text-decoration: none;
-		padding: 0.5rem;
+		padding: 1rem;
 		width: 100%;
 		transition: all 0.3s var(--bezier-one);
-		border-radius: 4px;
+		border-radius: 8px;
 		display: flex;
 		gap: 1rem;
 		align-items: center;
 		background-color: var(--grey-six);
 		border: 1px solid var(--grey-three);
+		cursor: pointer;
 	}
 
-
 	a:hover {
-		background-color: var(--accent-color);
+		background-color: var(--grey-one);
-	}
-
-	a:hover > h2 {
-		color: var(--grey-four);
 	}
 
 	h2 {
@@ -41,12 +40,30 @@
 		text-overflow: ellipsis;
 	}
 
+	.clicked {
+		background-color: var(--accent-color);
+	}
+
+	.clicked h2 {
+		color: var(--grey-four);
+	}
+
+	.clicked:hover {
+		background-color: var(--accent-color);
+	}
+
 	img {
-		border-radius: 50%;
+		border-radius: 8px;
-		height: 30px;
+		height: 150px;
-		width: 30px;
+		width: 150px;
 		background-color: var(--grey-two);
 		transition: transform 0.4s var(--bezier-one);
 		user-select: none;
 	}
+
+	@media screen and (max-width: 768px) {
+		a {
+			flex-direction: column;
+		}
+	}
 </style>

src/routes/+error.svelte

@@ -8,7 +8,7 @@
 <section class="error">
 	<h1>{status}</h1>
 	{#if status == 404}
-		<p>That page received a cease and desist letter from a multi-billion dollar tech company.</p>
+		<p>ReVanced Website is still a work in progress.</p>
 		<br />
 		<Navigation href="/" is_selected={() => true}>Home</Navigation>
 	{:else}

src/routes/+layout.svelte

@@ -30,8 +30,6 @@
 	<meta name="theme-color" content="#9FD5FF" />
 </svelte:head>
 
-<NavHost />
-
 {#if $show_loading_animation}
 	<Spinner />
 {:else}

src/routes/api-settings/+page.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">
-  import * as settings from '../../data/api/settings';
-  import { clear } from '../../data/api/cache';
-
-  let url = settings.api_base_url();
-
-  function handler() {
-    clear();
-    settings.set_api_base_url(url);
-    location.reload(true);
-  }
-</script>
-
-<section class="settings">
-  <input name="api-url" type="text" bind:value={url} />
-  <button on:click={handler}>Save</button>
-</section>
-<section class="cache">
-  <button on:click={clear}>Clear cache</button>
-</section>
-
-<style>
-  .settings {
-    padding-top: 5rem;
-  }
-</style>

src/routes/contributors/+page.svelte

@@ -1,87 +0,0 @@
-<script lang="ts">
-	import { fly } from 'svelte/transition';
-	import { quintOut } from 'svelte/easing';
-
-	import ContributorHost from '$lib/components/molecules/ContributorHost.svelte';
-	import Footer from '$lib/components/molecules/Footer.svelte';
-
-  import { repositories } from '../../data/api';
-</script>
-
-<svelte:head>
-	<title>ReVanced | Contributors</title>
-	<meta content="ReVanced | Contributors" name="og:title" />
-	<meta content="ReVanced | Contributors" name="twitter:title" />
-</svelte:head>
-
-<main>
-	<div class="wrapper">
-		<div class="text-container" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
-			<h1>Made possible by the community.</h1>
-			<h2>Want to show up here? <span><a href="https://github.com/revanced" target="_blank" rel="noreferrer">Become a contributor</a></span></h2>
-		</div>
-		<div class="contrib-grid">
-			{#each $repositories as { contributors: contribs, name }}
-				<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
-					<ContributorHost {contribs} repo={name} />
-				</div>
-			{/each}
-		</div>
-	</div>
-</main>
-
-<Footer />
-
-<style>
-	.contrib-grid {
-		display: flex;
-		flex-direction: column;
-		gap: 3rem;
-		margin-bottom: 3rem;
-	}
-
-	h1 {
-		font-size: 2.25rem;
-		font-weight: 600;
-		text-align: center;
-		color: var(--grey-four);
-	}
-	h2 {
-		font-size: 1rem;
-		color: var(--grey-four);
-		text-align: center;
-	}
-
-	.text-container {
-		display: flex;
-		align-items: center;
-		flex-direction: column;
-		gap: 0.5rem;
-		margin-bottom: 2rem;
-		background-color: var(--accent-color);
-		padding: 2rem;
-		border-radius: 8px;
-	}
-
-	a {
-		text-decoration: none;
-		color: var(--grey-four);
-	}
-
-	a::after {
-		padding-left: 5px;
-		content: '->';
-		position: absolute;
-		transition: all 0.3s var(--bezier-one);
-	}
-
-	a:hover::after {
-		transform: translateX(5px);
-	}
-
-	@media screen and (max-width: 768px) {
-		h1 {
-			font-size: 2rem;
-		}
-	}
-</style>

src/routes/docs/+layout.server.ts

@@ -1,10 +0,0 @@
-import type { PageServerLoad } from './$types';
-
-import { index_content } from '$lib/documentation.server';
-
-// The load function here used to get data from a json file created by a (prerendered) server route.
-// This was because we could not prerender the documentation route before.
-// If you can no longer prerender the docs, then you are going to have to move the load functions here to a prerendered server route like before and fetch them here.
-export const prerender = true;
-
-export const load: PageServerLoad = () => ({ tree: index_content() });

src/routes/docs/+layout.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-  import type { PageData } from './$types';
-
-  import DocsNavTree from '$lib/components/molecules/DocsNavTree.svelte';
-
-  import { fly } from 'svelte/transition';
-  import { quintOut } from 'svelte/easing';
-
-  export let data: PageData;
-</script>
-
-<section id="doc-section-main" in:fly={{ y: 10, easing: quintOut, duration: 700 }}>
-	<div class="menu">
-    <DocsNavTree tree={data.tree} />
-	</div>
-  <slot></slot>
-</section>
-
-<style lang="scss">
-.menu {
-	padding: 90px 15px 0px 15px;
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-}
-
-#doc-section-main {
-	display: grid;
-  grid-template-columns: 300px 3fr;
-
-	height: 100vh;
-	width: 100%;
-}
-</style>

src/routes/docs/[...slug]/+page.server.ts

@@ -1,17 +0,0 @@
-import type { PageServerLoad } from './$types';
-import { error } from '@sveltejs/kit';
-
-import { get } from '$lib/documentation.server';
-
-// See also: ../+layout.server.ts
-export const prerender = true;
-
-export const load: PageServerLoad = ({ params }) => {
-  const document = get(params.slug);
-  if (document === null) {
-    error
-    throw error(404);
-  }
-
-  return document;
-}

src/routes/docs/[...slug]/+page.svelte

@@ -1,22 +0,0 @@
-<script lang="ts">
-  import type { PageData } from './$types';
-
-  import '$lib/documentation.scss';
-
-
-  // Data here comes from a trusted source.
-  // CSS comes from the layout.
-  export let data: PageData;
-</script>
-
-<svelte:head>
-	<title>ReVanced | Docs</title>
-	<meta content="ReVanced | Docs" name="og:title" />
-	<meta content="ReVanced | Docs" name="twitter:title" />
-</svelte:head>
-
-<div id="markup-content">
-  <h1 class="title">{data.title}</h1>
-
-  {@html data.content}
-</div>

src/routes/download/+page.svelte

@@ -1,51 +0,0 @@
-<script lang="ts">
-	import { tools } from '../../data/api';
-	import Button from '$lib/components/atoms/Button.svelte';
-	import Footer from '$lib/components/molecules/Footer.svelte';
-
-	$: manager = $tools['revanced/revanced-manager'];
-</script>
-
-<div class="wrapper">
-	<h1>ReVanced <span>Manager</span></h1>
-	<h6>Patch your favourite apps, on-device.</h6>
-	<Button kind="primary" icon="download" target="_blank" href={manager.assets[0].url}>{manager.version}</Button>
-	<img src="../manager_two.png" alt="Manager Screenshot" />
-</div>
-
-<Footer />
-
-<style>
-	div {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-	}
-	h1 {
-		font-size: 3rem;
-		text-align: center;
-		color: var(--white);
-
-	}
-
-	h6 {
-		text-align: center;
-		margin-bottom: 1.5rem;
-	}
-
-	img {
-		margin-top: 2.5rem;
-		margin-bottom: 2.5rem;
-		height: 50rem;
-		width: auto;
-		padding: 0.75rem 0.75rem;
-		border-radius: 2.5rem;
-		background-color: var(--grey-two);
-		box-shadow:0 50px 100px -20px rgba(16, 22, 31, 0.25), 0 30px 60px -30px rgba(18, 19, 22, 0.767), inset 0 -2px 20px 0 rgba(20, 21, 23, 0.598);
-		user-select: none;
-	}
-
-	span {
-		color: var(--accent-color)
-	}
-</style>

src/routes/download/+page.ts

@@ -1,5 +0,0 @@
-import type { PageLoad } from './$types';
-
-import { tools } from '../../data/api';
-
-export const load: PageLoad = tools.page_load_impl();

src/routes/patches/+page.svelte

@@ -1,74 +0,0 @@
-<script lang="ts">
-	import { fly } from 'svelte/transition';
-	import { quintOut } from 'svelte/easing';
-
-	import type { CompatiblePackage } from 'src/data/types';
-	import { patches as api_patches } from '../../data/api';
-
-	import TreeMenu from '$lib/components/molecules/TreeMenu.svelte';
-	import TreeMenuButton from '$lib/components/atoms/TreeMenuButton.svelte';
-	import PatchCell from '$lib/components/molecules/PatchCell.svelte';
-	import Footer from '$lib/components/molecules/Footer.svelte';
-
-	$: ({ patches, packages } = $api_patches);
-
-	let current: boolean = false;
-
-	function search(findTerm: string | boolean, array: any) {
-		for (let i = 0; i < array.length; i++) {
-			if (array[i].name === findTerm) {
-				return true;
-			}
-		}
-		return false;
-	}
-</script>
-
-<svelte:head>
-	<title>ReVanced | Patches</title>
-	<meta content="ReVanced | Patches" name="og:title" />
-	<meta content="ReVanced | Patches" name="twitter:title" />
-</svelte:head>
-
-<main>
-	<aside in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
-		<TreeMenu title="packages">
-			{#each packages as pkg}
-				<TreeMenuButton bind:current name={pkg} />
-			{/each}
-		</TreeMenu>
-	</aside>
-
-	<div class="patches-container" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
-		{#each patches as patch}
-			{#if search(current, patch.compatiblePackages) || !current}
-				<div>
-					<PatchCell bind:current {patch} />
-				</div>
-			{/if}
-		{/each}
-	</div>
-</main>
-<Footer />
-
-<style>
-	main {
-		margin-inline: auto;
-		padding: 0 2rem;
-		display: grid;
-		grid-template-columns: 300px 3fr;
-		gap: 1.5rem;
-		padding-bottom: 3rem;
-	}
-
-	.patches-container {
-		margin-top: 7.5rem;
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-		width: 100%;
-		position: sticky;
-		z-index: 1;
-		min-height: calc(100vh - 7.5rem);
-	}
-</style>

src/routes/patches/+page.ts

@@ -1,5 +0,0 @@
-import type { PageLoad } from './$types';
-
-import { patches } from '../../data/api';
-
-export const load: PageLoad = patches.page_load_impl();

src/routes/polling/+page.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import { fly } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
+
+	import ContributorPerson from '$lib/components/atoms/ContributorPerson.svelte';
+	import Button from '$lib/components/atoms/Button.svelte';
+
+	let selected = [];
+</script>
+
+<svelte:head>
+	<title>ReVanced | Contributors</title>
+	<meta content="ReVanced | Contributors" name="og:title" />
+	<meta content="ReVanced | Contributors" name="twitter:title" />
+</svelte:head>
+
+<main>
+	<div class="wrapper">
+		<div class="text-container">
+			<h1>Page 1/5</h1>
+		</div>
+		<div class="contrib-grid">
+			<ContributorPerson pfp = "https://cdn.discordapp.com/emojis/267559535919497217.webp?size=48&quality=lossless" name="afn" />
+			<ContributorPerson pfp = "https://cdn.discordapp.com/emojis/267559535919497217.webp?size=48&quality=lossless" name="afn 2" />
+			<ContributorPerson pfp = "https://cdn.discordapp.com/emojis/267559535919497217.webp?size=48&quality=lossless" name="afn 3" />
+			<ContributorPerson pfp = "https://cdn.discordapp.com/emojis/267559535919497217.webp?size=48&quality=lossless" name="yes" />
+		</div>
+
+		<div class="buttons-container">
+			<Button>Previous</Button>
+			<Button kind="primary" href="https://next.com">Next</Button>
+		</div>
+	</div>
+</main>
+
+<style>
+	.contrib-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));;
+		flex-direction: column;
+		gap: 1rem;
+		margin-bottom: 3rem;
+	}
+
+	h1 {
+		font-size: 2.25rem;
+		font-weight: 600;
+		text-align: center;
+		color: var(--grey-four);
+	}
+	h2 {
+		font-size: 1rem;
+		color: var(--grey-four);
+		text-align: center;
+	}
+
+	.buttons-container {
+		display: flex;
+		flex-direction: row;
+		gap: 1rem;
+		justify-content: right;
+		float: bottom;
+	}
+
+	.text-container {
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+		gap: 0.5rem;
+		margin-bottom: 2rem;
+		background-color: var(--accent-color);
+		padding: 2rem;
+		border-radius: 8px;
+	}
+	@media screen and (max-width: 768px) {
+		h1 {
+			font-size: 2rem;
+		}
+
+		.contrib-grid {
+			grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));;
+
+		}
+	}
+</style>