update to svelte 5

package.json

@@ -14,20 +14,20 @@
 	},
 	"devDependencies": {
 		"@img/sharp-linux-x64": "^0.33.5",
-		"@sveltejs/vite-plugin-svelte": "^3.1.2",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@types/cookie": "^0.6.0",
 		"@types/html-minifier": "^4.0.5",
 		"@types/matter-js": "^0.19.7",
 		"@types/turndown": "^5.0.5",
-		"@typescript-eslint/eslint-plugin": "^8.10.0",
+		"@typescript-eslint/eslint-plugin": "^8.11.0",
-		"@typescript-eslint/parser": "^8.10.0",
+		"@typescript-eslint/parser": "^8.11.0",
 		"eslint": "^9.13.0",
 		"eslint-config-prettier": "^9.1.0",
 		"mdsvex": "patch:mdsvex@npm%3A0.12.3#~/.yarn/patches/mdsvex-npm-0.12.3-11596b7ddc.patch",
 		"prettier": "^3.3.3",
 		"prettier-plugin-svelte": "^3.2.7",
 		"sharp": "^0.33.5",
-		"svelte": "4.2.19",
+		"svelte": "^5.1.0",
 		"svelte-check": "^4.0.5",
 		"svelte-preprocess": "^6.0.3",
 		"tslib": "^2.8.0",
@@ -38,16 +38,16 @@
 		"@lukeed/uuid": "^2.0.1",
 		"@sveltejs/adapter-node": "^5.2.8",
 		"@sveltejs/adapter-static": "^3.0.5",
-		"@sveltejs/kit": "^2.7.1",
+		"@sveltejs/kit": "^2.7.2",
 		"@types/js-yaml": "^4.0.9",
 		"cbor-x": "^1.6.0",
 		"cookie": "^1.0.1",
 		"html-minifier": "^4.0.0",
 		"matter-js": "^0.20.0",
 		"postinstall-postinstall": "^2.1.0",
-		"svelte-body": "^1.4.0",
+		"svelte-body": "^2.0.0",
 		"turndown": "^7.2.0",
-		"vite": "5.4.9"
+		"vite": "5.4.10"
 	},
 	"engines": {
 		"node": ">=16"

src/lib/98/98.css

@@ -779,4 +779,3 @@ table > tbody > tr > * {
 	height: 14px;
 	padding: 0 6px;
 }
-/*# sourceMappingURL=98.css.map */

src/lib/BackAnchor.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
-	export let href: string
+	interface Props {
+		href: string;
+	}
+
+	let { href }: Props = $props();
 </script>
 
 <a {href} class="back-anchor">

src/lib/ButtonRow.svelte

@@ -1,5 +1,15 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {import('svelte').Snippet} [children]
+	 */
+
+	/** @type {Props} */
+	let { children } = $props();
+</script>
+
 <div class="button-row">
-	<slot />
+	{@render children?.()}
 </div>
 
 <style>

src/lib/Head.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
 	import atkinsonHyperlegible from '$lib/fonts/atkinson-hyperlegible/latin.woff2'
 
-	export let title = 'matdoesdev'
+	interface Props {
-	export let description = ''
+		title?: string
+		description?: string
+	}
+
+	let { title = 'matdoesdev', description = '' }: Props = $props()
 </script>
 
 <svelte:head>

src/lib/Icon/Icon.svelte

@@ -1,9 +1,14 @@
 <script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
 	export const alt: string | undefined = undefined
 </script>
 
 <span class="icon" aria-label={alt}>
-	<slot />
+	{@render children?.()}
 </span>
 
 <style>

src/lib/IconButtonRow.svelte

@@ -1,10 +1,17 @@
 <script>
 	import ButtonRow from './ButtonRow.svelte'
+	/**
+	 * @typedef {Object} Props
+	 * @property {import('svelte').Snippet} [children]
+	 */
+
+	/** @type {Props} */
+	let { children } = $props();
 </script>
 
 <div class="icon-row">
 	<ButtonRow>
-		<slot />
+		{@render children?.()}
 	</ButtonRow>
 </div>
 

src/lib/PostLayout.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	import img from './components/img.svelte'
 	import BackAnchor from '$lib/BackAnchor.svelte'
 
@@ -7,10 +7,22 @@
 </script>
 
 <script>
-	export let title = 'Untitled'
+	
-	/** @type {string | undefined} */
+	/**
-	export let subtitle = undefined
+	 * @typedef {Object} Props
-	export let published = ''
+	 * @property {string} [title]
+	 * @property {string | undefined} [subtitle]
+	 * @property {string} [published]
+	 * @property {import('svelte').Snippet} [children]
+	 */
+
+	/** @type {Props} */
+	let {
+		title = 'Untitled',
+		subtitle = undefined,
+		published = '',
+		children
+	} = $props();
 </script>
 
 <svelte:head>
@@ -29,7 +41,7 @@
 		<time>{new Date(published).toLocaleDateString()}</time>
 	</div>
 	<article>
-		<slot />
+		{@render children?.()}
 	</article>
 </div>
 

src/lib/PostPreview.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
 	import type { BlogPostPreview } from 'src/routes/blog.json/+server'
 
-	export let post: BlogPostPreview
+	interface Props {
+		post: BlogPostPreview;
+	}
+
+	let { post }: Props = $props();
 	// HACK: we have to do this otherwise sveltekit does a dumb
 	const postHtml = `${post.html}<sty` + `le>${post.css}</style>`
 </script>
@@ -13,7 +17,7 @@
 			<time>{new Date(post.published).toLocaleDateString()}</time>
 		</div>
 
-		<div class="disappearing-text-preview" />
+		<div class="disappearing-text-preview"></div>
 		<div class="preview">
 			{@html postHtml}
 		</div>

src/lib/Project.svelte

@@ -7,27 +7,41 @@
 	import TypeScriptIcon from './Icon/TypeScript.svelte'
 	import IconButtonRow from './IconButtonRow.svelte'
 
-	export let name: string
-	export let nextName: string | undefined
-	export let href: string | undefined = undefined
-	export let languages: string[] = []
 
-	/** A link to where the code is hosted. */
+	
-	export let source: string | undefined = undefined
 
-	export let archived = false
+	interface Props {
+		name: string;
+		nextName: string | undefined;
+		href?: string | undefined;
+		languages?: string[];
+		/** A link to where the code is hosted. */
+		source?: string | undefined;
+		archived?: boolean;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		name,
+		nextName,
+		href = undefined,
+		languages = [],
+		source = undefined,
+		archived = false,
+		children
+	}: Props = $props();
 
 	function nameToId(name: string): string {
 		return name.toLowerCase().replace(/\s+/g, '-')
 	}
 
-	$: id = nameToId(name)
+	let id = $derived(nameToId(name))
-	$: nextId = nextName ? nameToId(nextName) : undefined
+	let nextId = $derived(nextName ? nameToId(nextName) : undefined)
 </script>
 
 <div class="project-container" {id}>
 	<div class="project-background-container">
-		<div class="project-background" />
+		<div class="project-background"></div>
 	</div>
 	<div class="project">
 		{#if href}
@@ -63,7 +77,7 @@
 				<JavaScriptIcon/>
 			{/if}
 		</IconButtonRow>
-		<p class="project-description"><slot /></p>
+		<p class="project-description">{@render children?.()}</p>
 	</div>
 	{#if nextId}
 		<a class="next-anchor" href="#{nextId}">↓ Next</a>

src/lib/blog.ts

@@ -1,5 +1,6 @@
 import path from 'path'
 import fs from 'fs'
+import { render } from 'svelte/server'
 
 export const postsDir = 'src/routes/(blog)' as const
 
@@ -68,18 +69,16 @@ export async function getPost(slug: string): Promise<BlogPost | null> {
 		}>
 	} = { title: '', subtitle: undefined, head: '', css: new Set() }
 
-	const renderHtml = post.$$render(
+	const renderHtml = render(post, {
-		result,
+		props: result,
-		{},
+		context: new Map([
-		{},
-		{},
-		new Map([
 			[
 				'__svelte__',
 				{
 					page: {
-						// HACK: this is necessary so the hack with images works
+						// this is necessary so the page.subscribe calls in
-						// probably a war crime :)
+						// img.svelte don't error for calling page.subscribe
+						// outside of a component
 						subscribe: (r: any) => {
 							r({ url })
 						},
@@ -91,12 +90,13 @@ export async function getPost(slug: string): Promise<BlogPost | null> {
 					},
 				},
 			],
-		])
+		]),
-	)
+	})
+	// console.log('renderHtml', renderHtml)
 
 	// HACK: i'm probably committing a felony by putting this here
 	// but i couldn't come up with a better solution
-	const html = /^[\w\W]*?<\/div>\s*([\w\W]+)<\/article>[\w\W]*?$/.exec(renderHtml)?.[1] ?? ''
+	const html = /^[\w\W]*?<\/div>\s*([\w\W]+)<\/article>[\w\W]*?$/.exec(renderHtml.body)?.[1] ?? ''
 
 	const css = Array.from(result.css)
 		.map((css) => css.code)

src/lib/components/img.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
 	import { page } from '$app/stores'
-	export let src: string
+
-	export let alt: string
+	interface Props {
+		src: string
+		alt: string
+	}
+
+	let { src = $bindable(), alt }: Props = $props()
 
 	page.subscribe((p) => {
 		// hack so images work

src/routes/(blog)/minecraft-scanning/RandomServers.svelte

@@ -3,9 +3,9 @@
 	import { fade, fly } from 'svelte/transition'
 	import LoadingDots from '$lib/LoadingDots.svelte'
 
-	let servers: any[] | undefined
+	let servers: any[] | undefined = $state()
-	let index = 0
+	let index = $state(0)
-	let loading = false
+	let loading = $state(false)
 
 	async function fetchServers(): Promise<void> {
 		if (loading) return
@@ -30,7 +30,7 @@
 	}
 </script>
 
-<button on:click={nextServer}>
+<button onclick={nextServer}>
 	{#if servers}Next{:else}Show{/if}
 </button>
 <div class="random-servers">

src/routes/(blog)/minecraft-scanning/Server.svelte

@@ -18,7 +18,11 @@
 		onlineMode: undefined | boolean
 	}
 
-	export let data: ServerData
+	interface Props {
+		data: ServerData;
+	}
+
+	let { data }: Props = $props();
 
 	let displayIp = data.port !== 25565 ? `${data.host}:${data.port}` : data.host
 </script>

src/routes/(blog)/minecraft-uuids/BarChart.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
-	export let data: [string, number, string?][]
+	interface Props {
+		data: [string, number, string?][];
+	}
+
+	let { data }: Props = $props();
 
 	let max = Math.max(...data.map((d) => d[1]))
 

src/routes/(blog)/minecraft-uuids/UserSearch.svelte

@@ -98,7 +98,7 @@
 		}
 	}
 
-	let currentSearch: Promise<void> | null = null
+	let currentSearch: Promise<void> | null = $state(null)
 	query.subscribe(async (value) => {
 		if (value === '') {
 			searchResults.set([])

src/routes/(main)/+layout.svelte

@@ -1,34 +1,30 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import '../../app.css'
 	import { fly } from 'svelte/transition'
 	import type { LayoutData } from './$types'
 	import { browser } from '$app/environment'
 	import { writable } from 'svelte/store'
 	import { onMount } from 'svelte'
+	
+	interface Props {
+		data: LayoutData;
+		// + 1 because i live in the future
+		copyrightYear?: any;
+		children?: import('svelte').Snippet;
+	}
 
-	export let data: LayoutData
+	let { data, copyrightYear = $bindable(new Date().getFullYear() + 1), children }: Props = $props();
-
-	// + 1 because i live in the future
-	export let copyrightYear = new Date().getFullYear() + 1
 
 	function clickCopyrightYear() {
 		copyrightYear += 1
 		localStorage.setItem('copyrightYear', String(copyrightYear))
 	}
 
-	let previousPathname = data.pathname
+	let previousPathname = $state(data.pathname)
-	let currentPathName = data.pathname
+	let currentPathName = $state(data.pathname)
-	let flyDirection = 1 // 1 is right, -1 is left
+	let flyDirection = $state(1) // 1 is right, -1 is left
-	$: if (browser) {
-		if (previousPathname !== currentPathName) previousPathname = currentPathName
-		currentPathName = data.pathname
-
-		// fly right if we're going forward, left if we're going back
-		if (previousPathname === '/') flyDirection = 1
-		else if (previousPathname === '/blog' && currentPathName !== '/') flyDirection = 1
-		else flyDirection = -1
-		onPathChange()
-	}
 
 	let pathChangeTimestamps: number[] = []
 
@@ -97,6 +93,18 @@
 			$pageRendered = true
 		})
 	}
+	run(() => {
+		if (browser) {
+			if (previousPathname !== currentPathName) previousPathname = currentPathName
+			currentPathName = data.pathname
+
+			// fly right if we're going forward, left if we're going back
+			if (previousPathname === '/') flyDirection = 1
+			else if (previousPathname === '/blog' && currentPathName !== '/') flyDirection = 1
+			else flyDirection = -1
+			onPathChange()
+		}
+	});
 </script>
 
 {#key data.pathname}
@@ -106,15 +114,15 @@
 		out:fly={{ x: 5 * flyDirection, duration: 200 }}
 	>
 		<main>
-			<slot />
+			{@render children?.()}
 		</main>
 
 		<footer>
 			<p class="copyright">
 				&copy; <span
 					class="copyrightYear"
-					on:click={clickCopyrightYear}
+					onclick={clickCopyrightYear}
-					on:keydown={clickCopyrightYear}
+					onkeydown={clickCopyrightYear}
 					role="button"
 					tabindex="0">{copyrightYear}</span
 				> mat

src/routes/(main)/+page.svelte

@@ -8,7 +8,7 @@
 	import IconButtonRow from '$lib/IconButtonRow.svelte'
 	import Topography from '$lib/topography.svg'
 
-	let titleEl: HTMLParagraphElement
+	let titleEl: HTMLParagraphElement = $state()
 
 	onMount(async () => {
 		maybeAddRandomBackground()
@@ -75,15 +75,15 @@
 		"This portfolio contains my blog posts and links to some of the projects I've made."
 
 	let titleClickCount = 0
-	let titleEditable = false
+	let titleEditable = $state(false)
 	function onTitleClicked() {
 		titleClickCount++
 		if (titleClickCount >= 5) {
 			titleEditable = true
 		}
 	}
-	let sentence1 = defaultSentence1
+	let sentence1 = $state(defaultSentence1)
-	let sentence2 = defaultSentence2
+	let sentence2 = $state(defaultSentence2)
 	let defaultCopyrightText: string | undefined = undefined
 
 	let sandcatModeEnabled = false
@@ -202,13 +202,13 @@
 
 <div class="section-container">
 	<section id="main-index-page-section">
-		<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+		<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
 		<h1
 			bind:this={titleEl}
 			id="main-title"
-			on:click={onTitleClicked}
+			onclick={onTitleClicked}
 			contenteditable={titleEditable}
-			on:input={onTitleEdited}
+			oninput={onTitleEdited}
 			spellcheck="false"
 		>
 			matdoesdev

src/routes/(main)/404/+page.svelte

@@ -2,9 +2,9 @@
 	import { browser } from '$app/environment'
 	import BackAnchor from '$lib/BackAnchor.svelte'
 
-	let el: HTMLDivElement
+	let el: HTMLDivElement = $state()
 
-	let idleModeEnabled = false
+	let idleModeEnabled = $state(false)
 
 	// if there's no mouse move or key presses for 5 seconds, enable idle mode
 
@@ -23,8 +23,8 @@
 
 	let x = 0
 	let y = 0
-	let xVel = 2
+	let xVel = $state(2)
-	let yVel = 2
+	let yVel = $state(2)
 	let hue: null | number = null
 	function animate() {
 		requestAnimationFrame(animate)
@@ -73,17 +73,17 @@
 	if (browser) animate()
 </script>
 
-<svelte:window on:mousemove={resetIdleTimeout} on:keydown={resetIdleTimeout} />
+<svelte:window onmousemove={resetIdleTimeout} onkeydown={resetIdleTimeout} />
 
 <nav>
 	<BackAnchor href="/" />
 </nav>
 <section class="error-page">
-	<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+	<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
 	<div
 		bind:this={el}
 		class:bouncing={idleModeEnabled}
-		on:mousedown={() => {
+		onmousedown={() => {
 			if (idleModeEnabled) {
 				if (Math.random() < 0.5) {
 					xVel *= -1.2

src/routes/(main)/[slug]/+page.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
 	import type { PageData } from './$types'
 
-	export let data: PageData
+	interface Props {
+		data: PageData;
+	}
+
+	let { data }: Props = $props();
 	const { page, slug } = data
+
+	const SvelteComponent = $derived(page);
 </script>
 
 <!-- make sveltekit crawl to the json, txt, and md api -->
@@ -10,4 +16,4 @@
 <div style="display:none"><a href="{slug}.txt">txt</a></div>
 <div style="display:none"><a href="{slug}.md">md</a></div>
 
-<svelte:component this={page} />
+<SvelteComponent />

src/routes/(main)/blog/+page.svelte

@@ -3,8 +3,12 @@
 	import PostPreview from '$lib/PostPreview.svelte'
 	import type { BlogPostPreview } from '../../blog.json/+server'
 
-	export let data
+	interface Props {
-	export let posts: BlogPostPreview[] = data.posts
+		data: any;
+		posts?: BlogPostPreview[];
+	}
+
+	let { data, posts = data.posts }: Props = $props();
 </script>
 
 <svelte:head>

src/routes/+layout.svelte

@@ -1 +1,5 @@
-<slot />
+<script>
+	let { children } = $props();
+</script>
+
+{@render children?.()}

src/routes/buttons/+layout.svelte

@@ -3,7 +3,8 @@
 	import { writable } from 'svelte/store'
 	import './app.css'
 
-	$: selectedPage = $page.url.pathname.split('/').pop()
+	let { children } = $props()
+	let selectedPage = $derived($page.url.pathname.split('/').pop())
 
 	let selectedButtonHash = writable<string | null>(null)
 	let selectedPageName = writable<string | null>(null)
@@ -41,7 +42,7 @@
 </header>
 
 <main>
-	<slot />
+	{@render children?.()}
 </main>
 
 <style>

src/routes/buttons/+page.svelte

@@ -17,21 +17,22 @@
 	let searchQuery = writable('')
 	let sort = writable('relevance')
 
-	let visibleButtons = new Set<string>()
+	let visibleButtons = writable(new Set<string>())
 
 	const observer = new IntersectionObserver((entries) => {
+		const newVisibleButtons = new Set($visibleButtons)
 		entries.forEach((entry) => {
 			if (entry.isIntersecting) {
-				visibleButtons.add(entry.target.id)
+				newVisibleButtons.add(entry.target.id)
 			} else {
-				visibleButtons.delete(entry.target.id)
+				newVisibleButtons.delete(entry.target.id)
 			}
 		})
 
-		visibleButtons = visibleButtons
+		$visibleButtons = newVisibleButtons
 	})
 
-	let buttonsEl: HTMLDivElement
+	let buttonsEl: HTMLDivElement | undefined = $state(undefined)
 
 	// when a new button is added, observe it
 	const buttonContainerObserver = new MutationObserver((mutations) => {
@@ -44,17 +45,19 @@
 		})
 	})
 
-	let refs: HTMLDivElement[] = []
+	let refs: HTMLDivElement[] = $state([])
-	let buttonEntries: [number, string][] = []
+	let buttonEntries: [number, string][] = $state([])
 
 	onMount(async () => {
 		await downloadData()
 		if (!data) throw new Error("data should've been downloaded")
 		buttonEntries = [...data.buttons.entries()]
 
-		updateSearch()
+		updateSearch($searchQuery, $sort)
 		updateFromHash()
 
+		if (!buttonsEl) throw new Error('buttonsEl should be set by now')
+
 		buttonContainerObserver.observe(buttonsEl, {
 			childList: true,
 		})
@@ -74,8 +77,9 @@
 
 	let matchingTextIndexes = new Set<number>()
 
-	searchQuery.subscribe(updateSearch)
+	$effect(() => {
-	sort.subscribe(updateSearch)
+		updateSearch($searchQuery, $sort)
+	})
 
 	function popularityScore(buttonIndex: number): number {
 		if (!data) return 0
@@ -89,21 +93,18 @@
 		return backlinksSecondLevelDomains.size + backlinks.size / 100
 	}
 
-	function updateSearch() {
+	function updateSearch(query: string, sortValue: string) {
-		if (!data) return 0
+		if (!data || query === undefined || sortValue === undefined) return 0
 
-		const value = $searchQuery
+		if (query === '' && sortValue === 'relevance') {
-		let sortValue = $sort
-
-		if (value === '' && sortValue === 'relevance') {
 			// relevance doesn't make sense if there's no query
 			sortValue = 'popularity'
 		}
 
 		const newMatchingTextIndexes = new Set<number>()
-		if (value !== '') {
+		if (query !== '') {
 			for (let textIndex = 0; textIndex < data.texts.length; textIndex++) {
-				if (data.texts[textIndex].toLowerCase().includes(value.toLowerCase())) {
+				if (data.texts[textIndex].toLowerCase().includes(query.toLowerCase())) {
 					newMatchingTextIndexes.add(textIndex)
 				}
 			}
@@ -115,7 +116,7 @@
 
 		for (let buttonIndex = 0; buttonIndex < data.button_names.length; buttonIndex++) {
 			const textIndexes = data.button_names[buttonIndex]
-			if (value === '' || textIndexes.some((textIndex) => matchingTextIndexes.has(textIndex))) {
+			if (query === '' || textIndexes.some((textIndex) => matchingTextIndexes.has(textIndex))) {
 				// higher score is better
 				let score: number
 				if (sortValue === 'relevance') {
@@ -123,7 +124,7 @@
 					const textIndexLengths = textIndexes
 						.map((textIndex) => data.texts[textIndex])
 						.filter((text) => {
-							return text.toLowerCase().includes(value.toLowerCase())
+							return text.toLowerCase().includes(query.toLowerCase())
 						})
 						.map((text) => text.length)
 					// popularity is tiebreaker
@@ -145,14 +146,16 @@
 	}
 
 	let selectedButtonHash = writable<string | null>(null)
-	$: selectedButtonIndex =
+	let selectedButtonIndex = $derived(
 		$selectedButtonHash === null ? null : buttonIndexFromHash($selectedButtonHash)
+	)
 	let selectedPageName = writable<string | null>(null)
-	$: selectedPageIndex = $selectedPageName === null ? null : pageIndexFromName($selectedPageName)
+	let selectedPageIndex = $derived(
+		$selectedPageName === null ? null : pageIndexFromName($selectedPageName)
+	)
 
 	function updateFromHash() {
 		const hash = location.hash.slice(1)
-		console.log('updateFromHash', hash)
 
 		// if the hash has a . then it's a page name
 		if (hash === '') {
@@ -169,20 +172,11 @@
 		}
 	}
 
-	// page.subscribe(async (page) => {
+	let cutOffButtonEntries = $state(500)
-	// 	// this is to work around a sveltekit bug that makes it click the hash twice, which clicks the wrong link the second time
-	// 	await new Promise((r) => requestAnimationFrame(r))
-	// 	// set
-
-	// 	updateFromHash()
-	// })
-
-	let cutOffButtonEntries = 500
 	let isCurrentlyAdding = false
-	$: {
+	$effect(() => {
-		buttonEntries
 		cutOffButtonEntries = Math.min(buttonEntries.length, 500)
-	}
+	})
 
 	function shouldAddMore() {
 		return scrollY + window.innerHeight > document.body.scrollHeight - 100
@@ -202,17 +196,18 @@
 		}
 	}
 
-	let scrollY: number
+	let scrollY: number = $state(0)
-	$: {
+
+	$effect(() => {
 		if (browser && scrollY) {
 			if (shouldAddMore()) {
 				addMore(false)
 			}
 		}
-	}
+	})
 </script>
 
-<svelte:window bind:scrollY on:hashchange={updateFromHash} />
+<svelte:window bind:scrollY onhashchange={updateFromHash} />
 
 {#if selectedButtonIndex !== null}
 	<h1>
@@ -289,7 +284,7 @@
 	<div class="compact-button-grid" bind:this={buttonsEl}>
 		{#each buttonEntries.slice(0, cutOffButtonEntries) as [index, buttonHash] (buttonHash)}
 			<div class="button-container" id={buttonHash} bind:this={refs[index]}>
-				{#if visibleButtons.has(buttonHash)}
+				{#if $visibleButtons.has(buttonHash)}
 					<a href="/buttons#{buttonHash}">
 						<img src={buttonUrlFromIndex(index)} alt="Button" class="button" />
 					</a>

src/routes/buttons/ButtonLink.svelte

@@ -3,8 +3,12 @@
 	import ExternalLink from './ExternalLink.svelte'
 	import ExternalLinkIcon from './ExternalLinkIcon.svelte'
 
-	export let pageIndex: number
+	interface Props {
-	export let buttonIndex: number
+		pageIndex: number;
+		buttonIndex: number;
+	}
+
+	let { pageIndex, buttonIndex }: Props = $props();
 </script>
 
 <div class="button-with-link-container">

src/routes/buttons/ExternalLink.svelte

@@ -2,7 +2,11 @@
 	import { data } from './88x31'
 	import ExternalLinkIcon from './ExternalLinkIcon.svelte'
 
-	export let pageIndex: number
+	interface Props {
+		pageIndex: number;
+	}
+
+	let { pageIndex }: Props = $props();
 
 	function cutOff(str: string, length: number) {
 		if (str.length <= length) return str

src/routes/buttons/degrees/+page.svelte

@@ -8,10 +8,10 @@
 	let originPage = writable('')
 	let targetPage = writable('')
 
-	let originPageId: number | null
+	let originPageId: number | null = $state()
-	let targetPageId: number | null
+	let targetPageId: number | null = $state()
 
-	let pageAndButtonIndexes: [number, number][] | null = []
+	let pageAndButtonIndexes: [number, number][] | null = $state([])
 
 	function calculatePath() {
 		originPageId = pageIndexFromName($originPage)
@@ -130,7 +130,7 @@
 	}
 </script>
 
-<svelte:window on:hashchange={updateFromHash} />
+<svelte:window onhashchange={updateFromHash} />
 
 <input
 	type="text"

src/routes/lightswitch/+page.svelte

@@ -11,7 +11,7 @@
 	let globalTheme = writable(browser ? localStorage.getItem('theme') ?? 'dark' : 'dark')
 	let isLightSwitchOn = writable($globalTheme === 'light' || $globalTheme === 'extra-light')
 
-	let mounted = false
+	let mounted = $state(false)
 
 	onMount(() => {
 		window.addEventListener('storage', (e) => {
@@ -54,7 +54,7 @@
 
 <main>
 	{#if mounted}
-		<button on:click={() => ($isLightSwitchOn = !$isLightSwitchOn)}>
+		<button onclick={() => ($isLightSwitchOn = !$isLightSwitchOn)}>
 			<img
 				src={$isLightSwitchOn ? lightSwitchOnImage : lightSwitchOffImage}
 				alt="Light switch on"

src/routes/neko/+page.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import './oneko.css'
 	import '$lib/98/98.css'
 
@@ -11,36 +13,34 @@
 	} from './oneko'
 	import { browser } from '$app/environment'
 	import { onMount } from 'svelte'
+	import type { FormEventHandler } from 'svelte/elements'
 
 	const spritesheetUrls = nekoConfig.spritesheetUrls
-	let accel = nekoConfig.accelMultiplier
+	let accel = $state(nekoConfig.accelMultiplier)
-	let slipperiness = nekoConfig.slipperiness * 100
+	let slipperiness = $state(nekoConfig.slipperiness * 100)
-	let persistOnReload = nekoConfig.persistOnReload
+	let persistOnReload = $state(nekoConfig.persistOnReload)
 
-	$: accelStr = accel.toString()
+	const updateFromAccelStr: FormEventHandler<HTMLInputElement> = (e) => {
-	$: slipperinessStr = slipperiness.toString()
+		accel = parseInt(e.currentTarget.value)
-
-	function updateFromAccelStr() {
-		accel = parseInt(accelStr)
 	}
-	function updateFromSlipperinessStr() {
+	const updateFromSlipperinessStr: FormEventHandler<HTMLInputElement> = (e) => {
-		slipperiness = parseInt(slipperinessStr)
+		slipperiness = parseInt(e.currentTarget.value)
 	}
 
-	$: {
+	run(() => {
 		nekoConfig.accelMultiplier = accel
 		if (browser) localStorage.setItem(LOCALSTORAGE_NAMES.accelMultiplier, JSON.stringify(accel))
-	}
+	})
-	$: {
+	run(() => {
 		nekoConfig.slipperiness = slipperiness * 0.01
 		if (browser)
 			localStorage.setItem(LOCALSTORAGE_NAMES.slipperiness, JSON.stringify(nekoConfig.slipperiness))
-	}
+	})
-	$: {
+	run(() => {
 		nekoConfig.persistOnReload = persistOnReload
 		if (browser)
 			localStorage.setItem(LOCALSTORAGE_NAMES.persistOnReload, JSON.stringify(persistOnReload))
-	}
+	})
 
 	function addSpritesheet() {
 		$spritesheetUrls = [...$spritesheetUrls, BASE_SPRITESHEET_URL]
@@ -53,11 +53,11 @@
 		$pageRendered = true
 	})
 
-	let windowHidden = false
+	let windowHidden = $state(false)
 	function closeWindow() {
 		windowHidden = true
 	}
-	let windowMaximized = false
+	let windowMaximized = $state(false)
 	function toggleMaximizeWindow() {
 		windowMaximized = !windowMaximized
 		offsetX = offsetY = initialX = initialY = 0
@@ -65,10 +65,10 @@
 
 	let startMouseX = 0
 	let startMouseY = 0
-	let initialX = 16
+	let initialX = $state(16)
-	let initialY = 16
+	let initialY = $state(16)
-	let offsetX = 0
+	let offsetX = $state(0)
-	let offsetY = 0
+	let offsetY = $state(0)
 
 	let mouseDown = false
 
@@ -99,7 +99,7 @@
 	<meta name="theme-color" content="#ffffff" />
 </svelte:head>
 
-<svelte:body on:mousemove={dragWindow} on:mouseup={stopDragWindow} />
+<svelte:body onmousemove={dragWindow} onmouseup={stopDragWindow} />
 
 <div
 	class="window"
@@ -107,13 +107,13 @@
 	class:window-maximized={windowMaximized}
 	style="left: {initialX + offsetX}px; top: {initialY + offsetY}px"
 >
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div class="title-bar" on:mousedown={startDragWindow}>
+	<div class="title-bar" onmousedown={startDragWindow}>
 		<div class="title-bar-text">cat config</div>
 		<div class="title-bar-controls">
-			<button aria-label="Minimize" on:click={closeWindow}></button>
+			<button aria-label="Minimize" onclick={closeWindow}></button>
-			<button aria-label="Maximize" on:click={toggleMaximizeWindow}></button>
+			<button aria-label="Maximize" onclick={toggleMaximizeWindow}></button>
-			<button aria-label="Close" on:click={closeWindow}></button>
+			<button aria-label="Close" onclick={closeWindow}></button>
 		</div>
 	</div>
 
@@ -129,7 +129,7 @@
 
 	<main class="window-body">
 		<section>
-			<button on:click={() => initNeko()()}>summon neko</button>
+			<button onclick={() => initNeko()()}>summon neko</button>
 			<!-- you intentionally cannot despawn nekos without disabling persistence and reloading -->
 		</section>
 
@@ -139,8 +139,8 @@
 				class="neko-config-text-input"
 				id="neko-config-acceleration"
 				type="text"
-				bind:value={accelStr}
+				value={accel}
-				on:input={updateFromAccelStr}
+				oninput={updateFromAccelStr}
 			/>
 			<input type="range" min="0" max="25" bind:value={accel} />
 		</section>
@@ -151,8 +151,8 @@
 				class="neko-config-text-input"
 				id="neko-config-slipperiness"
 				type="text"
-				bind:value={slipperinessStr}
+				value={slipperiness}
-				on:input={updateFromSlipperinessStr}
+				oninput={updateFromSlipperinessStr}
 			/>%
 			<input type="range" min="0" max="95" bind:value={slipperiness} />
 		</section>

src/routes/retro/+layout.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
-	import { onMount } from 'svelte'
+	import { onMount, mount } from 'svelte'
 	import MusicPlayer from './MusicPlayer.svelte'
 	import './app.css'
 
+	let { children } = $props();
+
 	onMount(() => {
 		let musicPlayerEl = document.getElementById('music-player')
 		if (!musicPlayerEl) {
@@ -11,9 +13,9 @@
 			document.body.appendChild(musicPlayerEl)
 		}
 
-		new MusicPlayer({
+		// load the music player here so it persists across page changes
+		mount(MusicPlayer, {
 			target: musicPlayerEl,
-			$$inline: true,
 		})
 	})
 </script>
@@ -24,4 +26,4 @@
 	<meta name="bingbot" content="noindex" />
 </svelte:head>
 
-<slot />
+{@render children?.()}

src/routes/retro/+page.svelte

@@ -111,277 +111,307 @@
 </script>
 
 <table id="main-table">
-	<tr>
+	<tbody>
-		<td valign="top" class="left-sidebar-container" width="200">
+		<tr>
-			<table class="left-sidebar" width="210" cellspacing="0">
+			<td valign="top" class="left-sidebar-container" width="200">
-				<tbody>
+				<table class="left-sidebar" width="210" cellspacing="0">
-					<tr>
+					<tbody>
-						<td class="website-status-container">
+						<tr>
-							<h3>Website status</h3>
+							<td class="website-status-container">
-							<div class="website-status-value">
+								<h3>Website status</h3>
-								<table>
+								<div class="website-status-value">
-									<tr>
+									<table>
-										<td>probably</td>
+										<tbody>
-										<td><span class="status-up">Up!</span></td>
+											<tr>
-									</tr>
+												<td>probably</td>
-								</table>
+												<td><span class="status-up">Up!</span></td>
-							</div>
+											</tr>
-						</td>
+										</tbody>
-					</tr>
+									</table>
-					<tr class="spacing hidden-if-noscript"></tr>
+								</div>
-					<tr class="hidden-if-noscript">
+							</td>
-						<td class="current-time-cst-container">
+						</tr>
-							<h3>Current time for me</h3>
+						<tr class="spacing hidden-if-noscript"></tr>
-							<div class="current-time-cst-value">
+						<tr class="hidden-if-noscript">
-								{currentTimeInCst}
+							<td class="current-time-cst-container">
-								{#if currentTimeInCst.startsWith('11:11:')}
+								<h3>Current time for me</h3>
-									<a href="http://makea.fish">🐟</a>
+								<div class="current-time-cst-value">
-								{/if}
+									{currentTimeInCst}
-							</div>
+									{#if currentTimeInCst.startsWith('11:11:')}
-							<div class="current-time-cst-info">(CST)</div>
+										<a href="http://makea.fish">🐟</a>
-						</td>
+									{/if}
-					</tr>
+								</div>
-					<tr class="spacing"></tr>
+								<div class="current-time-cst-info">(CST)</div>
-					<tr>
+							</td>
-						<td class="active-minecraft-servers-container">
+						</tr>
-							<h3>Active Minecraft servers</h3>
+						<tr class="spacing"></tr>
-							<div class="active-minecraft-servers-value">
+						<tr>
-								<a
+							<td class="active-minecraft-servers-container">
-									href="https://grafana.scanner.matdoes.dev/d/MVK-dYM4z/scanner-stats?orgId=1&refresh=1m"
+								<h3>Active Minecraft servers</h3>
-								>
+								<div class="active-minecraft-servers-value">
-									{status.active_minecraft_servers.toLocaleString()}
+									<a
-								</a>
+										href="https://grafana.scanner.matdoes.dev/d/MVK-dYM4z/scanner-stats?orgId=1&refresh=1m"
-							</div>
+									>
-						</td>
+										{status.active_minecraft_servers.toLocaleString()}
-					</tr>
-					<tr class="spacing"></tr>
-					<tr>
-						<td class="days-since-last-complaint-container">
-							<h3>Days since last complaint</h3>
-							<div class="days-since-last-complaint-value">
-								{daysSinceLastComplaint.toString().padStart(3, '0')}
-							</div>
-							<div class="time-ago">({hoursSinceLastComplaint} hours ago)</div>
-						</td>
-					</tr>
-					<tr class="spacing hidden-if-noscript"></tr>
-					<tr>
-						<td class="neko-status-container hidden-if-noscript">
-							<div class="neko-status-title-container">
-								<h3>Neko status</h3>
-								<div
-									class="oneko"
-									aria-hidden="true"
-									style="background-image: url(/retro/oneko.gif)"
-									bind:this={nekoEl}
-								></div>
-							</div>
-							<div class="neko-status-value">
-								{#if nekoStatusClickable}
-									<a class="status-{nekoSpriteIdsToStatuses[nekoSpriteName]}" href="/neko">
-										{nekoSpriteIdsToNames[nekoSpriteName]}
 									</a>
-								{:else}
+								</div>
-									<span class="status-{nekoSpriteIdsToStatuses[nekoSpriteName]}">
+							</td>
-										{nekoSpriteIdsToNames[nekoSpriteName]}
+						</tr>
-									</span>
+						<tr class="spacing"></tr>
-								{/if}
+						<tr>
-							</div>
+							<td class="days-since-last-complaint-container">
-						</td>
+								<h3>Days since last complaint</h3>
-					</tr>
+								<div class="days-since-last-complaint-value">
-					<tr class="spacing"></tr>
+									{daysSinceLastComplaint.toString().padStart(3, '0')}
-					<tr>
+								</div>
-						<td class="minecraft-uuids-scraped-container">
+								<div class="time-ago">({hoursSinceLastComplaint} hours ago)</div>
-							<h3>Minecraft UUIDs scraped</h3>
+							</td>
-							<div class="minecraft-uuids-scraped-value">
+						</tr>
-								<a href="https://mowojang.matdoes.dev">
+						<tr class="spacing hidden-if-noscript"></tr>
-									{status.minecraft_uuids_scraped.toLocaleString()}
+						<tr>
-								</a>
+							<td class="neko-status-container hidden-if-noscript">
-							</div>
+								<div class="neko-status-title-container">
-						</td>
+									<h3>Neko status</h3>
-					</tr>
+									<div
-					<tr class="spacing"></tr>
+										class="oneko"
-					<tr>
+										aria-hidden="true"
-						<td class="buttons-scraped-container">
+										style="background-image: url(/retro/oneko.gif)"
-							<h3>88x31s scraped</h3>
+										bind:this={nekoEl}
-							<div class="buttons-scraped-value">
+									></div>
-								<a href="/buttons">{status.buttons_scraped.toLocaleString()}</a>
+								</div>
-							</div>
+								<div class="neko-status-value">
-						</td>
+									{#if nekoStatusClickable}
-					</tr>
+										<a class="status-{nekoSpriteIdsToStatuses[nekoSpriteName]}" href="/neko">
-					<tr class="spacing"></tr>
+											{nekoSpriteIdsToNames[nekoSpriteName]}
-					<tr>
+										</a>
-						<td class="data-last-updated">
+									{:else}
-							<h3>Data last updated</h3>
+										<span class="status-{nekoSpriteIdsToStatuses[nekoSpriteName]}">
-							<div class="data-last-updated-date">
+											{nekoSpriteIdsToNames[nekoSpriteName]}
-								{browser ? `${timeAgo(lastUpdatedAt)} ago` : lastUpdatedAt.toISOString()}
+										</span>
-							</div>
+									{/if}
-						</td>
+								</div>
-					</tr>
+							</td>
-				</tbody>
+						</tr>
-			</table>
+						<tr class="spacing"></tr>
-		</td>
+						<tr>
-		<td valign="top">
+							<td class="minecraft-uuids-scraped-container">
-			<div id="welcome">
+								<h3>Minecraft UUIDs scraped</h3>
-				<table>
+								<div class="minecraft-uuids-scraped-value">
-					<tr>
+									<a href="https://mowojang.matdoes.dev">
-						<td><img src={sparkles} alt="sparkles" width="100" height="100" /></td>
+										{status.minecraft_uuids_scraped.toLocaleString()}
-						<td>
+									</a>
-							<h1>welcome to mat's site!!!</h1>
+								</div>
-						</td>
+							</td>
-						<td><img src={sparkles} alt="sparkles" width="100" height="100" /></td>
+						</tr>
-					</tr>
+						<tr class="spacing"></tr>
-				</table>
+						<tr>
-				<table>
+							<td class="buttons-scraped-container">
-					<tr>
+								<h3>88x31s scraped</h3>
-						<td>
+								<div class="buttons-scraped-value">
-							<div>
+									<a href="/buttons">{status.buttons_scraped.toLocaleString()}</a>
-								hi, thanks for stopping by. i am mat, i make things on the internet.
+								</div>
-								<br />
+							</td>
-								this is my personal web site on the world wide web.
+						</tr>
-							</div>
+						<tr class="spacing"></tr>
-						</td>
+						<tr>
-					</tr>
+							<td class="data-last-updated">
-				</table>
+								<h3>Data last updated</h3>
-				<br />
+								<div class="data-last-updated-date">
-				<table width="600">
+									{browser ? `${timeAgo(lastUpdatedAt)} ago` : lastUpdatedAt.toISOString()}
-					<tr>
+								</div>
-						<td>
+							</td>
-							<div class="buttons">
+						</tr>
-								<Button href="//matdoes.dev" src="mat.png" alt="matdoesdev" />
+					</tbody>
-								<Button href="//adryd.com" src="adryd.png" alt="adryd" />
-								<Button href="//notnite.com" src="notnite.png" alt="notnite" />
-								<Button href="//shrecked.dev" src="shwecky.png" alt="shrecknt" />
-								<Button href="//goldenstack.net" src="goldenstack.png" alt="goldenstack" />
-								<Button href="//www.kibty.town" src="kibtytown.gif" alt="kibty.town" />
-								<Button href="//honbra.com" src="honbra.png" alt="honbra" />
-								<Button href="//ssi.fyi" src="ssi.gif" alt="server scanning inc" />
-								<Button href="//cbax.dev" src="cbax.gif" alt="cbax" />
-								<Button href="//8minty.me" src="8minty.gif" alt="8minty" />
-								<Button href="//slonk.ing" src="slonk.png" alt="slonkazoid" />
-								<Button href="//actuallyruben.nl" src="actuallyruben.gif" alt="actuallyruben" />
-								<Button href="//jamie.rs" src="jamie.png" alt="jamie" />
-								<Button href="//jamsharp.net" src="jamsharp.png" alt="jamsharp" />
-								<Button href="//sipacid.com" src="sipacid.gif" alt="sipacid" />
-								<Button href="//damcraft.de" src="dam.gif" alt="dam" />
-								<Button href="//mudkip.dev" src="mudkip.png" alt="mudkip" />
-								<Button href="//lily.pet" src="lily.png" alt="lily" />
-								<Button href="//aubrey.rs" src="aubrey.png" alt="aubrey" />
-								<Button href="//haylinmoore.com/" src="haylin.png" alt="haylin moore" />
-								<Button href="//ezri.pet/" src="ezri.png" alt="ezri" />
-								<Button
-									href="//thomasricci.dev"
-									src="rudrecciah.png"
-									alt="thomas ricci aka rudrecciah"
-								/>
-								<Button href="//zptr.cc" src="yui.gif" alt="yui aka zeroptr" />
-								<Button href="//ednamode.xyz" src="edna.png" alt="edna" />
-								<Button href="//archlinux.org" src="archbtw.png" alt="archbtw" />
-								<Button href="//github.com/mat-1" src="github.gif" alt="github" />
-								<Button href="//ko-fi.com/matdoesdev" src="kofi.gif" alt="kofi" />
-								<Button href="//code.visualstudio.com" src="vscode.gif" alt="vscode" />
-								<Button href="//www.hetzner.com" src="hetzner.gif" alt="hetzner" />
-								<Button
-									href="//www.mozilla.org/en-US/firefox/new"
-									src="anythingbutchrome.gif"
-									alt="anythingbutchrome"
-								/>
-								<Button href="//www.torproject.org" src="tor.gif" alt="tor" />
-								<Button href="//ublockorigin.com" src="ublockorigin.png" alt="ublock origin" />
-								<Button href="//www.eff.org" src="fightforprivacy.gif" alt="fight for privacy" />
-								<Button
-									href="//ftp.nluug.nl/netscape/netscape9/en-US/9.0/windows/win32/netscape-navigator-9.0.0.6.exe"
-									src="netscape.gif"
-									alt="netscape"
-								/>
-								<Button href="//archive.org" src="internet-archive.png" alt="internet archive" />
-								<Button
-									href="//thunderbird.net"
-									src="thunderbird.gif"
-									alt="thunderbird: free your inbox"
-								/>
-								<Button
-									href="//www.mozilla.org/en-US/firefox/new"
-									src="firefox.gif"
-									alt="tested on firefox"
-								/>
-								<Button href="//matrix.org" src="matrix.png" alt="matrix" />
-								<Button href="//caddyserver.com" src="caddy.png" alt="caddy" />
-								<Button href="//display-a.sand.cat" src="sandcat.png" alt="display a sand cat" />
-								<Button href="http://makea.fish" src="makeafish.png" alt="make a fish" />
-								<Button
-									href="//seized.matdoes.dev"
-									src="seized.gif"
-									alt="this 88x31 has been seized"
-								/>
-							</div>
-						</td>
-					</tr>
 				</table>
+			</td>
+			<td valign="top">
+				<div id="welcome">
+					<table>
+						<tbody>
+							<tr>
+								<td><img src={sparkles} alt="sparkles" width="100" height="100" /></td>
+								<td>
+									<h1>welcome to mat's site!!!</h1>
+								</td>
+								<td><img src={sparkles} alt="sparkles" width="100" height="100" /></td>
+							</tr>
+						</tbody>
+					</table>
+					<table>
+						<tbody>
+							<tr>
+								<td>
+									<div>
+										hi, thanks for stopping by. i am mat, i make things on the internet.
+										<br />
+										this is my personal web site on the world wide web.
+									</div>
+								</td>
+							</tr>
+						</tbody>
+					</table>
+					<br />
+					<table width="600">
+						<tbody>
+							<tr>
+								<td>
+									<div class="buttons">
+										<Button href="//matdoes.dev" src="mat.png" alt="matdoesdev" />
+										<Button href="//adryd.com" src="adryd.png" alt="adryd" />
+										<Button href="//notnite.com" src="notnite.png" alt="notnite" />
+										<Button href="//shrecked.dev" src="shwecky.png" alt="shrecknt" />
+										<Button href="//goldenstack.net" src="goldenstack.png" alt="goldenstack" />
+										<Button href="//www.kibty.town" src="kibtytown.gif" alt="kibty.town" />
+										<Button href="//honbra.com" src="honbra.png" alt="honbra" />
+										<Button href="//ssi.fyi" src="ssi.gif" alt="server scanning inc" />
+										<Button href="//cbax.dev" src="cbax.gif" alt="cbax" />
+										<Button href="//8minty.me" src="8minty.gif" alt="8minty" />
+										<Button href="//slonk.ing" src="slonk.png" alt="slonkazoid" />
+										<Button href="//actuallyruben.nl" src="actuallyruben.gif" alt="actuallyruben" />
+										<Button href="//jamie.rs" src="jamie.png" alt="jamie" />
+										<Button href="//jamsharp.net" src="jamsharp.png" alt="jamsharp" />
+										<Button href="//sipacid.com" src="sipacid.gif" alt="sipacid" />
+										<Button href="//damcraft.de" src="dam.gif" alt="dam" />
+										<Button href="//mudkip.dev" src="mudkip.png" alt="mudkip" />
+										<Button href="//lily.pet" src="lily.png" alt="lily" />
+										<Button href="//aubrey.rs" src="aubrey.png" alt="aubrey" />
+										<Button href="//haylinmoore.com/" src="haylin.png" alt="haylin moore" />
+										<Button href="//ezri.pet/" src="ezri.png" alt="ezri" />
+										<Button
+											href="//thomasricci.dev"
+											src="rudrecciah.png"
+											alt="thomas ricci aka rudrecciah"
+										/>
+										<Button href="//zptr.cc" src="yui.gif" alt="yui aka zeroptr" />
+										<Button href="//ednamode.xyz" src="edna.png" alt="edna" />
+										<Button href="//archlinux.org" src="archbtw.png" alt="archbtw" />
+										<Button href="//github.com/mat-1" src="github.gif" alt="github" />
+										<Button href="//ko-fi.com/matdoesdev" src="kofi.gif" alt="kofi" />
+										<Button href="//code.visualstudio.com" src="vscode.gif" alt="vscode" />
+										<Button href="//www.hetzner.com" src="hetzner.gif" alt="hetzner" />
+										<Button
+											href="//www.mozilla.org/en-US/firefox/new"
+											src="anythingbutchrome.gif"
+											alt="anythingbutchrome"
+										/>
+										<Button href="//www.torproject.org" src="tor.gif" alt="tor" />
+										<Button href="//ublockorigin.com" src="ublockorigin.png" alt="ublock origin" />
+										<Button
+											href="//www.eff.org"
+											src="fightforprivacy.gif"
+											alt="fight for privacy"
+										/>
+										<Button
+											href="//ftp.nluug.nl/netscape/netscape9/en-US/9.0/windows/win32/netscape-navigator-9.0.0.6.exe"
+											src="netscape.gif"
+											alt="netscape"
+										/>
+										<Button
+											href="//archive.org"
+											src="internet-archive.png"
+											alt="internet archive"
+										/>
+										<Button
+											href="//thunderbird.net"
+											src="thunderbird.gif"
+											alt="thunderbird: free your inbox"
+										/>
+										<Button
+											href="//www.mozilla.org/en-US/firefox/new"
+											src="firefox.gif"
+											alt="tested on firefox"
+										/>
+										<Button href="//matrix.org" src="matrix.png" alt="matrix" />
+										<Button href="//caddyserver.com" src="caddy.png" alt="caddy" />
+										<Button
+											href="//display-a.sand.cat"
+											src="sandcat.png"
+											alt="display a sand cat"
+										/>
+										<Button href="http://makea.fish" src="makeafish.png" alt="make a fish" />
+										<Button
+											href="//seized.matdoes.dev"
+											src="seized.gif"
+											alt="this 88x31 has been seized"
+										/>
+									</div>
+								</td>
+							</tr>
+						</tbody>
+					</table>
 
-				<table id="sections">
+					<table id="sections">
-					<tr>
+						<tbody>
-						<td class="section contact">
+							<tr>
-							<table width="300">
+								<td class="section contact">
-								<tr>
+									<table width="300">
-									<td>
+										<tbody>
-										<div><img src={contact} alt="contact" width="200" height="40" /></div>
+											<tr>
-										<p>
+												<td>
-											my preferred method of contact is <a
+													<div><img src={contact} alt="contact" width="200" height="40" /></div>
-												href="https://matrix.to/#/@mat:matdoes.dev">matrix</a
+													<p>
-											>, but you can also email me (i have a catch-all on this domain). i'm also on
+														my preferred method of contact is <a
-											<a href="https://f.matdoes.dev/mat">the fediverse</a>.
+															href="https://matrix.to/#/@mat:matdoes.dev">matrix</a
-										</p>
+														>, but you can also email me (i have a catch-all on this domain). i'm
-									</td>
+														also on
-								</tr>
+														<a href="https://f.matdoes.dev/mat">the fediverse</a>.
-							</table>
+													</p>
-						</td>
+												</td>
-						<td class="section links">
+											</tr>
-							<table width="300">
+										</tbody>
-								<tr>
+									</table>
-									<td>
+								</td>
-										<div><img src={links} alt="links" width="200" height="40" /></div>
+								<td class="section links">
-										<p>
+									<table width="300">
-											i have a github at <a href="https://github.com/mat-1">github.com/mat-1</a>,
+										<tbody>
-											and you can give me money through ko-fi at
+											<tr>
-											<a href="https://ko-fi.com/matdoesdev">ko-fi.com/matdoesdev</a>.
+												<td>
-										</p>
+													<div><img src={links} alt="links" width="200" height="40" /></div>
-									</td>
+													<p>
-								</tr>
+														i have a github at <a href="https://github.com/mat-1"
-							</table>
+															>github.com/mat-1</a
-						</td>
+														>, and you can give me money through ko-fi at
-					</tr>
+														<a href="https://ko-fi.com/matdoesdev">ko-fi.com/matdoesdev</a>.
-				</table>
+													</p>
-			</div>
+												</td>
-		</td>
+											</tr>
-		<td valign="top">
+										</tbody>
-			<div class="right-sidebar">
+									</table>
-				<h2>BLOG POSTS</h2>
+								</td>
-				{#each posts as post}
+							</tr>
-					<div><a href={post.slug}>{post.title}</a></div>
+						</tbody>
-				{/each}
+					</table>
-			</div>
+				</div>
-			<div class="right-sidebar">
+			</td>
-				<h2>PROJECTS</h2>
+			<td valign="top">
-				{#each projects as project}
+				<div class="right-sidebar">
-					<div><a href={project.href}>{project.name}</a></div>
+					<h2>BLOG POSTS</h2>
-				{/each}
+					{#each posts as post}
-			</div>
+						<div><a href={post.slug}>{post.title}</a></div>
-		</td>
+					{/each}
-	</tr>
+				</div>
-	<tr>
+				<div class="right-sidebar">
-		<td></td>
+					<h2>PROJECTS</h2>
-		<td> </td>
+					{#each projects as project}
-		<td></td>
+						<div><a href={project.href}>{project.name}</a></div>
-		<td></td>
+					{/each}
-	</tr>
+				</div>
-	<tr>
+			</td>
-		<td></td>
+		</tr>
-		<td>
+		<tr>
-			<img src="//counter.matdoes.dev" alt="visitor counter" id="counter" />
+			<td></td>
-		</td>
+			<td> </td>
-	</tr>
+			<td></td>
-	<tr><td><p class="last-updated">Page last updated: September 15, 2024</p></td></tr>
+			<td></td>
+		</tr>
+		<tr>
+			<td></td>
+			<td>
+				<img src="//counter.matdoes.dev" alt="visitor counter" id="counter" />
+			</td>
+		</tr>
+		<tr><td><p class="last-updated">Page last updated: September 15, 2024</p></td></tr>
+	</tbody>
 </table>
 
 <noscript>

src/routes/retro/Button.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
-	export let alt: string
+	interface Props {
-	export let src: string
+		alt: string;
-	export let href: string
+		src: string;
+		href: string;
+	}
+
+	let { alt, src, href }: Props = $props();
 </script>
 
 <a {href}><img src="/retro/buttons/{src}" {alt} width="88" height="31" border="0" /></a>

src/routes/retro/MusicPlayer.svelte

@@ -5,19 +5,10 @@
 	import Play from './icons/Play.svelte'
 	import { browser } from '$app/environment'
 
-	let musicPlayerEl: HTMLAudioElement | undefined = undefined
+	let musicPlayerEl: HTMLAudioElement | undefined = $state(undefined)
 
-	let playing = false
+	let playing = $state(false)
-	let volume = 50
+	let volume = $state(50)
-
-	$: if (musicPlayerEl) musicPlayerEl.volume = volume / 100
-	$: if (musicPlayerEl) {
-		if (playing) {
-			musicPlayerEl.play()
-		} else {
-			musicPlayerEl.pause()
-		}
-	}
 
 	const SONGS = `2 Mello - Mirror Temple (Mirror Magic Mix)
 C418 - Biome Party
@@ -44,21 +35,32 @@ VØJ - Moonlit`.split('\n')
 	}
 	if (browser) shuffleArray(SONGS)
 
-	let currentSongIndex = 0
+	let currentSongIndex = $state(0)
-	let currentSong: string
+	let currentSong = $derived(SONGS[currentSongIndex])
-	$: {
-		currentSong = SONGS[currentSongIndex]
-	}
 
-	let currentSong_: string | null = null
+	let currentSong_: string | null = $state(null)
-	$: if (musicPlayerEl) {
+
-		if (currentSong_ !== currentSong) {
+	$effect(() => {
-			const newSrc = `/retro/music/${currentSong.replace(/\?/g, '')}.mp3`
+		if (musicPlayerEl) {
-			musicPlayerEl.src = newSrc
+			musicPlayerEl.volume = volume / 100
-			musicPlayerEl.load()
-			currentSong_ = currentSong
 		}
-	}
+	})
+	$effect(() => {
+		if (musicPlayerEl) {
+			if (playing) musicPlayerEl.play()
+			else musicPlayerEl.pause()
+		}
+	})
+	$effect(() => {
+		if (musicPlayerEl) {
+			if (currentSong_ !== currentSong) {
+				const newSrc = `/retro/music/${currentSong.replace(/\?/g, '')}.mp3`
+				musicPlayerEl.src = newSrc
+				musicPlayerEl.load()
+				currentSong_ = currentSong
+			}
+		}
+	})
 
 	function nextSong() {
 		currentSongIndex = (currentSongIndex + 1) % SONGS.length
@@ -69,38 +71,40 @@ VØJ - Moonlit`.split('\n')
 	}
 </script>
 
-<audio bind:this={musicPlayerEl} on:ended={nextSong} />
+<audio bind:this={musicPlayerEl} onended={nextSong}></audio>
 
 <table class="music-player" style={musicPlayerEl ? '' : 'display: none'}>
-	<tr>
+	<tbody>
-		<td>
+		<tr>
-			<button on:click={prevSong}>
+			<td>
-				<Backward />
+				<button onclick={prevSong}>
-			</button>
+					<Backward />
-		</td>
+				</button>
-		<td>
+			</td>
-			<button on:click={() => (playing = !playing)}>
+			<td>
-				{#if playing}
+				<button onclick={() => (playing = !playing)}>
-					<Pause />
+					{#if playing}
-				{:else}
+						<Pause />
-					<Play />
+					{:else}
-				{/if}
+						<Play />
-			</button>
+					{/if}
-		</td>
+				</button>
-		<td>
+			</td>
-			<button on:click={nextSong}>
+			<td>
-				<Forward />
+				<button onclick={nextSong}>
-			</button>
+					<Forward />
-		</td>
+				</button>
-		<td>
+			</td>
-			<span class="song-name-container">
+			<td>
-				<span class="song-name">Now playing: {playing ? currentSong : 'Nothing'}</span>
+				<span class="song-name-container">
-			</span>
+					<span class="song-name">Now playing: {playing ? currentSong : 'Nothing'}</span>
-		</td>
+				</span>
-		<td>
+			</td>
-			<input type="range" min="0" max="100" class="volume-slider" bind:value={volume} />
+			<td>
-		</td>
+				<input type="range" min="0" max="100" class="volume-slider" bind:value={volume} />
-	</tr>
+			</td>
+		</tr>
+	</tbody>
 </table>
 
 <style>

yarn.lock

@@ -5,7 +5,7 @@ __metadata:
   version: 8
   cacheKey: 10c0
 
-"@ampproject/remapping@npm:^2.2.1":
+"@ampproject/remapping@npm:^2.3.0":
   version: 2.3.0
   resolution: "@ampproject/remapping@npm:2.3.0"
   dependencies:
@@ -570,7 +570,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/trace-mapping@npm:^0.3.18, @jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.25":
+"@jridgewell/sourcemap-codec@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "@jridgewell/sourcemap-codec@npm:1.5.0"
+  checksum: 10c0/2eb864f276eb1096c3c11da3e9bb518f6d9fc0023c78344cdc037abadc725172c70314bdb360f2d4b7bffec7f5d657ce006816bc5d4ecb35e61b66132db00c18
+  languageName: node
+  linkType: hard
+
+"@jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.25":
   version: 0.3.25
   resolution: "@jridgewell/trace-mapping@npm:0.3.25"
   dependencies:
@@ -981,9 +988,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sveltejs/kit@npm:^2.7.1":
+"@sveltejs/kit@npm:^2.7.2":
-  version: 2.7.1
+  version: 2.7.2
-  resolution: "@sveltejs/kit@npm:2.7.1"
+  resolution: "@sveltejs/kit@npm:2.7.2"
   dependencies:
     "@types/cookie": "npm:^0.6.0"
     cookie: "npm:^0.6.0"
@@ -1003,38 +1010,37 @@ __metadata:
     vite: ^5.0.3
   bin:
     svelte-kit: svelte-kit.js
-  checksum: 10c0/6afb2c6adf8ac0cebc7dd6eb7a023b6cdd1fe6aa7d4dcfa76c7377b7de38896bca7f9e77a302d426d44e29b79ca48aeb7a1108f861bebb10d4d3b850c06a3538
+  checksum: 10c0/2d640b0a5e1bae7e742f9230745fad0efffbb664c69d6e460e28f2578117621353062ee594df3d8a6938d6cc6347349a57c5831c8fa0a96b4fa5b31b2e9ee435
   languageName: node
   linkType: hard
 
-"@sveltejs/vite-plugin-svelte-inspector@npm:^2.1.0":
+"@sveltejs/vite-plugin-svelte-inspector@npm:^3.0.0-next.0||^3.0.0":
-  version: 2.1.0
+  version: 3.0.0
-  resolution: "@sveltejs/vite-plugin-svelte-inspector@npm:2.1.0"
+  resolution: "@sveltejs/vite-plugin-svelte-inspector@npm:3.0.0"
   dependencies:
-    debug: "npm:^4.3.4"
+    debug: "npm:^4.3.7"
   peerDependencies:
-    "@sveltejs/vite-plugin-svelte": ^3.0.0
+    "@sveltejs/vite-plugin-svelte": ^4.0.0-next.0||^4.0.0
-    svelte: ^4.0.0 || ^5.0.0-next.0
+    svelte: ^5.0.0-next.96 || ^5.0.0
     vite: ^5.0.0
-  checksum: 10c0/da2d161691958bcb83d72634bd7d259fa07553af3cf71c2b9959feeccd6a9c58b08495cc5a936f6f0f5deb21aec4ad8b54ef8d9530510d2826548b4d19275b08
+  checksum: 10c0/f400758f698394a8e0c6641454ffd85d5c61f8bf50626fddaa688172f3b910a4840882380782e844e54464a7491fcc61bf0e6b1b8f898cdfe3696bcf0e774159
   languageName: node
   linkType: hard
 
-"@sveltejs/vite-plugin-svelte@npm:^3.1.2":
+"@sveltejs/vite-plugin-svelte@npm:^4.0.0":
-  version: 3.1.2
+  version: 4.0.0
-  resolution: "@sveltejs/vite-plugin-svelte@npm:3.1.2"
+  resolution: "@sveltejs/vite-plugin-svelte@npm:4.0.0"
   dependencies:
-    "@sveltejs/vite-plugin-svelte-inspector": "npm:^2.1.0"
+    "@sveltejs/vite-plugin-svelte-inspector": "npm:^3.0.0-next.0||^3.0.0"
-    debug: "npm:^4.3.4"
+    debug: "npm:^4.3.7"
     deepmerge: "npm:^4.3.1"
     kleur: "npm:^4.1.5"
-    magic-string: "npm:^0.30.10"
+    magic-string: "npm:^0.30.12"
-    svelte-hmr: "npm:^0.16.0"
+    vitefu: "npm:^1.0.3"
-    vitefu: "npm:^0.2.5"
   peerDependencies:
-    svelte: ^4.0.0 || ^5.0.0-next.0
+    svelte: ^5.0.0-next.96 || ^5.0.0
     vite: ^5.0.0
-  checksum: 10c0/b15a82fc41ddd7983d7e130bedfc1c292c8a183677b78c5edd683d2f2df6cd2b1316e19958ab8c888031ca5941058f4475a16950ff1428ac7989c0b679987b36
+  checksum: 10c0/6c8ea6bd3ccd567cb8e9e9ac75782f904fa8a5c238e5b1c748cb7d4b4213390f70ca9a41f0be0a49dc373bc648fed6cfa4eb1882793ece1e1cfec646e847b1b1
   languageName: node
   linkType: hard
 
@@ -1062,7 +1068,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/estree@npm:^1.0.6":
+"@types/estree@npm:^1.0.5, @types/estree@npm:^1.0.6":
   version: 1.0.6
   resolution: "@types/estree@npm:1.0.6"
   checksum: 10c0/cdfd751f6f9065442cd40957c07fd80361c962869aa853c1c2fd03e101af8b9389d8ff4955a43a6fcfa223dd387a089937f95be0f3eec21ca527039fd2d9859a
@@ -1147,15 +1153,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/eslint-plugin@npm:^8.10.0":
+"@typescript-eslint/eslint-plugin@npm:^8.11.0":
-  version: 8.10.0
+  version: 8.11.0
-  resolution: "@typescript-eslint/eslint-plugin@npm:8.10.0"
+  resolution: "@typescript-eslint/eslint-plugin@npm:8.11.0"
   dependencies:
     "@eslint-community/regexpp": "npm:^4.10.0"
-    "@typescript-eslint/scope-manager": "npm:8.10.0"
+    "@typescript-eslint/scope-manager": "npm:8.11.0"
-    "@typescript-eslint/type-utils": "npm:8.10.0"
+    "@typescript-eslint/type-utils": "npm:8.11.0"
-    "@typescript-eslint/utils": "npm:8.10.0"
+    "@typescript-eslint/utils": "npm:8.11.0"
-    "@typescript-eslint/visitor-keys": "npm:8.10.0"
+    "@typescript-eslint/visitor-keys": "npm:8.11.0"
     graphemer: "npm:^1.4.0"
     ignore: "npm:^5.3.1"
     natural-compare: "npm:^1.4.0"
@@ -1166,66 +1172,66 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10c0/4b77ba9c865a2a14e238cd330b5901f0274b8ce1c13324fccd0339b8eea82a50a4709394c903fd8cd5bd0d3aebace0761ff9a4a19fa20b00bb61349b7671c035
+  checksum: 10c0/be509f7bb0c0c596801059b06995a81a1c326cc6ac31d96a32f7b6b7d7b495f9bad4dc442aa6e923d22515e62c668d3c14695c68bd6e0be1d4bf72158b7fd2d6
   languageName: node
   linkType: hard
 
-"@typescript-eslint/parser@npm:^8.10.0":
+"@typescript-eslint/parser@npm:^8.11.0":
-  version: 8.10.0
+  version: 8.11.0
-  resolution: "@typescript-eslint/parser@npm:8.10.0"
+  resolution: "@typescript-eslint/parser@npm:8.11.0"
   dependencies:
-    "@typescript-eslint/scope-manager": "npm:8.10.0"
+    "@typescript-eslint/scope-manager": "npm:8.11.0"
-    "@typescript-eslint/types": "npm:8.10.0"
+    "@typescript-eslint/types": "npm:8.11.0"
-    "@typescript-eslint/typescript-estree": "npm:8.10.0"
+    "@typescript-eslint/typescript-estree": "npm:8.11.0"
-    "@typescript-eslint/visitor-keys": "npm:8.10.0"
+    "@typescript-eslint/visitor-keys": "npm:8.11.0"
     debug: "npm:^4.3.4"
   peerDependencies:
     eslint: ^8.57.0 || ^9.0.0
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10c0/7becb2457c085c239838d301796074b790f46dd38c9fbc14ec1dec8e993c7115cd8a66cdc07983c3a68a2dd92e24e8acc49d69a4ebcc29e9869957eb52d1cb74
+  checksum: 10c0/e83f239fec60697083e5dcb1c8948340e783ea6e043fe9a65d557faef8882963b09d69aacd736eb8ab18a768769a7bbfc3de0f1251d4bba080613541acb0741c
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:8.10.0":
+"@typescript-eslint/scope-manager@npm:8.11.0":
-  version: 8.10.0
+  version: 8.11.0
-  resolution: "@typescript-eslint/scope-manager@npm:8.10.0"
+  resolution: "@typescript-eslint/scope-manager@npm:8.11.0"
   dependencies:
-    "@typescript-eslint/types": "npm:8.10.0"
+    "@typescript-eslint/types": "npm:8.11.0"
-    "@typescript-eslint/visitor-keys": "npm:8.10.0"
+    "@typescript-eslint/visitor-keys": "npm:8.11.0"
-  checksum: 10c0/b8bb8635c4d6c00a3578d6265e3ee0f5d96d0c9dee534ed588aa411c3f4497fd71cce730c3ae7571e52453d955b191bc9edcc47c9af21a20c90e9a20f2371108
+  checksum: 10c0/0910da62d8ae261711dd9f89d5c7d8e96ff13c50054436256e5a661309229cb49e3b8189c9468d36b6c4d3f7cddd121519ea78f9b18c9b869a808834b079b2ea
   languageName: node
   linkType: hard
 
-"@typescript-eslint/type-utils@npm:8.10.0":
+"@typescript-eslint/type-utils@npm:8.11.0":
-  version: 8.10.0
+  version: 8.11.0
-  resolution: "@typescript-eslint/type-utils@npm:8.10.0"
+  resolution: "@typescript-eslint/type-utils@npm:8.11.0"
   dependencies:
-    "@typescript-eslint/typescript-estree": "npm:8.10.0"
+    "@typescript-eslint/typescript-estree": "npm:8.11.0"
-    "@typescript-eslint/utils": "npm:8.10.0"
+    "@typescript-eslint/utils": "npm:8.11.0"
     debug: "npm:^4.3.4"
     ts-api-utils: "npm:^1.3.0"
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10c0/1af8fce8394279e6ac7bcef449a132072ee36e374c8d557564246ffe7150230844901ca0305e29525bf37c87010e03bf8bedec76fccbfe1e41931cb4f274e208
+  checksum: 10c0/b69e31c1599ceeb20c29052a4ddb33a554174a3a4c55ee37d90c9b8250af6ef978a0b9ddbeefef4e83d62c4caea1bfa2d8088527f397bde69fb4ab9b360d794a
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:8.10.0":
+"@typescript-eslint/types@npm:8.11.0":
-  version: 8.10.0
+  version: 8.11.0
-  resolution: "@typescript-eslint/types@npm:8.10.0"
+  resolution: "@typescript-eslint/types@npm:8.11.0"
-  checksum: 10c0/f27dd43c8383e02e914a254257627e393dfc0f08b0f74a253c106813ae361f090271b2f3f2ef588fa3ca1329897d873da595bb5641fe8e3091b25eddca24b5d2
+  checksum: 10c0/5ccdd3eeee077a6fc8e7f4bc0e0cbc9327b1205a845253ec5c0c6c49ff915e853161df00c24a0ffb4b8ec745d3f153dd0e066400a021c844c026e31121f46699
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:8.10.0":
+"@typescript-eslint/typescript-estree@npm:8.11.0":
-  version: 8.10.0
+  version: 8.11.0
-  resolution: "@typescript-eslint/typescript-estree@npm:8.10.0"
+  resolution: "@typescript-eslint/typescript-estree@npm:8.11.0"
   dependencies:
-    "@typescript-eslint/types": "npm:8.10.0"
+    "@typescript-eslint/types": "npm:8.11.0"
-    "@typescript-eslint/visitor-keys": "npm:8.10.0"
+    "@typescript-eslint/visitor-keys": "npm:8.11.0"
     debug: "npm:^4.3.4"
     fast-glob: "npm:^3.3.2"
     is-glob: "npm:^4.0.3"
@@ -1235,31 +1241,31 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10c0/535a740fe25be0e28fe68c41e3264273d1e5169c9f938e08cc0e3415c357726f43efa44621960108c318fc3305c425d29f3223b6e731d44d67f84058a8947304
+  checksum: 10c0/b629ad3cd32b005d5c1d67c36958a418f8672efebea869399834f4f201ebf90b942165eebb5c9d9799dcabdc2cc26e5fabb00629f76b158847f42e1a491a75a6
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:8.10.0":
+"@typescript-eslint/utils@npm:8.11.0":
-  version: 8.10.0
+  version: 8.11.0
-  resolution: "@typescript-eslint/utils@npm:8.10.0"
+  resolution: "@typescript-eslint/utils@npm:8.11.0"
   dependencies:
     "@eslint-community/eslint-utils": "npm:^4.4.0"
-    "@typescript-eslint/scope-manager": "npm:8.10.0"
+    "@typescript-eslint/scope-manager": "npm:8.11.0"
-    "@typescript-eslint/types": "npm:8.10.0"
+    "@typescript-eslint/types": "npm:8.11.0"
-    "@typescript-eslint/typescript-estree": "npm:8.10.0"
+    "@typescript-eslint/typescript-estree": "npm:8.11.0"
   peerDependencies:
     eslint: ^8.57.0 || ^9.0.0
-  checksum: 10c0/a21a2933517176abd00fcd5d8d80023e35dc3d89d5746bbac43790b4e984ab1f371117db08048bce7f42d54c64f4e0e35161149f8f34fd25a27bff9d1110fd16
+  checksum: 10c0/bb5bcc8d928a55b22298e76f834ea6a9fe125a9ffeb6ac23bee0258b3ed32f41e281888a3d0be226a05e1011bb3b70e42a71a40366acdefea6779131c46bc522
   languageName: node
   linkType: hard
 
-"@typescript-eslint/visitor-keys@npm:8.10.0":
+"@typescript-eslint/visitor-keys@npm:8.11.0":
-  version: 8.10.0
+  version: 8.11.0
-  resolution: "@typescript-eslint/visitor-keys@npm:8.10.0"
+  resolution: "@typescript-eslint/visitor-keys@npm:8.11.0"
   dependencies:
-    "@typescript-eslint/types": "npm:8.10.0"
+    "@typescript-eslint/types": "npm:8.11.0"
     eslint-visitor-keys: "npm:^3.4.3"
-  checksum: 10c0/14721c4ac939640d5fd1ee1b6eeb07604b11a6017e319e21dcc71e7aac2992341fc7ae1992d977bad4433b6a1d0d1c0c279e6927316b26245f6e333f922fa458
+  checksum: 10c0/7a5a49609fdc47e114fe59eee56393c90b122ec8e9520f90b0c5e189635ae1ccfa8e00108f641342c2c8f4637fe9d40c77927cf7c8248a3a660812cb4b7d0c08
   languageName: node
   linkType: hard
 
@@ -1279,7 +1285,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.10.0, acorn@npm:^8.11.3, acorn@npm:^8.9.0":
+"acorn-typescript@npm:^1.4.13":
+  version: 1.4.13
+  resolution: "acorn-typescript@npm:1.4.13"
+  peerDependencies:
+    acorn: ">=8.9.0"
+  checksum: 10c0/f2f17cf03379d63beeb007f0feea02cebbd9af261f6b5619ea7345b177bd7a5f99752927cbf652baa3fc97962ae4561592093ab0a1c3e00ca4f354ba23c557ae
+  languageName: node
+  linkType: hard
+
+"acorn@npm:^8.11.3":
   version: 8.11.3
   resolution: "acorn@npm:8.11.3"
   bin:
@@ -1297,6 +1312,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"acorn@npm:^8.12.1":
+  version: 8.13.0
+  resolution: "acorn@npm:8.13.0"
+  bin:
+    acorn: bin/acorn
+  checksum: 10c0/f35dd53d68177c90699f4c37d0bb205b8abe036d955d0eb011ddb7f14a81e6fd0f18893731c457c1b5bd96754683f4c3d80d9a5585ddecaa53cdf84e0b3d68f7
+  languageName: node
+  linkType: hard
+
 "agent-base@npm:^7.0.2, agent-base@npm:^7.1.0, agent-base@npm:^7.1.1":
   version: 7.1.1
   resolution: "agent-base@npm:7.1.1"
@@ -1365,21 +1389,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"aria-query@npm:^5.3.0":
+"aria-query@npm:^5.3.1":
-  version: 5.3.0
+  version: 5.3.2
-  resolution: "aria-query@npm:5.3.0"
+  resolution: "aria-query@npm:5.3.2"
-  dependencies:
+  checksum: 10c0/003c7e3e2cff5540bf7a7893775fc614de82b0c5dde8ae823d47b7a28a9d4da1f7ed85f340bdb93d5649caa927755f0e31ecc7ab63edfdfc00c8ef07e505e03e
-    dequal: "npm:^2.0.3"
-  checksum: 10c0/2bff0d4eba5852a9dd578ecf47eaef0e82cc52569b48469b0aac2db5145db0b17b7a58d9e01237706d1e14b7a1b0ac9b78e9c97027ad97679dd8f91b85da1469
   languageName: node
   linkType: hard
 
-"axobject-query@npm:^4.0.0":
+"axobject-query@npm:^4.1.0":
-  version: 4.0.0
+  version: 4.1.0
-  resolution: "axobject-query@npm:4.0.0"
+  resolution: "axobject-query@npm:4.1.0"
-  dependencies:
+  checksum: 10c0/c470e4f95008f232eadd755b018cb55f16c03ccf39c027b941cd8820ac6b68707ce5d7368a46756db4256fbc91bb4ead368f84f7fb034b2b7932f082f6dc0775
-    dequal: "npm:^2.0.3"
-  checksum: 10c0/4d756b5c2ff099f1c7f99e55a5de9b2066cb2a13a3170185ff34bfec2d7bcab81eb820a4e7340d35c251341b61ebee6e705b7ce64db78224df1df5a4d68448fe
   languageName: node
   linkType: hard
 
@@ -1540,23 +1560,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clsx@npm:^1.2.1":
+"clsx@npm:^2.1.1":
-  version: 1.2.1
+  version: 2.1.1
-  resolution: "clsx@npm:1.2.1"
+  resolution: "clsx@npm:2.1.1"
-  checksum: 10c0/34dead8bee24f5e96f6e7937d711978380647e936a22e76380290e35486afd8634966ce300fc4b74a32f3762c7d4c0303f442c3e259f4ce02374eb0c82834f27
+  checksum: 10c0/c4c8eb865f8c82baab07e71bfa8897c73454881c4f99d6bc81585aecd7c441746c1399d08363dc096c550cceaf97bd4ce1e8854e1771e9998d9f94c4fe075839
-  languageName: node
-  linkType: hard
-
-"code-red@npm:^1.0.3":
-  version: 1.0.4
-  resolution: "code-red@npm:1.0.4"
-  dependencies:
-    "@jridgewell/sourcemap-codec": "npm:^1.4.15"
-    "@types/estree": "npm:^1.0.1"
-    acorn: "npm:^8.10.0"
-    estree-walker: "npm:^3.0.3"
-    periscopic: "npm:^3.1.0"
-  checksum: 10c0/1309f062369ae520c422d7f45b93190faea2cbc7e3fe3375918f36bb394030d0936d940601426564c30abc71b8aa8e6d1505cccd67a8620183fb01c84bcb7304
   languageName: node
   linkType: hard
 
@@ -1642,17 +1649,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-tree@npm:^2.3.1":
+"csstype@npm:^3.1.3":
-  version: 2.3.1
-  resolution: "css-tree@npm:2.3.1"
-  dependencies:
-    mdn-data: "npm:2.0.30"
-    source-map-js: "npm:^1.0.1"
-  checksum: 10c0/6f8c1a11d5e9b14bf02d10717fc0351b66ba12594166f65abfbd8eb8b5b490dd367f5c7721db241a3c792d935fc6751fbc09f7e1598d421477ad9fadc30f4f24
-  languageName: node
-  linkType: hard
-
-"csstype@npm:^3.1.2":
   version: 3.1.3
   resolution: "csstype@npm:3.1.3"
   checksum: 10c0/80c089d6f7e0c5b2bd83cf0539ab41474198579584fa10d86d0cafe0642202343cbc119e076a0b1aece191989477081415d66c9fefbf3c957fc2fc4b7009f248
@@ -1671,6 +1668,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"debug@npm:^4.3.7":
+  version: 4.3.7
+  resolution: "debug@npm:4.3.7"
+  dependencies:
+    ms: "npm:^2.1.3"
+  peerDependenciesMeta:
+    supports-color:
+      optional: true
+  checksum: 10c0/1471db19c3b06d485a622d62f65947a19a23fbd0dd73f7fd3eafb697eec5360cde447fb075919987899b1a2096e85d35d4eb5a4de09a57600ac9cf7e6c8e768b
+  languageName: node
+  linkType: hard
+
 "deep-is@npm:^0.1.3":
   version: 0.1.4
   resolution: "deep-is@npm:0.1.4"
@@ -1685,13 +1694,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dequal@npm:^2.0.3":
-  version: 2.0.3
-  resolution: "dequal@npm:2.0.3"
-  checksum: 10c0/f98860cdf58b64991ae10205137c0e97d384c3a4edc7f807603887b7c4b850af1224a33d88012009f150861cbee4fa2d322c4cc04b9313bee312e47f6ecaa888
-  languageName: node
-  linkType: hard
-
 "detect-libc@npm:^2.0.1, detect-libc@npm:^2.0.3":
   version: 2.0.3
   resolution: "detect-libc@npm:2.0.3"
@@ -1967,6 +1969,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esrap@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "esrap@npm:1.2.2"
+  dependencies:
+    "@jridgewell/sourcemap-codec": "npm:^1.4.15"
+    "@types/estree": "npm:^1.0.1"
+  checksum: 10c0/a3a0b665c034f604a162b910346309c64c42635c5d2e8704a27afcdf4e6d4c529e05475d1875d6b3e0d550f8470986116414097230ab3a7c565b85091ca5e177
+  languageName: node
+  linkType: hard
+
 "esrecurse@npm:^4.3.0":
   version: 4.3.0
   resolution: "esrecurse@npm:4.3.0"
@@ -1990,15 +2002,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"estree-walker@npm:^3.0.0, estree-walker@npm:^3.0.3":
-  version: 3.0.3
-  resolution: "estree-walker@npm:3.0.3"
-  dependencies:
-    "@types/estree": "npm:^1.0.0"
-  checksum: 10c0/c12e3c2b2642d2bcae7d5aa495c60fa2f299160946535763969a1c83fc74518ffa9c2cd3a8b69ac56aea547df6a8aac25f729a342992ef0bbac5f1c73e78995d
-  languageName: node
-  linkType: hard
-
 "esutils@npm:^2.0.2":
   version: 2.0.3
   resolution: "esutils@npm:2.0.3"
@@ -2430,7 +2433,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-reference@npm:^3.0.0, is-reference@npm:^3.0.1":
+"is-reference@npm:^3.0.2":
   version: 3.0.2
   resolution: "is-reference@npm:3.0.2"
   dependencies:
@@ -2568,7 +2571,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"magic-string@npm:^0.30.10, magic-string@npm:^0.30.3, magic-string@npm:^0.30.4, magic-string@npm:^0.30.5":
+"magic-string@npm:^0.30.11, magic-string@npm:^0.30.12":
+  version: 0.30.12
+  resolution: "magic-string@npm:0.30.12"
+  dependencies:
+    "@jridgewell/sourcemap-codec": "npm:^1.5.0"
+  checksum: 10c0/469f457d18af37dfcca8617086ea8a65bcd8b60ba8a1182cb024ce43e470ace3c9d1cb6bee58d3b311768fb16bc27bd50bdeebcaa63dadd0fd46cac4d2e11d5f
+  languageName: node
+  linkType: hard
+
+"magic-string@npm:^0.30.3, magic-string@npm:^0.30.5":
   version: 0.30.10
   resolution: "magic-string@npm:0.30.10"
   dependencies:
@@ -2605,15 +2617,15 @@ __metadata:
     "@lukeed/uuid": "npm:^2.0.1"
     "@sveltejs/adapter-node": "npm:^5.2.8"
     "@sveltejs/adapter-static": "npm:^3.0.5"
-    "@sveltejs/kit": "npm:^2.7.1"
+    "@sveltejs/kit": "npm:^2.7.2"
-    "@sveltejs/vite-plugin-svelte": "npm:^3.1.2"
+    "@sveltejs/vite-plugin-svelte": "npm:^4.0.0"
     "@types/cookie": "npm:^0.6.0"
     "@types/html-minifier": "npm:^4.0.5"
     "@types/js-yaml": "npm:^4.0.9"
     "@types/matter-js": "npm:^0.19.7"
     "@types/turndown": "npm:^5.0.5"
-    "@typescript-eslint/eslint-plugin": "npm:^8.10.0"
+    "@typescript-eslint/eslint-plugin": "npm:^8.11.0"
-    "@typescript-eslint/parser": "npm:^8.10.0"
+    "@typescript-eslint/parser": "npm:^8.11.0"
     cbor-x: "npm:^1.6.0"
     cookie: "npm:^1.0.1"
     eslint: "npm:^9.13.0"
@@ -2625,14 +2637,14 @@ __metadata:
     prettier: "npm:^3.3.3"
     prettier-plugin-svelte: "npm:^3.2.7"
     sharp: "npm:^0.33.5"
-    svelte: "npm:4.2.19"
+    svelte: "npm:^5.1.0"
-    svelte-body: "npm:^1.4.0"
+    svelte-body: "npm:^2.0.0"
     svelte-check: "npm:^4.0.5"
     svelte-preprocess: "npm:^6.0.3"
     tslib: "npm:^2.8.0"
     turndown: "npm:^7.2.0"
     typescript: "npm:^5.6.3"
-    vite: "npm:5.4.9"
+    vite: "npm:5.4.10"
   languageName: unknown
   linkType: soft
 
@@ -2643,13 +2655,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mdn-data@npm:2.0.30":
-  version: 2.0.30
-  resolution: "mdn-data@npm:2.0.30"
-  checksum: 10c0/a2c472ea16cee3911ae742593715aa4c634eb3d4b9f1e6ada0902aa90df13dcbb7285d19435f3ff213ebaa3b2e0c0265c1eb0e3fb278fda7f8919f046a410cd9
-  languageName: node
-  linkType: hard
-
 "mdsvex@npm:0.12.3":
   version: 0.12.3
   resolution: "mdsvex@npm:0.12.3"
@@ -2827,6 +2832,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ms@npm:^2.1.3":
+  version: 2.1.3
+  resolution: "ms@npm:2.1.3"
+  checksum: 10c0/d924b57e7312b3b63ad21fc5b3dc0af5e78d61a1fc7cfb5457edaf26326bf62be5307cc87ffb6862ef1c2b33b0233cdb5d4f01c4c958cc0d660948b65a287a48
+  languageName: node
+  linkType: hard
+
 "nanoid@npm:^3.3.7":
   version: 3.3.7
   resolution: "nanoid@npm:3.3.7"
@@ -2993,17 +3005,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"periscopic@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "periscopic@npm:3.1.0"
-  dependencies:
-    "@types/estree": "npm:^1.0.0"
-    estree-walker: "npm:^3.0.0"
-    is-reference: "npm:^3.0.0"
-  checksum: 10c0/fb5ce7cd810c49254cdf1cd3892811e6dd1a1dfbdf5f10a0a33fb7141baac36443c4cad4f0e2b30abd4eac613f6ab845c2bc1b7ce66ae9694c7321e6ada5bd96
-  languageName: node
-  linkType: hard
-
 "picocolors@npm:^1.0.0":
   version: 1.0.1
   resolution: "picocolors@npm:1.0.1"
@@ -3505,7 +3506,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map-js@npm:^1.0.1, source-map-js@npm:^1.2.0":
+"source-map-js@npm:^1.2.0":
   version: 1.2.0
   resolution: "source-map-js@npm:1.2.0"
   checksum: 10c0/7e5f896ac10a3a50fe2898e5009c58ff0dc102dcb056ed27a354623a0ece8954d4b2649e1a1b2b52ef2e161d26f8859c7710350930751640e71e374fe2d321a4
@@ -3598,15 +3599,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"svelte-body@npm:^1.4.0":
+"svelte-body@npm:^2.0.0":
-  version: 1.4.0
+  version: 2.0.0
-  resolution: "svelte-body@npm:1.4.0"
+  resolution: "svelte-body@npm:2.0.0"
   dependencies:
-    clsx: "npm:^1.2.1"
+    clsx: "npm:^2.1.1"
-    csstype: "npm:^3.1.2"
+    csstype: "npm:^3.1.3"
   peerDependencies:
-    svelte: ^3.47.0 || ^4.0.0
+    svelte: ^5.0.0
-  checksum: 10c0/2524763d708fd41c609d43720471748f002fcaa4282d30f6c2d1d35f3b23db8b66996ef14919ccff4975bc23f84c44455f9a6da70ff47aa7a08a0601fe500f6f
+  checksum: 10c0/eccb4ae9ba95cf38a015c018d71c2cd58d9fe18439c7321620c04129249972a069f30bf402aa386ffbcc423857c189a76bf9293b1ed64ab6d135c74fece301e1
   languageName: node
   linkType: hard
 
@@ -3628,15 +3629,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"svelte-hmr@npm:^0.16.0":
-  version: 0.16.0
-  resolution: "svelte-hmr@npm:0.16.0"
-  peerDependencies:
-    svelte: ^3.19.0 || ^4.0.0
-  checksum: 10c0/242c0775361b5e8e0c19550ce0f8d27f738c31f45684b8a8beb88e2cce931078ffab0a6793002b4879c2637fa698d559020e78cab40756be11341602284ed01e
-  languageName: node
-  linkType: hard
-
 "svelte-preprocess@npm:^6.0.3":
   version: 6.0.3
   resolution: "svelte-preprocess@npm:6.0.3"
@@ -3677,25 +3669,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"svelte@npm:4.2.19":
+"svelte@npm:^5.1.0":
-  version: 4.2.19
+  version: 5.1.0
-  resolution: "svelte@npm:4.2.19"
+  resolution: "svelte@npm:5.1.0"
   dependencies:
-    "@ampproject/remapping": "npm:^2.2.1"
+    "@ampproject/remapping": "npm:^2.3.0"
-    "@jridgewell/sourcemap-codec": "npm:^1.4.15"
+    "@jridgewell/sourcemap-codec": "npm:^1.5.0"
-    "@jridgewell/trace-mapping": "npm:^0.3.18"
+    "@types/estree": "npm:^1.0.5"
-    "@types/estree": "npm:^1.0.1"
+    acorn: "npm:^8.12.1"
-    acorn: "npm:^8.9.0"
+    acorn-typescript: "npm:^1.4.13"
-    aria-query: "npm:^5.3.0"
+    aria-query: "npm:^5.3.1"
-    axobject-query: "npm:^4.0.0"
+    axobject-query: "npm:^4.1.0"
-    code-red: "npm:^1.0.3"
+    esm-env: "npm:^1.0.0"
-    css-tree: "npm:^2.3.1"
+    esrap: "npm:^1.2.2"
-    estree-walker: "npm:^3.0.3"
+    is-reference: "npm:^3.0.2"
-    is-reference: "npm:^3.0.1"
     locate-character: "npm:^3.0.0"
-    magic-string: "npm:^0.30.4"
+    magic-string: "npm:^0.30.11"
-    periscopic: "npm:^3.1.0"
+    zimmerframe: "npm:^1.1.2"
-  checksum: 10c0/77700133e90f86da3072ebfd5e8546b4ebe7296424bd65f89a7247fbcbae5dc56f56d15154e2a929ee3aa7da018cb5d5db24b99b7cb72f0ba2db2ad966d603dc
+  checksum: 10c0/2b80c56d773b2fd90135f10d3d612c08c00e4802eca52936c43d54a6ca7a90edd93d6a0bd29342f7f3ffa81eab787b21f923529351d950e4c731f8e0d4a5b2b6
   languageName: node
   linkType: hard
 
@@ -3876,9 +3867,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite@npm:5.4.9":
+"vite@npm:5.4.10":
-  version: 5.4.9
+  version: 5.4.10
-  resolution: "vite@npm:5.4.9"
+  resolution: "vite@npm:5.4.10"
   dependencies:
     esbuild: "npm:^0.21.3"
     fsevents: "npm:~2.3.3"
@@ -3915,19 +3906,19 @@ __metadata:
       optional: true
   bin:
     vite: bin/vite.js
-  checksum: 10c0/e9c59f2c639047e37c79bbbb151c7a55a3dc27932957cf4cf0447ee0bdcc1ddfd9b1fb3ba0465371c01ba3616d62561327855794c2d652213c3a10a32e6d369d
+  checksum: 10c0/4ef4807d2fd166a920de244dbcec791ba8a903b017a7d8e9f9b4ac40d23f8152c1100610583d08f542b47ca617a0505cfc5f8407377d610599d58296996691ed
   languageName: node
   linkType: hard
 
-"vitefu@npm:^0.2.5":
+"vitefu@npm:^1.0.3":
-  version: 0.2.5
+  version: 1.0.3
-  resolution: "vitefu@npm:0.2.5"
+  resolution: "vitefu@npm:1.0.3"
   peerDependencies:
-    vite: ^3.0.0 || ^4.0.0 || ^5.0.0
+    vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0-beta.0
   peerDependenciesMeta:
     vite:
       optional: true
-  checksum: 10c0/5781ece3025b6be0eb87ee7d97760a7721b1c6c5ad60ede5f37c86393ece3c8fce4245472f62368eb192448034086e25bdcadf098eefc271277176ab9a430204
+  checksum: 10c0/0b41021767885d538d04bb0cdabd140a5397a780997533a3cc1a1ea3c0ffae0cac4bde3e67632440587cd0505c0b6e825dfd8ab7da6249a68076072bea6eada1
   languageName: node
   linkType: hard
 
@@ -3995,3 +3986,10 @@ __metadata:
   checksum: 10c0/dceb44c28578b31641e13695d200d34ec4ab3966a5729814d5445b194933c096b7ced71494ce53a0e8820685d1d010df8b2422e5bf2cdea7e469d97ffbea306f
   languageName: node
   linkType: hard
+
+"zimmerframe@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "zimmerframe@npm:1.1.2"
+  checksum: 10c0/8f693609c31cbb4449db223acd61661bc93b73e615f9db6fb8c86d4ceea84ca54cbbeebcf53cf74c22a1f923b92abd18e97988a5e175c76b6ab17238e5593a9d
+  languageName: node
+  linkType: hard