MinPluto/poke-on-astro-experiment
Archived
1
0
Fork 0
Code Issues Pull requests Activity

Custom error pages

Browse source
This commit is contained in:
Korbs 2024-06-21 21:32:51 -04:00
parent d714809f5e
commit a949879330
No known key found for this signature in database
3 changed files with 72 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
src/layouts/Error.astro Normal file
View file

@ -0,0 +1,57 @@
---
// Properties
const { ErrorMessage } = Astro.props
// i18n
import i18next, { t } from "i18next";
import { Trans, HeadHrefLangs } from "astro-i18next/components";
---
<html>
<head>
<title>Poke</title>
<meta name="darkreader-lock" />
<meta content="#111111" name="theme-color" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover" />
</head>
<body>
<div class="error">
<h2>An error occured</h2>
<p>{ErrorMessage}</p>
</div>
</body>
</html>
<style lang="scss" is:inline>
body {
margin: auto;
background: #111111;
color: white;
font-family: arial;
max-width: 600px;
}
body::before {
background: linear-gradient(0deg, rgba(115, 32, 67, 1), rgba(17, 17, 17, 1));
background-repeat: no-repeat;
content: "";
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
transition: 1s height;
}
.error {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
cursor: default;
max-width: 600px;
width: 100%;
}
</style>

5
src/pages/404.astro Normal file
View file

@ -0,0 +1,5 @@
---
import ErrorLayout from "@layouts/Error.astro";
---
<ErrorLayout ErrorMessage="Page not found."/>

10
src/pages/500.astro Normal file
View file

@ -0,0 +1,10 @@
---
import ErrorLayout from "@layouts/Error.astro";
interface Props {
error: unknown;
}
const { error } = Astro.props;
---
<ErrorLayout ErrorMessage={error}/>