From c19e362aaff9329724b2329c792152407b96e671 Mon Sep 17 00:00:00 2001
From: Mawoka <mawoka@e.email>
Date: Fri, 24 Jun 2022 14:02:23 +0200
Subject: [PATCH] :sparkles: Switched to plausible-tracker and removed
 node-fetch

---
 frontend/package.json                     |  2 +-
 frontend/pnpm-lock.yaml                   | 99 ++++++-----------------
 frontend/src/app.html                     |  6 --
 frontend/src/hooks.ts                     |  1 -
 frontend/src/lib/hashcash.ts              | 18 ++---
 frontend/src/lib/stores.ts                |  7 ++
 frontend/src/routes/__layout.svelte       | 15 ++++
 frontend/src/routes/overview.svelte       |  4 +-
 frontend/src/routes/play.svelte           |  4 +-
 frontend/src/routes/view/[quiz_id].svelte |  3 +-
 10 files changed, 59 insertions(+), 100 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 01779b9..02661cb 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -52,7 +52,7 @@
 		"js-cookie": "^3.0.1",
 		"luxon": "^2.4.0",
 		"mapbox-gl": "^2.8.2",
-		"node-fetch": "^3.2.6",
+		"plausible-tracker": "^0.3.8",
 		"postcss": "^8.4.14",
 		"postcss-load-config": "^4.0.1",
 		"prettier": "^2.6.2",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 1cee9af..f5003ad 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -40,7 +40,7 @@ specifiers:
     js-cookie: ^3.0.1
     luxon: ^2.4.0
     mapbox-gl: ^2.8.2
-    node-fetch: ^3.2.6
+    plausible-tracker: ^0.3.8
     postcss: ^8.4.14
     postcss-load-config: ^4.0.1
     prettier: ^2.6.2
@@ -70,9 +70,9 @@ devDependencies:
     '@fontsource/marck-script': 4.5.9
     '@sentry/browser': 7.1.1
     '@sentry/tracing': 7.1.1
-    '@sveltejs/adapter-auto': 1.0.0-next.50
+    '@sveltejs/adapter-auto': 1.0.0-next.52
     '@sveltejs/adapter-node': 1.0.0-next.78
-    '@sveltejs/kit': 1.0.0-next.350_sass@1.52.3+svelte@3.48.0
+    '@sveltejs/kit': 1.0.0-next.354_sass@1.52.3+svelte@3.48.0
     '@tailwindcss/typography': 0.5.2_tailwindcss@3.1.2
     '@types/cookie': 0.5.1
     '@types/js-cookie': 3.0.2
@@ -102,7 +102,7 @@ devDependencies:
     js-cookie: 3.0.1
     luxon: 2.4.0
     mapbox-gl: 2.8.2
-    node-fetch: 3.2.6
+    plausible-tracker: 0.3.8
     postcss: 8.4.14
     postcss-load-config: 4.0.1_postcss@8.4.14
     prettier: 2.6.2
@@ -487,15 +487,15 @@ packages:
             }
         dev: true
 
-    /@sveltejs/adapter-auto/1.0.0-next.50:
+    /@sveltejs/adapter-auto/1.0.0-next.52:
         resolution:
             {
-                integrity: sha512-5OkBxw+0Wmq7+Cr0DcOEOTHyOm4VmiWTUsKwMrSc47zcjbXB8n4UvEC0XUtJ5ZSBJRZz7hmVubqH1zm1SANtdw==
+                integrity: sha512-jOuC7RauiwGg7BQQEZxBGcwtwynNqQSuGJ7MJ9kk5WIrFCMrZSclwnpO1yLmUUYFKvJ61Z7bvVoDqm6+CgLEaw==
             }
         dependencies:
             '@sveltejs/adapter-cloudflare': 1.0.0-next.23
-            '@sveltejs/adapter-netlify': 1.0.0-next.64
-            '@sveltejs/adapter-vercel': 1.0.0-next.58
+            '@sveltejs/adapter-netlify': 1.0.0-next.65
+            '@sveltejs/adapter-vercel': 1.0.0-next.59
         transitivePeerDependencies:
             - encoding
             - supports-color
@@ -511,10 +511,10 @@ packages:
             worktop: 0.8.0-next.14
         dev: true
 
-    /@sveltejs/adapter-netlify/1.0.0-next.64:
+    /@sveltejs/adapter-netlify/1.0.0-next.65:
         resolution:
             {
-                integrity: sha512-n2oBAIdv1s4magogcCYbequDmPgOKviNfy40JJ5ZavansboYeaygFri9HcOwcHqrTOmEo3ZDIBoc1UTpbmzMYg==
+                integrity: sha512-81LYVqT0Fez7xqvOdE9ITD7b5kxdzzXjXwJ0ISBfJYt6wqg0fmABm3mcDy3opXau7DoQkhkhnlqkharTHfhJQg==
             }
         dependencies:
             '@iarna/toml': 2.2.5
