feat(footer): use info endpoint

src/data/api/index.ts

@@ -9,13 +9,15 @@ import type {
 	TeamMember,
 	DonationPlatform,
 	CryptoWallet,
-	Social
+	Social,
+	Info
 } from '$lib/types';
 
 export type ReposData = { repositories: Repository[] };
 export type PatchesData = { patches: Patch[]; packages: string[] };
 export type ReleaseData = { metadata: Metadata; assets: Asset[] };
 export type TeamData = { members: TeamMember[] };
+export type InfoData = { info: Info };
 export type DonationData = { wallets: CryptoWallet[]; platforms: DonationPlatform[] };
 export type SocialsData = { socials: Social[] };
 
@@ -49,7 +51,7 @@ async function patches(): Promise<PatchesData> {
 
 	// sort packages by patch count to get most relevant apps on top
 	const packages = Object.keys(packagesWithCount);
-  	packages.sort((a, b) => packagesWithCount[b] - packagesWithCount[a]);
+	packages.sort((a, b) => packagesWithCount[b] - packagesWithCount[a]);
 
 	return { patches: json.patches, packages };
 }
@@ -59,6 +61,11 @@ async function team(): Promise<TeamData> {
 	return { members: json.members };
 }
 
+async function info(): Promise<InfoData> {
+	const json = await get_json('v2/info');
+	return { info: json.info };
+}
+
 async function donate(): Promise<DonationData> {
 	const json = await get_json('v2/donations');
 	return { wallets: json.donations.wallets, platforms: json.donations.links };
@@ -91,6 +98,11 @@ export const queries = {
 		queryFn: team,
 		staleTime
 	},
+	info: {
+		queryKey: ['info'],
+		queryFn: info,
+		staleTime
+	},
 	donate: {
 		queryKey: ['donate'],
 		queryFn: donate,

src/layout/Footer/FooterHost.svelte

@@ -4,13 +4,14 @@
 
 	import { queries } from '$data/api';
 	import { createQuery } from '@tanstack/svelte-query';
-	
+
 	import { friendlyName } from '$util/friendlyName';
 
 	import Query from '$lib/components/Query.svelte';
 	import FooterSection from './FooterSection.svelte';
 
 	const repoQuery = createQuery(['repositories'], queries.repositories);
+	const infoQuery = createQuery(['info'], queries.info);
 	const socialsQuery = createQuery(['socials'], queries.socials);
 </script>
 
@@ -37,15 +38,15 @@
 	<div class="footer-top">
 		<section class="main-content">
 			<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
-			<div>
+			<Query query={infoQuery} let:data>
-				<p>
+				{#if data}
-					ReVanced was born out of Vanced's discontinuation and it is our goal to continue the
+					<div>
-					legacy of what Vanced left behind. Thanks to ReVanced Patcher, it's possible to create
+						<p>
-					long-lasting patches for nearly any Android app. ReVanced's patching system is designed to
+							{data.info.about}
-					allow patches to work on new versions of the apps automatically with bare minimum
+						</p>
-					maintenance.
+					</div>
-				</p>
+				{/if}
-			</div>
+			</Query>
 		</section>
 
 		<section class="links-container">
@@ -56,9 +57,9 @@
 				<li><a href="/contributors">Contributors</a></li>
 				<li><a href="/donate">Donate</a></li>
 			</FooterSection>
-			<FooterSection title="Repositories">
+			<Query query={repoQuery} let:data>
-				<Query query={repoQuery} let:data>
+				{#if data}
-					{#if data}
+					<FooterSection title="Repositories">
 						{#each data.repositories as { name }}
 							<li>
 								<a href="https://github.com/{name}" target="_blank" rel="noreferrer">
@@ -66,27 +67,31 @@
 								</a>
 							</li>
 						{/each}
-					{/if}
+					</FooterSection>
-				</Query>
+				{/if}
-			</FooterSection>
+			</Query>
-			<FooterSection title="Socials">
+			<Query query={socialsQuery} let:data>
-				<Query query={socialsQuery} let:data>
+				{#if data}
-					{#if data}
+					<FooterSection title="Socials">
 						{#each data.socials as { name, url }}
 							<li>
-								<a href={url} target="_blank" rel="noreferrer">{friendlyName(name)}</a>
+								<a href={url} target="_blank" rel="noreferrer">{name}</a>
 							</li>
 						{/each}
-					{/if}
+					</FooterSection>
-				</Query>
+				{/if}
-			</FooterSection>
+			</Query>
 		</section>
 	</div>
-	<div class="footer-bottom">
+	<Query query={infoQuery} let:data>
-		<div id="logo-name"><span>Re</span>Vanced</div>
+		{#if data}
-		<a href="/donate"><div>Donate</div></a>
+			<div class="footer-bottom">
-		<a href="mailto:contact@revanced.app"><div>Email</div></a>
+				<div id="logo-name"><span>Re</span>Vanced</div>
-	</div>
+				<a href="/donate"><div>Donate</div></a>
+				<a href="mailto:{data.info.contact.email}"><div>Email</div></a>
+			</div>
+		{/if}
+	</Query>
 </footer>
 
 <style>

src/lib/types.ts

@@ -68,8 +68,24 @@ export interface DonationPlatform {
 	preferred: boolean;
 }
 
-
 export interface Social {
-	name: string
+	name: string;
-	url: string
+	url: string;
-}
+}
+
+interface Donations {
+	wallets: CryptoWallet[];
+	links: DonationPlatform[];
+}
+
+interface Contact {
+	email: string;
+}
+
+export interface Info {
+	name: string;
+	about: string;
+	contact: Contact;
+	socials: Social[];
+	donations: Donations;
+}