Add cookie banner

.env.example

@@ -0,0 +1 @@
+PUBLIC_GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX

messages/en.json

@@ -47,6 +47,11 @@
     "socials.facebook.cta": "Facebook",
     "socials.facebook.href": "https://www.facebook.com/SeattleCommNet",
 
+    "cookieBanner.message": "We use cookies to improve your experience.<br /> By clicking \"Accept\", you consent to the use of analytics cookies.",
+    "cookieBanner.accept": "Accept",
+    "cookieBanner.deny": "Deny",
+    "cookieBanner.settings": "Cookie Settings",
+
 
     "=== PAGES HOME ===" : "comment",
 

src/lib/components/Analytics.svelte

@@ -0,0 +1,116 @@
+<script>
+    import { onMount } from "svelte";
+    import { fly } from "svelte/transition";
+
+    import { PUBLIC_GOOGLE_ANALYTICS_ID } from "$env/static/public";
+
+    import { m } from '$lib/paraglide/messages.js';
+
+    import Button from "./Button.svelte";
+
+    let showBanner = $state(false);
+
+    onMount(() => {
+        const consentStatus = localStorage.getItem("consent_status");
+
+        if (consentStatus === null) {
+            showBanner = true;
+        } else if (consentStatus === "granted") {
+            window.gtag("consent", "update", {
+                analytics_storage: "granted",
+                ad_storage: "granted",
+                ad_user_data: "granted",
+                ad_personalization: "granted",
+            });
+        }
+    });
+
+    function handleAccept() {
+        showBanner = false;
+        localStorage.setItem("consent_status", "granted");
+
+        window.gtag("consent", "update", {
+            analytics_storage: "granted",
+            ad_storage: "granted",
+            ad_user_data: "granted",
+            ad_personalization: "granted",
+        });
+    }
+
+    function handleDeny() {
+        showBanner = false;
+        localStorage.setItem("consent_status", "denied");
+    }
+
+    export function reopenBanner() {
+        showBanner = true;
+        localStorage.removeItem("consent_status");
+    }
+</script>
+
+<svelte:head>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+
+        function gtag() {
+            dataLayer.push(arguments);
+        }
+
+        window.gtag = gtag;
+
+        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>
+</svelte:head>
+
+{#if showBanner}
+    <div transition:fly="{{ x: 20, duration: 300 }}" class="banner">
+        <p>
+            {@html m["cookieBanner.message"]() }
+        </p>
+
+        <div class="buttons">
+            <Button type="medium" onclick={handleAccept}>{ m["cookieBanner.accept"]() }</Button>
+            <Button type="medium" onclick={handleDeny}>{ m["cookieBanner.deny"]() }</Button>
+        </div>
+    </div>
+{/if}
+
+<style lang="postcss">
+    .banner {
+        position: fixed;
+        bottom: 1em;
+        right: 0;
+        width: 370px;
+
+        background-color: #fff;
+
+        padding: 1rem;
+
+        border: solid 1px #ccc;
+        border-right-width:0;
+        border-top-left-radius: 0.6em;
+        border-bottom-left-radius: 0.6em;
+        box-shadow: 0 0 1em #0004;
+
+        p {
+            margin: 0 0 1em;
+            font-size: 1em;
+        }
+    }
+
+    .buttons {
+        display: flex;
+        gap: 0.5em;
+    }
+</style>

src/lib/components/Button.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
     let {
-        href,
+        href = null,
         children,
         type = null,
         arrow = null,
         dataTest = null,
+        onclick = null
     } = $props();
 
     let cssClass = $state("button");
@@ -20,12 +21,21 @@
     }
 </script>
 
-<a href={href} class={cssClass} data-test={dataTest}>
-    {@render children()}
-    {#if arrow}
-        →
-    {/if}
-</a>
+{#if href}
+    <a href={href} class={cssClass} data-test={dataTest}>
+        {@render children()}
+        {#if arrow}
+            →
+        {/if}
+    </a>
+{:else}
+    <button class={cssClass} data-test={dataTest} onclick={onclick}>
+        {@render children()}
+        {#if arrow}
+            →
+        {/if}
+    </button>
+{/if}
 
 <style>
     .button {

src/lib/components/Footer.svelte

@@ -1,9 +1,11 @@
 <script>
     import { m } from '$lib/paraglide/messages.js';
-    // import { setLocale } from '$lib/paraglide/runtime';
     import Button from './Button.svelte';
     import Socials from './Socials.svelte';
     import Wrapper from './Wrapper.svelte';
+    import Analytics from './Analytics.svelte';
+
+    let analytics;
 
     const buttons = [
         {
@@ -33,14 +35,22 @@
                         <Button {href} type="medium">{cta}</Button>
                     </div>
                 {/each}
+
+                <div>
+                    <Button type="medium" onclick={() => analytics?.reopenBanner()}>
+                        {m["cookieBanner.settings"]()}
+                    </Button>
+                </div>
             </div>
 
             <!-- <button onclick={() => setLocale('en')}>en</button> -->
         </footer>
     </Wrapper>
 </div>
 
-<style>
+<Analytics bind:this={analytics} />
+
+<style lang="postcss">
     .footer {
         background-color: var(--color-brand-primary);
 
@@ -57,6 +67,7 @@
             margin: 0;
         }
     }
+
     footer {
         display: flex;
         flex-direction: column;

src/lib/styles/globals.css

@@ -90,6 +90,12 @@ a {
     color: var(--color-link);
 }
 
+button {
+    color: var(--color-text);
+    border: none;
+    cursor: pointer;
+}
+
 section {
     margin: var(--layout-section-vertical) 0;
 }

src/routes/+layout.svelte

@@ -4,10 +4,12 @@
     import Header   from '$lib/components/Header.svelte';
     import Footer   from '$lib/components/Footer.svelte';
     import Metatags from '$lib/components/Metatags.svelte';
+    import Analytics from '$lib/components/Analytics.svelte';
 
     let { children } = $props();
 </script>
 
+
 <Metatags />
 
 <Header />
@@ -18,6 +20,8 @@
 
 <Footer/>
 
+<Analytics />
+
 <style lang="postcss">
 
 </style>