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

2
src/app.html
View File

@ -1,5 +1,5 @@
<!doctype html>
<html lang="en">
<html lang="en" style="background-color: #1b1b1c;">
<head>
<meta charset=" utf-8" />

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">
<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>

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>
<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
on it.
{message}
</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]">
<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()}
</main>
<Footer />

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

@ -27,21 +27,22 @@ export const load = async ({ url }: RequestEvent) => {
post: {
content: "",
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
// Desc: ... -> description
// We are not using the description for now, so it can be ignored.
let lines: string[] = content.split("\n");
let date: Date = new Date();
let description: string = "";
// let description: string = "";
// Ensure the meta data is provided
if (lines[0].slice(0, 5) == "Date:" || lines[1].slice(0, 5) == "Desc:") {
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
lines = lines.slice(2);

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

@ -1,15 +1,11 @@
<script lang="ts">
import NotFound from '../../../components/notFound.svelte';
import type { PageProps } from './$types';
let { data }: PageProps = $props();
</script>
{#if data.post.error}
<main class="flex min-h-screen 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>
<p class="text-sm text-gray-300 italic">
{data.post.error}
</p>
</main>
<NotFound message={data.post.error} />
{:else}
<div class="blog-wrapper prose">
{@html data.post.content}