Merge pull request 'Bump forgejo-release to v2' (#50) from actions-update into main

Reviewed-on: https://forgejo.neshweb.net///Neshweb-Sites/main-site/pulls/50

.forgejo/workflows/build+release.yml

@@ -125,7 +125,7 @@ jobs:
     runs-on: docker
     steps:
       - name: Release New Version
-        uses: actions/forgejo-release@v1
+        uses: actions/forgejo-release@v2
         with:
           direction: upload
           url: https://forgejo.neshweb.net

.forgejo/workflows/pull-requests.yml

@@ -44,17 +44,6 @@ jobs:
       - name: Run Linter
         run: yarn lint
 
-      - name: Check if Version in package.json matches Tag
-        run: |
-          echo "Test"
-          VERSION=$(cat package.json | grep "version" | sed 's/.*://' | tr -d , | tr -d \" )
-          if test $VERSION != "${{  github.ref_name }}"; then 
-            echo "Expected Version is: '${{  github.ref_name }}' actual Version is: '$VERSION'"; 
-            exit 1
-          else 
-            echo "Version is: '$VERSION'"; 
-          fi
-
       - name: Build Site
         run: yarn build
 

package.json

@@ -2,7 +2,7 @@
 	"name": "main-site",
 	"author": "Neshura",
 	"license": "AGPL-3.0-or-later",
-	"version": "1.0.0-rc.4",
+	"version": "1.0.0",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",
@@ -41,9 +41,10 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"bits-ui": "^0.13.0",
+		"bits-ui": "^0.13.2",
 		"clsx": "^2.1.0",
 		"radix-icons-svelte": "^1.2.1",
+		"sanitize-html": "^2.11.0",
 		"socket.io": "^4.7.2",
 		"socket.io-client": "^4.7.2",
 		"tailwind-merge": "^2.2.0",

src/app.pcss

@@ -69,9 +69,9 @@
 
 	.nordlys {
 		--background: 0 0% 0%; /* #000000 */
-		--foreground: 173 80% 40%; /* #14b8a6 */
+		--foreground: 183 100% 96%; /* #14b8a6 */
 
-		--muted: 183 100% 96%; /* #ecfeff */
+		--muted: 180 10% 66%; /* #ecfeff */
 		--muted-foreground: 176 61% 19%; /* #134e4a */
 
 		--popover: 0 0% 0%; /* #000000 */
@@ -83,10 +83,10 @@
 		--border: 183 100% 96%; /* #ecfeff */
 		--input: 183 100% 96%; /* #ecfeff */
 
-		--primary: 173 80% 40%; /* #14b8a6 */
+		--primary: 183 100% 96%; /* #14b8a6 */
 		--primary-foreground: 221 39% 11%; /* #111827 */
 
-		--secondary: 183 100% 96%; /* #ecfeff */
+		--secondary: 173 80% 40%; /* #ecfeff */
 		--secondary-foreground: 173 80% 40%; /* #14b8a6 */
 
 		--accent: 183 100% 96%; /* #ecfeff */

src/lib/components/Emfed.svelte

@@ -0,0 +1,193 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import sanitizeHtml from 'sanitize-html';
+	import { Skeleton } from '$lib/components/ui/skeleton/index.js';
+	import { DoubleArrowUp } from 'radix-icons-svelte';
+
+	let {
+		account,
+		maxToots,
+		accountId,
+		excludeReplies
+	}: { account: string; maxToots?: number; accountId?: string; excludeReplies: boolean } = $props();
+
+	let toots: Toot[] = $state([]);
+	let loading = $state(false);
+
+	onMount(() => {
+		loading = true;
+		loadToots(account, accountId, maxToots, excludeReplies);
+	});
+
+	interface Toot {
+		created_at: string;
+		in_reply_to_id: string | null;
+		content: string;
+		url: string;
+		account: {
+			username: string;
+			display_name: string;
+			avatar: string;
+			url: string;
+		};
+		reblog?: Toot;
+		media_attachments: {
+			type: 'unknown' | 'image' | 'gifv' | 'video' | 'audio';
+			url: string;
+			preview_url: string;
+			description: string;
+			blurhash: string;
+		}[];
+	}
+
+	export async function getToots(
+		userURL: string,
+		limit: number,
+		excludeReplies: boolean,
+		accountId?: string
+	): Promise<Toot[]> {
+		const url = new URL(userURL);
+
+		// Either use the account id specified or look it up based on the username
+		// in the link.
+		const userId: string =
+			accountId ??
+			(await (async () => {
+				// Extract username from URL.
+				const parts = /@(\w+)$/.exec(url.pathname);
+				if (!parts) {
+					throw 'not a Mastodon user URL';
+				}
+				const username = parts[1];
+
+				// Look up user ID from username.
+				const lookupURL = Object.assign(new URL(url), {
+					pathname: '/api/v1/accounts/lookup',
+					search: `?acct=${username}`
+				});
+				return (await (await fetch(lookupURL)).json())['id'];
+			})());
+
+		// Fetch toots.
+		const tootURL = Object.assign(new URL(url), {
+			pathname: `/api/v1/accounts/${userId}/statuses`,
+			search: `?limit=${limit ?? 5}&exclude_replies=${!!excludeReplies}`
+		});
+
+		return await (await fetch(tootURL)).json();
+	}
+
+	function loadToots() {
+		getToots(account, maxToots ?? 5, excludeReplies === true, accountId).then((data) => {
+			toots = data;
+			loading = false;
+		});
+	}
+</script>
+
+{#snippet avatar(toot)}
+	<a class="flex flex-row gap-2" href={toot.account.url}>
+		<img
+			class="rounded-md"
+			width="48px"
+			height="48px"
+			src={toot.account.avatar}
+			alt="{toot.account.username} avatar"
+		/>
+		<div class="flex flex-col items-start">
+			<span class="h-6 font-bold hover:underline">{toot.account.display_name}</span>
+			<span class="h-4 text-sm text-muted">@{toot.account.username}</span>
+		</div>
+	</a>
+{/snippet}
+
+{#snippet body(toot)}
+	<div>
+		<div class="[&>p>span>a]:hover:underline">
+			{@html sanitizeHtml(toot.content)}
+		</div>
+		{#each toot.media_attachments.filter((att) => att.type === 'image') as image}
+			<a
+				class="block aspect-16/9 w-full overflow-hidden rounded-md"
+				href={image.url}
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				<img class="h-full w-full object-cover" src={image.preview_url} alt={image.description} />
+			</a>
+		{/each}
+	</div>
+{/snippet}
+
+<ol class="h-[40rem] w-full overflow-y-auto">
+	{#if loading}
+		{#each Array(maxToots ?? 5) as placeholder}
+			<li class="flex flex-col gap-3 px-4 py-3">
+				<div class="flex flex-row justify-between">
+					<div class="flex flex-row gap-2">
+						<Skeleton class="h-12 w-12 rounded-md" />
+						<div class="flex flex-col items-start gap-1">
+							<Skeleton class="h-6 w-24"></Skeleton>
+							<Skeleton class="h-4 w-20"></Skeleton>
+						</div>
+					</div>
+					<Skeleton class="h-10 w-16" />
+				</div>
+				<Skeleton class="h-36 w-full"></Skeleton>
+			</li>
+		{/each}
+	{:else}
+		{#each toots as toot}
+			<li class="flex flex-col gap-3 px-4 py-3">
+				{#if toot.reblog}
+					<div class="flex flex-row justify-between">
+						<div class="flex flex-col gap-1">
+							<a class="flex flex-row items-center gap-1" href={toot.account.url}>
+								<DoubleArrowUp />
+								<img
+									class="rounded-md"
+									width="23px"
+									height="23px"
+									src={toot.account.avatar}
+									alt="{toot.account.username} avatar"
+								/>
+								<span class="h-6 font-bold hover:underline">{toot.account.display_name}</span>
+							</a>
+							{@render avatar(toot.reblog)}
+						</div>
+						<a
+							class="flex flex-col items-center text-sm text-muted hover:underline"
+							href={toot.url}
+						>
+							<time datetime={toot.created_at}>
+								{new Date(toot.created_at).toLocaleDateString()}
+							</time>
+							<time datetime={toot.created_at}>
+								{new Date(toot.created_at).toLocaleTimeString()}
+							</time>
+						</a>
+					</div>
+					{@render body(toot.reblog)}
+				{:else}
+					<div class="flex flex-row justify-between">
+						{@render avatar(toot)}
+						<a
+							class="flex flex-col items-center text-sm text-muted hover:underline"
+							href={toot.url}
+						>
+							<time datetime={toot.created_at}>
+								{new Date(toot.created_at).toLocaleDateString()}
+							</time>
+							<time datetime={toot.created_at}>
+								{new Date(toot.created_at).toLocaleTimeString()}
+							</time>
+						</a>
+					</div>
+					{@render body(toot)}
+				{/if}
+			</li>
+		{/each}
+	{/if}
+</ol>

src/lib/components/ServerCard.svelte

@@ -0,0 +1,212 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import { Clipboard, Copy, OpenInNewWindow } from 'radix-icons-svelte';
+	import { quintInOut } from 'svelte/easing';
+	import { slide } from 'svelte/transition';
+	import { IconType, type Server } from '$lib/types/data-types';
+	import { Skeleton } from '$lib/components/ui/skeleton';
+	import type { Heartbeat } from '$lib/types/uptime-kuma-types';
+	import { Button } from '$lib/components/ui/button';
+
+	let { server, icons, monitor } = $props<{
+		server: Server;
+		icons: Array<string>;
+		monitor?: Heartbeat;
+	}>();
+
+	let status = $state(4);
+
+	let hover = $state({
+		title: false,
+		link: false,
+		ext: false
+	});
+
+	let img_source: string = $state('');
+
+	function copyToClipboard(value: string) {
+		navigator.clipboard.writeText(value);
+	}
+
+	function checkForImage(server: Server) {
+		const rootSplit = server.icon.split('/');
+		const root = rootSplit[rootSplit.length - 1];
+
+		if (icons.includes(`${root}.${server.iconType}`)) {
+			img_source = `${server.icon}.${server.iconType}`;
+		} else {
+			img_source = '';
+		}
+	}
+
+	$effect(() => {
+		if (typeof server.id === 'undefined') {
+			status = 99;
+		}
+		if (typeof monitor !== 'undefined') {
+			status = monitor.status;
+		}
+		if (icons.length != 0 && typeof server.icon !== 'undefined') {
+			const rootSplit = server.icon.split('/');
+			const root = rootSplit[rootSplit.length - 1];
+
+			if (server.iconType === IconType.SVG) {
+				checkForImage(server);
+			} else {
+				if (icons.includes(`${root}-36.${server.iconType}`)) {
+					img_source = `${server.icon}-36.${server.iconType}`;
+				} else {
+					checkForImage(server);
+				}
+			}
+		}
+	});
+</script>
+
+<div
+	class="flex h-48 w-[28rem] flex-col gap-y-3 rounded-xl border-t-4
+		{status == 99
+		? 'border-primary'
+		: status == 0
+			? 'border-offline'
+			: status == 1
+				? 'border-online'
+				: status == 2
+					? 'border-pending'
+					: status == 3
+						? 'border-maintenance'
+						: 'border-maintenance'}
+		z-0 bg-black/55 p-4 backdrop-blur-sm"
+>
+	<div class="flex flex-row justify-between">
+		<div
+			class="flex flex-row items-center gap-1"
+			on:mouseover={() => (hover.title = true)}
+			on:mouseleave={() => (hover.title = false)}
+		>
+			{#if typeof server.icon !== 'undefined'}
+				{#if img_source != ''}
+					<img
+						width="24px"
+						class="h-6 w-6 cursor-pointer"
+						src={img_source}
+						alt="{server.name} Logo"
+					/>
+				{:else}
+					<Skeleton class="h-6 w-6 rounded-full" />
+				{/if}
+			{:else}{/if}
+			{#if typeof server.href !== 'undefined'}
+				<a href={server.href} class="font-bold {!hover.title || 'text-secondary'}">{server.name}</a>
+				{#if hover.title}
+					<div
+						transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }}
+						class="grid items-center"
+					>
+						<OpenInNewWindow
+							color={hover.title ? 'hsl(var(--secondary))' : 'hsl(var(--primary)'}
+							class="self-center"
+						/>
+					</div>
+				{/if}
+			{:else}
+				<h2 class="font-bold">{server.name}</h2>
+			{/if}
+		</div>
+
+		{#if typeof server.id !== 'undefined'}
+			<h1
+				class="w-16 rounded-md border-b-2
+			{status == 0
+					? 'border-offline'
+					: status == 1
+						? 'border-online'
+						: status == 2
+							? 'border-pending'
+							: status == 3
+								? 'border-maintenance'
+								: 'border-maintenance'}
+			text-center text-sm
+			{status == 0
+					? 'text-offline'
+					: status == 1
+						? 'text-online'
+						: status == 2
+							? 'text-pending'
+							: status == 3
+								? 'text-maintenance'
+								: 'text-maintenance'}"
+			>
+				{status == 0
+					? 'Offline'
+					: status == 1
+						? 'Online'
+						: status == 2
+							? 'Pending'
+							: status == 3
+								? 'Maint.'
+								: 'Loading'}
+			</h1>
+		{/if}
+	</div>
+	<p class="text-wrap text-center text-sm">{server.desc}</p>
+	{#if typeof server.connection !== 'undefined'}
+		<div class="flex w-full flex-col items-center">
+			<Button
+				variant="ghost"
+				class="	flex w-fit flex-row items-center gap-1 rounded-sm border px-2 py-1 text-center font-mono text-sm font-bold
+							hover:border-primary hover:bg-transparent hover:text-primary/60
+							active:border-secondary active:bg-black/70 active:text-secondary"
+				on:click={() => copyToClipboard(server.connection)}
+			>
+				{server.connection}
+				<Copy />
+			</Button>
+		</div>
+	{/if}
+	<div class="grid {server.extLink ? 'grid-cols-2' : 'grid-cols-1'} mt-auto justify-items-center">
+		{#if typeof server.href !== 'undefined'}
+			<a
+				class="flex flex-row rounded-md border-x-2 px-2 text-sm hover:border-secondary hover:text-secondary"
+				href={server.href}
+				on:mouseover={() => (hover.link = true)}
+				on:mouseleave={() => (hover.link = false)}
+			>
+				Open
+				{#if hover.link}
+					<div
+						transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }}
+						class="grid items-center pl-1 pr-0"
+					>
+						<OpenInNewWindow
+							color={hover.link ? 'hsl(var(--secondary))' : 'hsl(var(--primary)'}
+							class="self-center"
+						/>
+					</div>
+				{/if}
+			</a>
+		{/if}
+		{#if server.extLink}
+			<a
+				class="flex flex-row rounded-md border-x-2 px-2 text-sm hover:border-secondary hover:text-secondary"
+				href={server.extLink}
+				on:mouseover={() => (hover.ext = true)}
+				on:mouseleave={() => (hover.ext = false)}
+			>
+				Official Site
+				{#if hover.ext}
+					<div
+						transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }}
+						class="grid items-center pl-1 pr-0"
+					>
+						<OpenInNewWindow
+							color={hover.ext ? 'hsl(var(--secondary))' : 'hsl(var(--primary)'}
+							class="self-center"
+						/>
+					</div>
+				{/if}
+			</a>
+		{/if}
+	</div>
+</div>

src/lib/components/ServiceCard.svelte

@@ -37,9 +37,6 @@
 
 	$effect(() => {
 		if (typeof monitor !== 'undefined') {
-			if (monitor.monitorID == 9) {
-				console.log('Vaultwarden: ', monitor.status);
-			}
 			status = monitor.status;
 		}
 		if (icons.length != 0) {
@@ -60,7 +57,7 @@
 </script>
 
 <div
-	class="flex h-48 w-[28rem] flex-col gap-y-2 rounded-xl border-t-4
+	class="flex h-48 w-[28rem] flex-col gap-y-3 rounded-xl border-t-4
 		{status == 0
 		? 'border-offline'
 		: status == 1
@@ -70,9 +67,9 @@
 				: status == 3
 					? 'border-maintenance'
 					: 'border-maintenance'}
-		bg-black/55 p-4"
+		z-0 bg-black/55 p-4 backdrop-blur-sm"
 >
-	<div class="flex flex-row justify-between pb-4">
+	<div class="flex flex-row justify-between">
 		<div
 			class="flex flex-row items-center gap-1"
 			on:mouseover={() => (hover.title = true)}
@@ -90,18 +87,14 @@
 					<Skeleton class="h-6 w-6 rounded-full" />
 				{/if}
 			{:else}{/if}
-			<a
-				href={service.href}
-				class="font-bold text-accent {hover.title ? 'text-primary' : 'text-secondary'}"
-				>{service.name}</a
-			>
+			<a href={service.href} class="font-bold {!hover.title || 'text-secondary'}">{service.name}</a>
 			{#if hover.title}
 				<div
 					transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }}
 					class="grid items-center"
 				>
 					<OpenInNewWindow
-						color={hover.title ? 'hsl(var(--primary))' : 'hsl(var(--secondary)'}
+						color={hover.title ? 'hsl(var(--secondary))' : 'hsl(var(--primary)'}
 						class="self-center"
 					/>
 				</div>
@@ -141,11 +134,11 @@
 							: 'Loading'}
 		</h1>
 	</div>
-	<p class="text-wrap text-center text-sm text-accent">{service.desc}</p>
+	<p class="text-wrap text-center text-sm">{service.desc}</p>
 	<p class="text-center text-sm font-bold text-destructive">{service.warn}</p>
 	<div class="grid {service.extLink ? 'grid-cols-2' : 'grid-cols-1'} mt-auto justify-items-center">
 		<a
-			class="flex flex-row rounded-md border-x-2 px-2 text-sm text-accent hover:border-primary hover:text-primary"
+			class="flex flex-row rounded-md border-x-2 px-2 text-sm hover:border-secondary hover:text-secondary"
 			href={service.href}
 			on:mouseover={() => (hover.link = true)}
 			on:mouseleave={() => (hover.link = false)}
@@ -157,7 +150,7 @@
 					class="grid items-center pl-1 pr-0"
 				>
 					<OpenInNewWindow
-						color={hover.link ? 'hsl(var(--primary))' : 'hsl(var(--secondary)'}
+						color={hover.link ? 'hsl(var(--secondary))' : 'hsl(var(--primary)'}
 						class="self-center"
 					/>
 				</div>
@@ -165,7 +158,7 @@
 		</a>
 		{#if service.extLink}
 			<a
-				class="flex flex-row rounded-md border-x-2 px-2 text-sm text-accent hover:border-primary hover:text-primary"
+				class="flex flex-row rounded-md border-x-2 px-2 text-sm hover:border-secondary hover:text-secondary"
 				href={service.extLink}
 				on:mouseover={() => (hover.ext = true)}
 				on:mouseleave={() => (hover.ext = false)}
@@ -177,7 +170,7 @@
 						class="grid items-center pl-1 pr-0"
 					>
 						<OpenInNewWindow
-							color={hover.ext ? 'hsl(var(--primary))' : 'hsl(var(--secondary)'}
+							color={hover.ext ? 'hsl(var(--secondary))' : 'hsl(var(--primary)'}
 							class="self-center"
 						/>
 					</div>

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

@@ -0,0 +1,7 @@
+import Root from './separator.svelte';
+
+export {
+	Root,
+	//
+	Root as Separator
+};

src/lib/components/ui/separator/separator.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Separator as SeparatorPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+
+	type $$Props = SeparatorPrimitive.Props;
+
+	let className: $$Props['class'] = undefined;
+	export let orientation: $$Props['orientation'] = 'horizontal';
+	export let decorative: $$Props['decorative'] = undefined;
+	export { className as class };
+</script>
+
+<SeparatorPrimitive.Root
+	class={cn(
+		'shrink-0 bg-border',
+		orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+		className
+	)}
+	{orientation}
+	{decorative}
+	{...$$restProps}
+/>

src/lib/stores/socketStore.ts

@@ -0,0 +1,4 @@
+import { writable } from 'svelte/store';
+import { io } from 'socket.io-client';
+
+export let socketStore = writable(io('https://status.neshweb.net/'));

src/lib/stores/uptimeStore.ts

@@ -0,0 +1,4 @@
+import { type Writable, writable } from 'svelte/store';
+import type { Heartbeat } from '$lib/types/uptime-kuma-types';
+
+export let uptimeStore: Writable<Map<number, Heartbeat>> = writable(new Map());

src/lib/types/data-types.ts

@@ -1,7 +1,7 @@
 export type Service = {
 	readonly name: string;
-	readonly icon: string;
-	readonly iconType: IconType;
+	readonly icon?: string;
+	readonly iconType?: IconType;
 	readonly href: string;
 	readonly desc: string;
 	readonly warn: string;
@@ -9,6 +9,17 @@ export type Service = {
 	readonly id: number;
 };
 
+export type Server = {
+	readonly name: string;
+	readonly icon?: string;
+	readonly iconType?: IconType;
+	readonly connection?: string;
+	readonly href?: string;
+	readonly desc?: string;
+	readonly extLink?: string;
+	readonly id?: number;
+};
+
 export enum IconType {
 	SVG = 'svg',
 	AVIF = 'avif',

src/routes/+layout.svelte

@@ -1,7 +1,29 @@
+<svelte:options runes={true} />
+
 <script>
 	import '../app.pcss';
 	import Header from './Header.svelte';
+	import { socketStore } from '$lib/stores/socketStore';
+	import { beforeNavigate } from '$app/navigation';
+	import Footer from './Footer.svelte';
+
+	$effect(() => {
+		beforeNavigate((navigation) => {
+			const servers =
+				navigation.to.url.pathname === '/servers' || navigation.from.url.pathname === '/servers';
+			const services =
+				navigation.to.url.pathname === '/services' || navigation.from.url.pathname === '/services';
+			if (!(servers && services)) {
+				$socketStore.close();
+			}
+		});
+	});
 </script>
 
 <Header />
-<slot />
+
+<div class="h-full pb-8 pt-16">
+	<slot />
+</div>
+
+<Footer />

src/routes/+page.svelte

@@ -1,8 +1,65 @@
+<script lang="ts">
+	import { Separator } from '$lib/components/ui/separator';
+	import { OpenInNewWindow } from 'radix-icons-svelte';
+	import Emfed from '$lib/components/Emfed.svelte';
+</script>
+
 <svelte:head>
 	<title>Home</title>
 	<meta name="description" content="Landing Page for neshweb.net" />
 </svelte:head>
 
-<div class="h-full overflow-auto">
-	<h1>Home Page</h1>
+<div
+	class="flex max-h-full flex-row flex-wrap justify-center justify-around gap-4 overflow-auto p-8"
+>
+	<div class="flex w-[22rem] flex-1 flex-col items-center">
+		<div class="flex flex-col gap-y-2 rounded-xl border bg-black/55 p-4 backdrop-blur-sm">
+			<h1 class="text-center text-2xl">Home Page</h1>
+			<p>
+				I'm not sure what to put here quite yet, maybe I'll think of something eventually. In the
+				meantime I've linked some of my accounts in the sidebar to the right
+			</p>
+		</div>
+	</div>
+	<div
+		class="flex w-[22rem] flex-col items-center gap-y-1 overflow-auto rounded-xl border bg-black/55 py-1 backdrop-blur-sm"
+	>
+		<p class="font-bold">Fediverse Accounts</p>
+		<Separator class="max-w-80" />
+		<a
+			rel="me"
+			href="https://mastodon.neshweb.net/@neshura"
+			target="_blank"
+			class="flex flex-row items-center gap-1 hover:text-secondary"
+		>
+			Mastodon
+			<OpenInNewWindow />
+		</a>
+		<a
+			rel="noopener noreferrer"
+			href="https://bookwormstory.social/u/Neshura"
+			target="_blank"
+			class="flex flex-row items-center gap-1 hover:text-secondary"
+		>
+			Lemmy
+			<OpenInNewWindow />
+		</a>
+		<a
+			rel="noopener noreferrer"
+			href="https://neshweb.tv/c/neshura_ch/videos"
+			target="_blank"
+			class="flex flex-row items-center gap-1 hover:text-secondary"
+		>
+			PeerTube
+			<OpenInNewWindow />
+		</a>
+		<Separator class="max-w-80" />
+		<p class="font-bold">Mastodon Feed</p>
+		<Separator class="max-w-80" />
+		<Emfed
+			account="https://mastodon.neshweb.net/@neshura"
+			maxToots={4}
+			accountId="109199738141333007"
+		/>
+	</div>
 </div>

src/routes/Footer.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { version } from '$app/environment';
+</script>
+
+<div
+	class="absolute bottom-0 z-50 flex h-8 w-full flex-row items-center gap-3 border-t bg-black/40 backdrop-blur-sm"
+>
+	<p class="px-4">
+		Version:
+		<a
+			href="https://forgejo.neshweb.net/Neshweb-Sites/main-site/releases/tag/{version}"
+			class="text-secondary hover:underline"
+		>
+			{version}
+		</a>
+	</p>
+</div>

src/routes/Header.svelte

@@ -2,19 +2,17 @@
 	import { page } from '$app/stores';
 	import { Button } from '$lib/components/ui/button';
 
-	const button = 'border-t-2 bg-black/55 hover:bg-black/70 hover:border-primary w-28';
+	const button = 'border-t-2 bg-black/55 hover:bg-black/70 hover:border-secondary w-28';
 </script>
 
 <ul
-	class="sticky flex h-16 w-full flex-row items-center justify-center gap-3 border-b bg-black/40 backdrop-blur-sm"
+	class="absolute z-50 flex h-16 w-full flex-row items-center gap-3 overflow-x-auto border-b bg-black/40 backdrop-blur-sm"
 >
-	<li>
+	<li class="ml-auto">
 		<Button
 			variant="ghost"
 			href="/"
-			class="{button} + {$page.url.pathname === '/'
-				? 'border-primary text-primary'
-				: 'text-accent'}"
+			class="{button} + {!($page.url.pathname === '/') || 'border-secondary text-secondary'}"
 		>
 			Home
 		</Button>
@@ -23,9 +21,8 @@
 		<Button
 			variant="ghost"
 			href="/servers"
-			class="{button} + {$page.url.pathname.startsWith('/servers')
-				? 'border-primary text-primary'
-				: 'text-accent'}"
+			class="{button} + {!$page.url.pathname.startsWith('/servers') ||
+				'border-secondary text-secondary'}"
 		>
 			Servers
 		</Button>
@@ -34,20 +31,18 @@
 		<Button
 			variant="ghost"
 			href="/services"
-			class="{button} + {$page.url.pathname.startsWith('/services')
-				? 'border-primary text-primary'
-				: 'text-accent'}"
+			class="{button} + {!$page.url.pathname.startsWith('/services') ||
+				'border-secondary text-secondary'}"
 		>
 			Services
 		</Button>
 	</li>
-	<li>
+	<li class="mr-auto">
 		<Button
 			variant="ghost"
 			href="/about"
-			class="{button} + {$page.url.pathname.startsWith('/about')
-				? 'border-primary text-primary'
-				: 'text-accent'}"
+			class="{button} + {!$page.url.pathname.startsWith('/about') ||
+				'border-secondary text-secondary'}"
 		>
 			About
 		</Button>

src/routes/about/+page.svelte

@@ -2,3 +2,10 @@
 	<title>About</title>
 	<meta name="description" content="Information about this Website" />
 </svelte:head>
+
+<div class="flex max-h-full flex-row flex-wrap justify-center gap-10 overflow-auto p-8">
+	<p>
+		This is just a small Website I built to organize all of the Services I am self-hosting. Maybe
+		I'll eventually add something actually useful to the site but until then this is all you'll get.
+	</p>
+</div>

src/routes/css/+page.svelte

@@ -0,0 +1,29 @@
+<svelte:head>
+	<title>CSS Test</title>
+	<meta name="description" content="CSS playground" />
+</svelte:head>
+
+<p class="text-background">Background</p>
+<p class="text-foreground">Foreground</p>
+<p class="text-muted">Muted</p>
+<p class="text-muted-foreground">Muted Foreground</p>
+<p class="text-popover">Popover</p>
+<p class="text-popover-foreground">Popover Foreground</p>
+<p class="text-card">card</p>
+<p class="text-card-foreground">card-foreground</p>
+<p class="text-border">border</p>
+<p class="text-input">input</p>
+<p class="text-primary">Primary</p>
+<p class="text-primary-foreground">primary-foreground</p>
+<p class="text-secondary">secondary</p>
+<p class="text-secondary-foreground">secondary-foreground</p>
+<p class="text-accent">accent</p>
+<p class="text-secondary-foreground">secondary-foreground</p>
+<p class="text-accent">accent</p>
+<p class="text-accent-foreground">accent-foreground</p>
+<p class="text-destructive">destructive</p>
+<p class="text-destructive-foreground">destructive-foreground</p>
+<p class="text-offline">offline</p>
+<p class="text-online">online</p>
+<p class="text-pending">pending</p>
+<p class="text-maintenance">maintenance</p>

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

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

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

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

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

@@ -0,0 +1,62 @@
+import { io, Socket } from 'socket.io-client';
+import * as fs from 'fs';
+
+export async function load() {
+	const promise = getJwt();
+
+	return {
+		promise
+	};
+}
+
+async function getJwt(): Promise<string> {
+	const socket = io('https://status.neshweb.net/');
+	const credFile = './credentials.json';
+	let token = '';
+	let valid = false;
+
+	if (fs.existsSync(credFile)) {
+		const content = fs.readFileSync(credFile);
+		token = content.toString();
+	}
+
+	socket.on('connect', async () => {
+		if (token == '') {
+			token = await login(socket);
+			valid = true;
+		} else {
+			socket.emit('loginByToken', token, async (res) => {
+				if (!res.ok) {
+					token = await login(socket);
+				}
+				valid = true;
+			});
+		}
+	});
+
+	while (!valid) {
+		await new Promise((resolve) => setTimeout(resolve, 10));
+	}
+
+	fs.writeFileSync(credFile, token);
+
+	return token;
+}
+
+async function login(socket: Socket): Promise<string> {
+	let token = '';
+	socket.emit(
+		'login',
+		{ username: process.env.KUMA_USERNAME, password: process.env.KUMA_PASSWORD, token: '' },
+		(res: { token: string }) => {
+			token = res.token;
+			socket.close();
+		}
+	);
+
+	while (token == '') {
+		await new Promise((resolve) => setTimeout(resolve, 10));
+	}
+
+	return token;
+}

src/routes/servers/+page.svelte

@@ -1,4 +1,97 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import type { Server } from '$lib/types/data-types';
+	import { io } from 'socket.io-client';
+	import type { Heartbeat } from '$lib/types/uptime-kuma-types';
+	import ServerCard from '$lib/components/ServerCard.svelte';
+	import { socketStore } from '$lib/stores/socketStore';
+	import { uptimeStore } from '$lib/stores/uptimeStore';
+
+	let { data }: { data: { promise: Promise<string> } } = $props();
+
+	let token = $state();
+
+	data.promise.then((jwt) => {
+		token = jwt;
+	});
+
+	let servers: readonly Server[] = $state.frozen([]);
+
+	let icons: readonly string[] = $state.frozen([]);
+
+	let monitorList = $state($uptimeStore);
+
+	let socket = $socketStore;
+
+	$effect(() => {
+		if (token) {
+			if (!socket.connected) {
+				socket.connect();
+			}
+
+			socket.on('connect', () => {
+				socket.emit('loginByToken', token, () => {});
+			});
+
+			socket.on('heartbeatList', (_, data) => {
+				let recent = data[data.length - 1];
+				let monitor: Heartbeat = {
+					monitorID: recent.monitor_id,
+					status: recent.status,
+					time: recent.time,
+					msg: recent.msg,
+					ping: recent.ping,
+					important: recent.important,
+					duration: recent.duration
+				};
+				monitorList.set(monitor.monitorID, monitor);
+				monitorList = new Map(monitorList.entries());
+				$uptimeStore = monitorList;
+			});
+
+			socket.on('heartbeat', (data) => {
+				monitorList.set(data.monitorID, data);
+				monitorList = new Map(monitorList.entries());
+				$uptimeStore = monitorList;
+			});
+		}
+	});
+
+	async function get(url: string): Promise<any> {
+		let res = await fetch(url);
+		if (res.ok) {
+			let data = await res.json();
+			return data;
+		} else {
+			return Promise.reject();
+		}
+	}
+
+	$effect(() => {
+		get('/data/servers').then((data: Server[]) => {
+			servers = data;
+		});
+	});
+
+	$effect(() => {
+		get('/assets/icons').then((data: string[]) => {
+			icons = data;
+		});
+	});
+</script>
+
 <svelte:head>
 	<title>Servers</title>
 	<meta name="description" content="Overview of Game Servers running on neshweb.net" />
 </svelte:head>
+
+<div class="flex max-h-full flex-row flex-wrap justify-center gap-10 overflow-auto p-8">
+	{#each servers as server}
+		{#if typeof server.id === 'undefined'}
+			<ServerCard {server} {icons} />
+		{:else}
+			<ServerCard {server} {icons} monitor={monitorList.get(server.id)} />
+		{/if}
+	{/each}
+</div>

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

@@ -1,27 +1,62 @@
-import { io } from 'socket.io-client';
+import { io, Socket } from 'socket.io-client';
 import * as fs from 'fs';
 
 export async function load() {
-	const credFile = './credentials.json';
+	const promise = getJwt();
+
+	return {
+		promise
+	};
+}
+
+async function getJwt(): Promise<string> {
 	const socket = io('https://status.neshweb.net/');
-
+	const credFile = './credentials.json';
 	let token = '';
+	let valid = false;
 
-	socket.on('connect', () => {
-		socket.emit(
-			'login',
-			{ username: process.env.KUMA_USERNAME, password: process.env.KUMA_PASSWORD, token: '' },
-			(res) => {
-				token = res.token;
-			}
-		);
+	if (fs.existsSync(credFile)) {
+		const content = fs.readFileSync(credFile);
+		token = content.toString();
+	}
+
+	socket.on('connect', async () => {
+		if (token == '') {
+			token = await login(socket);
+			valid = true;
+		} else {
+			socket.emit('loginByToken', token, async (res) => {
+				if (!res.ok) {
+					token = await login(socket);
+				}
+				valid = true;
+			});
+		}
 	});
 
+	while (!valid) {
+		await new Promise((resolve) => setTimeout(resolve, 10));
+	}
+
+	fs.writeFileSync(credFile, token);
+
+	return token;
+}
+
+async function login(socket: Socket): Promise<string> {
+	let token = '';
+	socket.emit(
+		'login',
+		{ username: process.env.KUMA_USERNAME, password: process.env.KUMA_PASSWORD, token: '' },
+		(res: { token: string }) => {
+			token = res.token;
+			socket.close();
+		}
+	);
+
 	while (token == '') {
 		await new Promise((resolve) => setTimeout(resolve, 10));
 	}
 
-	return {
-		token
-	};
+	return token;
 }

src/routes/services/+page.svelte

@@ -5,33 +5,37 @@
 	import type { Service } from '$lib/types/data-types';
 	import { io } from 'socket.io-client';
 	import type { Heartbeat } from '$lib/types/uptime-kuma-types';
+	import { socketStore } from '$lib/stores/socketStore';
+	import { onDestroy } from 'svelte';
+	import { uptimeStore } from '$lib/stores/uptimeStore';
 
-	let { data }: { data: { token: string } } = $props();
+	let { data }: { data: { promise: Promise<string> } } = $props();
 
-	$effect(() => {
-		console.log('Data:', data.token);
+	let token = $state();
+
+	data.promise.then((jwt) => {
+		token = jwt;
 	});
 
 	let services: readonly Service[] = $state.frozen([]);
 
 	let icons: readonly string[] = $state.frozen([]);
 
-	let monitorList: Map<number, Heartbeat> = $state(new Map());
+	let monitorList = $state($uptimeStore);
 
-	//let token = $props();
+	let socket = $socketStore;
 
 	$effect(() => {
-		if (data.token) {
-			const socket = io('https://status.neshweb.net/');
+		if (token) {
+			if (!socket.connected) {
+				socket.connect();
+			}
 
 			socket.on('connect', () => {
-				socket.emit('loginByToken', data.token, (res) => {
-					console.log(data.token);
-					console.log(res);
-				});
+				socket.emit('loginByToken', token, () => {});
 			});
 
-			socket.on('heartbeatList', (idString: string, data) => {
+			socket.on('heartbeatList', (_, data) => {
 				let recent = data[data.length - 1];
 				let monitor: Heartbeat = {
 					monitorID: recent.monitor_id,
@@ -44,11 +48,13 @@
 				};
 				monitorList.set(monitor.monitorID, monitor);
 				monitorList = new Map(monitorList.entries());
+				$uptimeStore = monitorList;
 			});
 
 			socket.on('heartbeat', (data) => {
 				monitorList.set(data.monitorID, data);
 				monitorList = new Map(monitorList.entries());
+				$uptimeStore = monitorList;
 			});
 		}
 	});

static/data/servers.json

@@ -1,31 +1,25 @@
 [
   {
-  "name": "Minecraft",
-  "icon": "/assets/icons/minecraft-logo",
-  "iconType": "avif",
-  "href": "https://minecraft.neshweb.net/",
-  "desc": "View all currently available Minecraft Servers and their mods"
+    "name": "Minecraft",
+    "icon": "/assets/icons/minecraft-logo",
+    "iconType": "avif",
+    "connection": "minecraft.neshweb.net",
+    "href": "https://minecraft.neshweb.net/",
+    "desc": "View all currently available Minecraft Servers and their mods",
+    "id": 38
   },
   {
-  "name": "Ready or Not",
-  "icon": "/assets/icons/ron-logo",
-  "iconType": "avif",
-  "href": "https://readyornot.neshweb.net/",
-  "desc": "Collection of Floor Plans for the Game 'Ready or Not'"
+    "name": "Ready or Not",
+    "icon": "/assets/icons/ron-logo",
+    "iconType": "avif",
+    "href": "https://readyornot.neshweb.net/",
+    "desc": "Collection of Floor Plans for the Game 'Ready or Not'"
   },
   {
-  "name": "Zomboid",
-  "icon": "/assets/icons/zomboid-logo",
-  "iconType": "avif",
-  "ip": "91.13.248.30",
-  "status": "Online"
+    "name": "Factorio"
   },
   {
-  "name": "Factorio",
-  "status": "Online"
-  },
-  {
-  "name": "Space Engineers",
-  "status": "Online"
+    "name": "Space Engineers",
+    "id": 13
   }
 ]

static/data/services.json

@@ -13,7 +13,7 @@
 		"name": "Kavita",
 		"icon": "/assets/icons/kavita-logo",
 		"iconType": "svg",
-		"href": "https://kavita.neshweb.net",
+		"href": "https://kavita.neshweb.net/",
 		"desc": "Self-hosted Manga Library",
 		"warn": "Registration via Admin invite",
 		"id": 5
@@ -41,7 +41,7 @@
 		"name": "PeerTube",
 		"icon": "/assets/icons/peertube-logo",
 		"iconType": "svg",
-		"href": "https://tube.neshweb.net/",
+		"href": "https://neshweb.tv/",
 		"desc": "Self-hosted PeerTube Instance",
 		"warn": "Note: Registration only via Admin",
 		"id": 8
@@ -59,7 +59,7 @@
 		"name": "Vaultwarden",
 		"icon": "/assets/icons/vaultwarden-logo",
 		"iconType": "svg",
-		"href": "https://vault.neshweb.net",
+		"href": "https://vault.neshweb.net/",
 		"desc": "Self-hosted Password Manager",
 		"warn": "Note: Invite only",
 		"id": 9
@@ -68,7 +68,7 @@
 		"name": "Jellyfin",
 		"icon": "/assets/icons/jellyfin-logo",
 		"iconType": "svg",
-		"href": "https://jellyfin.neshweb.net/",
+		"href": "https://mov.neshweb.tv/",
 		"desc": "Open-Source, Self-Hosted Media Platform",
 		"warn": "Note: Registration only via Admin",
 		"id": 37
@@ -82,15 +82,6 @@
 		"warn": "Note: Registration only via Admin",
 		"id": 10
 	},
-	{
-		"name": "Gitlab",
-		"icon": "/assets/icons/gitlab-logo",
-		"iconType": "svg",
-		"href": "https://gitlab.neshweb.net/",
-		"desc": "Self-hosted Git Service",
-		"warn": "Note: Registration only via Admin",
-		"id": 2
-	},
 	{
 		"name": "Forgejo",
 		"icon": "/assets/icons/forgejo-logo",
@@ -135,5 +126,13 @@
 		"desc": "Docker Compose WebUI",
 		"warn": "Note: Admin Only",
 		"id": 35
+	},
+	{
+		"name": "bookwormstory.social",
+		"icon": "/assets/icons/bookworm-logo",
+		"iconType": "avif",
+		"href": "https://bookwormstory.social/",
+		"desc": "Lemmy Instance hosted for the community around Ascendance of a Bookworm",
+		"id": 19
 	}
 ]

svelte.config.js

@@ -1,6 +1,10 @@
 import adapter from '@sveltejs/adapter-auto';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
-import path from "path";
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+
+const path = fileURLToPath(new URL('package.json', import.meta.url));
+const pkg = JSON.parse(readFileSync(path, 'utf8'));
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -13,6 +17,9 @@ const config = {
 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
 		adapter: adapter(),
+		version: {
+			name: pkg.version
+		}
 	}
 };
 

tailwind.config.js

@@ -4,7 +4,7 @@ import { fontFamily } from "tailwindcss/defaultTheme";
 const config = {
 	darkMode: ["class"],
 	content: ["./src/**/*.{html,js,svelte,ts}"],
-  safelist: ["dark"],
+  safelist: ["dark", "nordlys"],
 	theme: {
 		container: {
 			center: true,
@@ -68,6 +68,9 @@ const config = {
 			},
 			fontFamily: {
 				sans: [...fontFamily.sans]
+			},
+			aspectRatio: {
+				'16/9': '16 / 9',
 			}
 		}
 	},

yarn.lock

@@ -702,10 +702,10 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
   integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 
-bits-ui@^0.13.0:
-  version "0.13.0"
-  resolved "https://registry.yarnpkg.com/bits-ui/-/bits-ui-0.13.0.tgz#dff61c8b4a95b1f589105444da74396bdc6702e7"
-  integrity sha512-XMvGKhJQMvSWqaan0eaIx1uAVcFBpImgO6xf+XTb7UhqdzbH0//6be4DeR1nRUpIU70XoU1B7i3lMPrTWg37ng==
+bits-ui@^0.13.2:
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/bits-ui/-/bits-ui-0.13.2.tgz#caf47bfed774c7f28600b1d41ac69db0509ec347"
+  integrity sha512-hSxj/BDazR49j2QkgsAnWjHsWdG6OvprCF0IagQm4mDf1pwiunXXJMnSciNxocvaZ/HAkKQRf8R6orwDPO/HYg==
   dependencies:
     "@internationalized/date" "^3.5.1"
     "@melt-ui/svelte" "0.67.0"
@@ -857,7 +857,7 @@ deep-is@^0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
-deepmerge@^4.3.1:
+deepmerge@^4.2.2, deepmerge@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
   integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
@@ -901,6 +901,36 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-serializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
+  integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.2"
+    entities "^4.2.0"
+
+domelementtype@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
+  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
+
+domhandler@^5.0.2, domhandler@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
+  integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
+  dependencies:
+    domelementtype "^2.3.0"
+
+domutils@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e"
+  integrity sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==
+  dependencies:
+    dom-serializer "^2.0.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+
 eastasianwidth@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
@@ -953,6 +983,11 @@ engine.io@~6.5.2:
     engine.io-parser "~5.2.1"
     ws "~8.11.0"
 
+entities@^4.2.0, entities@^4.4.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
+  integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
+
 es6-promise@^3.1.2:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.3.1.tgz#a08cdde84ccdbf34d027a1451bc91d4bcd28a613"
@@ -1320,6 +1355,16 @@ hasown@^2.0.0:
   dependencies:
     function-bind "^1.1.2"
 
+htmlparser2@^8.0.0:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-8.0.2.tgz#f002151705b383e62433b5cf466f5b716edaec21"
+  integrity sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+    domutils "^3.0.1"
+    entities "^4.4.0"
+
 ignore@^5.2.0, ignore@^5.2.4:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.0.tgz#67418ae40d34d6999c95ff56016759c718c82f78"
@@ -1397,6 +1442,11 @@ is-path-inside@^3.0.3:
   resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
   integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
 
+is-plain-object@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344"
+  integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==
+
 is-reference@^3.0.1:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/is-reference/-/is-reference-3.0.2.tgz#154747a01f45cd962404ee89d43837af2cba247c"
@@ -1696,6 +1746,11 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
+parse-srcset@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/parse-srcset/-/parse-srcset-1.0.2.tgz#f2bd221f6cc970a938d88556abc589caaaa2bde1"
+  integrity sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==
+
 path-exists@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
@@ -1819,6 +1874,15 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
+postcss@^8.3.11:
+  version "8.4.33"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.33.tgz#1378e859c9f69bf6f638b990a0212f43e2aaa742"
+  integrity sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 postcss@^8.4.23, postcss@^8.4.29, postcss@^8.4.32, postcss@^8.4.5:
   version "8.4.32"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.32.tgz#1dac6ac51ab19adb21b8b34fd2d93a86440ef6c9"
@@ -1959,6 +2023,18 @@ sander@^0.5.0:
     mkdirp "^0.5.1"
     rimraf "^2.5.2"
 
+sanitize-html@^2.11.0:
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/sanitize-html/-/sanitize-html-2.11.0.tgz#9a6434ee8fcaeddc740d8ae7cd5dd71d3981f8f6"
+  integrity sha512-BG68EDHRaGKqlsNjJ2xUB7gpInPA8gVx/mvjO743hZaeMCZ2DwzW7xvsqZ+KNU4QKwj86HJ3uu2liISf2qBBUA==
+  dependencies:
+    deepmerge "^4.2.2"
+    escape-string-regexp "^4.0.0"
+    htmlparser2 "^8.0.0"
+    is-plain-object "^5.0.0"
+    parse-srcset "^1.0.2"
+    postcss "^8.3.11"
+
 semver@^7.5.3, semver@^7.5.4:
   version "7.5.4"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
@@ -2167,9 +2243,9 @@ svelte-preprocess@^5.1.0:
     strip-indent "^3.0.0"
 
 svelte@^5.0.0-next.1:
-  version "5.0.0-next.27"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-5.0.0-next.27.tgz#e7e48490032d64234780b453271406af87edef52"
-  integrity sha512-5I4JrmEWVPu4ALEskqU/xdz6PsJYnRaWiIN/s7BCvtuwHjy2mbclSfC+VzgCxEN0AEJxdsPXsxYkIfwXch3AyQ==
+  version "5.0.0-next.28"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-5.0.0-next.28.tgz#6ebcf3da041f9ec60ffffa38dfbc6b262813d2ba"
+  integrity sha512-a9Nqq8eczeJMrOlDL24LMI1MKXMZhDhH33tL8lkPilUJyTjk4W97zYC/hKlZOeAFKdSOBZPIeLFH+NHR2iNSRQ==
   dependencies:
     "@ampproject/remapping" "^2.2.1"
     "@jridgewell/sourcemap-codec" "^1.4.15"