fix: better 404

4 years ago · 6f07fbbbeb
3 changed files with 20 additions and 89 deletions
--- a/src/components/layouts/base-layout.tsx
+++ b/src/components/layouts/base-layout.tsx
@ -4,7 +4,7 @@ import { SideNav } from '../side-nav';
 import { Header } from '../header';
 import { Main } from '../main';
 import { Footer } from '../footer';
-import NotFoundPage from '@pages/404';
+
 import { PAGE_WIDTH, SIDEBAR_WIDTH } from '@common/constants';
 import { useWatchActiveHeadingChange } from '@common/hooks/use-active-heading';
 import { useRouter } from 'next/router';
@ -13,14 +13,6 @@ import { MobileMenu } from '@components/mobile-menu';
 const BaseLayout: React.FC<{ isHome?: boolean }> = ({ children }) => {
  const router = useRouter();
  const isHome = router.pathname === '/';
-  let isErrorPage = false;
-
-  // get if NotFoundPage
-  React.Children.forEach(children, (child: any) => {
-    if (child?.type === NotFoundPage) {
-      isErrorPage = true;
-    }
-  });

  useWatchActiveHeadingChange();
  return (
@ -50,7 +42,7 @@ const BaseLayout: React.FC<{ isHome?: boolean }> = ({ children }) => {
                {children}
              </Flex>
            </Main>
-            {isErrorPage ? null : <Footer justifySelf="flex-end" />}
+            <Footer justifySelf="flex-end" />
          </Flex>
        </Flex>
      </Flex>
--- a/src/pages/404.md
+++ b/src/pages/404.md
@ -0,0 +1,18 @@
+---
+title: Page not found
+description: The page you're looking for isn't here.
+---
+
+## Whoops!
+
+Looks like the page you are looking for isn't here. [Head back home](/) or try out some of these popular pages:
+
+## Tutorials
+
+[@page-reference | grid]
+| /authentication/building-todo-app, /smart-contracts/counter-tutorial
+
+## Explore
+
+[@page-reference | grid-small]
+| /ecosystem/overview, /ecosystem/stacks-token, /stacks-blockchain/testnet-node
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@ -1,79 +0,0 @@
-import * as React from 'react';
-import { Flex, Box, Stack, FlexProps, color, space } from '@blockstack/ui';
-import { ContentWrapper } from '@components/content-wrapper';
-import { Text, Title, Link } from '@components/typography';
-import FileDocumentEditOutlineIcon from 'mdi-react/FileDocumentEditOutlineIcon';
-import { border } from '@common/utils';
-import Head from 'next/head';
-
-const toPx = (number: number): string => `${number}px`;
-
-const Graphic = (props: FlexProps) => {
-  const size = 80;
-  const smallerSize = size * 0.8;
-
-  return (
-    <Flex
-      size={toPx(size)}
-      align="center"
-      justify="center"
-      mx="auto"
-      position="relative"
-      {...props}
-    >
-      <Box
-        borderRadius={toPx(size)}
-        size={toPx(size)}
-        position="absolute"
-        bg={color('bg-alt')}
-        border={border()}
-      />
-      <Box
-        opacity={0.5}
-        transform="translateY(-3px) translateX(2px)"
-        pt="tight"
-        color={color('invert')}
-        position="relative"
-        zIndex={2}
-      >
-        <FileDocumentEditOutlineIcon size={toPx(smallerSize)} />
-      </Box>
-    </Flex>
-  );
-};
-
-const NotFoundPage = () => {
-  return (
-    <>
-      <Head>
-        <title>Page not found | Blockstack UI</title>
-      </Head>
-      <ContentWrapper align="center" justify="center" flexGrow={1}>
-        <Stack spacing={space('loose')} pb={space('100px')}>
-          <Box>
-            <Graphic mb={space('base')} />
-            <Box textAlign="center">
-              <Title as="h1">We're still working on this</Title>
-            </Box>
-          </Box>
-          <Box mx="auto" maxWidth="40ch" textAlign="center">
-            <Text>Looks like there's nothing here yet.</Text>
-            <Box mt={space('base')}>
-              <Link
-                as="a"
-                color={color('accent')}
-                href="https://github.com/blockstack/docs.blockstack"
-                rel="nofollow noopener noreferrer"
-                target="_blank"
-              >
-                Want to contribute?
-              </Link>
-            </Box>
-          </Box>
-        </Stack>
-      </ContentWrapper>
-    </>
-  );
-};
-
-export default NotFoundPage;