@@ -532,23 +532,23 @@ packages:
             tiny-glob: 0.2.9
         dev: true
 
-    /@sveltejs/adapter-vercel/1.0.0-next.58:
+    /@sveltejs/adapter-vercel/1.0.0-next.59:
         resolution:
             {
-                integrity: sha512-Gw76HhwHh2sWP2RN8jwm4jMmO5rnvvWsPsnAhFRCYlIs6gwKf/mNE/CfTQ1nkqKEm15YEYHjKXRVRjI8BniwxA==
+                integrity: sha512-1lq5IFLWiLUXmNJVUXjwaInDb07BJg5er43xlMilpFpTA9BZI2hqjYCgtdtk7O6ee5EYJk876b2riM1m+y1M4Q==
             }
         dependencies:
-            '@vercel/nft': 0.19.1
+            '@vercel/nft': 0.20.0
             esbuild: 0.14.43
         transitivePeerDependencies:
             - encoding
             - supports-color
         dev: true
 
-    /@sveltejs/kit/1.0.0-next.350_sass@1.52.3+svelte@3.48.0:
+    /@sveltejs/kit/1.0.0-next.354_sass@1.52.3+svelte@3.48.0:
         resolution:
             {
-                integrity: sha512-qkZNjp7yIj6t91+wMhmMtGJH0Lb89OaKdVXUDy92CS5/4OHRTKcQPdfOKs4no/upkS3RiFb+rEpOkYqTMcPUXg==
+                integrity: sha512-dTfFT0c3sxztFpiw6H4bQnPd+PtHgEZG6j6ssT9sWLONfzUgWRX0S7H/WoPEjr7u65o2HNazoj8jmEq3ZTwb9g==
             }
         engines: { node: '>=16.7' }
         hasBin: true
@@ -1072,10 +1072,10 @@ packages:
             nanoid: 3.3.4
         dev: true
 
-    /@vercel/nft/0.19.1:
+    /@vercel/nft/0.20.0:
         resolution:
             {
-                integrity: sha512-klR5oN7S3WJsZz0r6Xsq7o8YlFEyU3/00VmlpZzIPVFzKfbcEjXo/sVR5lQBUqNKuOzhcbxaFtzW9aOyHjmPYA==
+                integrity: sha512-+lxsJP/sG4E8UkhfrJC6evkLLfUpZrjXxqEdunr3Q9kiECi8JYBGz6B5EpU1+MmeNnRoSphLcLh/1tI998ye4w==
             }
         hasBin: true
         dependencies:
@@ -1709,14 +1709,6 @@ packages:
             css-tree: 1.1.3
         dev: true
 
