Change short URL toggle and No-JS support

src/routes/instances/+page.server.ts

@@ -1,10 +1,18 @@
 import instances from "./instances";
 import type { PageServerLoad } from "./$types";
 
-export const load = (() => {
+export const load = (({ url }) => {
 	const meta = {
 		title: "Instances"
 	};
 
-	return { instances, ...meta };
+	// If the ?short url query exists, then longUrl is false
+	// Every other case is true
+	const queryLongUrl = !url.searchParams.has("short");
+
+	return {
+		instances,
+		queryLongUrl,
+		...meta
+	};
 }) satisfies PageServerLoad;

src/routes/instances/+page.svelte

@@ -3,15 +3,17 @@
 
 	export let data: PageData;
 
-	let insturl: "short" | "long";
+	$: longUrl = data.queryLongUrl;
+
 	let toggle = () => {
-		insturl = insturl === "long" ? "short" : "long";
+		longUrl = !longUrl;
 	};
-	insturl = "long";
 </script>
 
 <div class="h1-no-lg flex flex-col sm:(flex-row items-center) gap-4 !mb-0">
 	<span class="text-4xl font-bold">{data.title}</span>
+
+	<!-- With JavaScript -->
 	<a
 		href="/instances/advanced"
 		class="button sm:w-fit"
@@ -20,28 +22,40 @@
 	>
 	<button
 		on:click={toggle}
+		class="text-text flex items-center text-sm js"
+	>
+		<div
+			class="i-ic:{longUrl
+				? 'baseline-toggle-off bg-alt'
+				: 'baseline-toggle-on bg-accent'} h-15 w-15"
+		/>
+		Use short URL
+	</button>
+
+	<!-- Without JavaScript -->
+	<noscript>
+		<a
+			href="?{data.queryLongUrl ? 'short' : ''}"
 			class="text-text flex items-center text-sm"
 		>
 			<div
- 		class="i-ic:{insturl === 'long'            
+				class="i-ic:{data.queryLongUrl
- 			? 'baseline-toggle-off bg-accent'                  
+					? 'baseline-toggle-off bg-alt'
- 			: 'baseline-toggle-on bg-amber-500'} h-15 w-15"       
+					: 'baseline-toggle-on bg-accent'} h-15 w-15"
 			/>
- 	{#if insturl === "long"}                     
+			Use short URL
- 		Long URL                                   
+		</a>
- 	{:else}                                      
- 		Short URL                                  
- 	{/if}                                        
- </button>                                      
-
-
-
 
+		<style>
+			.js {
+				display: none;
+			}
+		</style>
+	</noscript>
 </div>
 
 <div class="flex flex-col">
-
+	{#if longUrl}
-	{#if insturl === "long"}
 		{#each data.instances as category}
 			<div class="flex flex-col">
 				<h2>{category.name}</h2>
@@ -74,7 +88,10 @@
 				<div class="flex flex-row flex-wrap gap-4">
 					{#each category.data as instance}
 						<a
-						href={instance.short_geo || instance.short_eu || instance.geo || instance.eu}
+							href={instance.short_geo ||
+								instance.short_eu ||
+								instance.geo ||
+								instance.eu}
 							class="flex flex-row items-center gap-4 rounded bg-secondary p-4 w-110 no-underline text-text"
 						>
 							{#if instance.icon}