Version Info in Footer; Various formatting fixes; Removed WS debugging; Removed Gitlab from Services

src/routes/+layout.svelte

@@ -5,6 +5,7 @@
 	import Header from './Header.svelte';
 	import { socketStore } from '$lib/stores/socketStore';
 	import { beforeNavigate } from '$app/navigation';
+	import Footer from "./Footer.svelte";
 
 	$effect(() => {
 		beforeNavigate((navigation) => {
@@ -21,6 +22,8 @@
 
 <Header />
 
-<div class="h-full pt-16">
+<div class="h-full pt-16 pb-8">
 	<slot />
 </div>
+
+<Footer />

src/routes/+page.svelte

@@ -9,9 +9,9 @@
 	<meta name="description" content="Landing Page for neshweb.net" />
 </svelte:head>
 
-<div class="flex max-h-full flex-row justify-center justify-around gap-4 overflow-auto p-8">
+<div class="flex max-h-full flex-row flex-wrap justify-center justify-around gap-4 overflow-auto p-8">
-	<div class="flex flex-1 flex-col items-center">
+	<div class="flex flex-1 flex-col w-[22rem] items-center">
-		<div class="flex flex-col gap-y-2 rounded-md border bg-black/55 p-4 backdrop-blur-sm">
+		<div class="flex flex-col gap-y-2 rounded-xl border bg-black/55 p-4 backdrop-blur-sm">
 			<h1 class="text-center text-2xl">Home Page</h1>
 			<p>
 				I'm not sure what to put here quite yet, maybe I'll think of something eventually. In the
@@ -20,7 +20,7 @@
 		</div>
 	</div>
 	<div
-		class="flex w-[22rem] flex-col items-center gap-y-1 overflow-auto rounded-md border bg-black/55 py-1 backdrop-blur-sm"
+		class="flex w-[22rem] flex-col items-center gap-y-1 overflow-auto rounded-xl border bg-black/55 py-1 backdrop-blur-sm"
 	>
 		<p class="font-bold">Fediverse Accounts</p>
 		<Separator class="max-w-80" />

src/routes/Footer.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    import { version } from '$app/environment';
+</script>
+
+<div class="absolute bottom-0 flex z-50 h-8 w-full flex-row items-center  gap-3 border-t bg-black/40 backdrop-blur-sm">
+    <p class="px-4">
+        Version:
+        <a
+            href="https://forgejo.neshweb.net/Neshweb-Sites/main-site/releases/tag/{version}"
+            class="hover:underline text-secondary"
+        >
+            {version}
+        </a>
+    </p>
+</div>

src/routes/Header.svelte

@@ -6,9 +6,9 @@
 </script>
 
 <ul
-	class="absolute z-50 flex h-16 w-full flex-row items-center justify-center gap-3 border-b bg-black/40 backdrop-blur-sm"
+	class="absolute z-50 flex h-16 w-full flex-row overflow-x-auto items-center gap-3 border-b bg-black/40 backdrop-blur-sm"
 >
-	<li>
+	<li class="ml-auto">
 		<Button
 			variant="ghost"
 			href="/"
@@ -37,7 +37,7 @@
 			Services
 		</Button>
 	</li>
-	<li>
+	<li class="mr-auto">
 		<Button
 			variant="ghost"
 			href="/about"

src/routes/about/+page.svelte

@@ -1,7 +1,3 @@
-<script lang="ts">
-	import { version } from '$app/environment';
-</script>
-
 <svelte:head>
 	<title>About</title>
 	<meta name="description" content="Information about this Website" />
@@ -12,13 +8,4 @@
 		This is just a small Website I built to organize all of the Services I am self-hosting. Maybe
 		I'll eventually add something actually useful to the site but until then this is all you'll get.
 	</p>
-	<p>
-		Version:
-		<a
-			href="https://forgejo.neshweb.net/Neshweb-Sites/main-site/releases/tag/{version}"
-			class="hover:underline"
-		>
-			{version}
-		</a>
-	</p>
 </div>

src/routes/servers/+page.svelte

@@ -22,19 +22,15 @@
 
 	let monitorList = $state($uptimeStore);
 
-	console.log(monitorList);
-
 	let socket = $socketStore;
 
 	$effect(() => {
 		if (token) {
 			if (!socket.connected) {
 				socket.connect();
-			} else {
-				console.log('already connected');
 			}
+
 			socket.on('connect', () => {
-				console.log('logging in');
 				socket.emit('loginByToken', token, () => {});
 			});
 

src/routes/services/+page.svelte

@@ -29,15 +29,13 @@
 		if (token) {
 			if (!socket.connected) {
 				socket.connect();
-			} else {
-				console.log('connected');
 			}
+
 			socket.on('connect', () => {
-				console.log('login');
 				socket.emit('loginByToken', token, () => {});
 			});
 
-			socket.on('heartbeatList', (_: string, data) => {
+			socket.on('heartbeatList', (_, data) => {
 				let recent = data[data.length - 1];
 				let monitor: Heartbeat = {
 					monitorID: recent.monitor_id,
@@ -89,7 +87,7 @@
 	<meta name="description" content="Overview of Services running on neshweb.net" />
 </svelte:head>
 
-<div class="flex max-h-full flex-row flex-wrap justify-center gap-10 overflow-auto p-8 pt-24">
+<div class="flex max-h-full flex-row flex-wrap justify-center gap-10 overflow-auto p-8">
 	{#each services as service}
 		<ServiceCard {service} {icons} monitor={monitorList.get(service.id)} />
 	{/each}

static/data/services.json

@@ -82,15 +82,6 @@
 		"warn": "Note: Registration only via Admin",
 		"id": 10
 	},
-	{
-		"name": "Gitlab",
-		"icon": "/assets/icons/gitlab-logo",
-		"iconType": "svg",
-		"href": "https://gitlab.neshweb.net/",
-		"desc": "Self-hosted Git Service",
-		"warn": "Note: Registration only via Admin",
-		"id": 2
-	},
 	{
 		"name": "Forgejo",
 		"icon": "/assets/icons/forgejo-logo",