From e823d76cbc8ce2f269177690160b5ddc1dc20436 Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Sat, 28 Sep 2024 00:27:15 -0700
Subject: [PATCH] feat: Page transitions

---
 src/routes/+layout.svelte        | 18 +++++++++++++-----
 src/routes/+layout.ts            |  6 ++++++
 src/routes/PageTransition.svelte | 17 +++++++++++++++++
 3 files changed, 36 insertions(+), 5 deletions(-)
 create mode 100644 src/routes/PageTransition.svelte

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f152ced..45c2981 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,6 +3,9 @@
 	import { page } from '$app/stores';
 	import Footer from "./Footer.svelte";
 	import Navbar from "./Navbar.svelte";
+	import PageTransition from "./PageTransition.svelte";
+
+	export let data : { url: string };
 </script>
 
 <!-- Homepage has its own navbar with animations -->
@@ -12,13 +15,18 @@
 			<Navbar />
 			<slot name="header" />
 		</div>
-		<div id="content">
-			<slot />
+		<main>
+			<PageTransition url={data.url}>
+				<slot />
+			</PageTransition>
 			<Footer />
-		</div>
+		</main>
 	</div>
 {:else}
-	<slot />
+	<!-- On the home page -->
+	<PageTransition url={data.url}>
+		<slot />
+	</PageTransition>
 	<Footer />
 {/if}
 
@@ -97,7 +105,7 @@
 			gap: 20px;
 		}
 	}
-	#content {
+	main {
 		width: min(100vw, max(50vw, 100vh));
 		grid-area: content;
 	}
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index 522d7b2..3bf2ff0 100644
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -2,3 +2,9 @@ export const prerender = true;
 
 // Prevent page 404 on refresh
 export const trailingSlash = 'always';
+
+export async function load({ url }) {
+	return {
+		url: url.pathname
+	}
+}
diff --git a/src/routes/PageTransition.svelte b/src/routes/PageTransition.svelte
new file mode 100644
index 0000000..60df1d9
--- /dev/null
+++ b/src/routes/PageTransition.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition'
+
+	export let url: string
+</script>
+
+{#key url}
+	<div class="transition" in:fade>
+		<slot />
+	</div>
+{/key}
+
+<style>
+	.transition {
+		height: 100%;
+	}
+</style>