add option to set base path

.env.example

@@ -1,2 +1,3 @@
 DATABASE_URI=sqlite://./database.db
 PUBLIC_START_DATE=2023-12-26T00:00:00
+PUBLIC_BASE_PATH=

.gitea/workflows/deploy.yml

@@ -28,7 +28,7 @@ jobs:
           eval $(ssh-agent)
           ssh-add "$HOME/.ssh/deploy_key"
           ssh-keyscan -t rsa "$HOST" >> "$HOME/.ssh/known_hosts"
-          
+
           ssh -o StrictHostKeyChecking=no $USER@$HOST "rm -r /opt/website; mkdir -p /opt/website"
           scp -r -o StrictHostKeyChecking=no $(ls -d -1 build/*) $(ls package*) $USER@$HOST:/opt/website
           ssh -o StrictHostKeyChecking=no $USER@$HOST "cd /opt/website; npm i --omit=dev; systemctl restart website"

README.md

@@ -34,4 +34,5 @@ Configurations can be done with env variables
 | `HOST`              | Host the server should listen on                                                                                                                    |
 | `PORT`              | Port the server should listen on                                                                                                                    |
 | `DATABASE_URI`      | URI to the database as a connection string. Supported databases are [sqlite](https://www.sqlite.org/index.html) and [mariadb](https://mariadb.org/) |
+| `PUBLIC_BASE_PATH`  | If running the website on a sub-path, set this variable to the path so that assets etc. can find the correct location                               |
 | `PUBLIC_START_DATE` | The start date when the event starts                                                                                                                |

src/routes/+layout.svelte

@@ -1,16 +1,22 @@
-<script>
+<script lang="ts">
 	import '../app.css';
+
+	import { env } from '$env/dynamic/public';
 </script>
 
 <nav class="navbar fixed top-0 bg-base-100 h-12 z-40">
 	<div class="navbar-start h-full">
-		<a class="h-full" href="/">
+		<a class="h-full" href="{env.PUBLIC_BASE_PATH}/">
-			<img class="rounded h-full" src="/img/craftattack-logo.webp" alt="Logo" />
+			<img
+				class="rounded h-full"
+				src="{env.PUBLIC_BASE_PATH}/img/craftattack-logo.webp"
+				alt="Logo"
+			/>
 		</a>
 	</div>
 	<div class="navbar-center flex space-x-20">
-		<a class="link" href="/register">Anmelden</a>
+		<a class="link" href="{env.PUBLIC_BASE_PATH}/register">Anmelden</a>
-		<a class="link" href="/rules">Regeln</a>
+		<a class="link" href="{env.PUBLIC_BASE_PATH}/rules">Regeln</a>
 	</div>
 	<div class="navbar-end" />
 </nav>

src/routes/register/Register.svelte

@@ -2,6 +2,7 @@
 	import Select from '$lib/components/Input/Select.svelte';
 	import Input from '$lib/components/Input/Input.svelte';
 	import { createEventDispatcher, onMount } from 'svelte';
+	import { env } from '$env/dynamic/public';
 
 	const dispatch = createEventDispatcher();
 
@@ -37,7 +38,7 @@
 	async function sendRegister() {
 		// eslint-disable-next-line no-async-promise-executor
 		registerRequest = new Promise(async (resolve, reject) => {
-			const response = await fetch('/register', {
+			const response = await fetch(`${env.PUBLIC_BASE_PATH}/register`, {
 				method: 'POST',
 				body: new FormData(document.forms[0])
 			});
@@ -171,7 +172,8 @@
 				bind:inputElement={rulesInput}
 			/>
 			<label for="rules">
-				Ich bin mit den <a class="link" href="/rules">Regeln</a> einverstanden und achte sie
+				Ich bin mit den <a class="link" href="{env.PUBLIC_BASE_PATH}/rules">Regeln</a> einverstanden
+				und achte sie
 				<span class="text-red-700">*</span>
 				<br />
 				<p class="text-[.75rem]">