clean up

src/hooks.server.ts

@@ -0,0 +1,40 @@
+import { sequence } from '@sveltejs/kit/hooks'
+import { type Handle } from '@sveltejs/kit'
+import { building } from '$app/environment'
+
+const headers: Handle = async ({ event, resolve }) => {
+	const response = await resolve(event)
+	response.headers.set('cache-control', 'no-cache')
+	return response
+}
+
+const logger: Handle = async ({ event, resolve }) => {
+	const requestStartTime = Date.now()
+	const response = await resolve(event)
+
+	// Note: This is specific to the CapRover environment
+	let ip = '127.0.0.1'
+
+	if (!building) {
+		try {
+			ip = event.request.headers.get('x-forwarded-for') || event.getClientAddress()
+		} catch (e) {
+			console.error('Could not get client IP address:', e)
+		}
+	}
+
+	const date = new Date(requestStartTime)
+	const wlz = (num: number) => (num < 10 ? `0${num}` : num)
+
+	console.log(
+		`${wlz(date.getHours())}:${wlz(date.getMinutes())}:${wlz(date.getSeconds())}`,
+		`[${ip}]`,
+		event.request.method,
+		event.url.pathname,
+		`- 🐇 ${Date.now() - requestStartTime} ms`,
+		`${response.status === 200 ? '✅' : '❌'} ${response.status}`
+	)
+	return response
+}
+
+export const handle: Handle = sequence(logger, headers)

src/lib/components/PresetListItem.svelte

@@ -30,10 +30,11 @@
 <li>
 	<a href="/{key}">{title}</a>
 	{#if description}
-		<span class="info-marker" on:click={() => dialog?.showModal()}>*</span>
+		<button class="info-marker" onclick={() => dialog?.showModal()}>*</button>
 		<dialog bind:this={dialog}>
 			<form method="dialog">
 				<p>{description}</p>
+				<!-- svelte-ignore a11y_autofocus -->
 				<button autofocus>Close</button>
 			</form>
 		</dialog>
@@ -75,4 +76,17 @@
 		padding: 0.5em 1em;
 		cursor: pointer;
 	}
+
+	button.info-marker {
+		padding: 0.5em 1em;
+		cursor: pointer;
+		/* remove default button styles */
+		background: none;
+		border: none;
+		color: inherit;
+		font: inherit;
+		text-align: inherit;
+		margin: 0;
+		padding: 0;
+	}
 </style>