error page lole

src/app.d.ts

@@ -42,6 +42,7 @@ declare global {
 			posts?: Array<PostsObject>;
 			discord: Discord;
 			lastfm: LastFM;
+			counter: number;
 		}
 		// interface PageState {}
 		// interface Platform {}

src/lib/components/Footer.svelte

@@ -1,21 +1,31 @@
 <script>
+	import { page } from '$app/stores';
+
 	import Eye from './Icons/Eye.svelte';
 	import Svelte from './Icons/Svelte.svelte';
 	import TailwindCSS from './Icons/TailwindCSS.svelte';
+	import Heart from './Icons/Heart.svelte';
 </script>
 
 <div class="flex py-2 w-full h-full shadow-lg bg-gray-500/10">
 	<div class="container flex">
-		<div class="flex flex-col my-auto mr-auto text-sm text-neutral-500">
+		<div class="flex flex-col flex-1 my-auto text-sm text-neutral-500">
 			<p>cirroskais.xyz ― cirro's website</p>
 			<div class="flex space-x-0.5">
 				<div class="my-auto w-5 h-5 font-bold">
 					<Eye></Eye>
 				</div>
-				<p>This page has been viewed <span class="font-bold">x</span> times.</p>
+				<p>
+					This website has been viewed <span class="font-bold">{$page.data.counter}</span> times.
+				</p>
 			</div>
 		</div>
-		<div class="flex flex-col my-auto ml-auto text-sm text-neutral-500">
+		<div class="flex flex-col flex-1 my-auto text-sm text-neutral-500">
+			<div class="mx-auto w-5 h-5 hover:text-[#c4bef3] transition-colors">
+				<Heart></Heart>
+			</div>
+		</div>
+		<div class="flex flex-col flex-1 my-auto text-sm text-neutral-500">
 			<div class="flex ml-auto space-x-1.5">
 				<p>Built with</p>
 				<a

src/lib/components/Icons/Heart.svelte

@@ -0,0 +1,13 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class="lucide lucide-heart"
+	><path
+		d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"
+	/></svg
+>

src/lib/server/counter.js

@@ -0,0 +1,9 @@
+let counter = 0;
+
+export function get() {
+	return counter;
+}
+
+export function inc() {
+	counter++;
+}

src/routes/+error.svelte

@@ -0,0 +1,13 @@
+<script>
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+	import { onMount } from 'svelte';
+
+	onMount(() => {
+		goto('/');
+	});
+</script>
+
+<svelte:head>
+	<title>{$page.data.discord?.username}/error</title>
+</svelte:head>

src/routes/+layout.server.js

@@ -1,10 +1,14 @@
+import { get, inc } from '$lib/server/counter';
 import discord from '$lib/server/discord';
 import lastfm from '$lib/server/lastfm';
 
 /** @type {import("./$types").LayoutServerLoad} */
 export async function load() {
+	inc();
+
 	return {
 		discord: await discord(),
-		lastfm: await lastfm()
+		lastfm: await lastfm(),
+		counter: get()
 	};
 }