c0ntroller/frontpage
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Activity

Custom error page for everything

Browse Source
This commit is contained in:
Daniel Kluge 2022-10-16 00:16:29 +02:00
parent a7998e48af
commit 4645d783f2
1 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
pages/500.tsx → pages/_error.tsx
View File

@ -1,7 +1,8 @@
import type { NextPage } from "next"; import { NextPage, NextPageContext } from "next";
import Link from "next/link"; import Link from "next/link";
import styles from "../styles/Errorpage.module.css"; import styles from "../styles/Errorpage.module.css";
const Error: NextPage<{ statusCode?: number }> = ({ statusCode }) => {
const svg = ` const svg = `
<svg viewBox="30 -20 450 280" x="0" y="0"> <svg viewBox="30 -20 450 280" x="0" y="0">
<!-- Box --> <!-- Box -->
@ -52,7 +53,7 @@ const svg = `
<line x1="170" y1="0" x2="120" y2="30" /> <line x1="170" y1="0" x2="120" y2="30" />
</g> </g>
<!-- Text --> <!-- Text -->
<text x="120" y="120" style="font-size:4em;font-weight:bold;fill:#000000;transform:rotateX(40deg) rotateY(21deg);">500</text> <text x="120" y="120" style="font-size:4em;font-weight:bold;fill:#000000;transform:rotateX(40deg) rotateY(21deg);">${statusCode ? statusCode : "???"}</text>
<!-- Killeraugen --> <!-- Killeraugen -->
<ellipse cx="275" cy="150" rx="32" ry="20" style="fill:#291e0f;transform:rotateZ(12deg)" /> <ellipse cx="275" cy="150" rx="32" ry="20" style="fill:#291e0f;transform:rotateZ(12deg)" />
<ellipse cx="266" cy="153" rx="7" ry="5" style="fill:#4a6b2a;transform:rotateZ(12deg)" /> <ellipse cx="266" cy="153" rx="7" ry="5" style="fill:#4a6b2a;transform:rotateZ(12deg)" />
@ -63,17 +64,22 @@ const svg = `
</svg> </svg>
`; `;
const Custom404: NextPage = () => {
return <div className={styles.container}> return <div className={styles.container}>
<div id={styles.wrapper}> <div id={styles.wrapper}>
<div id={styles.box} dangerouslySetInnerHTML={{ __html: svg }}> <div id={styles.box} dangerouslySetInnerHTML={{ __html: svg }}>
</div> </div>
<div id={styles.errorText}> <div id={styles.errorText}>
The site you requested could not be found.<br/> { statusCode === 404 ? "The site you requested could not be found." : "An error occurred." }
<br />
<Link href="/"><a>&gt; Back to the main page &lt;</a></Link> <Link href="/"><a>&gt; Back to the main page &lt;</a></Link>
</div> </div>
</div> </div>
</div>; </div>;
}; };
export default Custom404; Error.getInitialProps = ({ res, err }: NextPageContext) => {
const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
return { statusCode };
};
export default Error;