From 6e723aadf6de45a79b4ef64d288ea275628232c5 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Thu, 15 Dec 2022 14:59:56 -0600
Subject: start updating to sveltekit v1

---
 package.json                                      |   86 +-
 src/app.html                                      |   27 +-
 src/hooks.ts                                      |    2 +-
 src/lib/AuctionPriceScatterplot.svelte            |    2 +-
 src/lib/BackgroundImage.svelte                    |    2 +-
 src/lib/Collapsible.svelte                        |    2 +-
 src/lib/layout/Loader.svelte                      |    2 +-
 src/lib/minecraft/inventory.ts                    |    2 +-
 src/params/username.ts                            |    5 +
 src/routes/+error.svelte                          |   43 +
 src/routes/+layout.svelte                         |   10 +
 src/routes/+page.svelte                           |  128 ++
 src/routes/+page.ts                               |    7 +
 src/routes/[player=username]/+page.ts             |   11 +
 src/routes/[player].ts                            |   14 -
 src/routes/__error.svelte                         |   53 -
 src/routes/__layout.svelte                        |   10 -
 src/routes/auctionprices.svelte                   |  213 ---
 src/routes/auctionprices/+page.svelte             |  198 +++
 src/routes/auctionprices/+page.ts                 |   13 +
 src/routes/chat.svelte                            |   85 --
 src/routes/chat/+page.svelte                      |   85 ++
 src/routes/election.svelte                        |  257 ----
 src/routes/election/+page.svelte                  |  257 ++++
 src/routes/index.svelte                           |  138 --
 src/routes/items.svelte                           |  216 ---
 src/routes/items/+page.svelte                     |  216 +++
 src/routes/leaderboard/+page.ts                   |   10 +
 src/routes/leaderboard/[name].ts                  |   12 -
 src/routes/leaderboard/[name]/+page.ts            |   12 +
 src/routes/leaderboard/index.ts                   |   11 -
 src/routes/leaderboards/+page.svelte              |   40 +
 src/routes/leaderboards/+page.ts                  |    6 +
 src/routes/leaderboards/[name].svelte             |  108 --
 src/routes/leaderboards/[name]/+page.svelte       |   89 ++
 src/routes/leaderboards/[name]/+page.ts           |   16 +
 src/routes/leaderboards/index.svelte              |   55 -
 src/routes/loggedin.ts                            |   37 -
 src/routes/loggedin/+page.ts                      |   37 +
 src/routes/login.ts                               |   36 -
 src/routes/login/+page.ts                         |   36 +
 src/routes/logout.ts                              |   28 -
 src/routes/logout/+page.ts                        |   28 +
 src/routes/player/+page.server.ts                 |   16 +
 src/routes/player/[player]/+page.svelte           |  135 ++
 src/routes/player/[player]/+page.ts               |   24 +
 src/routes/player/[player]/[profile].svelte       |  434 ------
 src/routes/player/[player]/[profile]/+page.svelte |  383 +++++
 src/routes/player/[player]/[profile]/+page.ts     |   48 +
 src/routes/player/[player]/index.svelte           |  166 ---
 src/routes/player/index.ts                        |   14 -
 src/routes/profile/index.svelte                   |    2 +-
 src/routes/verify.svelte                          |   66 -
 src/routes/verify.ts                              |   75 -
 src/routes/verify/+page.server.ts                 |   75 +
 src/routes/verify/+page.svelte                    |   66 +
 svelte.config.js                                  |   41 -
 tsconfig.json                                     |   19 +-
 vite.config.js                                    |   28 +
 yarn.lock                                         | 1550 ++++++++++++++-------
 60 files changed, 3123 insertions(+), 2664 deletions(-)
 create mode 100644 src/params/username.ts
 create mode 100644 src/routes/+error.svelte
 create mode 100644 src/routes/+layout.svelte
 create mode 100644 src/routes/+page.svelte
 create mode 100644 src/routes/+page.ts
 create mode 100644 src/routes/[player=username]/+page.ts
 delete mode 100644 src/routes/[player].ts
 delete mode 100644 src/routes/__error.svelte
 delete mode 100644 src/routes/__layout.svelte
 delete mode 100644 src/routes/auctionprices.svelte
 create mode 100644 src/routes/auctionprices/+page.svelte
 create mode 100644 src/routes/auctionprices/+page.ts
 delete mode 100644 src/routes/chat.svelte
 create mode 100644 src/routes/chat/+page.svelte
 delete mode 100644 src/routes/election.svelte
 create mode 100644 src/routes/election/+page.svelte
 delete mode 100644 src/routes/index.svelte
 delete mode 100644 src/routes/items.svelte
 create mode 100644 src/routes/items/+page.svelte
 create mode 100644 src/routes/leaderboard/+page.ts
 delete mode 100644 src/routes/leaderboard/[name].ts
 create mode 100644 src/routes/leaderboard/[name]/+page.ts
 delete mode 100644 src/routes/leaderboard/index.ts
 create mode 100644 src/routes/leaderboards/+page.svelte
 create mode 100644 src/routes/leaderboards/+page.ts
 delete mode 100644 src/routes/leaderboards/[name].svelte
 create mode 100644 src/routes/leaderboards/[name]/+page.svelte
 create mode 100644 src/routes/leaderboards/[name]/+page.ts
 delete mode 100644 src/routes/leaderboards/index.svelte
 delete mode 100644 src/routes/loggedin.ts
 create mode 100644 src/routes/loggedin/+page.ts
 delete mode 100644 src/routes/login.ts
 create mode 100644 src/routes/login/+page.ts
 delete mode 100644 src/routes/logout.ts
 create mode 100644 src/routes/logout/+page.ts
 create mode 100644 src/routes/player/+page.server.ts
 create mode 100644 src/routes/player/[player]/+page.svelte
 create mode 100644 src/routes/player/[player]/+page.ts
 delete mode 100644 src/routes/player/[player]/[profile].svelte
 create mode 100644 src/routes/player/[player]/[profile]/+page.svelte
 create mode 100644 src/routes/player/[player]/[profile]/+page.ts
 delete mode 100644 src/routes/player/[player]/index.svelte
 delete mode 100644 src/routes/player/index.ts
 delete mode 100644 src/routes/verify.svelte
 delete mode 100644 src/routes/verify.ts
 create mode 100644 src/routes/verify/+page.server.ts
 create mode 100644 src/routes/verify/+page.svelte
 create mode 100644 vite.config.js

diff --git a/package.json b/package.json
index be57989..c296792 100644
--- a/package.json
+++ b/package.json
@@ -1,48 +1,42 @@
 {
-  "name": "skyblock-stats-svelte",
-  "version": "0.0.1",
-  "license": "MIT",
-  "scripts": {
-    "init": "node ./scripts/updateDonators.js && node ./scripts/updateBackgrounds.js && node ./scripts/updateRobots.js",
-    "dev": "svelte-kit dev",
-    "build": "yarn run init && svelte-kit build",
-    "package": "svelte-kit package",
-    "preview": "svelte-kit preview",
-    "check": "svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
-    "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
-  },
-  "devDependencies": {
-    "@squoosh/lib": "^0.4.0",
-    "@sveltejs/adapter-auto": "^1.0.0-next.24",
-    "@types/cookie": "^0.5.1",
-    "@typescript-eslint/eslint-plugin": "^5.10.1",
-    "@typescript-eslint/parser": "^5.10.1",
-    "eslint": "^8.15.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-svelte3": "^4.0.0",
-    "prettier": "^2.5.1",
-    "prettier-plugin-svelte": "^2.5.0",
-    "svelte-check": "^2.4.6",
-    "tslib": "^2.3.1",
-    "typescript": "~4.6.4",
-    "vite": "^2.8.6",
-    "vite-plugin-html": "^3.0.6"
-  },
-  "type": "module",
-  "dependencies": {
-    "@lukeed/uuid": "^2.0.0",
-    "@sveltejs/adapter-node": "^1.0.0-next.68",
-    "@sveltejs/adapter-static": "^1.0.0-next.28",
-    "@sveltejs/adapter-vercel": "^1.0.0-next.43",
-    "@sveltejs/kit": "^1.0.0-next.335",
-    "cookie": "^0.5.0",
-    "dotenv": "^16.0.0",
-    "skyblock-assets": "^2.0.11",
-    "svelte": "^3.48.0",
-    "svelte-preprocess": "^4.10.6",
-    "typed-hypixel-api": "^1.1.0"
-  },
-  "packageManager": "yarn@3.1.1"
+	"name": "skyblock-stats-svelte",
+	"version": "0.0.1",
+	"license": "MIT",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^1.0.0",
+		"@types/cookie": "^0.5.1",
+		"@typescript-eslint/eslint-plugin": "^5.46.1",
+		"@typescript-eslint/parser": "^5.46.1",
+		"eslint": "^8.29.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-svelte3": "^4.0.0",
+		"prettier": "^2.8.1",
+		"prettier-plugin-svelte": "^2.9.0",
+		"svelte-check": "^2.10.2",
+		"tslib": "^2.4.1",
+		"typescript": "^4.9.4",
+		"vite": "^4.0.1",
+		"vite-plugin-html": "^3.2.0"
+	},
+	"type": "module",
+	"dependencies": {
+		"@lukeed/uuid": "^2.0.0",
+		"@sveltejs/adapter-node": "^1.0.0",
+		"@sveltejs/adapter-static": "^1.0.0",
+		"@sveltejs/adapter-vercel": "^1.0.0",
+		"@sveltejs/kit": "^1.0.0",
+		"cookie": "^0.5.0",
+		"dotenv": "^16.0.3",
+		"skyblock-assets": "^2.0.11",
+		"squoosh": "^0.0.0",
+		"svelte": "^3.55.0",
+		"svelte-preprocess": "^5.0.0",
+		"typed-hypixel-api": "^1.8.0"
+	},
+	"packageManager": "yarn@3.1.1"
 }
