src/lib/components/ServiceCard.svelte

@@ -1,14 +1,14 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-	import {OpenInNewWindow} from 'radix-icons-svelte';
+	import { OpenInNewWindow } from 'radix-icons-svelte';
-	import {quintInOut} from 'svelte/easing';
+	import { quintInOut } from 'svelte/easing';
-	import {slide} from 'svelte/transition';
+	import { slide } from 'svelte/transition';
-	import {IconType, type Service} from '$lib/types/data-types';
+	import { IconType, type Service } from '$lib/types/data-types';
-	import {onMount} from "svelte";
+	import { onMount } from 'svelte';
-	import {Skeleton} from "$lib/components/ui/skeleton";
+	import { Skeleton } from '$lib/components/ui/skeleton';
 
-	let { service, icons } = $props<{ service: Service, icons: Array<string> }>();
+	let { service, icons } = $props<{ service: Service; icons: Array<string> }>();
 
 	let hover = $state({
 		title: false,
@@ -16,39 +16,35 @@
 		ext: false
 	});
 
-	let img_source: string = $state("");
+	let img_source: string = $state('');
 
 	function checkForImage(service: Service) {
 		const rootSplit = service.icon.split('/');
-		const root = rootSplit[rootSplit.length - 1]
+		const root = rootSplit[rootSplit.length - 1];
 
 		if (icons.includes(`${root}.${service.iconType}`)) {
-			img_source = `${service.icon}.${service.iconType}`
+			img_source = `${service.icon}.${service.iconType}`;
-		}
+		} else {
-		else {
+			img_source = '';
-			img_source = ""
 		}
 	}
 
 	$effect(() => {
 		if (icons.length != 0) {
 			const rootSplit = service.icon.split('/');
-			const root = rootSplit[rootSplit.length - 1]
+			const root = rootSplit[rootSplit.length - 1];
 
 			if (service.iconType === IconType.SVG) {
-				checkForImage(service)
+				checkForImage(service);
-			}
+			} else {
-			else {
 				if (icons.includes(`${root}-36.${service.iconType}`)) {
-					img_source = `${service.icon}-36.${service.iconType}`
+					img_source = `${service.icon}-36.${service.iconType}`;
-				}
+				} else {
-				else {
+					checkForImage(service);
-					checkForImage(service)
 				}
 			}
 		}
 	});
-
 </script>
 
 <div
@@ -61,19 +57,17 @@
 			on:mouseleave={() => (hover.title = false)}
 		>
 			{#if service.icon}
-				{#if img_source != ""}
+				{#if img_source != ''}
 					<img
-							width="24px"
+						width="24px"
-							class="h-6 w-6 cursor-pointer"
+						class="h-6 w-6 cursor-pointer"
-							src={img_source}
+						src={img_source}
-							alt="{service.name} Logo"
+						alt="{service.name} Logo"
 					/>
 				{:else}
 					<Skeleton class="h-6 w-6 rounded-full" />
 				{/if}
-			{:else}
+			{:else}{/if}
-
-			{/if}
 			<a
 				href={service.href}
 				class="font-bold text-accent {hover.title ? 'text-primary' : 'text-secondary'}"

src/lib/components/ui/skeleton/index.ts

@@ -1,4 +1,4 @@
-import Root from "./skeleton.svelte";
+import Root from './skeleton.svelte';
 
 export {
 	Root,

src/lib/components/ui/skeleton/skeleton.svelte

@@ -1,14 +1,11 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
+	import { cn } from '$lib/utils';
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<div
+<div class={cn('animate-pulse rounded-md bg-primary/10', className)} {...$$restProps} />
-	class={cn("animate-pulse rounded-md bg-primary/10", className)}
-	{...$$restProps}
-/>

src/lib/types/data-types.ts

@@ -10,9 +10,9 @@ export type Service = {
 };
 
 export enum IconType {
-	SVG = "svg",
+	SVG = 'svg',
-	AVIF = "avif",
+	AVIF = 'avif',
-	PNG = "png",
+	PNG = 'png',
-	WEBP = "webp",
+	WEBP = 'webp',
-	JPG = "jpg",
+	JPG = 'jpg'
 }

src/routes/+page.svelte

@@ -1,8 +1,8 @@
 <svelte:head>
-    <title>Home</title>
+	<title>Home</title>
-    <meta name="description" content="Landing Page for neshweb.net">
+	<meta name="description" content="Landing Page for neshweb.net" />
 </svelte:head>
 
 <div class="h-full overflow-auto">
-    <h1>Home Page</h1>
+	<h1>Home Page</h1>
 </div>

src/routes/about/+page.svelte

@@ -1,4 +1,4 @@
 <svelte:head>
-    <title>About</title>
+	<title>About</title>
-    <meta name="description" content="Information about this Website">
+	<meta name="description" content="Information about this Website" />
 </svelte:head>

src/routes/assets/icons/+server.ts

@@ -1,10 +1,10 @@
-import * as fs from "fs";
+import * as fs from 'fs';
-import {json} from "@sveltejs/kit";
+import { json } from '@sveltejs/kit';
 
 export function GET() {
-    let content = fs.readdirSync("static/assets/icons");
+	let content = fs.readdirSync('static/assets/icons');
 
-    content = content.filter((entry) => entry != ".directory")
+	content = content.filter((entry) => entry != '.directory');
 
-    return json(content);
+	return json(content);
 }

src/routes/data/services/+server.ts

@@ -1,10 +1,10 @@
-import * as fs from "fs";
+import * as fs from 'fs';
-import {json} from "@sveltejs/kit";
+import { json } from '@sveltejs/kit';
 
 export function GET() {
-    const content = fs.readFileSync("static/data/services.json").toString();
+	const content = fs.readFileSync('static/data/services.json').toString();
 
-    let data = JSON.parse(content)
+	let data = JSON.parse(content);
 
-    return json(data);
+	return json(data);
 }

src/routes/servers/+page.svelte

@@ -1,4 +1,4 @@
 <svelte:head>
-    <title>Servers</title>
+	<title>Servers</title>
-    <meta name="description" content="Overview of Game Servers running on neshweb.net">
+	<meta name="description" content="Overview of Game Servers running on neshweb.net" />
 </svelte:head>

src/routes/services/+page.svelte

@@ -9,27 +9,26 @@
 	let icons: readonly string[] = $state.frozen([]);
 
 	async function get(url: string): Promise<any> {
-		let res = await fetch(url)
+		let res = await fetch(url);
 		if (res.ok) {
-			let data = await res.json()
+			let data = await res.json();
-			return data
+			return data;
-		}
+		} else {
-		else {
+			return Promise.reject();
-			return Promise.reject()
 		}
 	}
 
 	$effect(() => {
-		get("/data/services").then((data: Service[]) => {
+		get('/data/services').then((data: Service[]) => {
-			services = data
+			services = data;
-		})
+		});
-	})
+	});
 
 	$effect(() => {
-		get("/assets/icons").then((data: string[]) => {
+		get('/assets/icons').then((data: string[]) => {
-			icons = data
+			icons = data;
-		})
+		});
-	})
+	});
 </script>
 
 <svelte:head>