web: add env variable & plausible functionality

This commit is contained in:
wukko 2024-07-14 22:50:18 +06:00
parent 436b735d2a
commit 128ab388f3
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
3 changed files with 35 additions and 13 deletions

9
web/src/lib/env.ts Normal file
View file

@ -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;

View file

@ -2,6 +2,7 @@
import "@fontsource/ibm-plex-mono/400.css"; import "@fontsource/ibm-plex-mono/400.css";
import "@fontsource/ibm-plex-mono/500.css"; import "@fontsource/ibm-plex-mono/500.css";
import env from "$lib/env";
import settings from "$lib/state/settings"; import settings from "$lib/state/settings";
import { device, app } from "$lib/device"; import { device, app } from "$lib/device";
import { locale } from "$lib/i18n/translations"; import { locale } from "$lib/i18n/translations";
@ -23,6 +24,15 @@
{#if device.is.mobile} {#if device.is.mobile}
<meta name="theme-color" content={statusBarColors[$currentTheme]}> <meta name="theme-color" content={statusBarColors[$currentTheme]}>
{/if} {/if}
{#if env.PLAUSIBLE_ENABLED}
<script
defer
data-domain="{env.HOST}"
src="https://{env.PLAUSIBLE_HOST}/js/script.js"
>
</script>
{/if}
</svelte:head> </svelte:head>
<div style="display: contents" data-theme={$currentTheme} lang="{$locale}"> <div style="display: contents" data-theme={$currentTheme} lang="{$locale}">

View file

@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import env from "$lib/env";
import { t } from "$lib/i18n/translations"; import { t } from "$lib/i18n/translations";
import SettingsCategory from "$components/settings/SettingsCategory.svelte"; import SettingsCategory from "$components/settings/SettingsCategory.svelte";
@ -6,19 +7,21 @@
import OuterLink from "$components/misc/OuterLink.svelte"; import OuterLink from "$components/misc/OuterLink.svelte";
</script> </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> <style>
.learn-more-plausible { .learn-more-plausible {