-    /data-uri-to-buffer/4.0.0:
-        resolution:
-            {
-                integrity: sha512-Vr3mLBA8qWmcuschSLAOogKgQ/Jwxulv3RNE4FXnYWRGujzrRWQI4m12fQqRkwX06C0KanhLr4hK+GydchZsaA==
-            }
-        engines: { node: '>= 12' }
-        dev: true
-
     /debug/3.2.7:
         resolution:
             {
@@ -2522,17 +2514,6 @@ packages:
             svelte: 3.48.0
         dev: true
 
-    /fetch-blob/3.1.5:
-        resolution:
-            {
-                integrity: sha512-N64ZpKqoLejlrwkIAnb9iLSA3Vx/kjgzpcDhygcqJ2KKjky8nCgUQ+dzXtbrLaWZGZNmNfQTsiQ0weZ1svglHg==
-            }
-        engines: { node: ^12.20 || >= 14.13 }
-        dependencies:
-            node-domexception: 1.0.0
-            web-streams-polyfill: 3.2.1
-        dev: true
-
     /file-entry-cache/6.0.1:
         resolution:
             {
@@ -2578,16 +2559,6 @@ packages:
             }
         dev: true
 
-    /formdata-polyfill/4.0.10:
-        resolution:
-            {
-                integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==
-            }
-        engines: { node: '>=12.20.0' }
-        dependencies:
-            fetch-blob: 3.1.5
-        dev: true
-
     /fraction.js/4.2.0:
         resolution:
             {
@@ -3477,14 +3448,6 @@ packages:
             - supports-color
         dev: true
 
-    /node-domexception/1.0.0:
-        resolution:
-            {
-                integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==
-            }
-        engines: { node: '>=10.5.0' }
-        dev: true
-
     /node-fetch/2.6.7:
         resolution:
             {
@@ -3500,18 +3463,6 @@ packages:
             whatwg-url: 5.0.0
         dev: true
 
-    /node-fetch/3.2.6:
-        resolution:
-            {
-                integrity: sha512-LAy/HZnLADOVkVPubaxHDft29booGglPFDr2Hw0J1AercRh01UiVFm++KMDnJeH9sHgNB4hsXPii7Sgym/sTbw==
-            }
-        engines: { node: ^12.20.0 || ^14.13.1 || >=16.0.0 }
-        dependencies:
-            data-uri-to-buffer: 4.0.0
-            fetch-blob: 3.1.5
-            formdata-polyfill: 4.0.10
-        dev: true
-
     /node-gyp-build/4.4.0:
         resolution:
             {
@@ -3804,6 +3755,14 @@ packages:
         engines: { node: '>=0.10.0' }
         dev: true
 
+    /plausible-tracker/0.3.8:
+        resolution:
+            {
+                integrity: sha512-lmOWYQ7s9KOUJ1R+YTOR3HrjdbxIS2Z4de0P/Jx2dQPteznJl2eX3tXxKClpvbfyGP59B5bbhW8ftN59HbbFSg==
+            }
+        engines: { node: '>=10' }
+        dev: true
+
     /postcss-calc/8.2.4_postcss@8.4.14:
         resolution:
             {
@@ -5332,14 +5291,6 @@ packages:
             pbf: 3.2.1
         dev: true
 
-    /web-streams-polyfill/3.2.1:
-        resolution:
-            {
-                integrity: sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==
-            }
-        engines: { node: '>= 8' }
-        dev: true
-
     /webidl-conversions/3.0.1:
         resolution:
             {
diff --git a/frontend/src/app.html b/frontend/src/app.html
index adb88ef..43c1022 100644
--- a/frontend/src/app.html
+++ b/frontend/src/app.html
@@ -5,12 +5,6 @@
 		<meta name="description" content="" />
 		<!--		<link rel="icon" href="%sveltekit.assets%/favicon.png" />-->
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<script
-			async=""
-			defer=""
-			data-domain="classquiz.mawoka.eu"
-			src="https://sugar.mawoka.eu.org/js/plausible.hash.outbound-links.js"
-		></script>
 		<link rel="prefetch" href="https://sugar.mawoka.eu.org/" />
 		<script>
 			window.plausible =
diff --git a/frontend/src/hooks.ts b/frontend/src/hooks.ts
index 5b7f858..27979c0 100644
--- a/frontend/src/hooks.ts
+++ b/frontend/src/hooks.ts
@@ -1,5 +1,4 @@
 import * as cookie from 'cookie';
-import fetch from 'node-fetch';
 import Redis from 'ioredis';
 
 const redis = new Redis(process.env.REDIS_URL);
diff --git a/frontend/src/lib/hashcash.ts b/frontend/src/lib/hashcash.ts
index 487a47b..4efd03e 100644
--- a/frontend/src/lib/hashcash.ts
+++ b/frontend/src/lib/hashcash.ts
@@ -1,5 +1,5 @@
 import { DateTime } from 'luxon';
-import * as Sentry from '@sentry/browser';
+import { plausible } from '$lib/stores';
 
 const gen_salt = (l: number): string => {
 	const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
@@ -32,7 +32,8 @@ export const mint = async (
 	const challenge = `${ver}:${bits}:${ts}:${resource}:${ext}:${salt}`;
 	let counter = 0;
 	let result: string;
-	const t0 = performance.now();
+	const t1 = performance.now();
+
 	// eslint-disable-next-line no-constant-condition
 	while (true) {
 		const data = new TextEncoder().encode(`${challenge}:${counter.toString(16)}`);
@@ -45,16 +46,7 @@ export const mint = async (
 		}
 		counter += 1;
 	}
-	const t1 = performance.now();
-	const transaction = Sentry.startTransaction({ name: 'calculatedHasCash' });
-	const span = transaction.startChild({
-		op: 'hashcash',
-		data: {
-			milliseconds_taken: t0 - t1,
-			bits: bits
-		}
-	});
-	span.finish();
-	transaction.finish();
+	const t2 = performance.now();
+	plausible.trackEvent('Hashcash', { props: { ms_taken: t2 - t1 } });
 	return `${challenge}:${result}`;
 };
diff --git a/frontend/src/lib/stores.ts b/frontend/src/lib/stores.ts
index be1520a..cbd3ee6 100644
--- a/frontend/src/lib/stores.ts
+++ b/frontend/src/lib/stores.ts
@@ -8,6 +8,7 @@ export const alertModal = writable({ open: false, title: '', body: '' });
 
 import { goto } from '$app/navigation';
 import { page } from '$app/stores';
+import Plausible from 'plausible-tracker';
 
 const URLSearchParamsToObject = (params: URLSearchParams) => {
 	const obj = {};
@@ -41,3 +42,9 @@ export const createQueryParamsStore = (key: string) => {
 		}
 	};
 };
+
+export const plausible = Plausible({
+	domain: 'classquiz.mawoka.eu',
+	apiHost: 'https://sugar.mawoka.eu.org',
+	trackLocalhost: true
+});
diff --git a/frontend/src/routes/__layout.svelte b/frontend/src/routes/__layout.svelte
index c9a1a5b..9d85210 100644
--- a/frontend/src/routes/__layout.svelte
+++ b/frontend/src/routes/__layout.svelte
@@ -18,8 +18,23 @@
 	import { initLocalizationContext } from '$lib/i18n';
 	import { browser } from '$app/env';
 	import Alert from '$lib/modals/alert.svelte';
+	import { plausible } from '$lib/stores';
+
+	/*	afterNavigate(() => {
+		if (browser) {
+			if (latestPageVisitURl === window.location.href) {
+				return;
+			} else {
+				latestPageVisitURl = window.location.href;
+				plausible.trackPageview();
+			}
+			console.log('After nav');
+		}
+	});*/
 
 	if (browser) {
+		plausible.enableAutoPageviews();
+		plausible.enableAutoOutboundTracking();
 		pathname.set(window.location.pathname);
 		if (
 			localStorage.theme === 'dark' ||
diff --git a/frontend/src/routes/overview.svelte b/frontend/src/routes/overview.svelte
index e02ac92..3ef2fce 100644
--- a/frontend/src/routes/overview.svelte
+++ b/frontend/src/routes/overview.svelte
@@ -19,7 +19,7 @@
 	import { DateTime } from 'luxon';
 	import { getLocalization } from '$lib/i18n';
 	import Footer from '$lib/footer.svelte';
-	import { alertModal, navbarVisible, signedIn } from '$lib/stores';
+	import { alertModal, navbarVisible, signedIn, plausible } from '$lib/stores';
 
 	interface QuizData {
 		id: string;
@@ -71,7 +71,7 @@
 		}
 		const data = await res.json();
 		// eslint-disable-next-line no-undef
-		plausible('Started Game', { props: { quiz_id: id } });
+		plausible.trackEvent('Started Game', { props: { quiz_id: id } });
 		window.location.replace(`/admin?token=${data.game_id}&pin=${data.game_pin}&connect=1`);
 	};
 
diff --git a/frontend/src/routes/play.svelte b/frontend/src/routes/play.svelte
index 2a69917..3c5cfa4 100644
--- a/frontend/src/routes/play.svelte
+++ b/frontend/src/routes/play.svelte
@@ -21,7 +21,7 @@
 	import ShowTitle from '$lib/play/title.svelte';
 	import Question from '$lib/play/question.svelte';
 	import ShowResults from '$lib/play/show_results.svelte';
-	import { navbarVisible } from '$lib/stores';
+	import { navbarVisible, plausible } from '$lib/stores';
 	import ShowEndScreen from '$lib/play/end.svelte';
 
 	// Exports
@@ -66,7 +66,7 @@
 		console.log('joined_game', data);
 		gameData = JSON.parse(data);
 		// eslint-disable-next-line no-undef
-		plausible('Joined Game', { props: { quiz_id: gameData.quiz_id } });
+		plausible.trackEvent('Joined Game', { props: { quiz_id: gameData.quiz_id } });
 	});
 
 	socket.on('game_not_found', () => {
diff --git a/frontend/src/routes/view/[quiz_id].svelte b/frontend/src/routes/view/[quiz_id].svelte
index 5d30ad6..0596e94 100644
--- a/frontend/src/routes/view/[quiz_id].svelte
+++ b/frontend/src/routes/view/[quiz_id].svelte
@@ -28,6 +28,7 @@
 	import { createTippy } from 'svelte-tippy';
 	import 'tippy.js/animations/perspective-subtle.css';
 	import 'tippy.js/dist/tippy.css';
+	import { plausible } from '$lib/stores';
 
 	const tippy = createTippy({
 		arrow: true,
@@ -79,7 +80,7 @@
 		}
 		const data = await res.json();
 		// eslint-disable-next-line no-undef
-		plausible('Started Game', { props: { quiz_id: id } });
+		plausible.trackEvent('Started Game', { props: { quiz_id: id } });
 		window.location.replace(`/admin?token=${data.game_id}&pin=${data.game_pin}&connect=1`);
 	};
 </script>