MinPluto/MinPluto-Frontend
MinPluto/MinPluto-Frontend
Archived
1
Fork 0
Code Issues Pull requests Activity

Update error pages

Browse source
This commit is contained in:
Korbs 2024-08-09 00:58:23 -04:00
parent a34ab29876
commit 67812ff3d0
3 changed files with 36 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
source/src/layouts/Error.astro
View file

@ -1,81 +1,34 @@
---
// Properties
const { Title, Description } = Astro.props
// Components
import Head from '@components/global/Head.astro'
// Styles
import '@styles/index.scss'
import '@styles/mobile.scss'
// Error
interface Props {
error: unknown
}
const { error } = Astro.props
// SDK
import { OpenpanelSdk } from '@openpanel/sdk';
const op = new OpenpanelSdk({
clientId: 'b4c27f56-18f5-4d66-bb62-cbf7f7161812',
clientSecret: 'sec_107558407af59a591b50',
});
// // Track Event
// if (Astro.cookies.get("Telemtry").value === "Enabled") {
// op.event('Error', { Error: error instanceof Error ? error.message : 'Unknown error' });
// }
// else if (Astro.cookies.get("Telemtry").value === "Disabled") {
// null
// }
// // Cookies
// if (Astro.cookies.get("Telemtry").value === "Enabled") {
// var UserIsOptedIn = true
// }
// else if (Astro.cookies.get("Telemtry").value === "Disabled") {
// var UserIsOptedIn = false
// }
const {
Title,
Message
} = Astro.props
---
<Head Title='MinPluto' Description={Description}/>
<div class="error">
<center><img src="/images/logo/MinPluto - Logo.png"/></center>
<div>
<p>An error has occured:</p>
<p>{error instanceof Error ? error.message : 'Unknown error'}</p>
</div>
<!-- {UserIsOptedIn ?
<a href="https://dashboard.openpanel.dev/share/overview/OCbxiJ">The error has been reported</a>
:
null
} -->
<slot/>
<a href='/'><img src="/images/logo/MinPluto - Logo.png"/></a>
<hr/>
<div>
<h2>{Title}</h2>
<p>{Message}</p>
</div>
</div>
<style>
.error {
position: fixed;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
display: grid;
gap: 64px;
width: 360px;
text-align: center;
<style is:inline>
body {
background: black;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
@keyframes indeterminateAnimation {
0% {
transform: translateX(0) scaleX(0);
}
40% {
transform: translateX(0) scaleX(0.4);
}
100% {
transform: translateX(100%) scaleX(0.5);
}
.error {
position: fixed;
max-width: 500px;
margin: auto;
margin-top: 90px;
text-align: center;
left: 50%;
transform: translate(-50%);
}
</style>

4
source/src/pages/404.astro
View file

@ -7,8 +7,8 @@ import Base from "@layouts/Default.astro";
<Base Title="MinPluto" Description="">
<div class="force-center">
<h2>Error 404</h2>
<p>Page not found.</p>
<h2>Error 404: Page Not Found</h2>
<p>The page you've requested has either been moved or never existed. Double check the URL you're viewing.</p>
</div>
</Base>

13
source/src/pages/500.astro
View file

@ -1,4 +1,13 @@
---
import Error from '@layouts/Error.astro'
import ErrorLayout from '@layouts/Error.astro'
// Fetch Error Output
// https://github.com/withastro/astro/blob/main/packages/astro/src/core/errors/errors.ts#L5-L11
interface Props {
error: unknown
}
const { error } = Astro.props
---
<Error Title="MinPluto" Description=""></Error>
<ErrorLayout Title={error.name} Message={error instanceof Error ? error.message : 'Unknown error'}/>