Load background from server page

frontend/src/lib/components/ImageInfoModal.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { Background } from '$lib/types';
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+	import { onMount } from 'svelte';
+	let modal: HTMLDialogElement;
+	export let background: Background;
+
+	onMount(() => {
+		modal = document.getElementById('my_modal_1') as HTMLDialogElement;
+		if (modal) {
+			modal.showModal();
+		}
+	});
+
+	function close() {
+		dispatch('close');
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			dispatch('close');
+		}
+	}
+</script>
+
+<dialog id="my_modal_1" class="modal">
+	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+	<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
+		<h3 class="font-bold text-lg">
+			About This Background<span class=" inline-block"></span>
+		</h3>
+
+		<div class="flex flex-col items-center">
+			<!-- svelte-ignore a11y-img-redundant-alt -->
+			<!-- <img
+					src={background.url}
+					alt="Background Image"
+					class="w-96 h-96 object-cover rounded-lg shadow-lg mt-4"
+				/> -->
+			{#if background.author != ''}
+				<p class="text-center mt-2">Photo by {background.author}</p>
+			{/if}
+			{#if background.location != ''}
+				<p class="text-center">Location: {background.location}</p>
+			{/if}
+			<button
+				on:click={() => (window.location.href = 'https://forms.gle/2uZNnz8QS3VjuYtQ8')}
+				class="btn btn-neutral inline-block mt-4 mb-2">Submit an Image</button
+			>
+		</div>
+
+		<button class="btn btn-primary" on:click={close}>Close</button>
+	</div>
+</dialog>

frontend/src/lib/index.ts

@@ -1,6 +1,14 @@
 import inspirationalQuotes from './json/quotes.json';
 import randomBackgrounds from './json/backgrounds.json';
-import type { Adventure, Checklist, Collection, Note, Transportation, User } from './types';
+import type {
+	Adventure,
+	Background,
+	Checklist,
+	Collection,
+	Note,
+	Transportation,
+	User
+} from './types';
 
 export function getRandomQuote() {
 	const quotes = inspirationalQuotes.quotes;
@@ -278,5 +286,5 @@ export function isAdventureVisited(adventure: Adventure) {
 
 export function getRandomBackground() {
 	const randomIndex = Math.floor(Math.random() * randomBackgrounds.backgrounds.length);
-	return randomBackgrounds.backgrounds[randomIndex];
+	return randomBackgrounds.backgrounds[randomIndex] as Background;
 }

frontend/src/lib/types.ts

@@ -162,3 +162,9 @@ export type ChecklistItem = {
 	created_at: string; // ISO 8601 date string
 	updated_at: string; // ISO 8601 date string
 };
+
+export type Background = {
+	url: string;
+	author?: string;
+	location?: string;
+};

frontend/src/routes/login/+page.server.ts

@@ -1,11 +1,22 @@
 import { fail, redirect } from '@sveltejs/kit';
 
 import type { Actions, PageServerLoad } from './$types';
+import { getRandomBackground, getRandomQuote } from '$lib';
 const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
 
 export const load: PageServerLoad = async (event) => {
 	if (event.locals.user) {
 		return redirect(302, '/');
+	} else {
+		const quote = getRandomQuote();
+		const background = getRandomBackground();
+
+		return {
+			props: {
+				quote,
+				background
+			}
+		};
 	}
 };
 

frontend/src/routes/login/+page.svelte

@@ -7,21 +7,23 @@
 	console.log(data);
 
 	import FileImageBox from '~icons/mdi/file-image-box';
-	import Account from '~icons/mdi/account';
-	import MapMarkerOutline from '~icons/mdi/map-marker-outline';
+
+	let isImageInfoModalOpen: boolean = false;
 
 	import { page } from '$app/stores';
-	import ImageDisplayModal from '$lib/components/ImageDisplayModal.svelte';
 
-	let quote: { quote: string; author: string } = { quote: '', author: '' };
+	import ImageInfoModal from '$lib/components/ImageInfoModal.svelte';
+	import type { Background } from '$lib/types.js';
 
-	let background = getRandomBackground();
+	let quote: { quote: string; author: string } = data.props.quote;
 
-	onMount(async () => {
-		quote = getRandomQuote();
-	});
+	let background: Background = data.props.background;
 </script>
 
+{#if isImageInfoModalOpen}
+	<ImageInfoModal {background} on:close={() => (isImageInfoModalOpen = false)} />
+{/if}
+
 <div
 	class="min-h-screen bg-no-repeat bg-cover flex items-center justify-center"
 	style="background-image: url('{background.url}')"
@@ -79,25 +81,12 @@
 
 <div class="fixed bottom-4 right-4 z-[999]">
 	<div class="dropdown dropdown-left dropdown-end">
-		<div tabindex="0" role="button" class="btn m-1 btn-circle btn-md">
+		<button class="btn m-1 btn-circle btn-md" on:click={() => (isImageInfoModalOpen = true)}>
 			<FileImageBox class="w-4 h-4" />
-		</div>
-		<ul
-			class="dropdown-content menu bg-base-100 rounded-box z-[1] w-auto min-w-[200%] p-2 shadow right-0"
-		>
-			<p class="whitespace-nowrap text-left">
-				<Account class="w-4 h-4 inline-block" />
-				{background.author}
-				<MapMarkerOutline class="w-4 h-4 inline-block" />
-				{background.location}
-				<button
-					on:click={() => (window.location.href = 'https://forms.gle/2uZNnz8QS3VjuYtQ8')}
-					class="btn btn-sm btn-neutral inline-block ml-4">Submit an Image</button
-				>
-			</p>
-		</ul>
+		</button>
 	</div>
 </div>
+
 <svelte:head>
 	<title>Login | AdventureLog</title>
 	<meta