feat: use api to supply social links (#162)

resolves #138

src/data/api/index.ts

@@ -8,14 +8,16 @@ import type {
 	Asset,
 	TeamMember,
 	DonationPlatform,
-	CryptoWallet
+	CryptoWallet,
+	Social
 } from '$lib/types';
 
-export type ReposData = Repository[];
+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 DonationData = { wallets: CryptoWallet[]; platforms: DonationPlatform[] };
+export type SocialsData = { socials: Social[] };
 
 async function get_json(endpoint: string) {
 	const url = `${settings.api_base_url()}/${endpoint}`;
@@ -23,7 +25,8 @@ async function get_json(endpoint: string) {
 }
 
 async function repositories(): Promise<ReposData> {
-	return await get_json('contributors').then((json) => json.repositories);
+	const json = await get_json('contributors');
+	return { repositories: json.repositories };
 }
 
 async function manager(): Promise<ReleaseData> {
@@ -59,10 +62,14 @@ async function team(): Promise<TeamData> {
 
 async function donate(): Promise<DonationData> {
 	const json = await get_json('v2/donations');
-
 	return { wallets: json.donations.wallets, platforms: json.donations.links };
 }
 
+async function socials(): Promise<SocialsData> {
+	const json = await get_json('v2/socials');
+	return { socials: json.socials };
+}
+
 export const staleTime = 5 * 60 * 1000;
 export const queries = {
 	manager: {
@@ -89,5 +96,10 @@ export const queries = {
 		queryKey: ['donate'],
 		queryFn: donate,
 		staleTime
+	},
+	socials: {
+		queryKey: ['socials'],
+		queryFn: socials,
+		staleTime
 	}
 };

src/layout/Footer/FooterHost.svelte

@@ -3,13 +3,15 @@
 	import { quintOut } from 'svelte/easing';
 
 	import { queries } from '$data/api';
-	import { friendlyName } from '$util/friendlyName';
 	import { createQuery } from '@tanstack/svelte-query';
 	
+	import { friendlyName } from '$util/friendlyName';
+
 	import Query from '$lib/components/Query.svelte';
 	import FooterSection from './FooterSection.svelte';
 
-	const query = createQuery(['repositories'], queries.repositories);
+	const repoQuery = createQuery(['repositories'], queries.repositories);
+	const socialsQuery = createQuery(['socials'], queries.socials);
 </script>
 
 <!-- squiggly divider line -->
@@ -55,35 +57,28 @@
 				<li><a href="/donate">Donate</a></li>
 			</FooterSection>
 			<FooterSection title="Repositories">
-				<Query {query} let:data>
-					{#each data as { name }}
-						<li>
-							<a href="https://github.com/{name}" target="_blank" rel="noreferrer">
-								{friendlyName(name)}
-							</a>
-						</li>
-					{/each}
+				<Query query={repoQuery} let:data>
+					{#if data}
+						{#each data.repositories as { name }}
+							<li>
+								<a href="https://github.com/{name}" target="_blank" rel="noreferrer">
+									{friendlyName(name)}
+								</a>
+							</li>
+						{/each}
+					{/if}
 				</Query>
 			</FooterSection>
 			<FooterSection title="Socials">
-				<ul>
-					<!-- to replace -->
-					<li><a href="https://github.com/revanced" target="_blank" rel="noreferrer">GitHub</a></li>
-					<li>
-						<a href="https://revanced.app/discord" target="_blank" rel="noreferrer">Discord</a>
-					</li>
-					<li>
-						<a href="https://reddit.com/r/revancedapp" target="_blank" rel="noreferrer">Reddit</a>
-					</li>
-					<li><a href="https://t.me/app_revanced" target="_blank" rel="noreferrer">Telegram</a></li>
-					<li>
-						<a href="https://twitter.com/revancedapp" target="_blank" rel="noreferrer">Twitter</a>
-					</li>
-					<li>
-						<a href="https://www.youtube.com/c/ReVanced" target="_blank" rel="noreferrer">YouTube</a
-						>
-					</li>
-				</ul>
+				<Query query={socialsQuery} let:data>
+					{#if data}
+						{#each data.socials as { name, url }}
+							<li>
+								<a href={url} target="_blank" rel="noreferrer">{friendlyName(name)}</a>
+							</li>
+						{/each}
+					{/if}
+				</Query>
 			</FooterSection>
 		</section>
 	</div>

src/layout/Hero/SocialButton.svelte

@@ -1,11 +1,12 @@
-<script>
-	export let src = 'github';
-	export let href = '#';
+<script lang="ts">
+	import type {Social} from '$lib/types';
+	export let social = '';
+	export let data: Social[];
 </script>
 
-<a {href} rel="noreferrer" target="_blank">
+<a href={data.find(jsonSocial => jsonSocial.name === social)?.url} rel="noreferrer" target="_blank">
 	<div>
-		<img src="socials/{src}.svg" alt={src} />
+		<img src="socials/{social}.svg" alt={social} />
 	</div>
 </a>
 

src/layout/Hero/SocialHost.svelte

@@ -1,13 +1,21 @@
 <script>
 	import SocialButton from './SocialButton.svelte';
+	import { queries } from '$data/api';
+	import { createQuery } from '@tanstack/svelte-query';
+	import Query from '$lib/components/Query.svelte';
+
+	const query = createQuery(['socials'], queries.socials);
 </script>
 
-<!-- TODO: Use API social links -->
 <div class="social-host">
-	<SocialButton src="github" href="https://github.com/revanced" />
-	<SocialButton src="discord" href="https://revanced.app/discord" />
-	<SocialButton src="reddit" href="https://reddit.com/r/revancedapp" />
-	<SocialButton src="telegram" href="https://t.me/app_revanced" />
+	<Query {query} let:data>
+		{#if data}
+			<SocialButton social="github" data={data.socials}/>
+			<SocialButton social="discord" data={data.socials}/>
+			<SocialButton social="reddit" data={data.socials}/>
+			<SocialButton social="telegram" data={data.socials}/>
+		{/if}
+	</Query>
 </div>
 
 <style>

src/lib/types.ts

@@ -67,3 +67,9 @@ export interface DonationPlatform {
 	url: string;
 	preferred: boolean;
 }
+
+
+export interface Social {
+	name: string
+	url: string
+}

src/routes/contributors/+page.svelte

@@ -56,7 +56,7 @@
 		</div>
 		<div class="repos">
 			<Query {query} let:data>
-				{#each data as { contributors, name: repo }}
+				{#each data.repositories as { contributors, name: repo }}
 					<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
 						<ContributorHost {contributors} {repo} />
 					</div>