feat: remove all external stuff (stripe, plausible, video) when PUB_DISABLE_ALL_EXTERNAL_REQUESTS is on

src/lib/consts.ts

@@ -1,4 +1,4 @@
-import { PUB_ENV } from "$env/static/public";
+import { PUB_DISABLE_ALL_EXTERNAL_REQUESTS, PUB_ENV } from "$env/static/public";
 
 export const GITHUB_URL_VERT = "https://github.com/VERT-sh/VERT";
 export const GITHUB_URL_VERTD = "https://github.com/VERT-sh/vertd";
@@ -11,3 +11,6 @@ export const VERT_NAME =
 			? "VERT Nightly"
 			: "VERT.sh";
 export const CONTACT_EMAIL = "hello@vert.sh";
+
+export const DISABLE_ALL_EXTERNAL_REQUESTS =
+	PUB_DISABLE_ALL_EXTERNAL_REQUESTS === "true";

src/lib/converters/index.ts

@@ -4,13 +4,7 @@ import { FFmpegConverter } from "./ffmpeg.svelte";
 import { PandocConverter } from "./pandoc.svelte";
 import { VertdConverter } from "./vertd.svelte";
 import { MagickConverter } from "./magick.svelte";
-
+import { DISABLE_ALL_EXTERNAL_REQUESTS } from "$lib/consts";
-// export const converters = [
-// 	new MagickConverter(),
-// 	new FFmpegConverter(),
-// 	new VertdConverter(),
-// 	new PandocConverter(),
-// ];
 
 const getConverters = (): Converter[] => {
 	const converters: Converter[] = [
@@ -18,7 +12,7 @@ const getConverters = (): Converter[] => {
 		new FFmpegConverter(),
 	];
 
-	if (PUB_DISABLE_ALL_EXTERNAL_REQUESTS !== "true") {
+	if (!DISABLE_ALL_EXTERNAL_REQUESTS) {
 		converters.push(new VertdConverter());
 	}
 

src/lib/sections/about/Credits.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
 	import Panel from "$lib/components/visual/Panel.svelte";
 	import { HeartHandshakeIcon } from "lucide-svelte";
-	import { GITHUB_URL_VERT } from "$lib/consts";
+	import {
+		DISABLE_ALL_EXTERNAL_REQUESTS,
+		GITHUB_URL_VERT,
+	} from "$lib/consts";
 	import { m } from "$lib/paraglide/messages";
 	import { link } from "$lib/store/index.svelte";
 
@@ -90,48 +93,50 @@
 		</div>
 
 		<!-- GitHub contributors -->
-		<div class="flex flex-col gap-4">
+		{#if !DISABLE_ALL_EXTERNAL_REQUESTS}
-			<div class="flex flex-col gap-1">
+			<div class="flex flex-col gap-4">
-				<h2 class="text-base font-bold">
+				<div class="flex flex-col gap-1">
-					{m["about.credits.github_contributors"]()}
+					<h2 class="text-base font-bold">
-				</h2>
+						{m["about.credits.github_contributors"]()}
-				{#if ghContribs && ghContribs.length > 0}
+					</h2>
-					<p class="text-base text-muted font-normal">
+					{#if ghContribs && ghContribs.length > 0}
-						{@html link(
+						<p class="text-base text-muted font-normal">
-							["jpegify_link", "github_link"],
+							{@html link(
-							m["about.credits.github_description"](),
+								["jpegify_link", "github_link"],
-							["/jpegify", GITHUB_URL_VERT],
+								m["about.credits.github_description"](),
-							[false, true],
+								["/jpegify", GITHUB_URL_VERT],
-							[
+								[false, true],
-								"text-black dynadark:text-white",
+								[
-								"text-blue-500 font-normal hover:underline",
+									"text-black dynadark:text-white",
-							],
+									"text-blue-500 font-normal hover:underline",
-						)}
+								],
-					</p>
+							)}
-				{:else}
+						</p>
-					<p class="text-base text-muted font-normal italic">
+					{:else}
-						{@html link(
+						<p class="text-base text-muted font-normal italic">
-							"contribute_link",
+							{@html link(
-							m["about.credits.no_contributors"](),
+								"contribute_link",
-							GITHUB_URL_VERT,
+								m["about.credits.no_contributors"](),
-						)}
+								GITHUB_URL_VERT,
-					</p>
+							)}
-				{/if}
+						</p>
-			</div>
+					{/if}
-
-			{#if ghContribs && ghContribs.length > 0}
-				<div class="flex flex-row flex-wrap gap-2">
-					{#each ghContribs as contrib}
-						{@const { name, github, avatar } = contrib}
-						{@render contributor(name, github, avatar)}
-					{/each}
 				</div>
-			{/if}
 
-			<h2 class="mt-2 -mb-2">{m["about.credits.libraries"]()}</h2>
+				{#if ghContribs && ghContribs.length > 0}
-			<p class="font-normal">
+					<div class="flex flex-row flex-wrap gap-2">
-				{m["about.credits.libraries_description"]()}
+						{#each ghContribs as contrib}
-			</p>
+							{@const { name, github, avatar } = contrib}
-		</div>
+							{@render contributor(name, github, avatar)}
+						{/each}
+					</div>
+				{/if}
+
+				<h2 class="mt-2 -mb-2">{m["about.credits.libraries"]()}</h2>
+				<p class="font-normal">
+					{m["about.credits.libraries_description"]()}
+				</p>
+			</div>
+		{/if}
 	</div></Panel
 >

src/routes/+layout.svelte

@@ -3,7 +3,7 @@
 	import { goto, beforeNavigate, afterNavigate } from "$app/navigation";
 
 	import { PUB_PLAUSIBLE_URL, PUB_HOSTNAME } from "$env/static/public";
-	import { VERT_NAME } from "$lib/consts";
+	import { DISABLE_ALL_EXTERNAL_REQUESTS, VERT_NAME } from "$lib/consts";
 	import * as Layout from "$lib/components/layout";
 	import * as Navbar from "$lib/components/layout/Navbar";
 	import featuredImage from "$lib/assets/VERT_Feature.webp";
@@ -94,12 +94,14 @@
 
 		Settings.instance.load();
 
-		VertdInstance.instance
+		if (!DISABLE_ALL_EXTERNAL_REQUESTS) {
-			.url()
+			VertdInstance.instance
-			.then((u) => fetch(`${u}/api/version`))
+				.url()
-			.then((res) => {
+				.then((u) => fetch(`${u}/api/version`))
-				if (res.ok) $vertdLoaded = true;
+				.then((res) => {
-			});
+					if (res.ok) $vertdLoaded = true;
+				});
+		}
 
 		return () => {
 			window.removeEventListener("paste", handlePaste);
@@ -109,7 +111,9 @@
 
 	$effect(() => {
 		enablePlausible =
-			!!PUB_PLAUSIBLE_URL && Settings.instance.settings.plausible;
+			!!PUB_PLAUSIBLE_URL &&
+			Settings.instance.settings.plausible &&
+			!DISABLE_ALL_EXTERNAL_REQUESTS;
 		if (!enablePlausible && browser) {
 			// reset pushState on opt-out so that plausible stops firing events on page navigation
 			history.pushState = History.prototype.pushState;
@@ -128,7 +132,7 @@
 		name="description"
 		content="With VERT you can quickly convert any image, video and audio file. No ads, no tracking, open source, and all processing (other than video) is done on your device."
 	/>
-	<meta property="og:url" content="https://vert.sh">
+	<meta property="og:url" content="https://vert.sh" />
 	<meta property="og:type" content="website" />
 	<meta
 		property="og:title"
@@ -139,9 +143,9 @@
 		content="With VERT you can quickly convert any image, video and audio file. No ads, no tracking, open source, and all processing (other than video) is done on your device."
 	/>
 	<meta property="og:image" content={featuredImage} />
-	<meta name="twitter:card" content="summary_large_image">
+	<meta name="twitter:card" content="summary_large_image" />
-	<meta property="twitter:domain" content="vert.sh">
+	<meta property="twitter:domain" content="vert.sh" />
-	<meta property="twitter:url" content="https://vert.sh">
+	<meta property="twitter:url" content="https://vert.sh" />
 	<meta
 		property="twitter:title"
 		content="{VERT_NAME} — Free, fast, and awesome file converter"

src/routes/+page.svelte

@@ -11,6 +11,7 @@
 	import "overlayscrollbars/overlayscrollbars.css";
 	import { onMount } from "svelte";
 	import type { WorkerStatus } from "$lib/converters/converter.svelte";
+	import { DISABLE_ALL_EXTERNAL_REQUESTS } from "$lib/consts";
 
 	const getSupportedFormats = (name: string) =>
 		converters
@@ -28,37 +29,51 @@
 			title: string;
 			status: WorkerStatus;
 		};
-	} = $derived({
+	} = $derived.by(() => {
-		Images: {
+		const output: {
-			formats: getSupportedFormats("imagemagick"),
+			[key: string]: {
-			icon: Image,
+				formats: string;
-			title: m["upload.cards.images"](),
+				icon: typeof Image;
-			status:
+				title: string;
-				converters.find((c) => c.name === "imagemagick")?.status ||
+				status: WorkerStatus;
-				"not-ready",
+			};
-		},
+		} = {
-		Audio: {
+			Images: {
-			formats: getSupportedFormats("ffmpeg"),
+				formats: getSupportedFormats("imagemagick"),
-			icon: AudioLines,
+				icon: Image,
-			title: m["upload.cards.audio"](),
+				title: m["upload.cards.images"](),
-			status:
+				status:
-				converters.find((c) => c.name === "ffmpeg")?.status ||
+					converters.find((c) => c.name === "imagemagick")?.status ||
-				"not-ready",
+					"not-ready",
-		},
+			},
-		Documents: {
+			Audio: {
-			formats: getSupportedFormats("pandoc"),
+				formats: getSupportedFormats("ffmpeg"),
-			icon: BookText,
+				icon: AudioLines,
-			title: m["upload.cards.documents"](),
+				title: m["upload.cards.audio"](),
-			status:
+				status:
-				converters.find((c) => c.name === "pandoc")?.status ||
+					converters.find((c) => c.name === "ffmpeg")?.status ||
-				"not-ready",
+					"not-ready",
-		},
+			},
-		Video: {
+			Documents: {
-			formats: getSupportedFormats("vertd"),
+				formats: getSupportedFormats("pandoc"),
-			icon: Film,
+				icon: BookText,
-			title: m["upload.cards.video"](),
+				title: m["upload.cards.documents"](),
-			status: $vertdLoaded === true ? "ready" : "not-ready", // not using converter.status for this
+				status:
-		},
+					converters.find((c) => c.name === "pandoc")?.status ||
+					"not-ready",
+			},
+		};
+
+		if (!DISABLE_ALL_EXTERNAL_REQUESTS) {
+			output.Video = {
+				formats: getSupportedFormats("vertd"),
+				icon: Film,
+				title: m["upload.cards.video"](),
+				status: $vertdLoaded === true ? "ready" : "not-ready", // not using converter.status for this
+			};
+		}
+
+		return output;
 	});
 
 	const getTooltip = (format: string) => {

src/routes/about/+page.svelte

@@ -8,7 +8,7 @@
 	import avatarJovannMC from "$lib/assets/avatars/jovannmc.jpg";
 	import avatarRealmy from "$lib/assets/avatars/realmy.jpg";
 	import avatarAzurejelly from "$lib/assets/avatars/azurejelly.jpg";
-	import { GITHUB_API_URL } from "$lib/consts";
+	import { DISABLE_ALL_EXTERNAL_REQUESTS, GITHUB_API_URL } from "$lib/consts";
 	import { dev } from "$app/environment";
 	import { page } from "$app/state";
 	import { m } from "$lib/paraglide/messages";
@@ -70,6 +70,10 @@
 	let ghContribs: Contributor[] = [];
 
 	onMount(async () => {
+		if (DISABLE_ALL_EXTERNAL_REQUESTS) {
+			return;
+		}
+
 		// Check if the data is already in sessionStorage
 		const cachedContribs = sessionStorage.getItem("ghContribs");
 		if (cachedContribs) {
@@ -134,7 +138,9 @@
 		}
 	});
 
-	const donationsEnabled = dev || page.url.origin.endsWith("//vert.sh");
+	const donationsEnabled =
+		(dev || page.url.origin.endsWith("//vert.sh")) &&
+		!DISABLE_ALL_EXTERNAL_REQUESTS;
 </script>
 
 <div class="flex flex-col h-full items-center">

src/routes/settings/+page.svelte

@@ -7,6 +7,7 @@
 	import { onMount } from "svelte";
 	import { m } from "$lib/paraglide/messages";
 	import { ToastManager } from "$lib/toast/index.svelte";
+	import { DISABLE_ALL_EXTERNAL_REQUESTS } from "$lib/consts";
 
 	let settings = $state(Settings.Settings.instance.settings);
 
@@ -63,12 +64,14 @@
 	>
 		<div class="flex flex-col gap-4 flex-1">
 			<Settings.Conversion bind:settings />
-			<Settings.Vertd bind:settings />
+			{#if !DISABLE_ALL_EXTERNAL_REQUESTS}
+				<Settings.Vertd bind:settings />
+			{/if}
 		</div>
 
 		<div class="flex flex-col gap-4 flex-1">
 			<Settings.Appearance />
-			{#if PUB_PLAUSIBLE_URL}
+			{#if PUB_PLAUSIBLE_URL && !DISABLE_ALL_EXTERNAL_REQUESTS}
 				<Settings.Privacy bind:settings />
 			{/if}
 		</div>