web: add env variable & plausible functionality

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;

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}">

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")}>
+{#if env.PLAUSIBLE_ENABLED}
-    <SettingsToggle
+    <SettingsCategory sectionId="analytics" title={$t("settings.privacy.analytics")}>
-        settingContext="privacy"
+        <SettingsToggle
-        settingId="disableAnalytics"
+            settingContext="privacy"
-        title={$t("settings.privacy.analytics.title")}
+            settingId="disableAnalytics"
-        description={$t("settings.privacy.analytics.description")}
+            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">
+        <div class="subtext learn-more-plausible">
-            {$t("settings.privacy.analytics.learnmore")}
+            <OuterLink href="https://plausible.io/privacy-focused-web-analytics">
-        </OuterLink>
+                {$t("settings.privacy.analytics.learnmore")}
-    </div>
+            </OuterLink>
-</SettingsCategory>
+        </div>
+    </SettingsCategory>
+{/if}
 
 <style>
     .learn-more-plausible {