Refactor modal import and enhance error page with emojis

Author: saaqi

src/components/Modal.svelte

@@ -2,7 +2,7 @@
 	import { onMount } from 'svelte';
 	onMount(async () => {
 		// Only runs in browser
-		const bootstrap = await import('bootstrap/js/dist/modal.js');
+		await import('bootstrap/js/dist/modal.js');
 	});
 
 	const {

src/components/emojis.js

@@ -0,0 +1,6 @@
+export const emojis = {
+	// TODO add the rest!
+	420: '🫠',
+	404: '🤔',
+	500: '🤕'
+};

src/routes/+error.svelte

@@ -0,0 +1,58 @@
+<script>
+	import { page } from '$app/state';
+	import { emojis } from '../components/emojis.js';
+</script>
+
+<svelte:head>
+	<title>ERROR {page.status} - {page.error.message}</title>
+	<meta name="robots" content="noindex, follow" />
+</svelte:head>
+
+<div id="notfound">
+	<div class="notfound">
+		<div class="notfound-404">
+			<h1>Oops!</h1>
+			{emojis[page.status] ?? emojis[500]}
+			<h2>ERROR {page.status}: {page.error.message}</h2>
+		</div>
+		<p>
+			Uh-oh! It seems the page you're looking for has either been removed, relocated, or may not
+			exist at all. Before you venture further, double-check the URL in your browser. If all seems
+			well, consider navigating back to our homepage to explore anew. Thanks for your understanding!
+		</p>
+		<a href="/">Go To Homepage</a>
+	</div>
+</div>
+
+<style>
+	#notfound {
+		height: 100svh;
+		display: grid;
+		place-content: center;
+	}
+	.notfound {
+		max-width: 600px;
+		width: 100%;
+		text-align: center;
+	}
+	.notfound-404 h1 {
+		font-size: 4rem;
+		margin: 0 0 1rem 0;
+	}
+	.notfound p {
+		line-height: 1.5rem;
+		font-size: 1rem;
+	}
+	.notfound a {
+		font-size: 1rem;
+		text-decoration: none;
+		text-transform: uppercase;
+		background: #333;
+		display: inline-block;
+		padding: 1rem 2rem;
+		border-radius: 1rem;
+		color: #fff;
+		font-weight: 700;
+		box-shadow: 0 4px 15px -5px #333;
+	}
+</style>

src/routes/+page.svelte

@@ -2,6 +2,12 @@
 	import Counter from '/src/components/Counter.svelte';
 	import Logos from '/src/components/Logos.svelte';
 	import Modal from '/src/components/Modal.svelte';
+	import { onMount } from 'svelte';
+
+	let hrefLocation = '';
+	onMount(() => {
+		hrefLocation = window.location.href;
+	});
 </script>
 
 <svelte:head>
@@ -16,24 +22,34 @@
 	<div class="container">
 		<div class="row gap-4">
 			<h1 class="h2">Welcome to SvelteKit + Bootstrap by Saaqi</h1>
+
 			<div class="d-flex gap-5">
 				<Logos />
 			</div>
-			<div class="w-auto">
-				<div class="d-flex gap-3">
-					<div style="width: 10em">
-						<Counter btnStyle="secondary" />
-					</div>
-					<div style="width: 10em">
-						<Modal
-							btnTitle="Demo Modal"
-							modalTitle="Demo Modal title"
-							id="demoModal"
-							body="Hello, I'm a modal!"
-						/>
-					</div>
+
+			<div class="mb-5 col-xl-4 col-md-6">
+				<div class="mb-3 d-flex justify-content-between gap-3">
+					<Counter btnStyle="secondary" />
+					<Modal
+						id="modal-demo"
+						btnTitle="Modal Demo"
+						modalTitle="Cat's Diary"
+						body="Make muffins give attitude chase mice sweet beast under the bed all of a sudden go crazy behind the couch destroy couch intently stare at the same spot chew ipad power cord bag stretch claw drapes, leave dead animals as gifts attack feet flop over hopped up on goofballs hunt anything that moves hide when guests come over intrigued by the shower stand in front of the computer screen rub face on everything."
+					/>
+				</div>
+
+				<div>
+					<a
+						href="https://pagespeed.web.dev/report?url={hrefLocation}"
+						target="_blank"
+						class="btn btn-light w-100"
+						rel="noreferrer"
+					>
+						Google PageSpeed Report
+					</a>
 				</div>
 			</div>
+
 			<p>
 				Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation
 			</p>

vite.config.js

@@ -40,9 +40,9 @@ export default defineConfig({
 
 		/* ## Download Google Fonts and attach them with production build for offline use */
 		IN_PRODUCTION &&
-		webfontDownload([
-			'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'
-		]),
+			webfontDownload([
+				'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'
+			])
 	],
 
 	css: {