fix: Stop using SSWR and update deps

Author: Ushie

bun.lockb

@@ -1,39 +1,38 @@
 {
-	"name": "revanced-counterfeits",
-	"version": "0.0.1",
-	"devDependencies": {
-		"@eslint/compat": "^1.2.5",
-		"@eslint/js": "^9.18.0",
-		"@sveltejs/adapter-static": "^3.0.8",
-		"@sveltejs/kit": "^2.16.0",
-		"@sveltejs/vite-plugin-svelte": "^5.0.0",
-		"eslint": "^9.18.0",
-		"eslint-config-prettier": "^10.0.1",
-		"eslint-plugin-svelte": "^3.0.0",
-		"globals": "^16.0.0",
-		"prettier": "^3.4.2",
-		"prettier-plugin-svelte": "^3.3.3",
-		"svelte": "^5.0.0",
-		"svelte-check": "^4.0.0",
-		"typescript": "^5.0.0",
-		"typescript-eslint": "^8.20.0",
-		"vite": "^6.2.6"
-	},
-	"private": true,
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
-		"prepare": "svelte-kit sync || echo ''",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"format": "prettier --write .",
-		"lint": "prettier --check . && eslint ."
-	},
-	"type": "module",
-	"dependencies": {
-		"@iconify-json/mdi": "^1.2.3",
-		"sswr": "^2.2.0",
-		"unplugin-icons": "^22.1.0"
-	}
+  "name": "revanced-counterfeits",
+  "version": "0.0.1",
+  "devDependencies": {
+    "@eslint/compat": "^1.2.9",
+    "@eslint/js": "^9.27.0",
+    "@sveltejs/adapter-static": "^3.0.8",
+    "@sveltejs/kit": "^2.21.1",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "eslint": "^9.27.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-svelte": "^3.9.0",
+    "globals": "^16.2.0",
+    "prettier": "^3.5.3",
+    "prettier-plugin-svelte": "^3.4.0",
+    "svelte": "^5.33.10",
+    "svelte-check": "^4.2.1",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.33.0",
+    "vite": "^6.3.5"
+  },
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "prepare": "svelte-kit sync || echo ''",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint ."
+  },
+  "type": "module",
+  "dependencies": {
+    "@iconify-json/mdi": "^1.2.3",
+    "unplugin-icons": "^22.1.0"
+  }
 }

package.json

@@ -3,7 +3,7 @@
 		title: string;
 		image?: string;
 		description?: string;
-		websiteUrl: string | null;
+		websiteUrl?: string;
 		themeColor?: string;
 	};
 	let { title, image, description, websiteUrl, themeColor }: Props = $props();

src/lib/components/molecules/Embed.svelte

@@ -1,22 +1,34 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { useSWR } from 'sswr';
 
 	import type { BackendAbout } from '$types';
 	import { RV_API_URL } from '$env/static/public';
 
 	import Footer from '$components/organisms/Footer.svelte';
 	import Embed from '$components/molecules/Embed.svelte';
 
-	const { data: about } = useSWR<BackendAbout>(`${RV_API_URL}/v4/about`);
-	let referrer: string | null = $state(null);
-	let websiteUrl: string = $state('https://revanced.app');
+	let about = $state<BackendAbout | null>(null);
+	let websiteUrl = $state<string | undefined>(undefined);
+	let referrer = $state<string | null>(null);
+
+	async function fetchAbout() {
+		try {
+			const res = await fetch(`${RV_API_URL}/v4/about`);
+			if (!res.ok) throw new Error(`HTTP ${res.status}`);
+			const json: BackendAbout = await res.json();
+			about = json;
+		} catch (err) {
+			console.error('Failed to fetch about:', err);
+		}
+	}
 
 	$effect(() => {
-		if ($about) websiteUrl = $about.socials[0].url;
+		if (about)
+			websiteUrl = about.socials.find((socials) => socials.name.toLowerCase() == 'website')?.url;
 	});
 
 	onMount(() => {
+		fetchAbout();
 		referrer = document.referrer;
 	});
 </script>
@@ -41,6 +53,7 @@
 				<span class="good"><a href={websiteUrl}>ReVanced</a></span>
 				<span class="bad">counterfeit</span>
 			</h1>
+			<br />
 			<p>
 				If you just landed on this page, you may have been redirected here from a
 				<span class="bad">counterfeit</span> website.
@@ -138,8 +151,8 @@
 		<section>
 			<h2>Official links</h2>
 			<ul>
-				{#if $about}
-					{#each $about.socials as { name, url }}
+				{#if about}
+					{#each about.socials as { name, url }}
 						<li><strong>{name}:</strong> <a class="good" href={url}>{url}</a></li>
 					{/each}
 				{/if}
@@ -148,7 +161,7 @@
 	</div>
 </main>
 
-<Footer about={$about} {websiteUrl} />
+<Footer {about} {websiteUrl} />
 
 <style>
 	:root {
@@ -204,7 +217,7 @@
 
 	.good {
 		background-color: #1f62ff55;
-		color: #1f62ff;
+		color: var(--primary);
 		border-bottom: 1px solid #1f62ff;
 		box-shadow: 0 0 5px #1f62ff;
 
@@ -241,7 +254,7 @@
 		}
 	}
 	a {
-		color: #1f62ff;
+		color: var(--primary);
 		text-decoration: none;
 
 		&:hover {