feat: Improve downtime status banner description

.env.example

@@ -1,4 +1,5 @@
 RV_API_URL=https://api.revanced.app
 RV_STATUS_URL=https://status.revanced.app
+RV_EMAIL=contact@revanced.app
 RV_GOOGLE_TAG_MANAGER_ID=
 RV_DMCA_GUID=

.github/workflows/deploy.yml

@@ -35,6 +35,7 @@ jobs:
           RV_GOOGLE_TAG_MANAGER_ID: ${{ vars.RV_GOOGLE_TAG_MANAGER_ID }}
           RV_DMCA_GUID: ${{ vars.RV_DMCA_GUID }}
           RV_STATUS_URL: ${{ vars.RV_STATUS_URL }}
+          RV_EMAIL: ${{ vars.RV_EMAIL }}
         run: npm run build
 
       - name: Deploy

src/data/api/settings.ts

@@ -1,22 +1,13 @@
 import { browser } from '$app/environment';
-import { RV_API_URL, RV_STATUS_URL } from '$env/static/public';
+import { RV_API_URL, RV_EMAIL, RV_STATUS_URL } from '$env/static/public';
 
 export const default_api_url = RV_API_URL;
 export const default_status_url = RV_STATUS_URL;
+export const default_email = RV_EMAIL;
 
 const URL_KEY = 'revanced_api_url';
 const STATUS_KEY = 'revanced_status_url';
-
+const EMAIL_KEY = 'revanced_email';
-function set_status_url(apiUrl: string) {
-	fetch(`${apiUrl}/v4/about`)
-		.then((response) => (response.ok ? response.json() : null))
-		.then((data) => {
-			if (data?.status) {
-				localStorage.setItem(STATUS_KEY, data.status);
-				console.log('Status is now:', localStorage.getItem(STATUS_KEY));
-			}
-		});
-}
 
 export const API_VERSION = 'v4';
 
@@ -25,9 +16,7 @@ export function api_base_url(): string {
 	if (browser) {
 		const apiUrl = localStorage.getItem(URL_KEY) || default_api_url;
 
-		if (!localStorage.getItem(STATUS_KEY)) {
+		set_about_info(apiUrl);
-			set_status_url(apiUrl);
-		}
 
 		return apiUrl;
 	}
@@ -43,12 +32,35 @@ export function status_url(): string {
 	return default_status_url;
 }
 
+export function email(): string {
+	if (browser) {
+		return localStorage.getItem(EMAIL_KEY) || default_email;
+	}
+
+	return default_email;
+}
+
 // (re)set base URL.
 export function set_api_base_url(url?: string) {
 	if (!url) {
 		localStorage.removeItem(URL_KEY);
 	} else {
 		localStorage.setItem(URL_KEY, url);
-		set_status_url(url);
+		set_about_info(url);
+	}
+}
+
+function set_about_info(apiUrl: string) {
+	if (!localStorage.getItem(STATUS_KEY) || !localStorage.getItem(EMAIL_KEY)) {
+		fetch(`${apiUrl}/v4/about`)
+			.then((response) => (response.ok ? response.json() : null))
+			.then((data) => {
+				if (data?.status) {
+					localStorage.setItem(STATUS_KEY, data.status);
+					localStorage.setItem(EMAIL_KEY, data.contact.email);
+					console.log('Status is now:', localStorage.getItem(STATUS_KEY));
+					console.log('Email is now:', localStorage.getItem(EMAIL_KEY));
+				}
+			});
 	}
 }

src/layout/Banners/StatusBanner.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import { email } from '$data/api/settings';
 	import Banner from '$layout/Banners/Banner.svelte';
 
 	export let statusUrl: string | null = null;
@@ -9,7 +10,7 @@
 
 <Banner
 	title="API service is currently down"
-	description="We're actively investigating and will update you shortly. We appreciate your patience."
+	description="Some features of the site might be impacted. If this issue persists, reach out to mailto:{email()}"
 	buttonText={statusUrl ? 'View status' : undefined}
 	buttonOnClick={statusUrl ? handleClick : undefined}
 	level="caution"

src/layout/Footer/FooterHost.svelte

@@ -10,6 +10,7 @@
 	import { RV_DMCA_GUID } from '$env/static/public';
 	import { onMount } from 'svelte';
 	import Divider from '$lib/components/Divider.svelte';
+	import { email } from '$data/api/settings';
 
 	const aboutQuery = createQuery(queries.about());
 
@@ -27,13 +28,11 @@
 		<section class="main-content">
 			<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
 			<Query query={aboutQuery} let:data>
-				{#if data}
+				<div>
-					<div>
+					<p>
-						<p>
+						{data.about.about}
-							{data.about.about}
+					</p>
-						</p>
+				</div>
-					</div>
-				{/if}
 			</Query>
 		</section>
 
@@ -62,11 +61,7 @@
 	<div class="bottom">
 		<div id="logo-name"><span>Re</span>Vanced</div>
 		<a href="/donate"><div>Donate</div></a>
-		<Query query={aboutQuery} let:data>
+		<a href="mailto:{email()}"><div>Email</div></a>
-			{#if data}
-				<a href="mailto:{data.about.contact.email}"><div>Email</div></a>
-			{/if}
-		</Query>
 		<!-- DMCA Protection Badge -->
 		<a
 			href="//www.dmca.com/Protection/Status.aspx?ID={RV_DMCA_GUID}&refurl={location}"

src/routes/announcements/+page.svelte

@@ -97,7 +97,7 @@
 </div>
 <main class="wrapper" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
 	<Query query={tagsQuery} let:data>
-		<TagsHost tags={data.tags} expandable={true} />
+		<TagsHost tags={data.tags} />
 	</Query>
 
 	<Query {query} let:data>

src/routes/announcements/AnnouncementCard.svelte

@@ -85,11 +85,7 @@
 				{/if}
 				{#if announcement.tags && announcement.tags.length > 0}
 					<hr />
-					<TagsHost
+					<TagsHost tags={announcement.tags.map((tag) => ({ name: tag }))} clickable={false} />
-						tags={announcement.tags.map((tag) => ({ name: tag }))}
-						expandable={false}
-						clickable={false}
-					/>
 				{/if}
 			</div>
 		</div>