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,7 +7,8 @@
     import OuterLink from "$components/misc/OuterLink.svelte";
 </script>
 
-<SettingsCategory sectionId="privacy" title={$t("settings.privacy.analytics")}>
+{#if env.PLAUSIBLE_ENABLED}
+    <SettingsCategory sectionId="analytics" title={$t("settings.privacy.analytics")}>
         <SettingsToggle
             settingContext="privacy"
             settingId="disableAnalytics"
@@ -18,7 +20,8 @@
                 {$t("settings.privacy.analytics.learnmore")}
             </OuterLink>
         </div>
-</SettingsCategory>
+    </SettingsCategory>
+{/if}
 
 <style>
     .learn-more-plausible {