implemented the analytics from blalange.org

frontend/package.json

@@ -39,6 +39,7 @@
 		"@sveltejs/adapter-node": "^4.0.1",
 		"axios": "^1.6.5",
 		"mime": "^4.0.1",
+		"pocketbase": "^0.21.2",
 		"pretty-bytes": "^6.1.1",
 		"svelte-dnd-action": "^0.9.40"
 	}

frontend/src/lib/analytics.js

@@ -0,0 +1,71 @@
+import PocketBase from 'pocketbase';
+import { getSessionId } from "./session";
+import { dbEndpoint } from './conf';
+
+let pb = new PocketBase(dbEndpoint);
+
+let lastValues = {
+	userAgent: typeof window !== 'undefined' ? '' : '',
+	language: typeof window !== 'undefined' ? '' : '',
+	url: typeof window !== 'undefined' ? '' : ''
+};
+
+let ip = '';
+
+export { startAnalyticsMonitoring };
+
+async function collect2() {
+	if (typeof window === 'undefined') return; // Exit if not in a browser environment
+
+	const userAgent = navigator.userAgent;
+	const language = navigator.language;
+	const unix = new Date().getTime();
+	const url = window.location.href;
+	const screenWidth = window.screen.width;
+	const screenHeight = window.screen.height;
+	const networkInfo = navigator.connection ? navigator.connection.type : 'unknown';
+	const referrer = document.referrer;
+
+	if (ip == '') {
+		ip = await fetch('https://blalange.org/api/ip').then((res) => res.text());
+	}
+
+	if (
+		userAgent !== lastValues.userAgent ||
+		language !== lastValues.language ||
+		url !== lastValues.url
+	) {
+		lastValues = { userAgent, language, url };
+
+		return await pb.collection('kf_analytics').create({
+			useragent: userAgent,
+			language: language,
+			unix: unix,
+			url: url,
+			session: getSessionId(),
+			ip: ip,
+			width: screenWidth,
+			height: screenHeight,
+			network: networkInfo,
+			referrer: referrer
+		});
+	} else {
+		console.log('Collect2: Nothing has changed, not running.');
+	}
+}
+
+function startAnalyticsMonitoring() {
+	if (typeof window === 'undefined') return; // Exit if not in a browser environment
+
+	// Set up MutationObserver to watch for changes in the document
+	const observer = new MutationObserver(async () => {
+		await collect2();
+	});
+
+	observer.observe(document, { childList: true, subtree: true });
+
+	// Set up interval to check for changes in navigator.userAgent and navigator.language
+	setInterval(async () => {
+		await collect2();
+	}, 1000); // Check every second
+}

frontend/src/lib/conf.js

@@ -24,4 +24,8 @@ export const loadEndpoints = [ // Used in the load balancer
         lat: '59.2083',
         lon: '10.9484'
     }
-]
+]
+
+// Stuff you probably don't need to (or should) change
+
+export const dbEndpoint = 'https://db.080609.xyz';

frontend/src/lib/session.js

@@ -0,0 +1,20 @@
+export function getSessionId() {  
+    // Check if a session ID already exists in local storage
+    let sessionId = localStorage.getItem('sessionId');
+
+    // If no session ID exists, generate a new one and store it
+    if (!sessionId) {
+        console.log("No session ID found. Generating a new one.");
+        sessionId = generateUniqueId();
+        localStorage.setItem('sessionId', sessionId);
+    } else {
+        console.log("Existing session ID found");
+    }
+
+    return sessionId;
+}
+
+function generateUniqueId() {
+    // Generate a unique ID using a combination of Date.now() and Math.random()
+    return 'session-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
+}

frontend/src/routes/+layout.svelte

@@ -1,7 +1,8 @@
 <script>
 	import { writable } from 'svelte/store';
 	import { darkMode } from '$lib/dark.js';
-  import { DollarSolid } from 'flowbite-svelte-icons';
+	import { startAnalyticsMonitoring } from "$lib/analytics.js";
+	import { onMount } from 'svelte';
 	import '../app.css';
 
 	const currentClass = writable('mocha'); // Default class
@@ -11,6 +12,10 @@
 	function toggleClass() {
 		currentClass.update((c) => (c === 'mocha' ? 'latte' : 'mocha'));
 	}
+
+	onMount(() => {
+		startAnalyticsMonitoring();
+	});
 </script>
 
 <div class="bg-yellow-300 text-center p-2">