From d0220de8ee51e5a94c30d45f5a88f2c69110eeea Mon Sep 17 00:00:00 2001
From: "Jill \"oatmealine\" Monoids" <oatmealine@disroot.org>
Date: Tue, 3 May 2022 23:50:22 +0300
Subject: [PATCH] good error

---
 src/routes/__error.svelte | 56 +++++++++++++++++++++++++++++++++++++++
 src/routes/p/_page.svelte | 55 +++++++++++++++++++-------------------
 2 files changed, 83 insertions(+), 28 deletions(-)
 create mode 100644 src/routes/__error.svelte

diff --git a/src/routes/__error.svelte b/src/routes/__error.svelte
new file mode 100644
index 0000000..d7ae148
--- /dev/null
+++ b/src/routes/__error.svelte
@@ -0,0 +1,56 @@
+<script context="module">
+  /** @type {import('@sveltejs/kit').Load} */ 
+  export function load({ error, status }) {
+    return {
+      props: {
+        status: status,
+        message: error.message,
+        stack: error.stack
+      }
+    };
+  }
+</script>
+
+<script>
+  export let status;
+  export let message;
+  export let stack;
+</script>
+
+<style>
+  .gradient {
+    font-size: 100px;
+    line-height: 0.1;
+    background: repeating-linear-gradient(98deg, rgba(190,190,190,1) 0%, rgba(190,190,190,1) 10%, rgba(207,207,207,1) 10%, rgba(207,207,207,1) 20%);
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-weight: bolder;
+  }
+  h1 {
+    margin-bottom: 0.5em;
+  }
+  .error {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 800px;
+  }
+  pre {
+    max-width: 100%;
+    overflow-x: auto;
+    background-color: #222;
+    color: #fff;
+    padding: 1em;
+    border-radius: 1em;
+  }
+</style>
+
+<div class="error">
+  <div class="gradient">
+    <h1>{status}</h1>
+  </div>
+  {message}
+  {#if stack}
+    <pre>{stack}</pre>
+  {/if}
+</div>
\ No newline at end of file
diff --git a/src/routes/p/_page.svelte b/src/routes/p/_page.svelte
index 3245df3..fffebbd 100644
--- a/src/routes/p/_page.svelte
+++ b/src/routes/p/_page.svelte
@@ -54,31 +54,30 @@
       color: #fff;
     }
   }
-  </style>
-  
-  <svelte:head>
-    <title>{page.name} - Guidebook</title>
-    <meta name="description" content="{page.description || 'A Guidebook guide!'}" />
-  </svelte:head>
-  
-  
-  <div class="stuff">
-    <div class="side">
-      <nav>
-        <el>
-          {#each extractAnchors(page.content) as anchor}
-          {#if anchor.level === 2}
-          <li style="margin-left: {Math.max(anchor.level - 2, 0) * 0.3}em">
-            <a href="#{toAnchor(anchor.name)}">
-              {anchor.name}
-            </a>
-          </li>
-          {/if}
-          {/each}
-        </el>
-      </nav>
-    </div>
-    <content>
-      <Page content={page.content}></Page>
-    </content>
-  </div>
\ No newline at end of file
+</style>
+
+<svelte:head>
+  <title>{page.name} - Guidebook</title>
+  <meta name="description" content="{page.description || 'A Guidebook guide!'}" />
+</svelte:head>
+
+<div class="stuff">
+  <div class="side">
+    <nav>
+      <el>
+        {#each extractAnchors(page.content) as anchor}
+        {#if anchor.level === 2}
+        <li style="margin-left: {Math.max(anchor.level - 2, 0) * 0.3}em">
+          <a href="#{toAnchor(anchor.name)}">
+            {anchor.name}
+          </a>
+        </li>
+        {/if}
+        {/each}
+      </el>
+    </nav>
+  </div>
+  <content>
+    <Page content={page.content}></Page>
+  </content>
+</div>
\ No newline at end of file