swaf/src/assets/views/errors/Error.svelte

<script lang="ts">
    import {locals} from "../../ts/stores.js";

    const previousUrl = $locals.getPreviousUrl();

    export let code;
    code = $locals.error_code || code;

    export let message;
    message = $locals.error_message || message;

    export let instructions;
    instructions = $locals.error_instructions || instructions;
</script>

<svelte:head>
    <title>{code + ' - ' + message}</title>
    <link rel="stylesheet" href="/css/error.css">
</svelte:head>

<div class="logo"><a href="/">{$locals.app.name}</a></div>

<main>
    <!--TODO: flash messages-->

    <div class="error-code">{code}</div>
    <div class="error-message">{message}</div>
    {#if instructions}
        <div class="error-instructions">{@html instructions}</div>
    {/if}

    <nav>
        {#if previousUrl && previousUrl !== '/' && previousUrl !== $locals.url}
            <a href={previousUrl} class="button"><i data-feather="arrow-left"></i> Go back</a>
        {/if}

        <a href="/" class="button"><i data-feather="home"></i> Go to homepage</a>
    </nav>
</main>

<div class="contact">
    <p>Error ID: {$locals.error_id || 'Request has no indentifier.'}</p>
    <p>
        If you think this isn't right, please contact us with the above error ID at
        <a href="mailto:{$locals.app.contact_email}">{$locals.app.contact_email}</a>.
    </p>
</div>