From f78b69e3f3f9af502e284e52a6b89e2dab801e35 Mon Sep 17 00:00:00 2001 From: Viet Nguyen <3805254+vnugent@users.noreply.github.com> Date: Mon, 25 Mar 2024 23:01:38 -0700 Subject: [PATCH] refactor: create a custom 404 page for app dir (#1116) * refactor: create a custom 404 page for app dir --- src/app/(default)/area/[[...slug]]/page.tsx | 2 +- .../(default)/components/DesktopHeader.tsx | 2 +- src/app/(default)/components/LandingHero.tsx | 2 +- .../components/ui/AreaPageContainer.tsx | 4 +- src/app/(default)/header.tsx | 7 +- src/app/global.css | 8 + src/app/layout.tsx | 19 ++ src/app/not-found.tsx | 53 +++++ src/assets/illustrations/alien-2-89.tsx | 207 ++++++++++++++++++ src/components/search/XSearch.tsx | 2 +- 10 files changed, 297 insertions(+), 9 deletions(-) create mode 100644 src/app/layout.tsx create mode 100644 src/app/not-found.tsx create mode 100644 src/assets/illustrations/alien-2-89.tsx diff --git a/src/app/(default)/area/[[...slug]]/page.tsx b/src/app/(default)/area/[[...slug]]/page.tsx index 2b6a5b176..1bbffd18a 100644 --- a/src/app/(default)/area/[[...slug]]/page.tsx +++ b/src/app/(default)/area/[[...slug]]/page.tsx @@ -141,7 +141,7 @@ export default async function Page ({ params }: PageWithCatchAllUuidProps): Prom * Extract and validate uuid as the first param in a catch-all route */ const parseUuidAsFirstParam = ({ params }: PageWithCatchAllUuidProps): string => { - if (params.slug.length === 0) { + if (params.slug == null || params.slug?.length === 0) { notFound() } diff --git a/src/app/(default)/components/DesktopHeader.tsx b/src/app/(default)/components/DesktopHeader.tsx index 459707c20..71fb8d229 100644 --- a/src/app/(default)/components/DesktopHeader.tsx +++ b/src/app/(default)/components/DesktopHeader.tsx @@ -74,7 +74,7 @@ export const DesktopHeader: React.FC = () => {
-
{nav}
+
{nav}
) } diff --git a/src/app/(default)/components/LandingHero.tsx b/src/app/(default)/components/LandingHero.tsx index ec1c1813b..75d184047 100644 --- a/src/app/(default)/components/LandingHero.tsx +++ b/src/app/(default)/components/LandingHero.tsx @@ -15,7 +15,7 @@ export const LandingHero: React.FC = () => { } export const HeroAlert: React.FC = () => ( -
+
NEW Crag maps
) diff --git a/src/app/(default)/components/ui/AreaPageContainer.tsx b/src/app/(default)/components/ui/AreaPageContainer.tsx index 808b442d6..6eae2de82 100644 --- a/src/app/(default)/components/ui/AreaPageContainer.tsx +++ b/src/app/(default)/components/ui/AreaPageContainer.tsx @@ -15,10 +15,10 @@ export const AreaPageContainer: React.FC<{ }> = ({ photoGallery, pageActions, breadcrumbs, map, children }) => { return (
-
+
-
+
{photoGallery == null ? : photoGallery}
{pageActions == null ? : pageActions} diff --git a/src/app/(default)/header.tsx b/src/app/(default)/header.tsx index edbc9fbaa..62aadbb30 100644 --- a/src/app/(default)/header.tsx +++ b/src/app/(default)/header.tsx @@ -9,7 +9,7 @@ import { MobileHeader } from './components/MobileHeader' */ export default async function Header (): Promise { return ( -
+
@@ -24,10 +24,11 @@ export enum LogoSize { /** * Reusable logo component */ -export const Logo: React.FC<{ size?: LogoSize, className?: string }> = ({ size = LogoSize.sm, className }) => { +export const Logo: React.FC<{ size?: LogoSize, className?: string, withText?: boolean }> = ({ size = LogoSize.sm, className, withText = false }) => { return ( - + + {withText && OpenBeta} ) } diff --git a/src/app/global.css b/src/app/global.css index f85899803..c4d94ccd7 100644 --- a/src/app/global.css +++ b/src/app/global.css @@ -134,6 +134,14 @@ A slightly deemphasized dotted underline for a tag in order to not competing wit .minimal-scrollbar::-webkit-scrollbar-thumb { @apply bg-neutral-300 rounded-full; } + + .default-page-margins { + @apply px-4 mx-auto max-w-5xl xl:max-w-7xl; + } + + .narrow-page-margins { + @apply px-4 mx-auto max-w-5xl; + } } /** diff --git a/src/app/layout.tsx b/src/app/layout.tsx new file mode 100644 index 000000000..e1cb31ee6 --- /dev/null +++ b/src/app/layout.tsx @@ -0,0 +1,19 @@ +import '@/public/fonts/fonts.css' +import './global.css' + +/** + * Root layout for the not-found page + */ +export default function RootLayout ({ + children +}: { + children: React.ReactNode +}): any { + return ( + + + {children} + + + ) +} diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx new file mode 100644 index 000000000..73dfa5904 --- /dev/null +++ b/src/app/not-found.tsx @@ -0,0 +1,53 @@ +import Link from 'next/link' +import { Metadata } from 'next' + +import { Chat, House, GithubLogo } from '@phosphor-icons/react/dist/ssr' +import { Logo } from './(default)/header' +import { XSearchMinimal } from '@/components/search/XSearch' +import Alien from '@/assets/illustrations/alien-2-89' + +export const metadata: Metadata = { + title: '404 Page not found - OpenBeta' +} + +/** + * Global 404 page + */ +export default function NotFound (): any { + return ( +
+
+ +
+ +
+
+
+

Oops!

+

We can't seem to find the page you're looking for.

+

Error code: 404

+ +
+

Some helpful links:

+ +
+
+
+ +
+
+
+
+ ) +} diff --git a/src/assets/illustrations/alien-2-89.tsx b/src/assets/illustrations/alien-2-89.tsx new file mode 100644 index 000000000..ca6fcf464 --- /dev/null +++ b/src/assets/illustrations/alien-2-89.tsx @@ -0,0 +1,207 @@ +import * as React from 'react' +interface Props { + className?: string +} + +const SvgComponent: React.FC = (props) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +) +export default SvgComponent diff --git a/src/components/search/XSearch.tsx b/src/components/search/XSearch.tsx index ea11bf93f..3576999db 100644 --- a/src/components/search/XSearch.tsx +++ b/src/components/search/XSearch.tsx @@ -37,7 +37,7 @@ export function XSearchMinimal ({ placeholder = 'Try "Cat In the Hat" or "Las Ve placeholder={placeholder} open={false} label={ - }