diff --git a/src/app/[...file]/components/content.tsx b/src/app/[...file]/components/content.tsx
index b2a2118..986ed39 100644
--- a/src/app/[...file]/components/content.tsx
+++ b/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 (is_type(response, type)) {
- const emitted = type.emit();
- if (emitted != undefined) {
- result.then(emitted.postprocess);
- return emitted.process(response);
+ if (response.status < 400) {
+ for (const type of recognized_types) {
+ if (is_type(response, type)) {
+ const emitted = type.emit();
+ if (emitted != undefined) {
+ result.then(emitted.postprocess);
+ return emitted.process(response);
+ }
+ return;
}
- return;
}
+ set_content();
+ } else {
+ set_content();
}
- set_content();
})
.catch(err => {
set_content();
diff --git a/src/app/[...file]/components/types/error/content_type.tsx b/src/app/[...file]/components/types/error/content_type.tsx
index 84c9b29..7c50ccd 100644
--- a/src/app/[...file]/components/types/error/content_type.tsx
+++ b/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
{`Unrecognised MIME type: ${content_type}`}
+ return {`Unrecognised MIME type: ${content_type}`}
}
diff --git a/src/app/[...file]/components/types/error/error.css.ts b/src/app/[...file]/components/types/error/error.css.ts
new file mode 100644
index 0000000..f8d9a10
--- /dev/null
+++ b/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',
+})
diff --git a/src/app/[...file]/components/types/error/error.tsx b/src/app/[...file]/components/types/error/error.tsx
new file mode 100644
index 0000000..90bd2cd
--- /dev/null
+++ b/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: React.ReactNode }) {
+ return
+
{children}
+
{faces[Math.floor(Math.random() * faces.length)]}
+
+}
diff --git a/src/app/[...file]/components/types/error/network.tsx b/src/app/[...file]/components/types/error/network.tsx
index f8efcb9..376c755 100644
--- a/src/app/[...file]/components/types/error/network.tsx
+++ b/src/app/[...file]/components/types/error/network.tsx
@@ -1,3 +1,6 @@
+import Error from './error'
+
export default function NetworkError({ err }: { err: string }) {
- return {`Error: ${err}`}
;
+ console.error(err);
+ return Network Error;
}
diff --git a/src/app/[...file]/components/types/error/status.tsx b/src/app/[...file]/components/types/error/status.tsx
new file mode 100644
index 0000000..977a3ba
--- /dev/null
+++ b/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 {`${status} ${statuses[status as keyof typeof statuses]}`}
+ } else {
+ return {status}
+ }
+}