azpect/hhargreaves.net
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

FEAT: Created an error page and reformatted the 404 layout.

Browse Source 
Looking much better and captures page errors almost anywhere.
This commit is contained in:
Hayden Hargreaves 2025-02-24 16:09:58 -07:00
parent 4e91775608
commit 3623c48c54
7 changed files with 22 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app.html
View File

@ -1,8 +1,8 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en" style="background-color: #1b1b1c;">
<head> <head>
<meta charset="utf-8" /> <meta charset=" utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%

2
src/components/navbar.svelte
View File

@ -1,4 +1,4 @@
<nav class="flex border-b-1 border-gray-700 py-6"> <nav class="absolute top-0 flex w-full border-b-1 border-gray-700 bg-[#1b1b1c] py-6">
<div class="flex items-end"> <div class="flex items-end">
<h3 class="ml-4 px-2 text-2xl font-[600] text-gray-200">Hayden Hargreaves</h3> <h3 class="ml-4 px-2 text-2xl font-[600] text-gray-200">Hayden Hargreaves</h3>
<p class="text-md text-gray-200 italic">Software Engineer</p> <p class="text-md text-gray-200 italic">Software Engineer</p>

11
src/components/notFound.svelte
View File

@ -1,7 +1,10 @@
<main class="flex min-h-screen w-full flex-col items-center justify-center"> <script lang="ts">
export let message: string;
</script>
<div class="my-[30%] flex h-full w-full flex-col items-center justify-center">
<h1 class="py-8 text-6xl font-semibold text-gray-300 italic opacity-30">404 - Not Found</h1> <h1 class="py-8 text-6xl font-semibold text-gray-300 italic opacity-30">404 - Not Found</h1>
<p class="text-sm text-gray-300 italic"> <p class="text-sm text-gray-300 italic">
Just kidding, I did find it. But it's not ready for you to see just yet. Sit tight, I'm working {message}
on it.
</p> </p>
</main> </div>

5
src/routes/+error.svelte Normal file
View File

@ -0,0 +1,5 @@
<script lang="ts">
import NotFound from '../components/notFound.svelte';
</script>
<NotFound message="Page cannont be found. If you think this is a mistake, please contact me!" />

2
src/routes/+layout.svelte
View File

@ -7,7 +7,7 @@
<div class="bg-[#1b1b1c]"> <div class="bg-[#1b1b1c]">
<Navbar /> <Navbar />
<main class="mx-[13%] my-[4%] h-fit min-h-screen"> <main class="mx-[13%] my-[9%] h-fit min-h-screen bg-[#1b1b1c]">
{@render children()} {@render children()}
</main> </main>
<Footer /> <Footer />

7
src/routes/blog/[title]/+page.server.ts
View File

@ -27,21 +27,22 @@ export const load = async ({ url }: RequestEvent) => {
post: { post: {
content: "", content: "",
date: new Date(), date: new Date(),
error: "Sorry, this post could not be found." error: "Sorry, this post could not be found. If you think this is an error, please contact me!"
} }
}; };
} }
// Date: 2025-02-24 -> date object // Date: 2025-02-24 -> date object
// Desc: ... -> description // Desc: ... -> description
// We are not using the description for now, so it can be ignored.
let lines: string[] = content.split("\n"); let lines: string[] = content.split("\n");
let date: Date = new Date(); let date: Date = new Date();
let description: string = ""; // let description: string = "";
// Ensure the meta data is provided // Ensure the meta data is provided
if (lines[0].slice(0, 5) == "Date:" || lines[1].slice(0, 5) == "Desc:") { if (lines[0].slice(0, 5) == "Date:" || lines[1].slice(0, 5) == "Desc:") {
date = new Date(lines[0].split("Date:")[1].trim()); date = new Date(lines[0].split("Date:")[1].trim());
description = lines[1].split("Desc:")[1].trim(); // description = lines[1].split("Desc:")[1].trim();
// Remove meta data from final content // Remove meta data from final content
lines = lines.slice(2); lines = lines.slice(2);

8
src/routes/blog/[title]/+page.svelte
View File

@ -1,15 +1,11 @@
<script lang="ts"> <script lang="ts">
import NotFound from '../../../components/notFound.svelte';
import type { PageProps } from './$types'; import type { PageProps } from './$types';
let { data }: PageProps = $props(); let { data }: PageProps = $props();
</script> </script>
{#if data.post.error} {#if data.post.error}
<main class="flex min-h-screen w-full flex-col items-center justify-center"> <NotFound message={data.post.error} />
<h1 class="py-8 text-6xl font-semibold text-gray-300 italic opacity-30">404 - Not Found</h1>
<p class="text-sm text-gray-300 italic">
{data.post.error}
</p>
</main>
{:else} {:else}
<div class="blog-wrapper prose"> <div class="blog-wrapper prose">
{@html data.post.content} {@html data.post.content}