feat: allow opting out of plausible

also fixes build errors if .env isn't available
hides privacy section if url isn't set

src/lib/animation/index.ts

@@ -12,6 +12,8 @@ import {
 let effectsEnabled = true;
 let isMobileDevice = false;
 
+// FIXME: there is sometimes an issue in dev where subscribing to the store just breaks everything? (.subscribe() not existing on effects, somehow)
+// you gotta restart the dev server to fix and it only seems to happen in dev. somehow effects being called before its defined?
 effects.subscribe((value) => {
 	effectsEnabled = value;
 });

src/lib/sections/settings/Privacy.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import Panel from "$lib/components/visual/Panel.svelte";
+	import { ChartColumnIcon, PauseIcon, PlayIcon } from "lucide-svelte";
+	import type { ISettings } from "./index.svelte";
+	import { effects } from "$lib/store/index.svelte";
+
+	const { settings }: { settings: ISettings } = $props();
+</script>
+
+<Panel class="flex flex-col gap-8 p-6">
+	<div class="flex flex-col gap-3">
+		<h2 class="text-2xl font-bold">
+			<ChartColumnIcon
+				size="40"
+				class="inline-block -mt-1 mr-2 bg-accent-blue p-2 rounded-full"
+				color="black"
+			/>
+			Privacy
+		</h2>
+		<div class="flex flex-col gap-8">
+			<div class="flex flex-col gap-4">
+				<div class="flex flex-col gap-2">
+					<p class="text-base font-bold">Plausible analytics</p>
+					<p class="text-sm text-muted font-normal">
+						We use <a
+							href="https://plausible.io/privacy-focused-web-analytics"
+							>Plausible</a
+						>, a privacy-focused analytics tool, to gather
+						completely anonymous statistics. All data is anonymized
+						and aggregated, and no identifiable information is ever
+						sent or stored. You can choose to opt-out below.
+					</p>
+				</div>
+				<div class="flex flex-col gap-3 w-full">
+					<div class="flex gap-3 w-full">
+						<button
+							onclick={() => (settings.plausible = true)}
+							class="btn {$effects
+								? ''
+								: '!scale-100'} {settings.plausible
+								? 'selected'
+								: ''} flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
+						>
+							<PlayIcon size="24" class="inline-block mr-2" />
+							Opt-in
+						</button>
+
+						<button
+							onclick={() => (settings.plausible = false)}
+							class="btn {$effects
+								? ''
+								: '!scale-100'} {settings.plausible
+								? ''
+								: 'selected'} flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
+						>
+							<PauseIcon size="24" class="inline-block mr-2" />
+							Opt-out
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div></Panel
+>

src/lib/sections/settings/index.svelte.ts

@@ -3,9 +3,11 @@ import type { ConversionSpeed } from "$lib/converters/vertd.svelte";
 export { default as Appearance } from "./Appearance.svelte";
 export { default as Conversion } from "./Conversion.svelte";
 export { default as Vertd } from "./Vertd.svelte";
+export { default as Privacy } from "./Privacy.svelte";
 
 export interface ISettings {
 	filenameFormat: string;
+	plausible: boolean;
 	vertdURL: string;
 	vertdSpeed: ConversionSpeed;
 }
@@ -15,6 +17,7 @@ export class Settings {
 
 	public settings: ISettings = $state({
 		filenameFormat: "VERT_%name%",
+		plausible: true, 
 		vertdURL: "",
 		vertdSpeed: "slow",
 	});

src/routes/+layout.svelte

@@ -2,7 +2,7 @@
 	import { onMount } from "svelte";
 	import { goto } from "$app/navigation";
 
-	import { PUB_HOSTNAME, PUB_PLAUSIBLE_URL } from "$env/static/public";
+	import { env } from "$env/dynamic/public";
 	import { VERT_NAME } from "$lib/consts";
 	import * as Layout from "$lib/components/layout";
 	import * as Navbar from "$lib/components/layout/Navbar";
@@ -18,6 +18,7 @@
 	import "../app.scss";
 
 	let { children } = $props();
+	let enablePlausible = $state(false);
 
 	const dropFiles = (e: DragEvent) => {
 		e.preventDefault();
@@ -45,6 +46,11 @@
 
 		Settings.instance.load();
 	});
+
+	$effect(() => {
+		// Enable plausible if enabled
+		enablePlausible = !!env.PUB_PLAUSIBLE_URL && Settings.instance.settings.plausible;
+	});
 </script>
 
 <svelte:head>
@@ -79,11 +85,13 @@
 	/>
 	<meta property="twitter:image" content={featuredImage} />
 	<link rel="manifest" href="/manifest.json" />
-	{#if PUB_PLAUSIBLE_URL}<script
+	{#if enablePlausible}
+		<script
 			defer
-			data-domain={PUB_HOSTNAME || "vert.sh"}
+			data-domain={env.PUB_HOSTNAME || "vert.sh"}
-			src="{PUB_PLAUSIBLE_URL}/js/script.pageview-props.tagged-events.js"
+			src="{env.PUB_PLAUSIBLE_URL}/js/script.pageview-props.tagged-events.js"
-		></script>{/if}
+		></script>
+	{/if}
 </svelte:head>
 
 <!-- FIXME: if user resizes between desktop/mobile, highlight of page disappears (only shows on original size) -->

src/routes/settings/+page.svelte

@@ -3,6 +3,7 @@
 	import { log } from "$lib/logger";
 	import * as Settings from "$lib/sections/settings/index.svelte";
 	import { addToast } from "$lib/store/ToastProvider";
+	import { env } from "$env/dynamic/public";
 	import { SettingsIcon } from "lucide-svelte";
 	import { onMount } from "svelte";
 
@@ -62,6 +63,9 @@
 
 		<div class="flex flex-col gap-4 flex-1">
 			<Settings.Appearance />
+			{#if env.PUB_PLAUSIBLE_URL}
+				<Settings.Privacy {settings} />
+			{/if}
 		</div>
 	</div>
 </div>