diff --git a/src/app.html b/src/app.html
index e0a73a9..b9273a6 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,14 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-		<meta name="theme-color" content="#010101">
-		<meta property="og:site_name" content="Hypixel SkyBlock Stats">
-		<meta property="og:type" content="website"/>
-		%svelte.head%
-	</head>
-	<body>
-		%svelte.body%
-	</body>
-</html>
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#010101">
+	<meta property="og:site_name" content="Hypixel SkyBlock Stats">
+	<meta property="og:type" content="website" />
+	%sveltekit.head%
+</head>
+
+<body>
+	%sveltekit.body%
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/hooks.ts b/src/hooks.ts
index 3fa9299..457e8ae 100644
--- a/src/hooks.ts
+++ b/src/hooks.ts
@@ -1,5 +1,5 @@
 import cookie from 'cookie'
-import type { ExternalFetch, GetSession, Handle } from '@sveltejs/kit'
+import type { Handle } from '@sveltejs/kit'
 
 
 export const handle: Handle = async ({ event, resolve }) => {
diff --git a/src/lib/AuctionPriceScatterplot.svelte b/src/lib/AuctionPriceScatterplot.svelte
index da1aed2..17a09f1 100644
--- a/src/lib/AuctionPriceScatterplot.svelte
+++ b/src/lib/AuctionPriceScatterplot.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { browser } from '$app/env'
+	import { browser } from '$app/environment'
 
 	import type { ItemAuctionsSchema, SimpleAuctionSchema } from './APITypes'
 	import type { PreviewedAuctionData } from './utils'
diff --git a/src/lib/BackgroundImage.svelte b/src/lib/BackgroundImage.svelte
index 0b2f043..17d8705 100644
--- a/src/lib/BackgroundImage.svelte
+++ b/src/lib/BackgroundImage.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onDestroy, onMount } from 'svelte'
-	import { browser } from '$app/env'
+	import { browser } from '$app/environment'
 
 	export let url: string
 	let styleHtml = `<style class="background-image-style">:root{--background:url(${url})}</style>`
diff --git a/src/lib/Collapsible.svelte b/src/lib/Collapsible.svelte
index a7b6105..68fee79 100644
--- a/src/lib/Collapsible.svelte
+++ b/src/lib/Collapsible.svelte
@@ -4,7 +4,7 @@
 	Collapsible content that works without JS but is enhanced by it.
  -->
 <script lang="ts">
-	import { browser } from '$app/env'
+	import { browser } from '$app/environment'
 	import { onMount } from 'svelte'
 	import { cleanId } from './utils'
 
diff --git a/src/lib/layout/Loader.svelte b/src/lib/layout/Loader.svelte
index 3884e55..dd04924 100644
--- a/src/lib/layout/Loader.svelte
+++ b/src/lib/layout/Loader.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { browser } from '$app/env'
+	import { browser } from '$app/environment'
 	import { navigating } from '$app/stores'
 
 	let progress = 0
diff --git a/src/lib/minecraft/inventory.ts b/src/lib/minecraft/inventory.ts
index 227ed0c..5bd79c2 100644
--- a/src/lib/minecraft/inventory.ts
+++ b/src/lib/minecraft/inventory.ts
@@ -1,6 +1,6 @@
 import * as skyblockAssets from 'skyblock-assets'
 import { vanilla } from '$lib/packs'
