Prepare preview build, fix ScreenSize

Author: WarningImHack3r

src/lib/components/ScreenSize.svelte

@@ -13,11 +13,11 @@
 			size: parseInt(configScreens[screen as keyof typeof configScreens].replace("px", ""))
 		}))
 		.sort((a, b) => a.size - b.size);
-	let matchingScreen = $derived(screens.findLast(screen => screen.size <= width));
 
 	let width = $state(0);
 	let height = $state(0);
 
+	let matchingScreen = $derived(screens.findLast(screen => screen.size <= width));
 	let showAllScreens = $state(false);
 </script>
 

src/routes/+layout.svelte

@@ -6,7 +6,16 @@
 	import { dev } from "$app/environment";
 	import { env } from "$env/dynamic/public";
 	import { page } from "$app/stores";
-	import { ChevronDown, LoaderCircle, LogOut, Monitor, Moon, Sun, X } from "lucide-svelte";
+	import {
+		ArrowUpRight,
+		ChevronDown,
+		LoaderCircle,
+		LogOut,
+		Monitor,
+		Moon,
+		Sun,
+		X
+	} from "lucide-svelte";
 	import { ModeWatcher, resetMode, setMode } from "mode-watcher";
 	import { Octokit } from "octokit";
 	import { persisted } from "svelte-persisted-store";
@@ -148,6 +157,11 @@
 				<h2 class="hidden text-xl font-semibold xs:inline-block">
 					Svelte
 					<span class="text-primary">Changelog</span>
+					<span
+						class="ml-2 rounded-lg p-1.5 text-xs font-light outline outline-[0.5] outline-primary"
+					>
+						Preview
+					</span>
 				</h2>
 			</a>
 
@@ -173,6 +187,16 @@
 			<!-- Right part -->
 			<div class="flex flex-1 items-center justify-end space-x-2 sm:space-x-4">
 				<nav class="flex items-center space-x-1">
+					<Button
+						href="https://svelte-changelog.vercel.app"
+						variant="ghost"
+						class="group mr-6 text-muted-foreground max-md:hidden"
+					>
+						Main website
+						<ArrowUpRight
+							class="ml-2 size-4 transition-transform duration-300 group-hover:-translate-y-1 group-hover:translate-x-1 group-hover:text-primary"
+						/>
+					</Button>
 					{#if isAuthenticating}
 						<Button variant="outline" size="icon" disabled>
 							<LoaderCircle class="size-4 animate-spin" />