From 128ab388f3128f2b94fcaccf3f5c489188df66b5 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sun, 14 Jul 2024 22:50:18 +0600
Subject: [PATCH] web: add env variable & plausible functionality

---
 web/src/lib/env.ts                            |  9 ++++++
 web/src/routes/+layout.svelte                 | 10 +++++++
 .../settings/general/privacy/+page.svelte     | 29 ++++++++++---------
 3 files changed, 35 insertions(+), 13 deletions(-)
 create mode 100644 web/src/lib/env.ts

diff --git a/web/src/lib/env.ts b/web/src/lib/env.ts
new file mode 100644
index 00000000..a5f08382
--- /dev/null
+++ b/web/src/lib/env.ts
@@ -0,0 +1,9 @@
+import { env } from "$env/dynamic/public";
+
+const variables = {
+    HOST: env.PUBLIC_HOST,
+    PLAUSIBLE_HOST: env.PUBLIC_PLAUSIBLE_HOST,
+    PLAUSIBLE_ENABLED: env.PUBLIC_HOST && env.PUBLIC_PLAUSIBLE_HOST,
+}
+
+export default variables;
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index e203f1de..20eeabbc 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -2,6 +2,7 @@
     import "@fontsource/ibm-plex-mono/400.css";
     import "@fontsource/ibm-plex-mono/500.css";
 
+    import env from "$lib/env";
     import settings from "$lib/state/settings";
     import { device, app } from "$lib/device";
     import { locale } from "$lib/i18n/translations";
@@ -23,6 +24,15 @@
     {#if device.is.mobile}
         <meta name="theme-color" content={statusBarColors[$currentTheme]}>
     {/if}
+
+    {#if env.PLAUSIBLE_ENABLED}
+        <script
+            defer
+            data-domain="{env.HOST}"
+            src="https://{env.PLAUSIBLE_HOST}/js/script.js"
+        >
+        </script>
+    {/if}
 </svelte:head>
 
 <div style="display: contents" data-theme={$currentTheme} lang="{$locale}">
diff --git a/web/src/routes/settings/general/privacy/+page.svelte b/web/src/routes/settings/general/privacy/+page.svelte
index c6f65a7f..00eacbca 100644
--- a/web/src/routes/settings/general/privacy/+page.svelte
+++ b/web/src/routes/settings/general/privacy/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import env from "$lib/env";
     import { t } from "$lib/i18n/translations";
 
     import SettingsCategory from "$components/settings/SettingsCategory.svelte";
@@ -6,19 +7,21 @@
     import OuterLink from "$components/misc/OuterLink.svelte";
 </script>
 
-<SettingsCategory sectionId="privacy" title={$t("settings.privacy.analytics")}>
-    <SettingsToggle
-        settingContext="privacy"
-        settingId="disableAnalytics"
-        title={$t("settings.privacy.analytics.title")}
-        description={$t("settings.privacy.analytics.description")}
-    />
-    <div class="subtext learn-more-plausible">
-        <OuterLink href="https://plausible.io/privacy-focused-web-analytics">
-            {$t("settings.privacy.analytics.learnmore")}
-        </OuterLink>
-    </div>
-</SettingsCategory>
+{#if env.PLAUSIBLE_ENABLED}
+    <SettingsCategory sectionId="analytics" title={$t("settings.privacy.analytics")}>
+        <SettingsToggle
+            settingContext="privacy"
+            settingId="disableAnalytics"
+            title={$t("settings.privacy.analytics.title")}
+            description={$t("settings.privacy.analytics.description")}
+        />
+        <div class="subtext learn-more-plausible">
+            <OuterLink href="https://plausible.io/privacy-focused-web-analytics">
+                {$t("settings.privacy.analytics.learnmore")}
+            </OuterLink>
+        </div>
+    </SettingsCategory>
+{/if}
 
 <style>
     .learn-more-plausible {