Added custom 500 and 404

TODO.md

@@ -13,7 +13,6 @@
 - [Bugs] Make sure uploads name are slug-like and with an extension.
 - [Bugs] Nyupun can't upload subtitles files
 - [Bugs] https://v3.accords-library.com/en/collectibles/dod-original-soundtrack/scans obi is way too big
-- [Feat] 404, 500 pages
 - [Feat] [RichTextContent] Handle relationship
 - [Feat] [Timeline] Improve layout/spacing on mobile
 - [Bugs] Number of audio players seems limited (on Chrome and Firefox)

src/pages/404.astro

@@ -1,12 +1,81 @@
 ---
 import AppLayout from "components/AppLayout/AppLayout.astro";
-import AppLayoutTitle from "components/AppLayout/components/AppLayoutTitle.astro";
+import Button from "components/Button.astro";
+import { getI18n } from "src/i18n/i18n";
 
 Astro.locals.notFound = true;
+
+const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
 ---
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<AppLayout>
-  <AppLayoutTitle title="Oh nyo..." />
+<AppLayout class="app" hideHomeButton>
+  <div id="text-container">
+    <h1 class="font-serif font-5xl">404</h1>
+    <h2 class="font-4xl">Not found</h2>
+    <a href={getLocalizedUrl("/")}>
+      <Button icon="material-symbols:home" title={t("home.title")} />
+    </a>
+  </div>
+  <div id="img-container">
+    <img src={"/img/search-empty.webp"} width="1054" height="1100" />
+  </div>
 </AppLayout>
+
+<style>
+  .app {
+    display: flex;
+    flex-direction: column;
+    place-items: center;
+    place-content: center;
+    gap: 64px;
+    padding-top: 128px;
+
+    @media (min-width: 1024px) {
+      place-items: start;
+      flex-direction: row;
+      gap: clamp(64px, 8vw, 256px);
+    }
+  }
+
+  #text-container {
+    display: flex;
+    flex-direction: column;
+    place-items: center;
+
+    & > h1 {
+      font-size: min(30vw, 256px);
+      margin-right: 0.12em;
+    }
+
+    & > h2 {
+      font-size: min(8vw, 68px);
+      margin-left: 0.12em;
+    }
+
+    & > a {
+      display: block;
+      margin-top: 32px;
+    }
+
+    @media (min-width: 1024px) {
+      place-items: end;
+
+      & > h1 {
+        margin-right: 0px;
+      }
+    }
+  }
+
+  #img-container {
+    aspect-ratio: 1054/1100;
+    max-width: 80%;
+    max-height: 50vh;
+
+    @media (min-width: 1024px) {
+      max-height: 60vh;
+      max-width: 40vw;
+    }
+  }
+</style>

src/pages/500.astro

@@ -0,0 +1,120 @@
+---
+import AppLayout from "components/AppLayout/AppLayout.astro";
+import Button from "components/Button.astro";
+import Card from "components/Card.astro";
+import { getI18n } from "src/i18n/i18n";
+
+interface Props {
+  error: unknown;
+}
+const { error } = Astro.props;
+
+const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
+---
+
+{/* ------------------------------------------- HTML ------------------------------------------- */}
+
+<AppLayout class="app" hideHomeButton>
+  <div class="top">
+    <div id="text-container">
+      <h1 class="font-serif font-5xl">500</h1>
+      <h2 class="font-3xl">Server Error</h2>
+      <p>Please contact website technical administrator.</p>
+      <a href={getLocalizedUrl("/")}>
+        <Button icon="material-symbols:home" title={t("home.title")} />
+      </a>
+    </div>
+    <div id="img-container">
+      <img src={"/img/500-illustration.webp"} width="943" height="1150" />
+    </div>
+  </div>
+
+  {
+    error instanceof Error && (
+      <Card class="card-500">
+        <h2 class="font-3xl">{error.message}</h2>
+        <p class="font-xl">Call stack</p>
+        <code>{error.stack?.replaceAll(import.meta.env.PWD, "███████████████")}</code>
+      </Card>
+    )
+  }
+</AppLayout>
+
+<style>
+  .app {
+    display: flex;
+    flex-direction: column;
+    place-items: center;
+    place-content: center;
+  }
+
+  .top {
+    display: flex;
+    flex-direction: column;
+    place-items: center;
+    place-content: center;
+    gap: 64px;
+    padding-top: 128px;
+
+    @media (min-width: 1024px) {
+      place-items: start;
+      flex-direction: row;
+      gap: clamp(64px, 8vw, 256px);
+    }
+  }
+
+  #text-container {
+    display: flex;
+    flex-direction: column;
+    place-items: center;
+
+    & > h1 {
+      font-size: min(30vw, 256px);
+    }
+
+    & > h2 {
+      font-size: min(8vw, 68px);
+    }
+
+    & > p {
+      margin-block: 24px;
+    }
+
+    & > a {
+      display: block;
+      margin-top: 32px;
+    }
+
+    @media (min-width: 1024px) {
+      place-items: end;
+    }
+  }
+
+  #img-container {
+    aspect-ratio: 943/1150;
+    max-width: 80%;
+    max-height: 50vh;
+
+    @media (min-width: 1024px) {
+      max-width: 40vw;
+    }
+  }
+
+  .card-500 {
+    margin-top: 64px;
+    padding: 2em 3em;
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+
+    @media (min-width: 1024px) {
+      margin-top: 196px;
+      max-width: 80%;
+    }
+
+    & > code {
+      white-space: pre-wrap;
+      letter-spacing: -0.5px;
+    }
+  }
+</style>

src/pages/[locale]/dev/index.astro

@@ -22,6 +22,14 @@ const { getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
     <li>
       <a href={getLocalizedUrl("/dev/cjk")} class="pressable-link">CJK fonts Testing Ground</a>
     </li>
+    <li>
+      <a href={getLocalizedUrl("/dev/trigger-500")} class="pressable-link">
+        500: Internal Server Error
+      </a>
+    </li>
+    <li>
+      <a href={getLocalizedUrl("/dev/trigger-404")} class="pressable-link">404: Not Found</a>
+    </li>
   </ul>
 </AppLayout>
 

src/pages/[locale]/dev/trigger-404.astro

@@ -0,0 +1,5 @@
+---
+import FourOFour from "src/pages/404.astro";
+---
+
+<FourOFour />

src/pages/[locale]/dev/trigger-500.astro

@@ -0,0 +1,14 @@
+---
+import FiveOFive from "src/pages/500.astro";
+import { payload } from "src/utils/payload";
+
+let error;
+
+try {
+  await payload.getAudioByID("bad-id");
+} catch (e) {
+  error = e;
+}
+---
+
+<FiveOFive error={error ?? new Error("Testing")} />