Formatting and some build fixes

package.json

@@ -23,7 +23,7 @@
 		"marked": "^12.0.1",
 		"mdsvex": "^0.11.0",
 		"stylus": "^0.63.0",
-		"svelte": "^4.2.14",
+		"svelte": "5.0.0-next.105",
 		"svelte-check": "^3.6.9",
 		"svelte-preprocess": "^5.1.3",
 		"sveltekit-autoimport": "^1.8.0",

src/lib/components/Navbar.svelte

@@ -1,14 +1,12 @@
 <div
-	class="bg-#1f1d1c @light:bg-white lg:w-90 lg:h-a lg:pt-42
-	z-1 fixed flex w-full flex-wrap pb-3 ps-6 lg:static lg:flex-col">
+	class="bg-#1f1d1c @light:bg-white lg:w-90 lg:h-a lg:pt-42 z-1 fixed flex w-full flex-wrap pb-3 ps-6 lg:static lg:flex-col">
 	<span class="me-12 mt-3 hidden sm:inline-block lg:me-0">
 		<a href="/" class="txt lg:text-2.2rem font-600 text-2xl">
 			Revival Archive
 		</a>
 	</span>
 	<nav
-		class="mt-3 box-border flex
-		flex-wrap justify-self-center lg:flex-col">
+		class="mt-3 box-border flex flex-wrap justify-self-center lg:flex-col">
 		<a href="/">Home</a>
 		<a href="/about">About</a>
 		<a href="/revivals">Revival Index</a>

src/routes/blog/+page.svelte

@@ -18,9 +18,7 @@
 	<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
-		block text-white transition hover:shadow-xl">
+		class="txt @light:text-dark hover:text-#ccc @light:hover:text-#555 bg-a rounded-3 box-border block text-white transition hover:shadow-xl">
 		<article class="mb-4 px-6 py-3">
 			<h2 class="mb-2 mt-1">{post.title}</h2>
 			<p class="my-2">

src/routes/post/[post]/+page.svelte

@@ -45,9 +45,7 @@
 			{#each data.posts as post}
 				<a
 					href="/post/{post.path}"
-					class="txt bg-a @light:text-dark hover:text-#ccc
-					@light:hover:text-#555 rounded-3 box-border
-					block text-white transition hover:shadow-xl">
+					class="txt bg-a @light:text-dark hover:text-#ccc @light:hover:text-#555 rounded-3 box-border block text-white transition hover:shadow-xl">
 					<article class="mb-4 px-6 py-3">
 						<h3 class="my-2">{post.title}</h3>
 						<small class="pb-5">

src/routes/reviews/+page.svelte

@@ -21,9 +21,7 @@
 	<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
-		block text-white transition hover:shadow-xl">
+		class="txt @light:text-dark hover:text-#ccc @light:hover:text-#555 bg-a rounded-3 box-border block text-white transition hover:shadow-xl">
 		<article class:opacity-50={review.defunct} class="mb-4 flex p-3 ps-5">
 			{#if review.logo}
 				<img

src/routes/revival/[revival]/+page.svelte

@@ -54,22 +54,29 @@
 							<h1>Rating</h1>
 
 							<table>
-								{#each Object.keys(ratingCategories) as category}
-									<tr>
-										<td
-											class:pt-4={category == "overall"}
-											class="pe-6">
-											{category.charAt(0).toUpperCase() +
-												category.slice(1)}
-										</td>
-										<td class:pt-4={category == "overall"}>
-											<Stars
-												rating={ratingCategories[
-													category
-												]} />
-										</td>
-									</tr>
-								{/each}
+								<tbody>
+									{#each Object.keys(ratingCategories) as category}
+										<tr>
+											<td
+												class:pt-4={category ==
+													"overall"}
+												class="pe-6">
+												{category
+													.charAt(0)
+													.toUpperCase() +
+													category.slice(1)}
+											</td>
+											<td
+												class:pt-4={category ==
+													"overall"}>
+												<Stars
+													rating={ratingCategories[
+														category
+													]} />
+											</td>
+										</tr>
+									{/each}
+								</tbody>
 							</table>
 						</div>
 					</div>
@@ -89,9 +96,7 @@
 			{#each data.revivals as revival}
 				<a
 					href="/revival/{revival.path}"
-					class="txt bg-a @light:text-dark hover:text-#ccc
-					@light:hover:text-#555 rounded-3 box-border
-					block text-white transition hover:shadow-xl">
+					class="txt bg-a @light:text-dark hover:text-#ccc @light:hover:text-#555 rounded-3 box-border block text-white transition hover:shadow-xl">
 					<article
 						class:opacity-50={revival.defunct}
 						class="mb-4 flex p-3 ps-5">

src/routes/revivals/+page.svelte

@@ -13,7 +13,7 @@
 		2017: "bg-indigo-600",
 		2018: "bg-violet-400 text-black",
 		2019: "bg-purple-600",
-		2020: "bg-slate-600",
+		2020: "bg-slate-600"
 	}
 
 	export let data
@@ -38,9 +38,7 @@
 		{#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">
+				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">
 				<div class:opacity-50={revival.defunct} class="flex">
 					<div>
 						<div class="flex flex-wrap">
@@ -69,8 +67,9 @@
 						<div class="flex flex-wrap text-white">
 							{#each revival.clients || [] as year}
 								<span
-									class="{years[year]} 
-								my-1 me-2 rounded-full px-2 py-0.5 text-sm">
+									class="{years[
+										year
+									]} my-1 me-2 rounded-full px-2 py-0.5 text-sm">
 									{year}
 								</span>
 							{/each}