Adds a footer.

src/app.html

@@ -10,7 +10,7 @@
 		<div
 			class="h-full bg-neutral-400 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-400"
 		>
-			<div class="container mx-auto">%sveltekit.body%</div>
+			<div class="container mx-auto flex h-full flex-col">%sveltekit.body%</div>
 		</div>
 	</body>
 </html>

src/routes/+page.server.ts

@@ -2,11 +2,13 @@ import { clientConfig, serverConfig } from '$lib/server/config';
 import type { PageServerLoad } from './$types';
 import { getServiceHandler } from '$lib/services/services';
 
-export const load: PageServerLoad = ({ fetch }) => {
+export const load: PageServerLoad = ({ fetch, getClientAddress }) => {
 	const serviceData: Array<Array<unknown>> = [];
 	const config = clientConfig();
 
-	for (const [i, group] of serverConfig().services.entries()) {
+	const privateConfig = serverConfig();
+
+	for (const [i, group] of privateConfig.services.entries()) {
 		const groupData: Array<unknown> = [];
 		serviceData.push(groupData);
 		for (const [j, service] of group.items.entries()) {
@@ -20,5 +22,5 @@ export const load: PageServerLoad = ({ fetch }) => {
 		}
 	}
 
-	return { config, serviceData };
+	return { config, serviceData, location: getClientAddress() };
 };

src/routes/+page.svelte

@@ -10,7 +10,7 @@
 <Header section={data.config} links={data.config.links} />
 
 <main
-	class={'container mt-20 gap-12 transition-all ' + ' layout-' + $layoutDirection}
+	class={'container mb-auto mt-20 gap-4 transition-all' + ' layout-' + $layoutDirection}
 	style={'--columns:' + data.config.columns}
 >
 	{#each data.config.services as group, i}
@@ -18,7 +18,9 @@
 	{/each}
 </main>
 
-<footer />
+<footer class="flex h-8 w-full flex-row">
+	<div class="mx-auto">Made with ♥ by atuleu. Your IP is {data.location}</div>
+</footer>
 
 <style>
 	.layout-column {