Merge pull request #540 from omnifed/539-docs-add-500-404-page

539 docs add 500 404 page
omnifed · Oct 3, 2024 · d32e769 · d32e769
2 parents 4f5a5f1 + 8422f6b
commit d32e769
Show file tree

Hide file tree

Showing 9 changed files with 530 additions and 83 deletions.
diff --git a/docs/app/components/Nav.tsx b/docs/app/components/Nav.tsx
@@ -16,7 +16,7 @@ import { button } from '@cerberus/styled-system/recipes'
 import { DogIcon } from './icons/DogIcon'
 import { FireIcon } from './icons/FireIcon'
 import { getTheme, injectTheme, type ThemeName } from '@/styled-system/themes'
-import { PAGE_BORDER_INITIAL } from '../utils/const'
+import { INLINE_BLOCK, PAGE_BORDER_INITIAL } from '../utils/const'
 import { getColorMode } from '../utils/colors'
 import { AnimatingSystemIcon } from './icons/AnimatingSystemIcon'
 
@@ -34,9 +34,13 @@ const navLogoContent = (
     <Link
       href="/"
       className={css({
+        display: 'none',
         pxi: '2',
         rounded: 'sm',
         textStyle: 'body-xl',
+        md: {
+          display: INLINE_BLOCK,
+        },
         _active: {
           color: 'page.text.initial',
         },
@@ -57,7 +61,7 @@ const navGHLogoContent = (
     <a
       aria-label="View Github repo"
       className={css({
-        display: 'inline-block',
+        display: INLINE_BLOCK,
         rounded: 'sm',
         _focusVisible: focusStates._focusVisible,
       })}
@@ -171,7 +175,7 @@ export function Nav() {
               <Link
                 aria-current={pathname.includes(item.href) ? 'page' : undefined}
                 className={css({
-                  display: 'inline-block',
+                  display: INLINE_BLOCK,
                   p: '4',
                   position: 'relative',
                   transition: 'color 250ms ease-in-out',

diff --git a/docs/app/components/cerberus-logo.tsx b/docs/app/components/cerberus-logo.tsx
diff --git a/docs/app/components/home-hero.tsx b/docs/app/components/home-hero.tsx
@@ -0,0 +1,111 @@
+import { css } from '@cerberus/styled-system/css'
+import Link from 'next/link'
+import { button } from '@cerberus/styled-system/recipes'
+import CerberusLogo from './cerberus-logo'
+import { vstack } from '@cerberus-design/styled-system/patterns'
+import { grid, gridItem } from '@cerberus/styled-system/patterns'
+
+export default function HomeHero() {
+  return (
+    <div
+      className={grid({
+        columns: 1,
+        gap: 4,
+        mt: '8rem',
+        lg: {
+          columns: 2,
+          gridTemplateColumns: '1fr 1fr',
+          mt: '12rem',
+          pxi: '8',
+        },
+      })}
+    >
+      <main
+        className={gridItem({
+          bgColor: 'page.surface.100',
+          mxi: '2',
+          pxi: '6',
+          py: 8,
+          rounded: '2xl',
+          md: {
+            pxi: '8',
+            py: 14,
+          },
+          lg: {
+            pxi: '10',
+            py: 16,
+          },
+        })}
+      >
+        <div
+          className={vstack({
+            alignItems: 'flex-start',
+            gap: 4,
+          })}
+        >
+          <h1
+            className={css({
+              maxW: '44ch',
+              textStyle: 'display-sm',
+              textWrap: 'pretty',
+              lg: {
+                pb: 4,
+                textStyle: 'display-lg',
+              },
+            })}
+          >
+            Protect your brand with{' '}
+            <span
+              className={css({
+                display: 'inline-block',
+                color: 'danger.text.200',
+              })}
+            >
+              Cerberus
+            </span>
+          </h1>
+
+          <p
+            className={css({
+              maxW: '44ch',
+              textStyle: 'body-lg',
+              lg: {
+                lineHeight: 'relaxed',
+                textStyle: 'body-xl',
+              },
+            })}
+          >
+            Create React design systems effortlessly, or use our out-of-the-box
+            settings.
+          </p>
+
+          <div
+            className={css({
+              pt: 10,
+              lg: {
+                pt: 14,
+              },
+            })}
+          >
+            <Link className={button()} href="/preset/">
+              Get Started
+            </Link>
+          </div>
+        </div>
+      </main>
+
+      <div className={gridItem()}>
+        <span
+          className={css({
+            display: 'block',
+            mt: 8,
+            mx: 'auto',
+            w: '1/2',
+          })}
+        >
+          <CerberusLogo />
+        </span>
+      </div>
+    </div>
+  )
+}
diff --git a/docs/app/components/icons/broken-bone-icon.tsx b/docs/app/components/icons/broken-bone-icon.tsx
@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react'
+
+export default function BrokenBoneIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+        d="M6.283 19.233c-.164.496-.47.9-.852 1.176m0 0a2.11 2.11 0 0 1-1.954.293c-1.149-.407-1.754-1.724-1.353-2.942c.308-.935 1.12-1.54 2.001-1.586c.449-.023.92-.233 1.06-.66L6.674 11L8 13l2-1l-1.508 4.732c-.131.411.103.843.433 1.122c.696.591.999 1.605.685 2.557c-.401 1.218-1.658 1.875-2.806 1.469c-.68-.241-1.17-.801-1.373-1.471M18.544 5.324c.454-.25.958-.342 1.438-.291m0 0c.698.074 1.346.447 1.718 1.064c.63 1.042.236 2.386-.878 3.001c-.87.48-1.922.375-2.641-.19c-.342-.269-.818-.41-1.195-.193L13 11V9l-2-1.02l4.115-2.272c.397-.22.513-.73.449-1.18c-.124-.86.307-1.754 1.157-2.223c1.114-.616 2.528-.27 3.157.773c.372.617.386 1.34.104 1.955M7 8H5m4-2V4m4 12v2m2-4h2"
+        color="currentColor"
+      ></path>
+    </svg>
+  )
+}
diff --git a/docs/app/components/icons/paw-icon.tsx b/docs/app/components/icons/paw-icon.tsx
@@ -0,0 +1,12 @@
+import type { SVGProps } from 'react'
+
+export default function PawIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>
+      <path
+        fill="currentColor"
+        d="m258.53 16.727l-7.553 10.367s-14.79 20.28-29.64 44.75c-7.424 12.236-14.9 25.517-20.622 38.108c-5.722 12.588-9.965 24.188-9.965 35.076c0 37.323 30.458 67.783 67.78 67.783c37.327 0 67.784-30.46 67.784-67.782c0-10.888-4.242-22.488-9.964-35.076c-5.723-12.59-13.162-25.872-20.586-38.108c-14.85-24.47-29.676-44.75-29.676-44.75zm0 32.778c4.848 6.853 10.65 14.592 21.245 32.05c7.185 11.838 14.33 24.617 19.565 36.133c5.235 11.518 8.285 22.092 8.285 27.34c0 14.03-5.816 26.627-15.172 35.553a36.4 36.4 0 0 0 2.662-13.698c0-20.197-36.57-70.364-36.57-70.364s-36.572 50.167-36.572 70.364c0 4.86.955 9.492 2.675 13.734c-9.377-8.928-15.21-21.54-15.21-35.588c0-5.248 3.087-15.822 8.322-27.34c5.234-11.516 12.38-24.295 19.564-36.133c10.594-17.457 16.36-25.195 21.207-32.05zM60.66 79.365l-3.285 12.374s-6.49 24.27-11.496 52.45c-2.503 14.09-4.652 29.19-5.44 42.998c-.786 13.807-.538 26.13 3.395 36.28c13.484 34.803 52.873 52.214 87.676 38.73c34.803-13.486 52.21-52.913 38.728-87.713c-3.933-10.153-12.09-19.383-21.974-29.055c-9.884-9.67-21.653-19.38-32.996-28.105C92.578 99.875 71.463 86.3 71.463 86.3l-10.805-6.936zm394.725 0L444.578 86.3s-21.114 13.574-43.8 31.025c-11.344 8.726-23.114 18.434-33 28.105c-9.883 9.672-18.002 18.902-21.936 29.055c-13.483 34.8 3.888 74.227 38.69 87.713c34.804 13.484 74.23-3.927 87.714-38.73c3.934-10.15 4.145-22.473 3.358-36.28s-2.935-28.907-5.438-42.998c-5.006-28.18-11.498-52.45-11.498-52.45l-3.285-12.376zm-11.826 30.55c2.042 8.137 4.64 17.446 8.213 37.56c2.42 13.636 4.46 28.142 5.18 40.772s-.255 23.576-2.15 28.47c-5.067 13.076-15.038 22.716-26.98 27.66a36.5 36.5 0 0 0 7.412-11.788c7.298-18.834-8.68-78.824-8.68-78.824s-52.227 33.564-59.523 52.395a36.4 36.4 0 0 0-2.467 13.725c-5.504-11.706-6.38-25.56-1.31-38.648c1.897-4.893 8.553-13.598 17.595-22.445c9.042-8.85 20.34-18.203 31.316-26.647c16.206-12.465 24.41-17.6 31.393-22.23zm-371.035.037c6.997 4.64 15.17 9.745 31.355 22.193c10.977 8.444 22.276 17.798 31.318 26.647c9.042 8.847 15.696 17.552 17.592 22.445c5.068 13.082 4.197 26.932-1.3 38.635c.063-4.557-.722-9.2-2.47-13.71c-7.295-18.832-59.523-52.396-59.523-52.396s-15.975 59.99-8.678 78.823a36.5 36.5 0 0 0 7.415 11.79c-11.945-4.942-21.92-14.583-26.988-27.663c-1.896-4.894-2.872-15.84-2.152-28.47s2.797-27.137 5.22-40.772c3.568-20.096 6.167-29.375 8.212-37.523zm184.294 122.39c-43.658 0-79.31 28.473-87.347 66.686c-22.89 8.593-43.324 19.73-57.71 34.275c-15.516 15.688-25.112 34.84-25.112 55.518c0 30.856 20.97 57.578 52.124 75.997s73.17 29.38 119.322 29.38s87.99-10.95 118.994-29.38s51.832-45.18 51.832-75.996c0-20.867-9.736-40.188-25.48-55.99c-14.613-14.672-35.395-25.875-58.692-34.423c-8.38-37.994-44.513-66.066-87.932-66.066zm0 18.686c37.094 0 66.64 24.44 71.178 54.936l.838 5.656l5.44 1.832c23.44 7.892 42.783 19.37 55.92 32.557c13.136 13.187 20.04 27.7 20.04 42.817c0 14.93-6.83 29.376-19.52 42.178c3.65-7.606 5.618-15.66 5.618-24.004c0-25.25-31.607-64.705-89.514-79.745q.259-2.356.26-4.774c0-25.574-22.076-46.31-49.308-46.31c-27.233 0-49.31 20.736-49.31 46.31c0 1.543.085 3.065.24 4.568c-58.223 14.926-89.483 54.81-89.483 79.953h-.002c0 8.25 1.937 16.215 5.533 23.743c-12.622-12.743-19.41-27.096-19.41-41.916c0-14.955 6.777-29.303 19.71-42.38C137.982 333.37 157.032 321.95 180.09 314l5.402-1.868l.805-5.694c4.324-30.847 33.236-55.41 70.52-55.41z"
+      ></path>
+    </svg>
+  )
+}
diff --git a/docs/app/global-error.tsx b/docs/app/global-error.tsx
@@ -0,0 +1,66 @@
+'use client'
+
+import { vstack } from '@cerberus-design/styled-system/patterns'
+import { css } from '@cerberus-design/styled-system/css'
+import { Button } from '@cerberus-design/react'
+import BrokenBoneIcon from './components/icons/broken-bone-icon'
+
+// Error boundaries must be Client Components
+
+export default function GlobalError({
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  // global-error must include html and body tags
+  return (
+    <html>
+      <body>
+        <div
+          className={vstack({
+            justify: 'center',
+            h: '100dvh',
+            pxi: '6',
+            textAlign: 'center',
+          })}
+        >
+          <span
+            className={css({
+              color: 'page.surface.100',
+              maxW: '12rem',
+              mb: 6,
+              w: '1/3',
+              lg: {
+                mb: 10,
+              },
+            })}
+          >
+            <BrokenBoneIcon />
+          </span>
+
+          <h2
+            className={css({
+              textStyle: 'h1',
+            })}
+          >
+            Cerb your enthusiasm!
+          </h2>
+          <p
+            className={css({
+              color: 'page.text.100',
+              maxW: '66ch',
+              pb: 8,
+              textWrap: 'pretty',
+            })}
+          >
+            Something went wrong. Cerberus has sounded the alarm and our demons
+            are ready for action.
+          </p>
+
+          <Button onClick={() => reset()}>Try again</Button>
+        </div>
+      </body>
+    </html>
+  )
+}
diff --git a/docs/app/not-found.tsx b/docs/app/not-found.tsx
@@ -0,0 +1,54 @@
+import { vstack } from '@cerberus-design/styled-system/patterns'
+import { css } from '@cerberus/styled-system/css'
+import Link from 'next/link'
+import PawIcon from './components/icons/paw-icon'
+import { button } from '@cerberus-design/styled-system/recipes'
+
+export default function NotFound() {
+  return (
+    <div
+      className={vstack({
+        justify: 'center',
+        h: '100dvh',
+        pxi: '6',
+        textAlign: 'center',
+      })}
+    >
+      <span
+        className={css({
+          color: 'page.surface.100',
+          maxW: '12rem',
+          mb: 6,
+          w: '1/3',
+          lg: {
+            mb: 10,
+          },
+        })}
+      >
+        <PawIcon />
+      </span>
+
+      <h2
+        className={css({
+          textStyle: 'h1',
+        })}
+      >
+        Away from post
+      </h2>
+      <p
+        className={css({
+          color: 'page.text.100',
+          maxW: '66ch',
+          pb: 8,
+          textWrap: 'pretty',
+        })}
+      >
+        We couldn&apos;t find Cerberus...or the page you are trying to reach.
+      </p>
+
+      <Link className={button()} href="/">
+        Return from whence you came
+      </Link>
+    </div>
+  )
+}