From 91837a207a4523080ff4122ba74679b21f28e11c Mon Sep 17 00:00:00 2001
From: cirroskais <cirroskais@madhouselabs.net>
Date: Sat, 20 Apr 2024 22:52:52 -0400
Subject: [PATCH] error page lole

---
 src/app.d.ts                          |  1 +
 src/lib/components/Footer.svelte      | 16 +++++++++++++---
 src/lib/components/Icons/Heart.svelte | 13 +++++++++++++
 src/lib/server/counter.js             |  9 +++++++++
 src/routes/+error.svelte              | 13 +++++++++++++
 src/routes/+layout.server.js          |  6 +++++-
 6 files changed, 54 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/components/Icons/Heart.svelte
 create mode 100644 src/lib/server/counter.js
 create mode 100644 src/routes/+error.svelte

diff --git a/src/app.d.ts b/src/app.d.ts
index 0767a88..bbf365d 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -42,6 +42,7 @@ declare global {
 			posts?: Array<PostsObject>;
 			discord: Discord;
 			lastfm: LastFM;
+			counter: number;
 		}
 		// interface PageState {}
 		// interface Platform {}
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 5354fe7..f7bc8a7 100644
--- a/src/lib/components/Footer.svelte
+++ b/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
diff --git a/src/lib/components/Icons/Heart.svelte b/src/lib/components/Icons/Heart.svelte
new file mode 100644
index 0000000..33b5c6f
--- /dev/null
+++ b/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
+>
diff --git a/src/lib/server/counter.js b/src/lib/server/counter.js
new file mode 100644
index 0000000..113f6c4
--- /dev/null
+++ b/src/lib/server/counter.js
@@ -0,0 +1,9 @@
+let counter = 0;
+
+export function get() {
+	return counter;
+}
+
+export function inc() {
+	counter++;
+}
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
new file mode 100644
index 0000000..461f9db
--- /dev/null
+++ b/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>
diff --git a/src/routes/+layout.server.js b/src/routes/+layout.server.js
index 77b3187..f8abc6c 100644
--- a/src/routes/+layout.server.js
+++ b/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()
 	};
 }