From 151647eae046ba55fb9617b60a643f8a9e63dd81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Zsolt=20Jur=C3=A1nyi?= <zsolt.juranyi@gmail.com>
Date: Fri, 10 Nov 2023 18:57:27 +0100
Subject: [PATCH] implemented custom cookie consent

---
 package.json                   |   1 -
 pnpm-lock.yaml                 |  11 ---
 src/components/Analytics.astro | 135 +++++++++++++++++++++++++++++++++
 src/layouts/BaseLayout.astro   |   8 +-
 4 files changed, 140 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Analytics.astro

diff --git a/package.json b/package.json
index 2cb6e2e..b18443c 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,6 @@
 	"dependencies": {
 		"@astrojs/sitemap": "^3.0.1",
 		"@astrojs/tailwind": "^5.0.1",
-		"@astrolib/analytics": "^0.4.2",
 		"@tailwindcss/typography": "^0.5.10",
 		"@vercel/og": "^0.5.20",
 		"astro": "^3.2.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0026391..7136b20 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,9 +11,6 @@ dependencies:
   '@astrojs/tailwind':
     specifier: ^5.0.1
     version: 5.0.1(astro@3.2.3)(tailwindcss@3.3.3)
-  '@astrolib/analytics':
-    specifier: ^0.4.2
-    version: 0.4.2(astro@3.2.3)
   '@tailwindcss/typography':
     specifier: ^0.5.10
     version: 0.5.10(tailwindcss@3.3.3)
@@ -189,14 +186,6 @@ packages:
       - supports-color
     dev: false
 
-  /@astrolib/analytics@0.4.2(astro@3.2.3):
-    resolution: {integrity: sha512-YAL1ubEKpN+IFNuM0SGGvN1jUX00ZmFtL2QuKDDCqq8nZzgREhl6IKSGyPOZ3haTbXVO71Rp/rjG9mmEt+RV4g==}
-    peerDependencies:
-      astro: ^1.2.1 || ^2.0.0 || ^3.0.0-beta.0 || ^3.0.0
-    dependencies:
-      astro: 3.2.3
-    dev: false
-
   /@babel/code-frame@7.22.13:
     resolution: {integrity: sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==}
     engines: {node: '>=6.9.0'}
diff --git a/src/components/Analytics.astro b/src/components/Analytics.astro
new file mode 100644
index 0000000..4f7bc7b
--- /dev/null
+++ b/src/components/Analytics.astro
@@ -0,0 +1,135 @@
+---
+import { Icon } from 'astro-iconify';
+import type { Lang } from '../content/config';
+
+type Props = {
+	gaId: string;
+	lang: Lang;
+};
+const { gaId, lang } = Astro.props;
+
+const huTexts = {
+	title: 'Kérsz sütit?',
+	question:
+		'A honlapom látogatottságának mérésére Google Analytics-et használok. Hozzájárulsz, hogy a látogatásod naplózva legyen?',
+	more: 'Bővebben a Google sütikről',
+	url: 'https://policies.google.com/technologies/cookies?hl=hu-HU',
+	yes: 'Igen',
+	no: 'Nem',
+};
+
+const enTexts: typeof huTexts = {
+	title: 'Want some cookies?',
+	question:
+		"I'm using Google Analytics to measure how many views my website gets. Do you consent to allow your visits to be counted?",
+	more: 'About Google cookies',
+	url: 'https://policies.google.com/technologies/cookies?hl=en-US',
+	yes: 'Yes',
+	no: 'No',
+};
+
+const texts: Record<Lang, typeof huTexts> = {
+	hu: huTexts,
+	en: enTexts,
+};
+const t = texts[lang];
+---
+
+<div
+	id="consent-dialog"
+	class="fixed bottom-0 flex w-full p-4"
+	style="display: none"
+>
+	<div class="mx-auto flex flex-col gap-8 rounded bg-gray-200 p-6 dark:bg-gray-950 sm:flex-row">
+		<Icon
+			class="hidden h-16 w-16 shrink-0 text-gray-500 dark:text-gray-500 sm:block"
+			name="carbon:cookie"
+		/>
+		<div class="max-w-[60ch]">
+			<h6 class="mb-2 text-xl font-semibold">
+				{t.title}
+			</h6>
+			<p class="text-lg text-gray-800 dark:text-gray-400">
+				{t.question}
+				<br />
+				<a
+					class="inline-flex items-center gap-2 text-lg font-medium text-gray-950 hover:underline dark:text-white"
+					href={t.url}
+					target="_blank"
+				>
+					{t.more}
+					<Icon
+						class="h-[0.8em] w-[0.8em] shrink-0"
+						name="carbon:arrow-right"
+					/>
+				</a>
+			</p>
+		</div>
+		<div class="flex items-center justify-end gap-4 sm:flex-col">
+			<button
+				id="consent-yes"
+				class="inline-flex items-center gap-2 rounded bg-white px-6 py-3 font-semibold uppercase text-gray-700 transition-all hover:gap-4 hover:bg-blue-500 hover:text-white dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-blue-700 dark:hover:text-white sm:w-full"
+			>
+				{t.yes}
+			</button>
+			<button
+				id="consent-no"
+				class="inline-flex items-center gap-2 rounded bg-white px-6 py-3 font-semibold uppercase text-gray-700 transition-all hover:gap-4 hover:bg-blue-500 hover:text-white dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-blue-700 dark:hover:text-white sm:w-full"
+			>
+				{t.no}
+			</button>
+		</div>
+	</div>
+</div>
+
+<script define:vars={{ gaId }}>
+	const GA_CONSENT_LS_KEY = 'can_use_ga';
+	const GA_SRC = `https://www.googletagmanager.com/gtag/js?id=${gaId}`;
+
+	function addAnalytics() {
+		window.dataLayer = window.dataLayer || [];
+
+		function gtag() {
+			// eslint-disable-next-line prefer-rest-params
+			window.dataLayer.push(arguments);
+		}
+
+		gtag('js', new Date());
+		gtag('config', gaId);
+
+		const scriptTag = document.createElement('script');
+		scriptTag.async = true;
+		scriptTag.src = GA_SRC;
+
+		const head = document.head || document.getElementsByTagName('head')[0];
+		head.appendChild(scriptTag);
+	}
+
+	function canUseAnalytics() {
+		return window.localStorage.getItem(GA_CONSENT_LS_KEY) === 'yes';
+	}
+
+	function handleConsentResponse(canUseGa) {
+		window.localStorage.setItem(GA_CONSENT_LS_KEY, canUseGa ? 'yes' : 'no');
+		setConsentDialogVisibility(false);
+		if (canUseGa) addAnalytics();
+	}
+
+	function hasResponse() {
+		return window.localStorage.getItem(GA_CONSENT_LS_KEY) !== null;
+	}
+
+	function setConsentDialogVisibility(visible) {
+		document.getElementById('consent-dialog').style.display = visible ? null : 'none';
+	}
+
+	document.getElementById('consent-yes').addEventListener('click', () => {
+		handleConsentResponse(true);
+	});
+	document.getElementById('consent-no').addEventListener('click', () => {
+		handleConsentResponse(false);
+	});
+
+	if (canUseAnalytics()) addAnalytics();
+	else if (!hasResponse()) setConsentDialogVisibility(true);
+</script>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 6f9ba6b..3fe35f5 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -1,7 +1,7 @@
 ---
-import { GoogleAnalytics } from '@astrolib/analytics';
 import { GoogleFontsOptimizer } from 'astro-google-fonts-optimizer';
 import type { BlogPosting, WebSite, WithContext } from 'schema-dts';
+import Analytics from '../components/Analytics.astro';
 import Footer from '../components/Footer.astro';
 import NavBar from '../components/NavBar.astro';
 import { locales, type AltLinks, type Lang } from '../content/config';
@@ -69,14 +69,12 @@ const schema = isPost ? blogPostSchema : websiteSchema;
 
 const isLanding = Boolean(/^\/(en\/?)?$/.exec(Astro.url.pathname));
 
-// TODO cookie consent + make GA work only after consent
 // TODO (later) more advanced favicon config with astro-favicon
 // TODO (later) astro view transitions?
 ---
 
 <html lang={lang}>
 	<head>
-		<GoogleAnalytics id={GA_ID} />
 		<meta charset="utf-8" />
 		<meta
 			name="viewport"
@@ -173,5 +171,9 @@ const isLanding = Boolean(/^\/(en\/?)?$/.exec(Astro.url.pathname));
 		/>
 		<slot />
 		{!isLanding && <Footer lang={lang} />}
+		<Analytics
+			gaId={GA_ID}
+			lang={lang}
+		/>
 	</body>
 </html>