From 14d77b2d2555494a73b91350c142bf9df28ae9f6 Mon Sep 17 00:00:00 2001
From: Lewin Kelly <heli@odex.cf>
Date: Sun, 30 Jul 2023 23:58:34 +0100
Subject: [PATCH] Add fade transitions for many elements, using same system as
 Mercury

---
 src/app.d.ts                              |  5 +++++
 src/lib/fade.ts                           | 10 ++++++++++
 src/routes/+page.svx                      |  2 +-
 src/routes/about/+page.md                 |  2 +-
 src/routes/blog/+page.svelte              |  3 ++-
 src/routes/post/[post]/+page.svelte       |  2 +-
 src/routes/reviews/+page.svelte           |  3 ++-
 src/routes/revival/[revival]/+page.svelte |  2 +-
 src/routes/revivals/+page.svelte          |  6 ++++--
 svelte.config.js                          |  5 ++++-
 10 files changed, 31 insertions(+), 9 deletions(-)
 create mode 100644 src/lib/fade.ts

diff --git a/src/app.d.ts b/src/app.d.ts
index 3ba48af..4f7508c 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -7,6 +7,11 @@ declare global {
 		// interface PageData {}
 		// interface Platform {}
 	}
+
+	// sveltekit-autoimport types
+
+	declare const fade: typeof import("$lib/fade").default
+
 	declare const Footer: typeof import("$lib/components/Footer.svelte").default
 	declare const Navbar: typeof import("$lib/components/Navbar.svelte").default
 	declare const Stars: typeof import("$lib/components/Stars.svelte").default
diff --git a/src/lib/fade.ts b/src/lib/fade.ts
new file mode 100644
index 0000000..990f6a2
--- /dev/null
+++ b/src/lib/fade.ts
@@ -0,0 +1,10 @@
+// Builds on the Svelte fade function to allow for easier delays for 
+// staggered animations, taken directly from Mercury
+
+import { fade } from "svelte/transition"
+
+export default (node: HTMLElement, props: any = { duration: 300 }) => {
+	if (props.num && props.total)
+		props.delay = (props.num * 150) / Math.min(props.total, props?.max || 6)
+	return fade(node, props)
+}
diff --git a/src/routes/+page.svx b/src/routes/+page.svx
index fa11625..ab8bde7 100644
--- a/src/routes/+page.svx
+++ b/src/routes/+page.svx
@@ -7,7 +7,7 @@
 # Revival Archive
 ### a [Mercury](https://banland.xyz) project
 
-<div class="content">
+<div in:fade|global class="content">
 Welcome to the Revival Archive, a website dedicated to keeping track of active/defunct old brickbuilding private servers.
 
 Check out our [blog posts](/blog), [reviews](/reviews) and most importantly, the [revival index](/revivals).
diff --git a/src/routes/about/+page.md b/src/routes/about/+page.md
index f59ba1c..fe4bb58 100644
--- a/src/routes/about/+page.md
+++ b/src/routes/about/+page.md
@@ -6,7 +6,7 @@
 
 # About
 
-<div class="content">
+<div in:fade|global class="content">
 <ins>The Revival Archive is dedicated to keeping track of active and defunct old brickbuilding private servers.</ins>
 
 We also review revivals on specific features such as:
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index cfd2914..581b1f9 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -14,8 +14,9 @@
 
 <h1>Blog Posts</h1>
 
-{#each posts as post}
+{#each posts as post, num}
 	<a
+		in:fade|global={{ num, total: posts.length }}
 		href="/post/{post.path}"
 		class="txt @light:text-dark hover:text-#ccc
 		@light:hover:text-#555 bg-a rounded-3 box-border
diff --git a/src/routes/post/[post]/+page.svelte b/src/routes/post/[post]/+page.svelte
index 5838f82..49f4f55 100644
--- a/src/routes/post/[post]/+page.svelte
+++ b/src/routes/post/[post]/+page.svelte
@@ -32,7 +32,7 @@
 
 				<hr class="mb-4 mt-3" />
 
-				<div class="content pt-0.01 text-justify">
+				<div in:fade|global class="content pt-0.01 text-justify">
 					<svelte:component this={data.content} />
 				</div>
 			</div>
diff --git a/src/routes/reviews/+page.svelte b/src/routes/reviews/+page.svelte
index ba1582c..aa7d0ca 100644
--- a/src/routes/reviews/+page.svelte
+++ b/src/routes/reviews/+page.svelte
@@ -17,8 +17,9 @@
 
 <h1>Reviews</h1>
 
-{#each reviews as review}
+{#each reviews as review, num}
 	<a
+		in:fade|global={{ num, total: reviews.length }}
 		href="/revival/{review.path}"
 		class="txt @light:text-dark hover:text-#ccc
 		@light:hover:text-#555 bg-a rounded-3 box-border
diff --git a/src/routes/revival/[revival]/+page.svelte b/src/routes/revival/[revival]/+page.svelte
index 3c960b0..ae7e0f9 100644
--- a/src/routes/revival/[revival]/+page.svelte
+++ b/src/routes/revival/[revival]/+page.svelte
@@ -46,7 +46,7 @@
 				<hr class="mb-4 mt-3" />
 
 				{#if data.rating}
-					<div class="content pt-0.01 text-justify">
+					<div in:fade|global class="content pt-0.01 text-justify">
 						<div class="post mb-10">
 							<svelte:component this={data.content} />
 						</div>
diff --git a/src/routes/revivals/+page.svelte b/src/routes/revivals/+page.svelte
index 9d26d5d..6d1f0f8 100644
--- a/src/routes/revivals/+page.svelte
+++ b/src/routes/revivals/+page.svelte
@@ -35,10 +35,12 @@
 
 {#if revivals.length > 0}
 	<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-		{#each revivals as revival}
+		{#each revivals as revival, num}
 			<div
+				in:fade|global={{ num, total: revivals.length }}
 				class="txt bg-#1f1c1d @light:bg-white rounded-2
-			@light:text-black card box-border flex flex-col p-5 text-white transition hover:shadow-xl">
+			@light:text-black card box-border flex flex-col p-5 text-white
+				transition hover:shadow-xl">
 				<div class:opacity-50={revival.defunct} class="flex">
 					<div>
 						<div class="flex flex-wrap">
diff --git a/svelte.config.js b/svelte.config.js
index 06aac9b..db59dee 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -16,7 +16,10 @@ export default {
 		}),
 		autoImport({
 			components: ["./src/lib/components"],
-			flat: true,
+			mapping: {
+				fade: 'import fade from "$lib/fade"',
+			},
+      		include: ["**/*.svelte", "**/*.md", "**/*.svx"],
 		}),
 		mdsvex({
 			extensions: [".svelte.md", ".md", ".svx"],