Merge pull request #9 from jcreek/5-add-proper-cookie-consent-that-is-gdpr-compliant

feat(#5): Add cookie consent banner

src/lib/components/CookieConsent.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { isBrowser } from '@supabase/ssr';
+
+	export let cookiesAccepted;
+	let showBanner = !cookiesAccepted;
+	$: showBanner = !cookiesAccepted;
+
+	const acceptCookies = () => {
+		if (isBrowser()) {
+			localStorage.setItem('cookiesAccepted', 'true');
+			showBanner = false;
+		}
+	};
+
+</script>
+
+{#if showBanner}
+	<div class="fixed bottom-0 left-0 w-full bg-gray-800 text-white p-4">
+		<p class="text-sm">
+			We use cookies to ensure you get the best experience on our website. By continuing, you agree
+			to our use of cookies.
+		</p>
+		<button class="bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded" on:click={acceptCookies}
+			>Accept</button
+		>
+	</div>
+{/if}

src/routes/+layout.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
 	import 'tailwindcss/tailwind.css';
 	import { onDestroy, onMount } from 'svelte';
+	import { isBrowser } from '@supabase/ssr';
 	import { basket, type Basket, type Item } from '$lib/stores/basket.js';
 	import { general } from '$lib/stores/generalStore.js';
 	import { invalidate } from '$app/navigation';
 	import SignIn from '$lib/components/SignIn.svelte';
 	import SignOut from '$lib/components/SignOut.svelte';
+	import CookieConsent from '$lib/components/CookieConsent.svelte';
 
 	export let data;
 	let { supabase, session } = data;
@@ -20,11 +22,14 @@
 	const unsubscribeToGeneralStore = general.subscribe((value) => {
 		localGeneral = value;
 	});
+
 	onDestroy(() => {
 		unsubscribeToBasket();
 		unsubscribeToGeneralStore();
 	});
 
+	let cookiesAccepted = false;
+
 	onMount(() => {
 		const { data } = supabase.auth.onAuthStateChange((event, _session) => {
 			if (_session?.expires_at !== session?.expires_at) {
@@ -33,6 +38,12 @@
 			}
 		});
 
+		if (isBrowser()) {
+			if (localStorage.getItem('cookiesAccepted')) {
+				cookiesAccepted = true;
+			}
+		}
+
 		return () => data.subscription.unsubscribe();
 	});
 </script>
@@ -44,6 +55,10 @@
 	<meta property="og:description" content="" />
 	<link rel="canonical" href="" />
 	<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+
+	{#if cookiesAccepted}
+		<!-- Google Analytics script goes here -->
+	{/if}
 </svelte:head>
 
 <header>
@@ -162,6 +177,8 @@
 	<slot />
 </main>
 
+<CookieConsent {cookiesAccepted} />
+
 <footer class="footer items-center p-4 bg-neutral text-neutral-content">
 	<aside class="items-center grid-flow-col">
 		<svg
@@ -218,6 +235,7 @@
 		</a>
 	</nav>
 </footer>
+
 <div
 	id="success-toast"
 	role="alert"