ekzyis
/
stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve error pages

This commit is contained in:
keyan 2022-05-18 15:55:06 -05:00
parent daa4dc750b
commit 16957cba34
7 changed files with 87 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/comment.js
View File

@ -98,7 +98,7 @@ export default function Comment ({
const bottomedOut = depth === COMMENT_DEPTH_LIMIT const bottomedOut = depth === COMMENT_DEPTH_LIMIT
const op = item.root.user.name === item.user.name const op = item.root?.user.name === item.user.name
return ( return (
<div <div

62
components/header.js
View File

@ -197,3 +197,65 @@ export default function Header ({ sub }) {
</> </>
) )
} }
const NavItemsStatic = ({ className }) => {
return (
<>
<Nav.Item className={className}>
<Link href='/recent' passHref>
<Nav.Link className={styles.navLink}>recent</Nav.Link>
</Link>
</Nav.Item>
<Nav.Item className={className}>
<Link href='/top/posts/week' passHref>
<Nav.Link className={styles.navLink}>top</Nav.Link>
</Link>
</Nav.Item>
<Nav.Item className={className}>
<div className='position-relative'>
<Link href='/~jobs' passHref>
<Nav.Link className={styles.navLink}>
jobs
</Nav.Link>
</Link>
</div>
</Nav.Item>
</>
)
}
export function HeaderStatic () {
return (
<Container className='px-sm-0'>
<Navbar className='pb-0 pb-md-1'>
<Nav
className={styles.navbarNav}
>
<div className='d-flex'>
<Link href='/' passHref>
<Navbar.Brand className={`${styles.brand} d-none d-md-block`}>
STACKER NEWS
</Navbar.Brand>
</Link>
<Link href='/' passHref>
<Navbar.Brand className={`${styles.brand} d-block d-md-none`}>
SN
</Navbar.Brand>
</Link>
</div>
<NavItemsStatic className='d-none d-md-flex' />
<Nav.Item className='text-monospace nav-link px-0'>
<Price />
</Nav.Item>
</Nav>
</Navbar>
<Navbar className='pt-0 pb-1 d-md-none'>
<Nav
className={`${styles.navbarNav} justify-content-around`}
>
<NavItemsStatic />
</Nav>
</Navbar>
</Container>
)
}

17
components/layout-error.js Normal file
View File

@ -0,0 +1,17 @@
import Footer from './footer'
import { HeaderStatic } from './header'
import styles from './layout-center.module.css'
import Search from './search'
export default function LayoutError ({ children, ...props }) {
return (
<div className={styles.page}>
<HeaderStatic />
<div className={`${styles.content} pt-5`}>
{children}
</div>
<Footer />
<Search />
</div>
)
}

4
components/layout.js
View File

@ -1,5 +1,4 @@
import Header from './header' import Header from './header'
import Head from 'next/head'
import Container from 'react-bootstrap/Container' import Container from 'react-bootstrap/Container'
import { LightningProvider } from './lightning' import { LightningProvider } from './lightning'
import Footer from './footer' import Footer from './footer'
@ -14,9 +13,6 @@ export default function Layout ({
<> <>
{!noSeo && <Seo sub={sub} />} {!noSeo && <Seo sub={sub} />}
<LightningProvider> <LightningProvider>
<Head>
<meta name='viewport' content='initial-scale=1.0, width=device-width' />
</Head>
<Header sub={sub} /> <Header sub={sub} />
{noContain {noContain
? children ? children

6
pages/404.js
View File

@ -1,12 +1,12 @@
import { Image } from 'react-bootstrap' import { Image } from 'react-bootstrap'
import LayoutCenter from '../components/layout-center' import LayoutError from '../components/layout-error'
import styles from '../styles/404.module.css' import styles from '../styles/404.module.css'
export default function fourZeroFour () { export default function fourZeroFour () {
return ( return (
<LayoutCenter> <LayoutError>
<Image width='500' height='376' src='/maze.gif' fluid /> <Image width='500' height='376' src='/maze.gif' fluid />
<h1 className={styles.fourZeroFour}><span>404</span><span className={styles.notFound}>page not found</span></h1> <h1 className={styles.fourZeroFour}><span>404</span><span className={styles.notFound}>page not found</span></h1>
</LayoutCenter> </LayoutError>
) )
} }

6
pages/500.js
View File

@ -1,12 +1,12 @@
import { Image } from 'react-bootstrap' import { Image } from 'react-bootstrap'
import LayoutCenter from '../components/layout-center' import LayoutError from '../components/layout-error'
import styles from '../styles/404.module.css' import styles from '../styles/404.module.css'
export default function fourZeroFour () { export default function fourZeroFour () {
return ( return (
<LayoutCenter> <LayoutError>
<Image width='500' height='375' src='/falling.gif' fluid /> <Image width='500' height='375' src='/falling.gif' fluid />
<h1 className={styles.fourZeroFour}><span>500</span><span className={styles.notFound}>server error</span></h1> <h1 className={styles.fourZeroFour}><span>500</span><span className={styles.notFound}>server error</span></h1>
</LayoutCenter> </LayoutError>
) )
} }

1
pages/_document.js
View File

@ -6,6 +6,7 @@ class MyDocument extends Document {
return ( return (
<Html> <Html>
<Head> <Head>
<meta name='viewport' content='initial-scale=1.0, width=device-width' />
<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png' /> <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png' />
<link rel='manifest' href='/site.webmanifest' /> <link rel='manifest' href='/site.webmanifest' />
<link rel='preload' href={`${publicPrefix}/Lightningvolt-xoqm.ttf`} as='font' type='font/ttf' crossOrigin='' /> <link rel='preload' href={`${publicPrefix}/Lightningvolt-xoqm.ttf`} as='font' type='font/ttf' crossOrigin='' />