-import { browser } from '$app/env'
+import { browser } from '$app/environment'
 
 export interface Item {
     id?: string
diff --git a/src/params/username.ts b/src/params/username.ts
new file mode 100644
index 0000000..855481a
--- /dev/null
+++ b/src/params/username.ts
@@ -0,0 +1,5 @@
+import type { ParamMatcher } from '@sveltejs/kit'
+
+export const match = ((param) => {
+	return /^\w{2,16}$/.test(param)
+}) satisfies ParamMatcher
\ No newline at end of file
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
new file mode 100644
index 0000000..83b4407
--- /dev/null
+++ b/src/routes/+error.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import Header from '$lib/Header.svelte'
+	import Head from '$lib/Head.svelte'
+
+	import { page } from '$app/stores'
+
+	// sveltekit bug: types of error and status say they can be null but they can't
+	let error = $page.error!
+	let status = $page.status!
+</script>
+
+<Head title={error.message} />
+<Header />
+
+<main>
+	<div>
+		<h1>{status}</h1>
+		<p>{error.message}</p>
+		<a href="/" data-sveltekit-preload-data="hover">Home</a>
+	</div>
+</main>
+
+<style>
+	main {
+		height: calc(100% - 4rem);
+		/* vertical align */
+		display: grid;
+		align-items: center;
+		justify-content: center;
+	}
+
+	h1 {
+		font-size: 3em;
+		margin: 0;
+	}
+	p {
+		margin: 0;
+	}
+	a {
+		display: block;
+		margin-top: 0.5rem;
+	}
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 0000000..74e29b9
--- /dev/null
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import '../app.css'
+	import GlobalTooltip from '$lib/layout/GlobalTooltip.svelte'
+	import Loader from '$lib/layout/Loader.svelte'
+</script>
+
+<Loader />
+<GlobalTooltip />
+<nav />
+<slot />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
new file mode 100644
index 0000000..3c518fb
--- /dev/null
+++ b/src/routes/+page.svelte
@@ -0,0 +1,128 @@
+<script lang="ts">
+	import Username from '$lib/minecraft/Username.svelte'
+	import SearchUser from '$lib/SearchUser.svelte'
+	import donators from '../_donators.json'
+	import Head from '$lib/Head.svelte'
+	import Emoji from '$lib/Emoji.svelte'
+	import LoginButton from '$lib/LoginButton.svelte'
+	import type { PageData } from './$types'
+
+	export const hydrate = false
+
+	export let data: PageData
+	export let loggedIn: boolean = data.loggedIn
+</script>
+
+<svelte:head>
+	<title>SkyBlock Stats</title>
+</svelte:head>
+
+<Head
+	title="SkyBlock Stats"
+	description="Check SkyBlock stats, see leaderboards, mayors, and way more."
+/>
+<a class="github" href="https://github.com/skyblockstats/skyblock-stats">
+	<img src="/github-mark-light.png" alt="View source on GitHub" />
+</a>
+
+<main>
+	<LoginButton {loggedIn} />
+	<section class="title-section">
+		<h1>SkyBlock Stats</h1>
+		<SearchUser>
+			<button>View Profiles</button>
+		</SearchUser>
+	</section>
+
+	<hr style="margin: 25vh 0 2em 0" />
+
+	<section>
+		<h2>Other SkyBlock tools</h2>
+		<ul id="other-tools-list">
+			<li><a href="/auctionprices">Auction prices</a></li>
+			<li><a href="/leaderboards">Leaderboards</a></li>
+			<li><a>Bazaar (coming soon)</a></li>
+			<li><a href="/chat">Fake chat generator</a></li>
+			<li><a href="https://skyblock-npcs.matdoes.dev">NPC Skin Stealer</a></li>
+			<li><a href="/election">Mayor Election Status</a></li>
+			<li><a href="/items">Item List</a></li>
+		</ul>
+	</section>
+
+	<section id="donators">
+		<h2>Donators</h2>
+		<p>
+			Thank you to these people for
+			<a href="https://ko-fi.com/matdoesdev" target="_blank">donating</a>. <Emoji value="❤" />
+		</p>
+		<ul>
+			{#each donators as donator}
+				<li><Username player={donator} headType="2d" hyperlinkToProfile /></li>
+			{/each}
+		</ul>
+	</section>
+	<section>
+		<h2>Info</h2>
+		<p>Website made by <a href="https://matdoes.dev">mat</a>.</p>
+		<p>
+			Official hangout/support Discord:
+			<a href="//discord.gg/KtscNUnh4f">discord.gg/KtscNUnh4f</a>.
+		</p>
+		<p>
+			Resource packs: <a href="//furfsky.net">Furfsky Reborn</a> (default),
+			<a href="//packshq.com">PacksHQ</a>,
+			<a href="//hypixel.net/threads/2138599">Furfsky</a>,
+			<a href="//hypixel.net/threads/2239953">Ectoplasm</a>,
+			<a href="//hypixel.net/threads/3470904">RNBW</a>,
+			<a href="//hypixel.net/threads/4174260">Hypixel+</a>,
+			<a href="//hypixel.net/threads/3597207">Worlds and Beyond</a>.
+		</p>
+		<p>
+			Minecraft skin APIs: <a href="//mc-heads.net">mc-heads.net</a> for 3d renders and
+			<a href="//mc-crafatar.com">crafatar.com</a> for 2d heads.
+		</p>
+		<p>Emojis: <a href="//twemoji.twitter.com/">Twemoji</a>.</p>
+		<p>Font: <a href="//brailleinstitute.org/freefont">Atkinson Hyperlegible</a>.</p>
+		<p class="secret">Thank you to Duckie Cousin Gaming for the idea to add harp leaderboards.</p>
+	</section>
+</main>
+
+<style>
+	h1 {
+		text-align: center;
+	}
+
+	.title-section {
+		margin: 0 auto;
+		width: fit-content;
+	}
+
+	#donators p {
+		margin: 0;
+	}
+
+	li {
+		padding: 0.2em 0;
+	}
+
+	.github {
+		position: absolute;
+		top: 0.5rem;
+		left: 0.5rem;
+		opacity: 0.2;
+		transition: opacity 200ms;
+	}
+	.github:hover {
+		opacity: 0.9;
+	}
+	.github > img {
+		width: 2rem;
+	}
+
+	.secret {
+		color: var(--theme-main-background);
+		margin: 0;
+		font-size: 6pt;
+		margin-top: -0.5rem;
+	}
+</style>
diff --git a/src/routes/+page.ts b/src/routes/+page.ts
new file mode 100644
index 0000000..cd45f69
--- /dev/null
+++ b/src/routes/+page.ts
@@ -0,0 +1,7 @@
+import type { PageData } from './$types'
+
+export const load = (({ session }) => {
+	return {
+		loggedIn: session.sid !== undefined,
+	}
+}) satisfies PageData
diff --git a/src/routes/[player=username]/+page.ts b/src/routes/[player=username]/+page.ts
new file mode 100644
index 0000000..c846929
--- /dev/null
+++ b/src/routes/[player=username]/+page.ts
@@ -0,0 +1,11 @@
+import type { PageLoad } from './$types'
+
+
+export const get = (({ params }) => {
+	return {
+		status: 303,
+		headers: {
+			location: `/player/${params.player}`
+		}
+	}
+}) satisfies PageLoad
\ No newline at end of file
diff --git a/src/routes/[player].ts b/src/routes/[player].ts
deleted file mode 100644
index 3f79368..0000000
--- a/src/routes/[player].ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { ParamMatcher, RequestHandler } from '@sveltejs/kit'
-
-export const match: ParamMatcher = (param) => {
-	return /^\w{2,16}$/.test(param)
-}
-
-export const get: RequestHandler = async ({ params }) => {
-	return {
-		status: 303,
-		headers: {
-			location: `/player/${params.player}`
-		}
-	}
-}
\ No newline at end of file
diff --git a/src/routes/__error.svelte b/src/routes/__error.svelte
deleted file mode 100644
index 3057f19..0000000
--- a/src/routes/__error.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-<script lang="ts" context="module">
-	import type { Load } from '@sveltejs/kit'
-
-	export const load: Load = async ({ error, status }) => {
-		return {
-			props: {
-				error,
-				status,
-			},
-		}
-	}
-</script>
-
-<script lang="ts">
-	import Header from '$lib/Header.svelte'
-	import Head from '$lib/Head.svelte'
-
-	export let status: number
-	export let error: Error
-</script>
-
-<Head title={error.message} />
-<Header />
-
-<main>
-	<div>
-		<h1>{status}</h1>
-		<p>{error.message}</p>
-		<a href="/" sveltekit:prefetch>Home</a>
-	</div>
-</main>
-
-<style>
-	main {
-		height: calc(100% - 4rem);
-		/* vertical align */
-		display: grid;
-		align-items: center;
-		justify-content: center;
-	}
-
-	h1 {
-		font-size: 3em;
-		margin: 0;
-	}
-	p {
-		margin: 0;
-	}
-	a {
-		display: block;
-		margin-top: 0.5rem;
-	}
-</style>
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
deleted file mode 100644
index 74e29b9..0000000
--- a/src/routes/__layout.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts">
-	import '../app.css'
-	import GlobalTooltip from '$lib/layout/GlobalTooltip.svelte'
-	import Loader from '$lib/layout/Loader.svelte'
-</script>
-
-<Loader />
-<GlobalTooltip />
-<nav />
-<slot />
diff --git a/src/routes/auctionprices.svelte b/src/routes/auctionprices.svelte
deleted file mode 100644
index ac75c86..0000000
--- a/src/routes/auctionprices.svelte
+++ /dev/null
@@ -1,213 +0,0 @@
-<script lang="ts" context="module">
-	import type { Load } from '@sveltejs/kit'
-	import { fetchApi } from '$lib/api'
-
-	export const load: Load = async ({ params, fetch }) => {
-		const auctionItemsPromise = fetchApi(`auctionitems`, fetch).then(r => r.json())
-		const data = await fetchApi(`auctionprices`, fetch).then(r => r.json())
-		const auctionItems = await auctionItemsPromise
-
-		return {
-			props: {
-				data,
-				auctionItems,
-			},
-		}
-	}
-</script>
-
-<script lang="ts">
-	import Header from '$lib/Header.svelte'
-	import Head from '$lib/Head.svelte'
-	import { cleanId, removeFormattingCode, toTitleCase, type PreviewedAuctionData } from '$lib/utils'
-	import type { ItemAuctionsSchema } from '$lib/APITypes'
-	import AuctionPriceScatterplot from '$lib/AuctionPriceScatterplot.svelte'
-	import AuctionPreviewTooltip from '$lib/AuctionPreviewTooltip.svelte'
-	import { browser } from '$app/env'
-	import Item from '$lib/minecraft/Item.svelte'
-	import furfskyReborn from 'skyblock-assets/matchers/furfsky_reborn.json'
-
-	export let data: ItemAuctionsSchema[]
-	export let auctionItems: Record<string, { display: { name: string }; vanillaId?: string }>
-
-	let currentlyPreviewedAuction: PreviewedAuctionData | null = null
-
-	let query: string = ''
-
-	$: queryNormalized = query.toLowerCase()
-
-	let allMatchingItemIds: string[]
-	$: {
-		pageNumber = 0
-		allMatchingItemIds = Object.entries(auctionItems)
-			.filter(a => removeFormattingCode(a[1]?.display.name.toLowerCase()).includes(queryNormalized))
-			.map(a => a[0])
-	}
-	$: {
-		if (browser) fetchAndSetItems(allMatchingItemIds.slice(0, 100))
-	}
-
-	async function fetchAndSetItems(itemIds: string[]) {
-		const localQuery = query
-		const localData = await fetchItems(query.length > 0 ? itemIds : null)
-		// if the query hasn't changed, update the data
-		if (query === localQuery) data = localData
-	}
-	async function fetchItems(itemIds: null | string[]): Promise<ItemAuctionsSchema[]> {
-		let url = `auctionprices`
-		if (itemIds !== null) {
-			if (itemIds.length === 0) return []
-			url += `?items=${itemIds.join(',')}`
-		}
-		return await fetchApi(url, fetch).then(r => r.json())
-	}
-
-	let pageHeight = 0
-	$: {
-		pageHeight = 0
-	}
-
-	// 0 indexed
-	let pageNumber = 0
-	let loadingPage = false
-
-	async function checkScroll() {
-		if (loadingPage) return
-
-		let pageHeightTemp = window.scrollY + window.innerHeight
-		if (pageHeightTemp <= pageHeight) return
-		pageHeight = pageHeightTemp
-		if (pageHeight >= document.body.scrollHeight - 1000) {
-			loadingPage = true
-			pageNumber++
-			const itemIds = allMatchingItemIds.slice(pageNumber * 100, (pageNumber + 1) * 100)
-			if (itemIds.length > 0) {
-				const shownIds = data.map(d => d.id)
-				const items = (await fetchItems(itemIds)).filter(i => !shownIds.includes(i.id))
-				if (items.length > 0) data = [...data, ...items]
-			}
-			loadingPage = false
-		}
-	}
-
-	$: {
-		if (browser && !currentlyPreviewedAuction) {
-			for (const el of document.getElementsByClassName('selected-auction'))
-				el.classList.remove('selected-auction')
-		}
-	}
-</script>
-
-<Head
-	title="SkyBlock Auction Prices"
-	description="View how many coins every SkyBlock item costs in the auction house."
-/>
-<Header />
-
-<svelte:window on:scroll={checkScroll} />
-
-<AuctionPreviewTooltip bind:preview={currentlyPreviewedAuction} />
-
-<main>
-	<h1>SkyBlock Auction Prices</h1>
-	<div class="filter-items-settings">
-		<input type="text" id="filter-items-tier" placeholder="Search..." bind:value={query} />
-	</div>
-	<div class="item-list">
-		{#each data as item (item.id)}
-			{@const binAuctions = item.auctions.filter(i => i.bin)}
-			{@const normalAuctions = item.auctions.filter(i => !i.bin)}
-			{@const itemData = auctionItems[item.sbId]}
-			<div class="item-container">
-				{#if itemData && itemData.vanillaId}
-					<div class="item-slot-container">
-						<Item item={{ ...itemData, id: item.id }} pack={furfskyReborn} headSize={50} isslot />
-					</div>
-				{/if}
-				<h2>
-					{removeFormattingCode(
-						auctionItems[item.id]?.display.name ?? toTitleCase(cleanId(item.id.toLowerCase()))
-					)}
-				</h2>
-				<div class="auctions-info-text">
-					{#if binAuctions.length > 0}
-						<p>
-							Cheapest recent BIN: <b>
-								{binAuctions.reduce((a, b) => (a.coins < b.coins ? a : b)).coins.toLocaleString()} coins
-							</b>
-						</p>
-					{/if}
-					{#if normalAuctions.length > 0}
-						<p>
-							Cheapest recent auction: <b>
-								{normalAuctions
-									.reduce((a, b) => (a.coins < b.coins ? a : b))
-									.coins.toLocaleString()} coins
-							</b>
-						</p>
-					{/if}
-					{#if item.auctions.length >= 2}
-						<p>
-							Median:
-							<b>
-								{[...item.auctions]
-									.sort((a, b) => a.coins - b.coins)
-									[Math.floor(item.auctions.length / 2)].coins.toLocaleString()} coins
-							</b>
-						</p>
-						<p>
-							Volume:
-							<b>
-								{parseFloat(
-									(
-										(24 * 60 * 60) /
-										((Date.now() / 1000 - item.auctions[0].ts) / item.auctions.length)
-									).toPrecision(2)
-								).toLocaleString()}/day
-							</b>
-						</p>
-					{/if}
-				</div>
-				<div class="item-scatterplot">
-					<AuctionPriceScatterplot {item} bind:currentlyPreviewedAuction />
-				</div>
-			</div>
-		{/each}
-		{#if data.length === 0}
-			No results
-		{/if}
-	</div>
-</main>
-
-<style>
-	p {
-		margin: 0;
-	}
-	.item-list {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
-		grid-gap: 1em;
-		margin-top: 1em;
-	}
-	.item-container {
-		border: 1px solid rgba(255, 255, 255, 0.1);
-		background: rgba(0, 0, 0, 0.1);
-		padding: 0.75em;
-		border-radius: 1em;
-	}
-
-	.item-scatterplot {
-		margin-top: 1em;
-	}
-
-	.auctions-info-text {
-		color: var(--theme-darker-text);
-	}
-	.auctions-info-text b {
-		color: var(--theme-main-text);
-	}
-
-	.item-slot-container {
-		float: right;
-	}
-</style>
diff --git a/src/routes/auctionprices/+page.svelte b/src/routes/auctionprices/+page.svelte
new file mode 100644
index 0000000..844af04
--- /dev/null
+++ b/src/routes/auctionprices/+page.svelte
@@ -0,0 +1,198 @@
+<script lang="ts">
+	import Header from '$lib/Header.svelte'
+	import Head from '$lib/Head.svelte'
+	import { cleanId, removeFormattingCode, toTitleCase, type PreviewedAuctionData } from '$lib/utils'
+	import type { ItemAuctionsSchema } from '$lib/APITypes'
+	import AuctionPriceScatterplot from '$lib/AuctionPriceScatterplot.svelte'
+	import AuctionPreviewTooltip from '$lib/AuctionPreviewTooltip.svelte'
+	import { browser } from '$app/environment'
+	import Item from '$lib/minecraft/Item.svelte'
+	import furfskyReborn from 'skyblock-assets/matchers/furfsky_reborn.json'
+	import type { PageData } from './$types'
+	import { fetchApi } from '$lib/api'
+
+	export let data: PageData
+	let auctionPrices: ItemAuctionsSchema[] = data.prices
+	let auctionItems: Record<string, { display: { name: string }; vanillaId?: string }> = data.items
+
+	let currentlyPreviewedAuction: PreviewedAuctionData | null = null
+
+	let query: string = ''
+
+	$: queryNormalized = query.toLowerCase()
+
+	let allMatchingItemIds: string[]
+	$: {
+		pageNumber = 0
+		allMatchingItemIds = Object.entries(auctionItems)
+			.filter(a => removeFormattingCode(a[1]?.display.name.toLowerCase()).includes(queryNormalized))
+			.map(a => a[0])
+	}
+	$: {
+		if (browser) fetchAndSetItems(allMatchingItemIds.slice(0, 100))
+	}
+
+	async function fetchAndSetItems(itemIds: string[]) {
+		const localQuery = query
+		const localData = await fetchItems(query.length > 0 ? itemIds : null)
+		// if the query hasn't changed, update the data
+		if (query === localQuery) data = localData
+	}
+	async function fetchItems(itemIds: null | string[]): Promise<ItemAuctionsSchema[]> {
+		let url = `auctionprices`
+		if (itemIds !== null) {
+			if (itemIds.length === 0) return []
+			url += `?items=${itemIds.join(',')}`
+		}
+		return await fetchApi(url, fetch).then(r => r.json())
+	}
+
+	let pageHeight = 0
+	$: {
+		pageHeight = 0
+	}
+
+	// 0 indexed
+	let pageNumber = 0
+	let loadingPage = false
+
+	async function checkScroll() {
+		if (loadingPage) return
+
+		let pageHeightTemp = window.scrollY + window.innerHeight
+		if (pageHeightTemp <= pageHeight) return
+		pageHeight = pageHeightTemp
+		if (pageHeight >= document.body.scrollHeight - 1000) {
+			loadingPage = true
+			pageNumber++
+			const itemIds = allMatchingItemIds.slice(pageNumber * 100, (pageNumber + 1) * 100)
+			if (itemIds.length > 0) {
+				const shownIds = data.map(d => d.id)
+				const items = (await fetchItems(itemIds)).filter(i => !shownIds.includes(i.id))
+				if (items.length > 0) data = [...data, ...items]
+			}
+			loadingPage = false
+		}
+	}
+
+	$: {
+		if (browser && !currentlyPreviewedAuction) {
+			for (const el of document.getElementsByClassName('selected-auction'))
+				el.classList.remove('selected-auction')
+		}
+	}
+</script>
+
+<Head
+	title="SkyBlock Auction Prices"
+	description="View how many coins every SkyBlock item costs in the auction house."
+/>
+<Header />
+
+<svelte:window on:scroll={checkScroll} />
+
+<AuctionPreviewTooltip bind:preview={currentlyPreviewedAuction} />
+
+<main>
+	<h1>SkyBlock Auction Prices</h1>
+	<div class="filter-items-settings">
+		<input type="text" id="filter-items-tier" placeholder="Search..." bind:value={query} />
+	</div>
+	<div class="item-list">
+		{#each data as item (item.id)}
+			{@const binAuctions = item.auctions.filter(i => i.bin)}
+			{@const normalAuctions = item.auctions.filter(i => !i.bin)}
+			{@const itemData = auctionItems[item.sbId]}
+			<div class="item-container">
+				{#if itemData && itemData.vanillaId}
+					<div class="item-slot-container">
+						<Item item={{ ...itemData, id: item.id }} pack={furfskyReborn} headSize={50} isslot />
+					</div>
+				{/if}
+				<h2>
+					{removeFormattingCode(
+						auctionItems[item.id]?.display.name ?? toTitleCase(cleanId(item.id.toLowerCase()))
+					)}
+				</h2>
+				<div class="auctions-info-text">
+					{#if binAuctions.length > 0}
+						<p>
+							Cheapest recent BIN: <b>
+								{binAuctions.reduce((a, b) => (a.coins < b.coins ? a : b)).coins.toLocaleString()} coins
+							</b>
+						</p>
+					{/if}
+					{#if normalAuctions.length > 0}
+						<p>
+							Cheapest recent auction: <b>
+								{normalAuctions
+									.reduce((a, b) => (a.coins < b.coins ? a : b))
+									.coins.toLocaleString()} coins
+							</b>
+						</p>
+					{/if}
+					{#if item.auctions.length >= 2}
+						<p>
+							Median:
+							<b>
+								{[...item.auctions]
+									.sort((a, b) => a.coins - b.coins)
+									[Math.floor(item.auctions.length / 2)].coins.toLocaleString()} coins
+							</b>
+						</p>
+						<p>
+							Volume:
+							<b>
+								{parseFloat(
+									(
+										(24 * 60 * 60) /
+										((Date.now() / 1000 - item.auctions[0].ts) / item.auctions.length)
+									).toPrecision(2)
+								).toLocaleString()}/day
+							</b>
+						</p>
+					{/if}
+				</div>
+				<div class="item-scatterplot">
+					<AuctionPriceScatterplot {item} bind:currentlyPreviewedAuction />
+				</div>
+			</div>
+		{/each}
+		{#if data.length === 0}
+			No results
+		{/if}
+	</div>
+</main>
+
+<style>
+	p {
+		margin: 0;
+	}
+	.item-list {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
+		grid-gap: 1em;
+		margin-top: 1em;
+	}
+	.item-container {
+		border: 1px solid rgba(255, 255, 255, 0.1);
+		background: rgba(0, 0, 0, 0.1);
+		padding: 0.75em;
+		border-radius: 1em;
+	}
+
+	.item-scatterplot {
+		margin-top: 1em;
+	}
+
+	.auctions-info-text {
+		color: var(--theme-darker-text);
+	}
+	.auctions-info-text b {
+		color: var(--theme-main-text);
+	}
+
+	.item-slot-container {
+		float: right;
+	}
+</style>
diff --git a/src/routes/auctionprices/+page.ts b/src/routes/auctionprices/+page.ts
new file mode 100644
index 0000000..8166a3c
--- /dev/null
+++ b/src/routes/auctionprices/+page.ts
@@ -0,0 +1,13 @@
+import type { PageData } from './$types'
+import { fetchApi } from '$lib/api'
+
+export const load = (async ({ fetch }) => {
+	const auctionItemsPromise = fetchApi(`auctionitems`, fetch).then(r => r.json())
+	const prices = await fetchApi(`auctionprices`, fetch).then(r => r.json())
+	const items = await auctionItemsPromise
+
+	return {
+		prices,
+		items,
+	}
+}) satisfies PageData
diff --git a/src/routes/chat.svelte b/src/routes/chat.svelte
deleted file mode 100644
index df7aeee..0000000
--- a/src/routes/chat.svelte
+++ /dev/null
@@ -1,85 +0,0 @@
-<script lang="ts">
-	import Head from '$lib/Head.svelte'
-
-	import Header from '$lib/Header.svelte'
-
-	let data = ''
-	let ign = ''
-	let transparentBackground = false
-	let modeId: string
-
-	let generatedUrl = ''
-
-	$: modeUsesData = !['fr', 'f', 'fdeny', 'gdisband', 'pinvite'].includes(modeId)
-	$: modeUsesIgn = !['custom'].includes(modeId)
-
-	let imageDisplay: 'none' | 'block' = 'none'
-
-	function generateImage() {
-		let url = 'https://fake-chat.matdoes.dev/render.png?'
-		url = url + `m=${modeId}`
-		if (modeUsesIgn) url += `&u=${ign}`
-		if (modeUsesData) url += '&d=' + encodeURIComponent(data)
-		if (transparentBackground) url += '&t=1'
-
-		generatedUrl = url
-		imageDisplay = 'none'
-	}
-</script>
-
-<Head title="Hypixel Fake Chat Generator" />
-<Header />
-
-<main>
-	<h1>Hypixel Fake Chat Generator</h1>
-	<select id="modes" bind:value={modeId}>
-		<option value="chat">Public chat</option>
-		<option value="dm">Private message</option>
-		<option value="fr">Friend request</option>
-		<option value="f">Friend accept</option>
-		<option value="fdeny">Friend deny</option>
-		<option value="gchat">Guild chat</option>
-		<option value="gdisband">Guild disband</option>
-		<option value="pchat">Party chat</option>
-		<option value="pinvite">Party invite</option>
-		<option value="custom">Custom</option>
-	</select>
-	{#if modeUsesIgn}
-		<input id="ign" placeholder="Enter user" bind:value={ign} />
-	{/if}
-	{#if modeUsesData}
-		<input id="data" placeholder="Enter message" bind:value={data} />
-	{/if}
-	<label>
-		<input type="checkbox" id="transparent-background" bind:checked={transparentBackground} /> Transparent
-		background
-	</label>
-	<button id="generate" on:click={generateImage}>Generate image</button>
-	<!-- svelte-ignore a11y-missing-attribute -->
-	<img
-		src={generatedUrl}
-		id="outputImage"
-		style="display:{imageDisplay}"
-		on:load={() => (imageDisplay = 'block')}
-	/>
-</main>
-
-<style>
-	input {
-		border: 1px solid rgba(255, 255, 255, 0.2);
-	}
-	button {
-		background-color: #222;
-		border: 1px solid rgba(255, 255, 255, 0.2);
-		color: #aaa;
-	}
-	select,
-	input,
-	button {
-		display: block;
-		margin-bottom: 0.5em;
-	}
-	#transparent-background {
-		display: inline-block;
-	}
-</style>
diff --git a/src/routes/chat/+page.svelte b/src/routes/chat/+page.svelte
new file mode 100644
index 0000000..df7aeee
--- /dev/null
+++ b/src/routes/chat/+page.svelte
@@ -0,0 +1,85 @@
+<script lang="ts">
+	import Head from '$lib/Head.svelte'
+
+	import Header from '$lib/Header.svelte'
+
+	let data = ''
+	let ign = ''
+	let transparentBackground = false
+	let modeId: string
+
+	let generatedUrl = ''
+
+	$: modeUsesData = !['fr', 'f', 'fdeny', 'gdisband', 'pinvite'].includes(modeId)
+	$: modeUsesIgn = !['custom'].includes(modeId)
+
+	let imageDisplay: 'none' | 'block' = 'none'
+
+	function generateImage() {
+		let url = 'https://fake-chat.matdoes.dev/render.png?'
+		url = url + `m=${modeId}`
+		if (modeUsesIgn) url += `&u=${ign}`
+		if (modeUsesData) url += '&d=' + encodeURIComponent(data)
+		if (transparentBackground) url += '&t=1'
+
+		generatedUrl = url
+		imageDisplay = 'none'
+	}
+</script>
+
+<Head title="Hypixel Fake Chat Generator" />
+<Header />
+
+<main>
+	<h1>Hypixel Fake Chat Generator</h1>
+	<select id="modes" bind:value={modeId}>
+		<option value="chat">Public chat</option>
+		<option value="dm">Private message</option>
+		<option value="fr">Friend request</option>
+		<option value="f">Friend accept</option>
+		<option value="fdeny">Friend deny</option>
+		<option value="gchat">Guild chat</option>
+		<option value="gdisband">Guild disband</option>
+		<option value="pchat">Party chat</option>
+		<option value="pinvite">Party invite</option>
+		<option value="custom">Custom</option>
+	</select>
+	{#if modeUsesIgn}
+		<input id="ign" placeholder="Enter user" bind:value={ign} />
+	{/if}
+	{#if modeUsesData}
+		<input id="data" placeholder="Enter message" bind:value={data} />
+	{/if}
+	<label>
+		<input type="checkbox" id="transparent-background" bind:checked={transparentBackground} /> Transparent
+		background
+	</label>
+	<button id="generate" on:click={generateImage}>Generate image</button>
+	<!-- svelte-ignore a11y-missing-attribute -->
+	<img
+		src={generatedUrl}
+		id="outputImage"
+		style="display:{imageDisplay}"
+		on:load={() => (imageDisplay = 'block')}
+	/>
+</main>
+
+<style>
+	input {
+		border: 1px solid rgba(255, 255, 255, 0.2);
+	}
+	button {
+		background-color: #222;
+		border: 1px solid rgba(255, 255, 255, 0.2);
+		color: #aaa;
+	}
+	select,
+	input,
+	button {
+		display: block;
+		margin-bottom: 0.5em;
+	}
+	#transparent-background {
+		display: inline-block;
+	}
+</style>
diff --git a/src/routes/election.svelte b/src/routes/election.svelte
deleted file mode 100644
index ad869a1..0000000
--- a/src/routes/election.svelte
+++ /dev/null
@@ -1,257 +0,0 @@
-<script lang="ts" context="module">
-	import type { Load } from '@sveltejs/kit'
-	import { fetchApi } from '$lib/api'
-
-	export const load: Load = async ({ params, fetch }) => {
-		const data = await fetchApi(`election?t=${Math.floor(Date.now() / 1000)}`, fetch).then(r =>
-			r.json()
-		)
-
-		return {
-			props: {
-				data,
-			},
-		}
-	}
-</script>
-
-<script lang="ts">
-	import Header from '$lib/Header.svelte'
-	import Head from '$lib/Head.svelte'
-	import { colorCodes, formattingCodeToHtml, millisecondsToTime, skyblockTime } from '$lib/utils'
-	import type { ElectionData } from '$lib/APITypes'
-	import { onDestroy, onMount } from 'svelte'
-	import MayorSkin from '$lib/MayorSkin.svelte'
-	import { invalidate } from '$app/navigation'
-	import { browser } from '$app/env'
-
-	export let data: ElectionData
-
-	let destroyed = false
-
-	let currentTime = Date.now()
-	// update currentTime every animation frame
-	function updateTime() {
-		currentTime = Date.now()
-		if (!destroyed) requestAnimationFrame(updateTime)
-	}
-
-	$: nextSpecialMayorYear = Math.ceil(((data.current?.year || data.previous.year) + 1) / 8) * 8
-	const specialMayors = ['Scorpius', 'Derpy', 'Jerry']
-
-	let autoInvalidateTimeout: null | NodeJS.Timeout = null
-
-	// invalidate at the end of every minute
-	async function autoInvalidate(first: boolean) {
-		// don't invalidate the first time the function is called
-		if (!first) await invalidate('')
-
-		const lastUpdatedAgo = Date.now() - data.lastUpdated
-		autoInvalidateTimeout = setTimeout(() => autoInvalidate(false), lastUpdatedAgo + 10 * 60 * 1000)
-	}
-
-	if (browser) autoInvalidate(true)
-
-	onMount(() => {
-		destroyed = false
-		updateTime()
-	})
-
-	onDestroy(() => {
-		destroyed = true
-		if (autoInvalidateTimeout) clearTimeout(autoInvalidateTimeout)
-	})
-</script>
-
-<Head title="SkyBlock Mayor Election Status" />
-<Header />
-
-<main>
-	{#if data.current}
-		<div class="next-mayor-update">
-			<p>
-				<b>Last API update:</b>
-				{millisecondsToTime(currentTime - data.lastUpdated, {
-					smallestUnit: 1,
-					parts: 1,
-				})} ago
-			</p>
-			<p>
-				<b>Next API update:</b>
-				{millisecondsToTime(10 * 60 * 1000 - (currentTime - data.lastUpdated), {
-					smallestUnit: 1,
-					parts: 1,
-				})}
-			</p>
-		</div>
-	{/if}
-	<h1>SkyBlock Mayor Election Status</h1>
-	<p>
-		<b>Next election:</b>
-		{millisecondsToTime(skyblockTime(data.previous.year + 1, 6, 27) - currentTime, {
-			parts: 3,
-			smallestUnit: 1,
-		})}
-	</p>
-
-	{#if data.current}
-		<h2>Ongoing election <span class="candidate-year">(Year {data.current.year})</span></h2>
-		<p class="election-ends-in-text">
-			<b>Ends in:</b>
-			{millisecondsToTime(skyblockTime(data.previous.year + 1, 3, 27) - currentTime)}
-		</p>
-		<div class="mayor-candidates">
-			{#each data.current.candidates.sort((a, b) => a.votes - b.votes) as candidate}
-				{@const color = candidate.color ? colorCodes[candidate.color] : null}
-				<div class="mayor">
-					<div>
-						<h3 style={color ? `color: ${color}` : undefined}>{candidate.name}</h3>
-						<p class="mayor-vote-count">
-							<span class="mayor-vote-count-number" style={color ? `color: ${color}` : undefined}>
-								{candidate.votes.toLocaleString()}
-							</span> votes
-						</p>
-						<MayorSkin name={candidate.name} />
-					</div>
-					<ul class="mayor-perks">
-						{#each candidate.perks as perk}
-							<div class="mayor-perk">
-								<h4 style={color ? `color: ${color}` : undefined}>{perk.name}</h4>
-								<p>{@html formattingCodeToHtml(perk.description)}</p>
-							</div>
-						{/each}
-					</ul>
-				</div>
-			{/each}
-		</div>
-	{/if}
-
-	<h2>
-		Previous election <span class="candidate-year">(Year {data.previous.year})</span>
-	</h2>
-	<div class="mayor-candidates">
-		{#each data.previous.candidates.sort((a, b) => b.votes - a.votes) as candidate}
-			{@const color = candidate.color ? colorCodes[candidate.color] : null}
-			<div class="mayor">
-				<div>
-					<h3 style={color ? `color: ${color}` : undefined}>{candidate.name}</h3>
-					<p class="mayor-vote-count">
-						<span class="mayor-vote-count-number" style={color ? `color: ${color}` : undefined}>
-							{candidate.votes.toLocaleString()}
-						</span> votes
-					</p>
-					{#if candidate.name == data.previous.winner}
-						<p class="mayor-winner">Winner</p>
-					{/if}
-					<MayorSkin name={candidate.name} />
-				</div>
-				<ul class="mayor-perks">
-					{#each candidate.perks as perk}
-						<div class="mayor-perk">
-							<h4 style={color ? `color: ${color}` : undefined}>{perk.name}</h4>
-							<p>{@html formattingCodeToHtml(perk.description)}</p>
-						</div>
-					{/each}
-				</ul>
-			</div>
-		{/each}
-	</div>
-
-	<!-- {%- set nextSpecialMayorYear = (((data.current.year or data.previous.year) + 1) / 8)|round(0, 'ceil') * 8 -%}
-	{%- set specialMayors = ['Scorpius', 'Derpy', 'Jerry'] -%}
-	<h2>Upcoming special mayors</h2>
-	<ul>
-		{%- for i in range(3) -%}
-		<li><b>{{ specialMayors[((nextSpecialMayorYear / 8) + i) % 3] }}</b> <span class="next-special-mayor-time">({{ skyblockYear(nextSpecialMayorYear + 8 * i, 6, 27) }})</span></li>
-		{%- endfor -%}
-	</ul> -->
-
-	<h2>Upcoming special mayors</h2>
-	<ul>
-		<!-- for i in range(3) -->
-		{#each Array(3) as _, i}
-			<li>
-				<b>{specialMayors[(nextSpecialMayorYear / 8 + i) % 3]}</b>
-				<span class="next-special-mayor-time">
-					({millisecondsToTime(
-						skyblockTime(nextSpecialMayorYear + 8 * i + 1, 3, 27) - currentTime
-					)})
-				</span>
-			</li>
-		{/each}
-	</ul>
-</main>
-
-<style>
-	.mayor-grid {
-		display: grid;
-		grid-template-columns: repeat(2, 1fr);
-		grid-column-gap: 1em;
-		grid-row-gap: 1em;
-		margin-top: 1em;
-		margin-bottom: 1em;
-	}
-	.mayor {
-		display: inline-block;
-		width: 12em;
-		margin-right: 1em;
-		vertical-align: top;
-	}
-	.mayor h3 {
-		filter: brightness(1.5);
-		text-align: center;
-	}
-	.mayor img {
-		display: block;
-		width: 5em;
-		margin: 0 auto;
-	}
-	.mayor-vote-count-number {
-		filter: brightness(1.2);
-	}
-	.mayor-vote-count {
-		text-align: center;
-		width: 100%;
-		margin: 0 0 0.5em 0;
-	}
-	.mayor-perk h4 {
-		margin-bottom: 0;
-	}
-	.mayor-perk p {
-		margin: 0;
-	}
-	.mayor-candidates {
-		/* display: ; */
-		/* everything next to each other */
-		/* grid-template-columns: repeat(5, 1fr); */
-		max-width: fit-content;
-	}
-	.mayor-perks {
-		list-style-type: none;
-		padding: 0;
-	}
-	.candidate-year {
-		font-weight: normal;
-		color: var(--theme-darker-text);
-	}
-	.mayor-winner {
-		color: var(--theme-yellow);
-		font-weight: bold;
-		margin: 0;
-		text-align: center;
-		font-size: 1em;
-	}
-	.next-special-mayor-time {
-		color: var(--theme-darker-text);
-	}
-	.election-ends-in-text {
-		margin-top: 0;
-	}
-	.next-mayor-update {
-		float: right;
-		color: var(--theme-darker-text);
-	}
-	.next-mayor-update p {
-		margin: 0;
-	}
-</style>
diff --git a/src/routes/election/+page.svelte b/src/routes/election/+page.svelte
new file mode 100644
index 0000000..1754655
--- /dev/null
+++ b/src/routes/election/+page.svelte
@@ -0,0 +1,257 @@
+<script lang="ts" context="module">
+	import type { Load } from '@sveltejs/kit'
+	import { fetchApi } from '$lib/api'
+
+	export const load: Load = async ({ params, fetch }) => {
+		const data = await fetchApi(`election?t=${Math.floor(Date.now() / 1000)}`, fetch).then(r =>
+			r.json()
+		)
+
+		return {
+			props: {
+				data,
+			},
+		}
+	}
+</script>
+
+<script lang="ts">
+	import Header from '$lib/Header.svelte'
+	import Head from '$lib/Head.svelte'
+	import { colorCodes, formattingCodeToHtml, millisecondsToTime, skyblockTime } from '$lib/utils'
+	import type { ElectionData } from '$lib/APITypes'
+	import { onDestroy, onMount } from 'svelte'
+	import MayorSkin from '$lib/MayorSkin.svelte'
+	import { invalidate } from '$app/navigation'
+	import { browser } from '$app/environment'
+
+	export let data: ElectionData
+
+	let destroyed = false
+
+	let currentTime = Date.now()
+	// update currentTime every animation frame
+	function updateTime() {
+		currentTime = Date.now()
+		if (!destroyed) requestAnimationFrame(updateTime)
+	}
+
+	$: nextSpecialMayorYear = Math.ceil(((data.current?.year || data.previous.year) + 1) / 8) * 8
+	const specialMayors = ['Scorpius', 'Derpy', 'Jerry']
+
+	let autoInvalidateTimeout: null | NodeJS.Timeout = null
+
+	// invalidate at the end of every minute
+	async function autoInvalidate(first: boolean) {
+		// don't invalidate the first time the function is called
+		if (!first) await invalidate('')
+
+		const lastUpdatedAgo = Date.now() - data.lastUpdated
+		autoInvalidateTimeout = setTimeout(() => autoInvalidate(false), lastUpdatedAgo + 10 * 60 * 1000)
+	}
+
+	if (browser) autoInvalidate(true)
+
+	onMount(() => {
+		destroyed = false
+		updateTime()
+	})
+
+	onDestroy(() => {
+		destroyed = true
+		if (autoInvalidateTimeout) clearTimeout(autoInvalidateTimeout)
+	})
+</script>
+
+<Head title="SkyBlock Mayor Election Status" />
+<Header />
+
+<main>
+	{#if data.current}
+		<div class="next-mayor-update">
+			<p>
+				<b>Last API update:</b>
+				{millisecondsToTime(currentTime - data.lastUpdated, {
+					smallestUnit: 1,
+					parts: 1,
+				})} ago
+			</p>
+			<p>
+				<b>Next API update:</b>
+				{millisecondsToTime(10 * 60 * 1000 - (currentTime - data.lastUpdated), {
+					smallestUnit: 1,
+					parts: 1,
+				})}
+			</p>
+		</div>
+	{/if}
+	<h1>SkyBlock Mayor Election Status</h1>
+	<p>
+		<b>Next election:</b>
+		{millisecondsToTime(skyblockTime(data.previous.year + 1, 6, 27) - currentTime, {
+			parts: 3,
+			smallestUnit: 1,
+		})}
+	</p>
+
+	{#if data.current}
+		<h2>Ongoing election <span class="candidate-year">(Year {data.current.year})</span></h2>
+		<p class="election-ends-in-text">
+			<b>Ends in:</b>
+			{millisecondsToTime(skyblockTime(data.previous.year + 1, 3, 27) - currentTime)}
+		</p>
+		<div class="mayor-candidates">
+			{#each data.current.candidates.sort((a, b) => a.votes - b.votes) as candidate}
+				{@const color = candidate.color ? colorCodes[candidate.color] : null}
+				<div class="mayor">
+					<div>
+						<h3 style={color ? `color: ${color}` : undefined}>{candidate.name}</h3>
+						<p class="mayor-vote-count">
+							<span class="mayor-vote-count-number" style={color ? `color: ${color}` : undefined}>
+								{candidate.votes.toLocaleString()}
+							</span> votes
+						</p>
+						<MayorSkin name={candidate.name} />
+					</div>
+					<ul class="mayor-perks">
+						{#each candidate.perks as perk}
+							<div class="mayor-perk">
+								<h4 style={color ? `color: ${color}` : undefined}>{perk.name}</h4>
+								<p>{@html formattingCodeToHtml(perk.description)}</p>
+							</div>
+						{/each}
+					</ul>
+				</div>
+			{/each}
+		</div>
+	{/if}
+
+	<h2>
+		Previous election <span class="candidate-year">(Year {data.previous.year})</span>
+	</h2>
+	<div class="mayor-candidates">
+		{#each data.previous.candidates.sort((a, b) => b.votes - a.votes) as candidate}
+			{@const color = candidate.color ? colorCodes[candidate.color] : null}
+			<div class="mayor">
+				<div>
+					<h3 style={color ? `color: ${color}` : undefined}>{candidate.name}</h3>
+					<p class="mayor-vote-count">
+						<span class="mayor-vote-count-number" style={color ? `color: ${color}` : undefined}>
+							{candidate.votes.toLocaleString()}
+						</span> votes
+					</p>
+					{#if candidate.name == data.previous.winner}
+						<p class="mayor-winner">Winner</p>
+					{/if}
+					<MayorSkin name={candidate.name} />
+				</div>
+				<ul class="mayor-perks">
+					{#each candidate.perks as perk}
+						<div class="mayor-perk">
+							<h4 style={color ? `color: ${color}` : undefined}>{perk.name}</h4>
+							<p>{@html formattingCodeToHtml(perk.description)}</p>
+						</div>
+					{/each}
+				</ul>
+			</div>
+		{/each}
+	</div>
+
+	<!-- {%- set nextSpecialMayorYear = (((data.current.year or data.previous.year) + 1) / 8)|round(0, 'ceil') * 8 -%}
+	{%- set specialMayors = ['Scorpius', 'Derpy', 'Jerry'] -%}
+	<h2>Upcoming special mayors</h2>
+	<ul>
+		{%- for i in range(3) -%}
+		<li><b>{{ specialMayors[((nextSpecialMayorYear / 8) + i) % 3] }}</b> <span class="next-special-mayor-time">({{ skyblockYear(nextSpecialMayorYear + 8 * i, 6, 27) }})</span></li>
+		{%- endfor -%}
+	</ul> -->
+
+	<h2>Upcoming special mayors</h2>
+	<ul>
+		<!-- for i in range(3) -->
+		{#each Array(3) as _, i}
+			<li>
+				<b>{specialMayors[(nextSpecialMayorYear / 8 + i) % 3]}</b>
+				<span class="next-special-mayor-time">
+					({millisecondsToTime(
+						skyblockTime(nextSpecialMayorYear + 8 * i + 1, 3, 27) - currentTime
+					)})
+				</span>
+			</li>
+		{/each}
+	</ul>
+</main>
+
+<style>
+	.mayor-grid {
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		grid-column-gap: 1em;
+		grid-row-gap: 1em;
+		margin-top: 1em;
+		margin-bottom: 1em;
+	}
+	.mayor {
+		display: inline-block;
+		width: 12em;
+		margin-right: 1em;
+		vertical-align: top;
+	}
+	.mayor h3 {
+		filter: brightness(1.5);
+		text-align: center;
+	}
+	.mayor img {
+		display: block;
+		width: 5em;
+		margin: 0 auto;
+	}
+	.mayor-vote-count-number {
+		filter: brightness(1.2);
+	}
+	.mayor-vote-count {
+		text-align: center;
+		width: 100%;
+		margin: 0 0 0.5em 0;
+	}
+	.mayor-perk h4 {
+		margin-bottom: 0;
+	}
+	.mayor-perk p {
+		margin: 0;
+	}
+	.mayor-candidates {
+		/* display: ; */
+		/* everything next to each other */
+		/* grid-template-columns: repeat(5, 1fr); */
+		max-width: fit-content;
+	}
+	.mayor-perks {
+		list-style-type: none;
+		padding: 0;
+	}
+	.candidate-year {
+		font-weight: normal;
+		color: var(--theme-darker-text);
+	}
+	.mayor-winner {
+		color: var(--theme-yellow);
+		font-weight: bold;
+		margin: 0;
+		text-align: center;
+		font-size: 1em;
+	}
+	.next-special-mayor-time {
+		color: var(--theme-darker-text);
+	}
+	.election-ends-in-text {
+		margin-top: 0;
+	}
+	.next-mayor-update {
+		float: right;
+		color: var(--theme-darker-text);
+	}
+	.next-mayor-update p {
+		margin: 0;
+	}
+</style>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
deleted file mode 100644
index 851f70e..0000000
--- a/src/routes/index.svelte
+++ /dev/null
@@ -1,138 +0,0 @@
-<script lang="ts" context="module">
-	import type { Load } from '@sveltejs/kit'
-
-	export const load: Load = async ({ params, fetch, session }) => {
-		return {
-			props: {
-				loggedIn: session.sid !== undefined,
-			},
-		}
-	}
-</script>
-
-<script lang="ts">
-	import Username from '$lib/minecraft/Username.svelte'
-	import SearchUser from '$lib/SearchUser.svelte'
-	import donators from '../_donators.json'
-	import Head from '$lib/Head.svelte'
-	import Emoji from '$lib/Emoji.svelte'
-	import LoginButton from '$lib/LoginButton.svelte'
-
-	export const hydrate = false
-
-	export let loggedIn: boolean
-</script>
-
-<svelte:head>
-	<title>SkyBlock Stats</title>
-</svelte:head>
-
-<Head
-	title="SkyBlock Stats"
-	description="Check SkyBlock stats, see leaderboards, mayors, and way more."
-/>
-<a class="github" href="https://github.com/skyblockstats/skyblock-stats">
-	<img src="/github-mark-light.png" alt="View source on GitHub" />
-</a>
-
-<main>
-	<LoginButton {loggedIn} />
-	<section class="title-section">
-		<h1>SkyBlock Stats</h1>
-		<SearchUser>
-			<button>View Profiles</button>
-		</SearchUser>
-	</section>
-
-	<hr style="margin: 25vh 0 2em 0" />
-
-	<section>
-		<h2>Other SkyBlock tools</h2>
-		<ul id="other-tools-list">
-			<li><a href="/auctionprices">Auction prices</a></li>
-			<li><a href="/leaderboards">Leaderboards</a></li>
-			<li><a>Bazaar (coming soon)</a></li>
-			<li><a href="/chat">Fake chat generator</a></li>
-			<li><a href="https://skyblock-npcs.matdoes.dev">NPC Skin Stealer</a></li>
-			<li><a href="/election">Mayor Election Status</a></li>
-			<li><a href="/items">Item List</a></li>
-		</ul>
-	</section>
-
-	<section id="donators">
-		<h2>Donators</h2>
-		<p>
-			Thank you to these people for
-			<a href="https://ko-fi.com/matdoesdev" target="_blank">donating</a>. <Emoji value="❤" />
-		</p>
-		<ul>
-			{#each donators as donator}
-				<li><Username player={donator} headType="2d" hyperlinkToProfile /></li>
-			{/each}
-		</ul>
-	</section>
-	<section>
-		<h2>Info</h2>
-		<p>Website made by <a href="https://matdoes.dev">mat</a>.</p>
-		<p>
-			Official hangout/support Discord:
-			<a href="//discord.gg/KtscNUnh4f">discord.gg/KtscNUnh4f</a>.
-		</p>
-		<p>
-			Resource packs: <a href="//furfsky.net">Furfsky Reborn</a> (default),
-			<a href="//packshq.com">PacksHQ</a>,
-			<a href="//hypixel.net/threads/2138599">Furfsky</a>,
-			<a href="//hypixel.net/threads/2239953">Ectoplasm</a>,
-			<a href="//hypixel.net/threads/3470904">RNBW</a>,
-			<a href="//hypixel.net/threads/4174260">Hypixel+</a>,
-			<a href="//hypixel.net/threads/3597207">Worlds and Beyond</a>.
-		</p>
-		<p>
-			Minecraft skin APIs: <a href="//mc-heads.net">mc-heads.net</a> for 3d renders and
-			<a href="//mc-crafatar.com">crafatar.com</a> for 2d heads.
-		</p>
-		<p>Emojis: <a href="//twemoji.twitter.com/">Twemoji</a>.</p>
-		<p>Font: <a href="//brailleinstitute.org/freefont">Atkinson Hyperlegible</a>.</p>
-		<p class="secret">Thank you to Duckie Cousin Gaming for the idea to add harp leaderboards.</p>
-	</section>
-</main>
-
-<style>
-	h1 {
-		text-align: center;
-	}
-
-	.title-section {
-		margin: 0 auto;
-		width: fit-content;
-	}
-
-	#donators p {
-		margin: 0;
-	}
-
-	li {
-		padding: 0.2em 0;
-	}
-
-	.github {
-		position: absolute;
-		top: 0.5rem;
-		left: 0.5rem;
-		opacity: 0.2;
-		transition: opacity 200ms;
-	}
-	.github:hover {
-		opacity: 0.9;
-	}
-	.github > img {
-		width: 2rem;
-	}
-
-	.secret {
-		color: var(--theme-main-background);
-		margin: 0;
-		font-size: 6pt;
-		margin-top: -0.5rem;
-	}
-</style>
diff --git a/src/routes/items.svelte b/src/routes/items.svelte
deleted file mode 100644
index 82b3ee3..0000000
--- a/src/routes/items.svelte
+++ /dev/null
@@ -1,216 +0,0 @@
-<script lang="ts" context="module">
-	import type { Load } from '@sveltejs/kit'
-	import { fetchApi } from '$lib/api'
-
-	export const load: Load = async ({ params, fetch }) => {
-		const data = await fetchApi(`items`, fetch).then(r => r.json())
-
-		return {
-			props: {
-				data,
-			},
-		}
-	}
-</script>
-
-<script lang="ts">
-	import Header from '$lib/Header.svelte'
-	import Head from '$lib/Head.svelte'
-	import { millisecondsToTime, TIER_COLORS, colorCodes, cleanId, toTitleCase } from '$lib/utils'
-	import type { ItemListData, ItemListItem } from '$lib/APITypes'
-	import Item from '$lib/minecraft/Item.svelte'
-	import furfskyReborn from 'skyblock-assets/matchers/furfsky_reborn.json'
-
-	export let data: ItemListData
-
-	let now = Date.now()
-
-	let query: string = ''
-	let filterCategory = 'any'
-	let filterTier = 'any'
-	// this is pre-calculated here so we don't have to keep lowercasing it
-	$: normalizedQuery = query.toLowerCase().replace(/_/g, ' ')
-
-	$: filteredItems = data.list
-		.filter(
-			i =>
-				i.display.name.toLowerCase().replace(/_/g, ' ').includes(normalizedQuery) ||
-				i.id.toLowerCase().replace(/_/g, ' ').includes(normalizedQuery)
-		)
-		.filter(i => filterCategory === 'any' || i.category === filterCategory)
-		.filter(i => filterTier === 'any' || i.tier === filterTier)
-
-	let pageHeight = 0
-	let filteredItemsSliced: ItemListItem[]
-	$: {
-		filteredItemsSliced = filteredItems.slice(0, 200)
-		pageHeight = 0
-	}
-
-	function checkScroll() {
-		let pageHeightTemp = window.scrollY + window.innerHeight
-		if (pageHeightTemp <= pageHeight) return
-		pageHeight = pageHeightTemp
-		if (pageHeight >= document.body.scrollHeight - 1000) {
-			filteredItemsSliced = filteredItems.slice(0, filteredItemsSliced.length + 200)
-		}
-	}
-
-	let categories: Set<string> = new Set()
-	let tiers: Set<string> = new Set()
-	for (const i of data.list) {
-		if (i.category) categories.add(i.category)
-		if (i.tier) tiers.add(i.tier)
-	}
-</script>
-
-<Head title="SkyBlock Item List" />
-<Header />
-
-<svelte:window on:scroll={checkScroll} />
-
-<main>
-	<div class="last-updated">
-		Last updated: <a href="https://github.com/mat-1/skyblock-items-history/commits/main"
-			><time datetime="${data.lastUpdated}">
-				{millisecondsToTime(now - data.lastUpdated)} ago
-			</time></a
-		>
-	</div>
-	<h1>SkyBlock Item List</h1>
-	<p class="results-count">{filteredItems.length.toLocaleString()} items</p>
-	<div class="filter-items-settings">
-		<input type="text" id="filter-items-tier" placeholder="Search..." bind:value={query} />
-
-		<label for="filter-items-tier">Tier:</label>
-		<select id="filter-items-tier" class="filter-items-tier" bind:value={filterTier}>
-			<option value="any" selected>Any</option>
-			{#each Array.from(tiers) as tier}
-				<option value={tier}>{cleanId(tier.toLowerCase())}</option>
-			{/each}
-		</select>
-
-		<label for="filter-items-category">Category:</label>
-		<select id="filter-items-category" class="filter-items-category" bind:value={filterCategory}>
-			<option value="any" selected>Any</option>
-			{#each Array.from(categories) as category}
-				<option value={category}>{cleanId(category)}</option>
-			{/each}
-		</select>
-	</div>
-	<div class="item-list">
-		{#each filteredItemsSliced as item (item.id)}
-			<div class="item-container">
-				<span class="item-slot-container"><Item {item} pack={furfskyReborn} /></span>
-				<a href="https://wiki.hypixel.net/{item.display.name.replace(/ /g, '_')}"
-					><h3
-						class="item-name"
-						style={item.tier ? `color: ${colorCodes[TIER_COLORS[item.tier]]}` : undefined}
-					>
-						{item.display.name}
-					</h3></a
-				>
-				<div>
-					{#if item.museum}
-						<p>
-							<span class="item-info-label">Museum</span>
-						</p>
-					{/if}
-					{#if item.soulbound}
-						<p>
-							<span class="item-info-label">Soulbound</span>
-						</p>
-					{/if}
-					{#if item.category}
-						<p>
-							<span class="item-info-label">Category:</span>
-							<span class="item-info-value">
-								{toTitleCase(cleanId(item.category))}
-							</span>
-						</p>
-					{/if}
-					{#if item.npcSellPrice}
-						<p>
-							<span class="item-info-label">NPC sell price:</span>
-							<span class="item-info-value">
-								{#if item.npcSellPrice == 1}1 coin{:else}
-									{item.npcSellPrice.toLocaleString()} coins{/if}
-							</span>
-						</p>
-					{/if}
-					{#if Object.keys(item.requirements).length > 0}
-						<div>
-							<span class="item-info-label">Requirements:</span>
-							<ul>
-								{#if item.requirements.dungeon}
-									<li>
-										{cleanId(item.requirements.dungeon.type)}
-										{item.requirements.dungeon.level}
-									</li>
-								{/if}
-								{#if item.requirements.skill}
-									<li>
-										{cleanId(item.requirements.skill.type)}
-										{item.requirements.skill.level}
-									</li>
-								{/if}
-								{#if item.requirements.slayer}
-									<li>
-										{cleanId(item.requirements.slayer.boss)}
-										Slayer
-										{item.requirements.slayer.level}
-									</li>
-								{/if}
-							</ul>
-						</div>
-					{/if}
-				</div>
-			</div>
-		{/each}
-		{#if filteredItems.length === 0}
-			No results!
-		{/if}
-	</div>
-</main>
-
-<style>
-	.last-updated {
-		float: right;
-		color: var(--theme-darker-text);
-	}
-
-	p,
-	ul {
-		margin: 0;
-	}
-	li {
-		position: relative;
-		left: -1rem;
-	}
-	.results-count {
-		position: relative;
-		top: -1em;
-	}
-	.item-slot-container {
-		float: right;
-	}
-	.item-list {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
-		grid-gap: 1em;
-		margin-top: 1em;
-	}
-	.item-container {
-		border: 1px solid rgba(255, 255, 255, 0.1);
-		background: rgba(0, 0, 0, 0.1);
-		padding: 0.75em;
-		border-radius: 1em;
-	}
-
-	.item-info-label {
-		color: var(--theme-darker-text);
-	}
-	.item-info-value {
-		color: var(--theme-main-text);
-	}
-</style>
diff --git a/src/routes/items/+page.svelte b/src/routes/items/+page.svelte
new file mode 100644
index 0000000..82b3ee3
--- /dev/null
+++ b/src/routes/items/+page.svelte
@@ -0,0 +1,216 @@
+<script lang="ts" context="module">
+	import type { Load } from '@sveltejs/kit'
+	import { fetchApi } from '$lib/api'
+
+	export const load: Load = async ({ params, fetch }) => {
+		const data = await fetchApi(`items`, fetch).then(r => r.json())
+
+		return {
+			props: {
+				data,
+			},
+		}
+	}
+</script>
+
+<script lang="ts">
+	import Header from '$lib/Header.svelte'
+	import Head from '$lib/Head.svelte'
+	import { millisecondsToTime, TIER_COLORS, colorCodes, cleanId, toTitleCase } from '$lib/utils'
+	import type { ItemListData, ItemListItem } from '$lib/APITypes'
+	import Item from '$lib/minecraft/Item.svelte'
+	import furfskyReborn from 'skyblock-assets/matchers/furfsky_reborn.json'
+
+	export let data: ItemListData
+
+	let now = Date.now()
+
+	let query: string = ''
+	let filterCategory = 'any'
+	let filterTier = 'any'
+	// this is pre-calculated here so we don't have to keep lowercasing it
+	$: normalizedQuery = query.toLowerCase().replace(/_/g, ' ')
+
+	$: filteredItems = data.list
+		.filter(
+			i =>
+				i.display.name.toLowerCase().replace(/_/g, ' ').includes(normalizedQuery) ||
+				i.id.toLowerCase().replace(/_/g, ' ').includes(normalizedQuery)
+		)
+		.filter(i => filterCategory === 'any' || i.category === filterCategory)
+		.filter(i => filterTier === 'any' || i.tier === filterTier)
+
+	let pageHeight = 0
+	let filteredItemsSliced: ItemListItem[]
+	$: {
+		filteredItemsSliced = filteredItems.slice(0, 200)
+		pageHeight = 0
+	}
+
+	function checkScroll() {
+		let pageHeightTemp = window.scrollY + window.innerHeight
+		if (pageHeightTemp <= pageHeight) return
+		pageHeight = pageHeightTemp
+		if (pageHeight >= document.body.scrollHeight - 1000) {
+			filteredItemsSliced = filteredItems.slice(0, filteredItemsSliced.length + 200)
+		}
+	}
+
+	let categories: Set<string> = new Set()
+	let tiers: Set<string> = new Set()
+	for (const i of data.list) {
+		if (i.category) categories.add(i.category)
+		if (i.tier) tiers.add(i.tier)
+	}
+</script>
+
+<Head title="SkyBlock Item List" />
+<Header />
+
+<svelte:window on:scroll={checkScroll} />
+
+<main>
+	<div class="last-updated">
+		Last updated: <a href="https://github.com/mat-1/skyblock-items-history/commits/main"
+			><time datetime="${data.lastUpdated}">
+				{millisecondsToTime(now - data.lastUpdated)} ago
+			</time></a
+		>
+	</div>
+	<h1>SkyBlock Item List</h1>
+	<p class="results-count">{filteredItems.length.toLocaleString()} items</p>
+	<div class="filter-items-settings">
+		<input type="text" id="filter-items-tier" placeholder="Search..." bind:value={query} />
+
+		<label for="filter-items-tier">Tier:</label>
+		<select id="filter-items-tier" class="filter-items-tier" bind:value={fi