✨ Add footer and menu to error pages

vortico · Mar 3, 2025 · 3286191 · 3286191
1 parent 9e937f1
commit 3286191
Show file tree

Hide file tree

Showing 23 changed files with 393 additions and 129 deletions.
diff --git a/flama/debug/data_structures.py b/flama/debug/data_structures.py
@@ -91,7 +91,11 @@ def from_exception(cls, exc: Exception, context: int = 10) -> "Error":
         frames = inspect.getinnerframes(exc.__traceback__, context) if exc.__traceback__ else []
         exc_cls = exc if inspect.isclass(exc) else exc.__class__
         return cls(
-            error=f"{exc_cls.__module__}.{exc_cls.__name__}" if exc_cls.__module__ != "builtins" else exc_cls.__name__,
+            error=(
+                f"{exc_cls.__module__}.{exc_cls.__name__}"
+                if exc_cls.__module__ not in ("builtins", "__main__")
+                else exc_cls.__name__
+            ),
             description=str(exc),
             traceback=[Frame.from_frame_info(frame=frame) for frame in frames],
         )

diff --git a/templates/package.json b/templates/package.json
@@ -2,11 +2,12 @@
   "name": "papago-templates",
   "private": true,
   "type": "module",
+  "sideEffects": false,
   "scripts": {
     "typecheck": "tsc --noEmit",
     "prebuild": "tsc --noEmit",
     "build": "webpack",
-    "dev": "webpack --watch",
+    "dev": "NODE_ENV=development webpack --watch",
     "format": "prettier . --write --ignore-path ../.gitignore --ignore-unknown",
     "lint": "eslint --max-warnings 0",
     "lint:fix": "npm run lint -- --fix"

diff --git a/templates/src/apps/debug/error_404.tsx b/templates/src/apps/debug/error_404.tsx
@@ -1,59 +1,34 @@
 import ReactDOM from 'react-dom/client'
 
 import { Request } from '@/data/debug'
-import { EnvironmentTable, ErrorTitle, RequestTable, URLTree } from '@/ui/components'
-import { FlamaLogo } from '@/ui/logos'
+import { EnvironmentTable, ErrorTitle, Footer, Menu, RequestTable, Section, URLTree } from '@/ui/components'
 
 import '@/styles/debug/error_404.css'
 
 function Page() {
   const request = new Request()
 
   return (
-    <>
+    <div className="min-h-screen">
+      <Menu />
       <header>
-        <div className="max-w-8xl mx-auto flex items-center justify-between gap-x-20 px-10 py-4">
-          <div>
-            <ErrorTitle error="Not Found" path={request.path} method={request.method} />
-          </div>
-          <div>
-            <FlamaLogo />
-          </div>
-        </div>
+        <Section id="error" border={false} className="mt-28">
+          <ErrorTitle error="Not Found" path={request.path} method={request.method} />
+        </Section>
       </header>
       <main>
-        <section id="url-tree">
-          <div className="mt-10 py-8">
-            <div className="max-w-8xl mx-auto px-10">
-              <h2 className="text-primary-700 text-2xl font-semibold">Application URLs</h2>
-              <div className="mt-10 w-full">
-                <URLTree />
-              </div>
-            </div>
-          </div>
-        </section>
-        <section id="request">
-          <div className="border-flama-500/50 from-flama-500/10 mt-16 border-t bg-linear-to-b py-8">
-            <div className="max-w-8xl mx-auto px-10">
-              <h2 className="text-primary-700 text-2xl font-semibold">Request</h2>
-            </div>
-          </div>
-          <div className="max-w-8xl mx-auto mt-10 w-full px-10">
-            <RequestTable />
-          </div>
-        </section>
-        <section id="environment">
-          <div className="border-flama-500/50 from-flama-500/10 mt-16 border-t bg-linear-to-b py-8">
-            <div className="max-w-8xl mx-auto px-10">
-              <h2 className="text-primary-700 w-full text-2xl font-semibold">Environment</h2>
-            </div>
-          </div>
-          <div className="max-w-8xl mx-auto my-10 w-full px-10">
-            <EnvironmentTable />
-          </div>
-        </section>
+        <Section id="url-tree" title="Application URLs">
+          <URLTree />
+        </Section>
+        <Section id="request" title="Request">
+          <RequestTable />
+        </Section>
+        <Section id="environment" title="Environment">
+          <EnvironmentTable />
+        </Section>
       </main>
-    </>
+      <Footer />
+    </div>
   )
 }
 

diff --git a/templates/src/apps/debug/error_500.tsx b/templates/src/apps/debug/error_500.tsx
@@ -1,8 +1,7 @@
 import ReactDOM from 'react-dom/client'
 
 import { Error, Request } from '@/data/debug'
-import { EnvironmentTable, ErrorTitle, ErrorTraceback, RequestTable } from '@/ui/components'
-import { FlamaLogo } from '@/ui/logos'
+import { EnvironmentTable, ErrorTitle, ErrorTraceback, Footer, Menu, RequestTable, Section } from '@/ui/components'
 
 import '@/styles/debug/error_500.css'
 
@@ -11,55 +10,26 @@ function Page() {
   const request = new Request()
 
   return (
-    <>
+    <div className="min-h-screen">
+      <Menu />
       <header>
-        <div className="max-w-8xl mx-auto flex items-center justify-between gap-x-20 px-10 py-4">
-          <div>
-            <ErrorTitle
-              error={error.error}
-              path={request.path}
-              method={request.method}
-              description={error.description}
-            />
-          </div>
-          <div>
-            <FlamaLogo />
-          </div>
-        </div>
+        <Section id="error" border={false} className="mt-28">
+          <ErrorTitle error={error.error} path={request.path} method={request.method} description={error.description} />
+        </Section>
       </header>
       <main>
-        <section id="traceback">
-          <div className="mt-10 py-8">
-            <div className="max-w-8xl mx-auto px-10">
-              <h2 className="text-primary-700 text-2xl font-semibold">Traceback</h2>
-              <div className="mt-10 w-full">
-                <ErrorTraceback />
-              </div>
-            </div>
-          </div>
-        </section>
-        <section id="request">
-          <div className="border-flama-500/50 from-flama-500/10 mt-16 border-t bg-linear-to-b py-8">
-            <div className="max-w-8xl mx-auto px-10">
-              <h2 className="text-primary-700 text-2xl font-semibold">Request</h2>
-            </div>
-          </div>
-          <div className="max-w-8xl mx-auto mt-10 w-full px-10">
-            <RequestTable />
-          </div>
-        </section>
-        <section id="environment">
-          <div className="border-flama-500/50 from-flama-500/10 mt-16 border-t bg-linear-to-b py-8">
-            <div className="max-w-8xl mx-auto px-10">
-              <h2 className="text-primary-700 w-full text-2xl font-semibold">Environment</h2>
-            </div>
-          </div>
-          <div className="max-w-8xl mx-auto my-10 w-full px-10">
-            <EnvironmentTable />
-          </div>
-        </section>
+        <Section id="traceback" title="Traceback">
+          <ErrorTraceback />
+        </Section>
+        <Section id="request" title="Request">
+          <RequestTable />
+        </Section>
+        <Section id="environment" title="Environment">
+          <EnvironmentTable />
+        </Section>
       </main>
-    </>
+      <Footer />
+    </div>
   )
 }
 

diff --git a/templates/src/pages/debug/error_404.html b/templates/src/pages/debug/error_404.html
@@ -9,10 +9,10 @@
       href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
       rel="stylesheet"
     />
-    <title>||@ title @||</title>
+    <title>Page Not Found - Flama</title>
   </head>
   <body>
-    <div id="app" class="min-h-screen"></div>
+    <div id="app" />
     <script src="@/apps/debug/error_404.tsx" defer="defer"></script>
   </body>
 </html>
diff --git a/templates/src/pages/debug/error_500.html b/templates/src/pages/debug/error_500.html
@@ -9,10 +9,10 @@
       href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
       rel="stylesheet"
     />
-    <title>||@ title @||</title>
+    <title>Internal Server Error - Flama</title>
   </head>
   <body>
-    <div id="app" class="min-h-screen"></div>
+    <div id="app" />
     <script src="@/apps/debug/error_500.tsx" defer="defer"></script>
   </body>
 </html>
diff --git a/templates/src/styles/tailwind.css b/templates/src/styles/tailwind.css
@@ -5,6 +5,7 @@
   background-color: var(--color-primary-100);
   color: var(--color-primary-600);
   scrollbar-color: var(--color-primary-400) transparent;
+  z-index: 0;
 }
 
 body {

diff --git a/templates/src/ui/components/Docs.tsx b/templates/src/ui/components/Docs.tsx
@@ -0,0 +1,31 @@
+import { ApiReferenceReact } from '@scalar/api-reference-react'
+
+import DocsData from '@/data/schemas/Docs'
+
+export default function Docs() {
+  const docs = new DocsData()
+
+  return (
+    <ApiReferenceReact
+      configuration={{
+        isEditable: false,
+        spec: { content: docs.schema },
+        showSidebar: true,
+        hideModels: false,
+        hideDownloadButton: false,
+        hideTestRequestButton: false,
+        hideSearch: false,
+        darkMode: false,
+        forceDarkModeState: 'light',
+        hideDarkModeToggle: true,
+        searchHotKey: 'k',
+        withDefaultFonts: false,
+        defaultOpenAllTags: false,
+        tagsSorter: 'alpha',
+        operationsSorter: 'alpha',
+        theme: 'none',
+        hideClientButton: true,
+      }}
+    />
+  )
+}
diff --git a/templates/src/ui/components/ErrorTitle.tsx b/templates/src/ui/components/ErrorTitle.tsx
@@ -8,11 +8,13 @@ export interface ErrorTitleProps {
 export default function ErrorTitle({ error, method, path, description }: ErrorTitleProps) {
   return (
     <>
-      <div className="text-2xl">
-        <span className="text-flama-500 font-bold">{error}</span> raised at <span className="font-bold">{method}</span>{' '}
-        <span className="font-mono">{path}</span>
-      </div>
-      {description && <div className="text-xl font-medium">{description}</div>}
+      <h1 className="text-2xl">
+        <span className="text-flama-500 font-bold">{error}</span>
+        <span className="pl-2">raised at</span>
+        <span className="pl-2 font-bold">{method}</span>
+        <span className="pl-2 font-mono">{path}</span>
+      </h1>
+      {description && <h2 className="text-xl font-medium">{description}</h2>}
     </>
   )
 }
diff --git a/templates/src/ui/components/ErrorTraceback.tsx b/templates/src/ui/components/ErrorTraceback.tsx
@@ -16,7 +16,7 @@ function TracebackListItem({ frame, isActive }: { frame: TFrame; isActive: boole
 
   return (
     <div
-      className={`border-primary-300 -mt-px border shadow-md transition duration-200 ${isActive ? 'bg-flama-300 shadow-flama/50' : 'bg-primary-100 hover:bg-primary-200 shadow-primary/50 hover:shadow-lg'}`}
+      className={`border-primary-300 -mt-px border shadow-md transition duration-200 ${isActive ? 'bg-flama-300 shadow-flama-300' : 'bg-primary-100 hover:bg-primary-200 shadow-primary-300 hover:shadow-lg'}`}
     >
       <div
         className={`flex h-12 w-full cursor-pointer items-center justify-start transition duration-200 ${
@@ -93,11 +93,11 @@ export default function ErrorTraceback() {
   const code = useMemo(() => html.decode(traceback[selected].code), [selected, traceback])
 
   return (
-    <div className="flex gap-8">
-      <div className="h-[672px] w-xs flex-none overflow-hidden">
+    <div className="flex flex-col gap-8 lg:flex-row">
+      <div className="h-[672px] max-h-[calc(85vh)] w-full flex-none overflow-hidden lg:w-xs">
         <TracebackList traceback={traceback} selected={selected} setSelected={setSelected} />
       </div>
-      <div className="h-[672px] flex-auto overflow-hidden">
+      <div className="h-[672px] max-h-[calc(85vh)] flex-auto overflow-hidden">
         <Window title={traceback[selected].filename}>
           <Code code={code} language="python" lines={{ type: 'number' }} selectedLine={traceback[selected].line} />
         </Window>

diff --git a/templates/src/ui/components/Footer.tsx b/templates/src/ui/components/Footer.tsx
@@ -0,0 +1,38 @@
+import { IconBrandGithub, IconBrandLinkedin, IconBrandMedium, IconBrandX } from '@tabler/icons-react'
+
+import { Logo } from '@/ui/elements'
+
+interface Social {
+  url: string
+  icon: React.ReactElement
+}
+
+const social: Social[] = [
+  { url: 'https://github.com/vortico/', icon: <IconBrandGithub /> },
+  { url: 'https://www.linkedin.com/company/vortico-tech/', icon: <IconBrandLinkedin /> },
+  { url: 'https://twitter.com/vorticotech', icon: <IconBrandX /> },
+  { url: 'https://dev.to/vortico', icon: <IconBrandMedium /> },
+]
+
+export default function Footer() {
+  return (
+    <footer>
+      <div className="border-vortico-500/50 border-t px-4 py-8 sm:px-6 md:px-8">
+        <div className="mx-auto flex max-w-7xl items-center justify-between">
+          <a href="https://vortico.tech">
+            <Logo logo="vortico" color="vortico" size="lg" />
+          </a>
+          <div className="divide-vortico-500/50 flex h-8 items-center justify-end divide-x">
+            {social.map((item, i) => (
+              <a key={i} href={item.url} className="px-2 first:pl-0 last:pr-0">
+                <div className="text-primary-400 hover:text-vortico-500 h-6 w-6 transition-colors duration-200">
+                  {item.icon}
+                </div>
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}