env var to disable cookie notification (#54)

I'm fine with this, let's try to document it in our docs how how to locally stage the site

Author: kevinkace

.env.example

@@ -1 +1,2 @@
-PUBLIC_GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX
+PUBLIC_GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX
+PUBLIC_ANALYTICS_ENABLED=false

src/lib/components/Analytics.svelte

@@ -2,15 +2,20 @@
     import { onMount } from "svelte";
     import { fly } from "svelte/transition";
 
-    import { PUBLIC_GOOGLE_ANALYTICS_ID } from "$env/static/public";
+    import { PUBLIC_GOOGLE_ANALYTICS_ID, PUBLIC_ANALYTICS_ENABLED } from "$env/static/public";
 
     import { m } from '$lib/paraglide/messages.js';
 
     import Button from "./Button.svelte";
 
     let showBanner = $state(false);
 
+    // Don't initialize analytics if disabled
+    const isAnalyticsEnabled = PUBLIC_ANALYTICS_ENABLED === 'true';
+
     onMount(() => {
+        if (!isAnalyticsEnabled) return;
+
         const consentStatus = localStorage.getItem("consent_status");
 
         if (consentStatus === null) {
@@ -26,6 +31,8 @@
     });
 
     function handleAccept() {
+        if (!isAnalyticsEnabled) return;
+
         showBanner = false;
         localStorage.setItem("consent_status", "granted");
 
@@ -38,42 +45,48 @@
     }
 
     function handleDeny() {
+        if (!isAnalyticsEnabled) return;
+
         showBanner = false;
         localStorage.setItem("consent_status", "denied");
     }
 
     export function reopenBanner() {
+        if (!isAnalyticsEnabled) return;
+
         showBanner = true;
         localStorage.removeItem("consent_status");
     }
 </script>
 
 <svelte:head>
-    <script>
-        window.dataLayer = window.dataLayer || [];
+    {#if isAnalyticsEnabled && PUBLIC_GOOGLE_ANALYTICS_ID}
+        <script>
+            window.dataLayer = window.dataLayer || [];
 
-        function gtag() {
-            dataLayer.push(arguments);
-        }
-
-        window.gtag = gtag;
+            function gtag() {
+                dataLayer.push(arguments);
+            }
 
-        gtag("consent", "default", {
-            analytics_storage: "denied",
-            ad_storage: "denied",
-            ad_user_data: "denied",
-            ad_personalization: "denied",
-        });
-    </script>
+            window.gtag = gtag;
 
-    <script async src={`https://www.googletagmanager.com/gtag/js?id=${PUBLIC_GOOGLE_ANALYTICS_ID}`}></script>
-    <script>
-        gtag("js", new Date());
-        gtag("config", "{PUBLIC_GOOGLE_ANALYTICS_ID}");
-    </script>
+            gtag("consent", "default", {
+                analytics_storage: "denied",
+                ad_storage: "denied",
+                ad_user_data: "denied",
+                ad_personalization: "denied",
+            });
+        </script>
+
+        <script async src={`https://www.googletagmanager.com/gtag/js?id=${PUBLIC_GOOGLE_ANALYTICS_ID}`}></script>
+        <script>
+            gtag("js", new Date());
+            gtag("config", "{PUBLIC_GOOGLE_ANALYTICS_ID}");
+        </script>
+    {/if}
 </svelte:head>
 
-{#if showBanner}
+{#if isAnalyticsEnabled && showBanner}
     <div transition:fly="{{ x: 20, duration: 300 }}" class="banner">
         <p>
             {@html m["cookieBanner.message"]() }

src/lib/components/Footer.svelte

@@ -1,11 +1,16 @@
-<script>
+<script lang="ts">
+    import { PUBLIC_ANALYTICS_ENABLED } from "$env/static/public";
+
     import { m } from '$lib/paraglide/messages.js';
+
     import Button from './Button.svelte';
     import Socials from './Socials.svelte';
     import Wrapper from './Wrapper.svelte';
     import Analytics from './Analytics.svelte';
 
-    let analytics;
+    let analytics: Analytics;
+
+    const isAnalyticsEnabled = PUBLIC_ANALYTICS_ENABLED === 'true';
 
     const buttons = [
         {
@@ -36,11 +41,13 @@
                     </div>
                 {/each}
 
+                {#if isAnalyticsEnabled}
                 <div>
                     <Button type="medium" onclick={() => analytics?.reopenBanner()}>
                         {m["cookieBanner.settings"]()}
                     </Button>
                 </div>
+                {/if}
             </div>
 
             <!-- <button onclick={() => setLocale('en')}>en</button> -->