fix: better 404

5 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;