diff --git a/packages/website/src/routes/+error.svelte b/packages/website/src/routes/+error.svelte index 9780d672..f4909f6a 100644 --- a/packages/website/src/routes/+error.svelte +++ b/packages/website/src/routes/+error.svelte @@ -9,6 +9,7 @@ const title = `${status}: ${message}`; let sentryElement: HTMLDivElement; let openForm = () => {}; + let online = typeof navigator !== 'undefined' ? navigator.onLine : true; onMount(async () => { const feedback = Sentry.getFeedback({ el: sentryElement, @@ -19,7 +20,7 @@ // console.log("feedback", feedback); const form = await feedback.createForm({}); form.appendToDom(); - form.open(); + // form.open(); openForm = async () => { form.open(); }; @@ -28,13 +29,37 @@ +
-

{title}

- - - - + {#if $page.status === 404} +

{$page.status}: {$page.error.message}

+ {:else if online} +

Hmm!

+ + {#if $page.error.message} +

{$page.status}: {$page.error.message}

+ {/if} + +

Please try reloading the page.

+ +

+ If the error persists, please contact me on Matrix + and let me know, or send feedback using the button below. +

+ {:else} +

It looks like you're offline

+ +

Reload the page once you've found the internet.

+ {/if} +

+ + +

@@ -42,11 +67,12 @@ main { display: grid; place-items: center; + min-height: 60vh; } .wrapper { flex-grow: 2; - width: 40vw; - max-width: 500px; + /* width: 40vw; */ + /* max-width: 500px; */ margin: 0 auto; /* display: flex; flex-direction: column; @@ -71,7 +97,6 @@ --dialog-inset: auto auto 0; } p { - width: 95%; font-size: 1.5em; line-height: 1.4; } diff --git a/packages/website/src/routes/+page.svelte b/packages/website/src/routes/+page.svelte index 7c2b00f9..24e5b916 100644 --- a/packages/website/src/routes/+page.svelte +++ b/packages/website/src/routes/+page.svelte @@ -3,6 +3,7 @@ import SvelteSeo from "svelte-seo"; import Homepage from "Notes/Website Homepage.md"; import { SITE_URL, SITE_TITLE } from "$lib/metadata"; + import { onMount } from "svelte";