v1.2

2026-02-04 02:44:43 -05:00 · 2025-12-16 18:46:53 -05:00
parent 530291d271
commit 427d1dc918
7 changed files with 610 additions and 282 deletions
--- a/.env.example
+++ b/.env.example
@@ -1 +0,0 @@
-DATABASE_URL=local.db
--- a/bibdle.service
+++ b/bibdle.service
@@ -0,0 +1,18 @@
+[Unit]
+Description=Bibdle SvelteKit App
+Documentation=https://github.com/sveltejs/kit/tree/main/packages/adapter-node
+Requires=bibdle.socket
+After=network-online.target bibdle.socket
+
+[Service]
+Environment=NODE_ENV=production
+Environment=ORIGIN=https://bibdle.orthodox.cafe
+Environment=DATABASE_URL=local.db
+Environment=IDLE_TIMEOUT=60
+WorkingDirectory=/home/george/projects/bibdle
+ExecStart=/home/george/.nvm/versions/node/v24.12.0/bin/node build/index.js
+Restart=on-failure
+RestartSec=3
+
+[Install]
+WantedBy=multi-user.target
--- a/bibdle.socket
+++ b/bibdle.socket
@@ -0,0 +1,5 @@
+[Socket]
+ListenStream=5173
+
+[Install]
+WantedBy=sockets.target
--- a/deploy.txt
+++ b/deploy.txt
@@ -0,0 +1,267 @@
+To generate a standalone Node server, use [`adapter-node`](https://github.com/sveltejs/kit/tree/main/packages/adapter-node).
+
+## Usage
+
+Install with `npm i -D @sveltejs/adapter-node`, then add the adapter to your `svelte.config.js`:
+
+```js
+// @errors: 2307
+/// file: svelte.config.js
+import adapter from '@sveltejs/adapter-node';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		adapter: adapter()
+	}
+};
+
+export default config;
+```
+
+## Deploying
+
+First, build your app with `npm run build`. This will create the production server in the output directory specified in the adapter options, defaulting to `build`.
+
+You will need the output directory, the project's `package.json`, and the production dependencies in `node_modules` to run the application. Production dependencies can be generated by copying the `package.json` and `package-lock.json` and then running `npm ci --omit dev` (you can skip this step if your app doesn't have any dependencies). You can then start your app with this command:
+
+```sh
+node build
+```
+
+Development dependencies will be bundled into your app using [Rollup](https://rollupjs.org). To control whether a given package is bundled or externalised, place it in `devDependencies` or `dependencies` respectively in your `package.json`.
+
+### Compressing responses
+
+You will typically want to compress responses coming from the server. If you're already deploying your server behind a reverse proxy for SSL or load balancing, it typically results in better performance to also handle compression at that layer since Node.js is single-threaded.
+
+However, if you're building a [custom server](#Custom-server) and do want to add a compression middleware there, note that we would recommend using [`@polka/compression`](https://www.npmjs.com/package/@polka/compression) since SvelteKit streams responses and the more popular `compression` package does not support streaming and may cause errors when used.
+
+## Environment variables
+
+In `dev` and `preview`, SvelteKit will read environment variables from your `.env` file (or `.env.local`, or `.env.[mode]`, [as determined by Vite](https://vitejs.dev/guide/env-and-mode.html#env-files).)
+
+In production, `.env` files are _not_ automatically loaded. To do so, install `dotenv` in your project...
+
+```sh
+npm install dotenv
+```
+
+...and invoke it before running the built app:
+
+```sh
+node +++-r dotenv/config+++ build
+```
+
+If you use Node.js v20.6+, you can use the [`--env-file`](https://nodejs.org/en/learn/command-line/how-to-read-environment-variables-from-nodejs) flag instead:
+
+```sh
+node +++--env-file=.env+++ build
+```
+
+### `PORT`, `HOST` and `SOCKET_PATH`
+
+By default, the server will accept connections on `0.0.0.0` using port 3000. These can be customised with the `PORT` and `HOST` environment variables:
+
+```sh
+HOST=127.0.0.1 PORT=4000 node build
+```
+
+Alternatively, the server can be configured to accept connections on a specified socket path. When this is done using the `SOCKET_PATH` environment variable, the `HOST` and `PORT` environment variables will be disregarded.
+
+```sh
+SOCKET_PATH=/tmp/socket node build
+```
+
+### `ORIGIN`, `PROTOCOL_HEADER`, `HOST_HEADER`, and `PORT_HEADER`
+
+HTTP doesn't give SvelteKit a reliable way to know the URL that is currently being requested. The simplest way to tell SvelteKit where the app is being served is to set the `ORIGIN` environment variable:
+
+```sh
+ORIGIN=https://my.site node build
+
+# or e.g. for local previewing and testing
+ORIGIN=http://localhost:3000 node build
+```
+
+With this, a request for the `/stuff` pathname will correctly resolve to `https://my.site/stuff`. Alternatively, you can specify headers that tell SvelteKit about the request protocol and host, from which it can construct the origin URL:
+
+```sh
+PROTOCOL_HEADER=x-forwarded-proto HOST_HEADER=x-forwarded-host node build
+```
+
+> [!NOTE] [`x-forwarded-proto`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Forwarded-Proto) and [`x-forwarded-host`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Forwarded-Host) are de facto standard headers that forward the original protocol and host if you're using a reverse proxy (think load balancers and CDNs). You should only set these variables if your server is behind a trusted reverse proxy; otherwise, it'd be possible for clients to spoof these headers.
+>
+> If you're hosting your proxy on a non-standard port and your reverse proxy supports `x-forwarded-port`, you can also set `PORT_HEADER=x-forwarded-port`.
+
+If `adapter-node` can't correctly determine the URL of your deployment, you may experience this error when using [form actions](form-actions):
+
+> [!NOTE] Cross-site POST form submissions are forbidden
+
+### `ADDRESS_HEADER` and `XFF_DEPTH`
+
+The [`RequestEvent`](@sveltejs-kit#RequestEvent) object passed to hooks and endpoints includes an `event.getClientAddress()` function that returns the client's IP address. By default this is the connecting `remoteAddress`. If your server is behind one or more proxies (such as a load balancer), this value will contain the innermost proxy's IP address rather than the client's, so we need to specify an `ADDRESS_HEADER` to read the address from:
+
+```sh
+ADDRESS_HEADER=True-Client-IP node build
+```
+
+> [!NOTE] Headers can easily be spoofed. As with `PROTOCOL_HEADER` and `HOST_HEADER`, you should [know what you're doing](https://adam-p.ca/blog/2022/03/x-forwarded-for/) before setting these.
+
+If the `ADDRESS_HEADER` is `X-Forwarded-For`, the header value will contain a comma-separated list of IP addresses. The `XFF_DEPTH` environment variable should specify how many trusted proxies sit in front of your server. E.g. if there are three trusted proxies, proxy 3 will forward the addresses of the original connection and the first two proxies:
+
+```
+<client address>, <proxy 1 address>, <proxy 2 address>
+```
+
+Some guides will tell you to read the left-most address, but this leaves you [vulnerable to spoofing](https://adam-p.ca/blog/2022/03/x-forwarded-for/):
+
+```
+<spoofed address>, <client address>, <proxy 1 address>, <proxy 2 address>
+```
+
+We instead read from the _right_, accounting for the number of trusted proxies. In this case, we would use `XFF_DEPTH=3`.
+
+> [!NOTE] If you need to read the left-most address instead (and don't care about spoofing) — for example, to offer a geolocation service, where it's more important for the IP address to be _real_ than _trusted_, you can do so by inspecting the `x-forwarded-for` header within your app.
+
+### `BODY_SIZE_LIMIT`
+
+The maximum request body size to accept in bytes including while streaming. The body size can also be specified with a unit suffix for kilobytes (`K`), megabytes (`M`), or gigabytes (`G`). For example, `512K` or `1M`. Defaults to 512kb. You can disable this option with a value of `Infinity` (0 in older versions of the adapter) and implement a custom check in [`handle`](hooks#Server-hooks-handle) if you need something more advanced.
+
+### `SHUTDOWN_TIMEOUT`
+
+The number of seconds to wait before forcefully closing any remaining connections after receiving a `SIGTERM` or `SIGINT` signal. Defaults to `30`. Internally the adapter calls [`closeAllConnections`](https://nodejs.org/api/http.html#servercloseallconnections). See [Graceful shutdown](#Graceful-shutdown) for more details.
+
+### `IDLE_TIMEOUT`
+
+When using systemd socket activation, `IDLE_TIMEOUT` specifies the number of seconds after which the app is automatically put to sleep when receiving no requests. If not set, the app runs continuously. See [Socket activation](#Socket-activation) for more details.
+
+## Options
+
+The adapter can be configured with various options:
+
+```js
+// @errors: 2307
+/// file: svelte.config.js
+import adapter from '@sveltejs/adapter-node';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		adapter: adapter({
+			// default options are shown
+			out: 'build',
+			precompress: true,
+			envPrefix: ''
+		})
+	}
+};
+
+export default config;
+```
+
+### out
+
+The directory to build the server to. It defaults to `build` — i.e. `node build` would start the server locally after it has been created.
+
+### precompress
+
+Enables precompressing using gzip and brotli for assets and prerendered pages. It defaults to `true`.
+
+### envPrefix
+
+If you need to change the name of the environment variables used to configure the deployment (for example, to deconflict with environment variables you don't control), you can specify a prefix:
+
+```js
+envPrefix: 'MY_CUSTOM_';
+```
+
+```sh
+MY_CUSTOM_HOST=127.0.0.1 \
+MY_CUSTOM_PORT=4000 \
+MY_CUSTOM_ORIGIN=https://my.site \
+node build
+```
+
+## Graceful shutdown
+
+By default `adapter-node` gracefully shuts down the HTTP server when a `SIGTERM` or `SIGINT` signal is received. It will:
+
+1. reject new requests ([`server.close`](https://nodejs.org/api/http.html#serverclosecallback))
+2. wait for requests that have already been made but not received a response yet to finish and close connections once they become idle ([`server.closeIdleConnections`](https://nodejs.org/api/http.html#servercloseidleconnections))
+3. and finally, close any remaining connections that are still active after [`SHUTDOWN_TIMEOUT`](#Environment-variables-SHUTDOWN_TIMEOUT) seconds. ([`server.closeAllConnections`](https://nodejs.org/api/http.html#servercloseallconnections))
+
+> [!NOTE] If you want to customize this behaviour you can use a [custom server](#Custom-server).
+
+You can listen to the `sveltekit:shutdown` event which is emitted after the HTTP server has closed all connections. Unlike Node's `exit` event, the `sveltekit:shutdown` event supports asynchronous operations and is always emitted when all connections are closed even if the server has dangling work such as open database connections.
+
+```js
+// @errors: 2304
+process.on('sveltekit:shutdown', async (reason) => {
+  await jobs.stop();
+  await db.close();
+});
+```
+
+The parameter `reason` has one of the following values:
+
+- `SIGINT` - shutdown was triggered by a `SIGINT` signal
+- `SIGTERM` - shutdown was triggered by a `SIGTERM` signal
+- `IDLE` - shutdown was triggered by [`IDLE_TIMEOUT`](#Environment-variables-IDLE_TIMEOUT)
+
+## Socket activation
+
+Most Linux operating systems today use a modern process manager called systemd to start the server and run and manage services. You can configure your server to allocate a socket and start and scale your app on demand. This is called [socket activation](https://0pointer.de/blog/projects/socket-activated-containers.html). In this case, the OS will pass two environment variables to your app — `LISTEN_PID` and `LISTEN_FDS`. The adapter will then listen on file descriptor 3 which refers to a systemd socket unit that you will have to create.
+
+> [!NOTE] You can still use [`envPrefix`](#Options-envPrefix) with systemd socket activation. `LISTEN_PID` and `LISTEN_FDS` are always read without a prefix.
+
+To take advantage of socket activation follow these steps.
+
+1. Run your app as a [systemd service](https://www.freedesktop.org/software/systemd/man/latest/systemd.service.html). It can either run directly on the host system or inside a container (using Docker or a systemd portable service for example). If you additionally pass an [`IDLE_TIMEOUT`](#Environment-variables-IDLE_TIMEOUT) environment variable to your app it will gracefully shutdown if there are no requests for `IDLE_TIMEOUT` seconds. systemd will automatically start your app again when new requests are coming in.
+
+```ini
+/// file: /etc/systemd/system/myapp.service
+[Service]
+Environment=NODE_ENV=production IDLE_TIMEOUT=60
+ExecStart=/usr/bin/node /usr/bin/myapp/build
+```
+
+2. Create an accompanying [socket unit](https://www.freedesktop.org/software/systemd/man/latest/systemd.socket.html). The adapter only accepts a single socket.
+
+```ini
+/// file: /etc/systemd/system/myapp.socket
+[Socket]
+ListenStream=3000
+
+[Install]
+WantedBy=sockets.target
+```
+
+3. Make sure systemd has recognised both units by running `sudo systemctl daemon-reload`. Then enable the socket on boot and start it immediately using `sudo systemctl enable --now myapp.socket`. The app will then automatically start once the first request is made to `localhost:3000`.
+
+## Custom server
+
+The adapter creates two files in your build directory — `index.js` and `handler.js`. Running `index.js` — e.g. `node build`, if you use the default build directory — will start a server on the configured port.
+
+Alternatively, you can import the `handler.js` file, which exports a handler suitable for use with [Express](https://github.com/expressjs/express), [Connect](https://github.com/senchalabs/connect) or [Polka](https://github.com/lukeed/polka) (or even just the built-in [`http.createServer`](https://nodejs.org/dist/latest/docs/api/http.html#httpcreateserveroptions-requestlistener)) and set up your own server:
+
+```js
+// @errors: 2307 7006
+/// file: my-server.js
+import { handler } from './build/handler.js';
+import express from 'express';
+
+const app = express();
+
+// add a route that lives separately from the SvelteKit app
+app.get('/healthcheck', (req, res) => {
+	res.end('ok');
+});
+
+// let SvelteKit handle everything else, including serving prerendered pages and static assets
+app.use(handler);
+
+app.listen(3000, () => {
+	console.log('listening on port 3000');
+});
+```
--- a/src/app.html
+++ b/src/app.html
@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -25,15 +25,18 @@

 	let filteredBooks = $derived(
 		bibleBooks.filter((book) =>
-      book.name.toLowerCase().includes(searchQuery.toLowerCase())
-    )
+			book.name.toLowerCase().includes(searchQuery.toLowerCase()),
+		),
 	);

 	let isWon = $derived(guesses.some((g) => g.book.id === correctBookId));
 	let grade = $derived(
 		isWon
-      ? getGrade(guesses.length, getBookById(correctBookId)?.popularity ?? 0)
-      : ""
+			? getGrade(
+					guesses.length,
+					getBookById(correctBookId)?.popularity ?? 0,
+				)
+			: "",
 	);

 	function getBookById(id: string): BibleBook | undefined {
@@ -60,7 +63,7 @@
 		const adjacent = isAdjacent(book.id, correctBookId);

 		console.log(
-      `Guess: ${book.name} (order ${book.order}), Correct: ${correctBook.name} (order ${correctBook.order}), Adjacent: ${adjacent}`
+			`Guess: ${book.name} (order ${book.order}), Correct: ${correctBook.name} (order ${correctBook.order}), Adjacent: ${adjacent}`,
 		);

 		guesses = [
@@ -115,7 +118,7 @@
 		if (!browser) return;
 		localStorage.setItem(
 			`bibdle-guesses-${dailyVerse.date}`,
-      JSON.stringify(guesses.map((g) => g.book.id))
+			JSON.stringify(guesses.map((g) => g.book.id)),
 		);
 	});

@@ -140,20 +143,25 @@
 			year: "numeric",
 		});
 		const formattedDate = dateFormatter.format(
-      new Date(`${dailyVerse.date}T00:00:00`)
+			new Date(`${dailyVerse.date}T00:00:00`),
 		);
 		const siteUrl = window.location.origin;
 		const shareText = [
 			`📖 Bibdle | ${formattedDate} 📖`,
 			`${grade} (${guesses.length} guesses)`,
-      emojis,
+			`${emojis}\n`,
 			siteUrl,
 		].join("\n");

 		try {
-      await navigator.clipboard.writeText(shareText);
+			if ("share" in navigator) {
+				await (navigator as any).share({ text: shareText });
+			} else {
+				await (navigator as any).clipboard.writeText(shareText);
+			}
 		} catch (err) {
 			console.error("Share failed:", err);
+			throw err;
 		}
 	}

@@ -176,12 +184,12 @@
 	<title>Bibdle</title>
 </svelte:head>

-<div class="min-h-screen bg-linear-to-br from-blue-50 to-indigo-100 py-8">
+<div class="min-h-dvh bg-linear-to-br from-blue-50 to-indigo-100 py-8">
 	<div
-    class="max-w-md sm:max-w-lg md:max-w-2xl lg:max-w-4xl mx-auto px-2 sm:px-4"
+		class="pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] max-w-md sm:max-w-lg md:max-w-2xl lg:max-w-4xl mx-auto px-2 sm:px-4"
 	>
 		<h1
-      class="text-3xl md:text-4xl font-bold text-center text-gray-800 mb-8 sm:mb-12 drop-shadow-lg"
+			class="text-3xl md:text-4xl font-bold text-center text-gray-800 p-8 sm:p-12 drop-shadow-lg"
 		>
 			Bibdle
 		</h1>
@@ -193,13 +201,9 @@
 			<blockquote
 				class="text-xl sm:text-2xl leading-relaxed text-gray-700 italic text-center"
 			>
-        &ldquo;{dailyVerse.verseText}&rdquo;
+				{dailyVerse.verseText}
 			</blockquote>
-      {#if !isWon}
-        <!-- <p class="text-center text-sm text-gray-500 mt-4 font-medium">
-          Guess the book!
-        </p> -->
-      {:else}
+			{#if isWon}
 				<p class="text-center text-lg text-green-600 font-bold mt-4">
 					{dailyVerse.reference}
 				</p>
@@ -211,8 +215,13 @@
 			<div class="mb-12">
 				<input
 					bind:value={searchQuery}
-          placeholder="Type to search books (e.g. 'Genesis', 'John')..."
+					placeholder="Type to guess a book (e.g. 'Genesis', 'John')..."
 					class="w-full p-4 sm:p-6 border-2 border-gray-200 rounded-2xl text-base sm:text-lg md:text-xl focus:outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-100 transition-all shadow-lg"
+					onkeydown={(e) => {
+						if (e.key === "Enter" && filteredBooks.length > 0) {
+							submitGuess(filteredBooks[0].id);
+						}
+					}}
 				/>
 				{#if searchQuery && filteredBooks.length > 0}
 					<ul
@@ -224,7 +233,9 @@
 									class="w-full p-4 sm:p-5 text-left hover:bg-blue-50 hover:text-blue-700 transition-all border-b border-gray-100 last:border-b-0 flex items-center"
 									onclick={() => submitGuess(book.id)}
 								>
-                  <span class="font-semibold">{book.name}</span>
+									<span class="font-semibold"
+										>{book.name}</span
+									>
 									<span class="ml-auto text-sm opacity-75"
 										>({book.testament.toUpperCase()})</span
 									>
@@ -233,18 +244,20 @@
 						{/each}
 					</ul>
 				{:else if searchQuery}
-          <p class="mt-4 text-center text-gray-500 p-8">No books found</p>
+					<p class="mt-4 text-center text-gray-500 p-8">
+						No books found
+					</p>
 				{/if}
 			</div>
 		{:else}
 			<div
-        class="mb-12 p-8 sm:p-12 bg-linear-to-r from-green-400 to-green-600 text-white rounded-2xl shadow-2xl text-center"
+				class="mb-12 p-8 sm:p-12 max-w-full sm:max-w-2xl md:max-w-3xl mx-auto bg-linear-to-r from-green-400 to-green-600 text-white rounded-2xl shadow-2xl text-center"
 				in:fade={{ delay: 500 }}
 			>
-        <h2 class="text-4xl font-black mb-4 drop-shadow-lg">
+				<h2 class="text-2xl sm:text-4xl font-black mb-4 drop-shadow-lg">
 					🎉 Congratulations! 🎉
 				</h2>
-        <p class="text-lg sm:text-xl md:text-2xl mb-8">
+				<p class="text-lg sm:text-xl md:text-2xl mb-4">
 					The verse is from <span
 						class="font-black text-xl sm:text-2xl md:text-3xl"
 						>{getBookById(correctBookId)?.name}</span
@@ -252,19 +265,20 @@
 				</p>
 				<p class="text-xl opacity-90">{dailyVerse.reference}</p>
 				<p
-          class="text-2xl font-bold mt-6 p-2 bg-black/20 rounded-lg inline-block"
+					class="text-2xl font-bold mt-6 p-2 mx-2 bg-black/20 rounded-lg inline-block"
 				>
 					Your grade: {grade}
 				</p>
 				<button
 					onclick={handleShare}
+					data-umami-event="Share"
 					class={`mt-4 text-2xl font-bold p-2 ${
 						copied
 							? "bg-green-400/50 hover:bg-green-500/60"
 							: "bg-white/20 hover:bg-white/30"
-          } rounded-lg inline-block transition-all shadow-lg mx-auto cursor-pointer border-none appearance-none`}
+					} rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none`}
 				>
-          {copied ? "Copied! 📋" : "📤 Share"}
+					{copied ? "shared!" : "📤 Share"}
 				</button>
 			</div>
 		{/if}
@@ -273,17 +287,17 @@
 		<div class="bg-white rounded-2xl shadow-xl overflow-x-auto">
 			<table class="w-full">
 				<thead>
-          <tr class="bg-linear-to-r from-gray-50 to-gray-100">
+					<tr class="bg-linear-to-r from-gray-50 to-gray-300">
 						<th
-              class="p-3 sm:p-4 md:p-6 text-left font-bold text-sm sm:text-base md:text-lg text-gray-700 border-b border-gray-200"
+							class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
 							>Book</th
 						>
 						<th
-              class="p-3 sm:p-4 md:p-6 text-left font-bold text-sm sm:text-base md:text-lg text-gray-700 border-b border-gray-200"
+							class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
 							>Testament</th
 						>
 						<th
-              class="p-3 sm:p-4 md:p-6 text-left font-bold text-sm sm:text-base md:text-lg text-gray-700 border-b border-gray-200"
+							class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
 							>Section</th
 						>
 					</tr>
@@ -293,24 +307,44 @@
 						<tr
 							class="border-b border-gray-100 hover:bg-gray-50 transition-colors"
 						>
-              <td class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg">
-                <!-- {guess.book.id === correctBookId ? "✅" : "❌"} -->
+							<td
+								class="p-3 sm:p-4 md:p-6 text-sm sm:text-base font-bold md:text-lg"
+							>
+								{guess.book.id === correctBookId ? "✅" : "❌"}
 								{guess.book.name}
 							</td>
-              <td class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg">
+							<td
+								class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg"
+							>
 								{guess.testamentMatch ? "✅" : "🟥"}
-                {guess.book.testament.toUpperCase()}
+								{guess.book.testament.charAt(0).toUpperCase() +
+									guess.book.testament.slice(1).toLowerCase()}
 							</td>
 							<td
-                class="p-3 sm:p-4 md:p-6 font-semibold text-sm sm:text-base md:text-lg"
+								class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg"
 							>
 								{guess.sectionMatch ? "✅" : "🟥"}
-                {guess.adjacent ? "‼️ " : ""}{guess.book.section}
+								{guess.adjacent ? "‼️ " : ""}{guess.book
+									.section}
 							</td>
 						</tr>
 					{/each}
 				</tbody>
 			</table>
 		</div>
+		{#if isWon}
+			<div
+				class="mt-12 p-4 bg-linear-to-r from-blue-50 to-indigo-50 rounded-2xl shadow-md text-center text-sm md:text-base text-gray-600"
+				in:fade={{ delay: 1500, duration: 1000 }}
+			>
+				Thank you so much for playing! Feel free to email me directly
+				with feedback:
+				<a
+					href="mailto:george@snail.city"
+					class="font-semibold text-blue-600 hover:text-blue-800 underline"
+					>george@snail.city</a
+				>
+			</div>
+		{/if}
 	</div>
 </div>
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,4 +2,9 @@ import tailwindcss from '@tailwindcss/vite';
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';

-export default defineConfig({ plugins: [tailwindcss(), sveltekit()] });
+export default defineConfig({
+	plugins: [tailwindcss(), sveltekit()],
+	server: {
+		allowedHosts: ['bibdle.orthodox.cafe']
+	}
+});