Better error pages

src/app/[...file]/components/content.tsx

@@ -2,8 +2,9 @@
 
 import { useState, useEffect } from 'react'
 
-import NetworkError     from './types/error/network';
 import ContentTypeError from './types/error/content_type';
+import NetworkError     from './types/error/network';
+import StatusError      from './types/error/status';
 import ImageContent     from './types/image';
 import MarkdownContent  from './types/markdown';
 import Terminal         from './types/terminal';
@@ -86,17 +87,21 @@ export default function Content({ src }: { src: string}) {
 		if (content == undefined) {
 			const result = fetch(src)
 				.then(response => {
-					for (const type of recognized_types) {
+					if (response.status < 400) {
-						if (is_type(response, type)) {
+						for (const type of recognized_types) {
-							const emitted = type.emit();
+							if (is_type(response, type)) {
-							if (emitted != undefined) {
+								const emitted = type.emit();
-								result.then(emitted.postprocess);
+								if (emitted != undefined) {
-								return emitted.process(response);
+									result.then(emitted.postprocess);
+									return emitted.process(response);
+								}
+								return;
 							}
-							return;
 						}
+						set_content(<ContentTypeError content_type={response.headers.get('Content-Type')!.split(';')[0]} />);
+					} else {
+						set_content(<StatusError status={response.status} />);
 					}
-					set_content(<ContentTypeError content_type={response.headers.get('Content-Type')!.split(';')[0]} />);
 				})
 				.catch(err => {
 					set_content(<NetworkError err={err} />);

src/app/[...file]/components/types/error/content_type.tsx

@@ -1,3 +1,5 @@
+import Error from './error'
+
 export default function ContentTypeError({ content_type }: { content_type: string }) {
-	return <p>{`Unrecognised MIME type: ${content_type}`}</p>
+	return <Error>{`Unrecognised MIME type: ${content_type}`}</Error>
 }

src/app/[...file]/components/types/error/error.css.ts

@@ -0,0 +1,18 @@
+import { style } from '@vanilla-extract/css'
+
+export const error = style({
+	display:       'flex',
+	flexDirection: 'column',
+	alignItems:    'center',
+	width:         '100%',
+	height:        'max-content',
+});
+
+export const message = style({
+	fontSize: '2em',
+});
+
+export const sad = style({
+	margin: '0em',
+	fontSize: '3em',
+})

src/app/[...file]/components/types/error/error.tsx

@@ -0,0 +1,13 @@
+import * as style from './error.css'
+
+const faces = [
+	"(•́︵•̀)",
+	"(╥﹏╥)",
+]
+
+export default function Error({ children }: { children }) {
+	return <div className={style.error}>
+		<p className={style.message}>{children}</p>
+		<p className={style.sad}>{faces[Math.floor(Math.random() * faces.length)]}</p>
+	</div>
+}

src/app/[...file]/components/types/error/network.tsx

@@ -1,3 +1,6 @@
+import Error from './error'
+
 export default function NetworkError({ err }: { err: string }) {
-	return <p>{`Error: ${err}`}</p>;
+	console.err(err);
+	return <Error>Network Error</Error>;
 }

src/app/[...file]/components/types/error/status.tsx

@@ -0,0 +1,23 @@
+import Error from './error'
+
+const statuses = {
+	[400]: "Bad Request",
+	[401]: "Unauthorized",
+	[402]: "Payment Required",
+	[403]: "Forbidden",
+	[404]: "Not Found",
+	[405]: "Method Not Allowed",
+	[500]: "Internal Server Error",
+	[501]: "Not Implemented",
+	[502]: "Bad Gateway",
+	[503]: "Service Unavailable",
+	[504]: "Gateway Timeout",
+	[505]: "HTTP Version Not Supported"
+}
+export default function StatusError({ status }: { status: number }) {
+	if (status in statuses) {
+		return <Error>{`${status} ${statuses[status as keyof typeof statuses]}`}</Error>
+	} else {
+		return <Error>{status}</Error>
+	}
+}