Add placeholder pages

MinicraftPlus · Jul 2, 2024 · 0e657d7 · 0e657d7
1 parent 880a981
commit 0e657d7
Show file tree

Hide file tree

Showing 9 changed files with 377 additions and 114 deletions.
diff --git a/.gitignore b/.gitignore
@@ -17,3 +17,4 @@ node_modules
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 
+/.idea
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
 		"svelte-check": "^3.6.0",
 		"tailwindcss": "^3.4.1",
 		"typescript": "^5.0.0",
-		"vite": "^5.0.3"
+		"vite": "^5.2.6"
 	},
 	"type": "module"
 }
diff --git a/src/app.d.ts b/src/app.d.ts
@@ -2,7 +2,10 @@
 // for information about these interfaces
 declare global {
 	namespace App {
-		// interface Error {}
+		interface Error {
+			code: string;
+			id: string;
+		}
 		// interface Locals {}
 		// interface PageData {}
 		// interface PageState {}

diff --git a/src/error.html b/src/error.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title>%sveltekit.error.message%</title>
+	</head>
+	<body>
+		<h1>ERROR</h1>
+		<h2>%sveltekit.status%</h2>
+		<p>%sveltekit.error.message%</p>
+	</body>
+</html>
diff --git a/src/lib/assets/banner logo.svg b/src/lib/assets/banner logo.svg
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	export let msg = $page.error!.message;
+	export let status = $page.status;
+</script>
+
+<div class="flex flex-col h-screen">
+	<!-- Reference: https://tailwindcomponents.com/component/simple-404-page-template -->
+	<div class="flex items-center justify-center bg-green-400 py-48">
+		<div class="flex flex-col">
+			<div class="flex flex-col items-center">
+				<div class="text-green-700 font-bold text-7xl">
+					{status}
+				</div>
+
+				<div class="font-bold text-3xl xl:text-7xl lg:text-6xl md:text-5xl mt-10">
+					{msg}
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<footer class="bg-green-200" aria-labelledby="footer-heading">
+		<div class="flex p-12 flex-col items-center m-auto px-6 text-3xl">
+			<a href="/">Go back to home</a>
+		</div>
+	</footer>
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,2 +1,26 @@
-<h1>Website for Minicraft+</h1>
-<p>New page is under construction. Meanwhile take a look at <a data-sveltekit-reload rel="external" href="./old/index.html">our old site</a>.</p>
+<script>
+	import bannerLogo from '$lib/assets/banner logo.svg';
+</script>
+
+<div class="flex flex-col items-center justify-center w-full h-screen box-border">
+	<div class="flex flex-col bg-green-600 w-full py-8">
+		<div class="flex flex-col items-center">
+			<img class="size-3/4" src={bannerLogo} alt="Banner"/>
+		</div>
+	</div>
+
+	<div class="min-h-0 w-full flex-grow items-center bg-sky-200">
+		<div class="mx-auto text-center space-y-6 place-items-center h-full p-10 rounded-xl shadow-2xl my-20 sm:my-auto bg-green-200 border-4 border-green-900">
+			<h1 class="text-6xl">
+				Under Construction
+			</h1>
+			<h2 class="text-5xl">
+				Coming Soon
+			</h2>
+			<p>
+				New page is under construction<br/>
+				Meanwhile take a look at <a data-sveltekit-reload rel="external" href="./old/index.html">our old site</a>
+			</p>
+		</div>
+	</div>
+</div>
diff --git a/svelte.config.js b/svelte.config.js
@@ -5,7 +5,7 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 const config = {
 	kit: {
 		adapter: adapter({
-			fallback: '404.html',
+			// fallback: '404.html',
 			pages: './build',
 			assets: './build'
 		}),
Original file line number	Diff line number	Diff line change
Expand Up		@@ -17,3 +17,4 @@ node_modules
		vite.config.js.timestamp-*
		vite.config.ts.timestamp-*

		/.idea