Merge pull request #18 from pheralb/next

🚀 Add custom error page + design improvements.
pheralb · Jun 12, 2023 · 130cd55 · 130cd55 · vercel · Jun 12, 2023
2 parents c0d8ef1 + 89e61b6
commit 130cd55
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 8 deletions.
diff --git a/website/public/fonts/Hack.woff2 b/website/public/fonts/Hack.woff2
diff --git a/website/public/fonts/JetBrainsMono-Regular.woff2 b/website/public/fonts/JetBrainsMono-Regular.woff2
diff --git a/website/src/components/hero/index.tsx b/website/src/components/hero/index.tsx
@@ -37,8 +37,8 @@ const Hero = () => {
             </h1>
             <div className="flex items-center justify-between rounded-md border border-neutral-800 p-2">
               <div className="flex items-center space-x-1">
-                <span>✌️</span>
-                <p className="cursor-copy text-neutral-300">
+                <span>📦</span>
+                <p className="cursor-copy text-neutral-300 font-mono">
                   {value ?? commands[0].command}
                 </p>
               </div>

diff --git a/website/src/components/icons/arrowLeft.tsx b/website/src/components/icons/arrowLeft.tsx
@@ -0,0 +1,16 @@
+import type { ComponentProps, FC } from "react"
+
+const ArrowLeft: FC<ComponentProps<"svg">> = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" {...props}>
+        <path
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeMiterlimit="10"
+            strokeWidth="1.5"
+            d="M10 16l-4-4m0 0l4-4m-4 4h12"
+        ></path>
+    </svg>
+)
+
+export default ArrowLeft
diff --git a/website/src/root.tsx b/website/src/root.tsx
@@ -1,11 +1,14 @@
 import type { LinksFunction, V2_MetaFunction } from "@remix-run/node"
+
 import {
   Links,
   LiveReload,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
+  isRouteErrorResponse,
+  useRouteError,
 } from "@remix-run/react"
 
 // Global Providers:
@@ -17,6 +20,7 @@ import stylesheet from "@/styles/globals.css"
 // Global Sidebar:
 import Sidebar from "./components/sidebar"
 import Hero from "./components/hero"
+import ArrowLeft from "./components/icons/arrowLeft"
 
 // Link CSS:
 export const links: LinksFunction = () => [
@@ -87,3 +91,41 @@ export default function App() {
     </html>
   )
 }
+
+// Custom error 4xx/5xx Page:
+export function ErrorBoundary() {
+  const error = useRouteError();
+  if (isRouteErrorResponse(error)) {
+    return (
+      <html lang="en">
+        <head>
+          <meta charSet="utf-8" />
+          <meta name="viewport" content="width=device-width,initial-scale=1" />
+          <Meta />
+          <Links />
+        </head>
+        <body className="bg-neutral-900 font-sans text-neutral-100 antialiased">
+          <Sidebar>
+            <Hero />
+            <div className="flex flex-col space-y-2 items-center justify-center">
+              <div className="flex flex-col space-y-2 pb-3 items-center border-b border-neutral-700 mb-2">
+                <h1 className="text-4xl font-semibold">Error</h1>
+                <p className="text-xl">{error.status}</p>
+                <p className="font-mono">{error.statusText}</p>
+              </div>
+              <a href="/" className="flex items-center space-x-2 hover:underline duration-75">
+                <ArrowLeft width={20} />
+                <span>Go Home</span>
+              </a>
+            </div>
+            <Outlet />
+          </Sidebar>
+          <ScrollRestoration />
+          <Scripts />
+          <LiveReload />
+        </body>
+      </html>
+    );
+  }
+  return null;
+}
diff --git a/website/src/routes/error.tsx b/website/src/routes/error.tsx
diff --git a/website/src/styles/globals.css b/website/src/styles/globals.css
@@ -10,6 +10,14 @@
   font-style: normal;
 }
 
+@font-face {
+  font-family: "Hack";
+  src: url("/fonts/Hack.woff2") format("woff2");
+  font-weight: 400;
+  font-display: swap;
+  font-style: normal;
+}
+
 body {
   --sb-track-color: #171717;
   --sb-thumb-color: #3f3f46;

diff --git a/website/tailwind.config.ts b/website/tailwind.config.ts
@@ -6,7 +6,7 @@ export default {
     extend: {
       fontFamily: {
         sans: ["General-Sans", "sans-serif"],
-        mono: ["JetBrainsMono-Regular", "monospace"],
+        mono: ["Hack", "monospace"],
       },
     },
   },