livewire-material/src/Support/ErrorPage.php

<?php

namespace NoNameWeb\LivewireMaterial\Support;

use Illuminate\Contracts\Support\Htmlable;
use Illuminate\Foundation\Vite;
use Illuminate\Support\HtmlString;
use Throwable;

/**
 * What the error layout needs from PHP, written so that nothing in it can fail the page: an
 * error page is shown precisely when something else already went wrong.
 */
class ErrorPage
{
    /**
     * The roles the fallback stylesheet draws with.
     */
    protected const array ROLES = [
        'surface', 'on-surface', 'on-surface-variant', 'primary', 'on-primary',
        'primary-container', 'on-primary-container', 'secondary',
    ];

    /**
     * The application's Vite tags, or null when they cannot be made.
     *
     * A 500 during a deploy is the moment the manifest is missing, half-written or names files
     * that are not there yet — a missing manifest throws a ViteException, a truncated one a
     * PHP warning turned exception — so every failure means "no build", never a second error.
     */
    public static function assets(): ?Htmlable
    {
        try {
            $tags = app(Vite::class)(config('livewire-material.showcase.vite', []));
        } catch (Throwable) {
            return null;
        }

        return $tags instanceof Htmlable ? $tags : new HtmlString((string) $tags);
    }

    /**
     * Where the Back button goes: the page the visitor came from, when there was one other than
     * this page and the home page Home already offers. Null when the session behind it cannot
     * be read.
     */
    public static function backUrl(): ?string
    {
        try {
            $previous = url()->previous();
            $current = url()->current();
        } catch (Throwable) {
            return null;
        }

        $isHome = rtrim($previous, '/') === rtrim(url('/'), '/');

        return $previous === $current || $isHome ? null : $previous;
    }

    /**
     * A stylesheet for a page without its build: the application's scheme in both themes, a
     * system font, and the layout's `data-error-*` hooks drawn to match the Tailwind version.
     */
    public static function fallbackStyles(): HtmlString
    {
        $scheme = Scheme::load();

        $roles = fn (array $theme): string => implode('', array_map(
            fn (string $role): string => "--md-sys-color-{$role}: {$theme[$role]}; ",
            self::ROLES,
        ));

        return new HtmlString(<<<CSS
            :root, [data-theme='light'] { color-scheme: light; {$roles($scheme['light'])}}
            [data-theme='dark'] { color-scheme: dark; {$roles($scheme['dark'])}}
            *, ::before, ::after { box-sizing: border-box; }
            body { margin: 0; background-color: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); font: 400 1rem/1.5rem ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
            [data-error-page] { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100dvh; max-width: 36rem; margin: 0 auto; padding: 3rem 1.5rem; text-align: center; }
            [data-error-art] { position: relative; display: grid; place-items: center; width: 12rem; height: 12rem; }
            [data-error-shape] { position: absolute; inset: 0; color: var(--md-sys-color-primary-container); }
            [data-error-shape] svg { display: block; width: 100%; height: 100%; }
            [data-error-code] { position: relative; margin: 0; font-size: 3.5625rem; font-weight: 500; line-height: 4rem; color: var(--md-sys-color-on-primary-container); font-variant-numeric: tabular-nums; }
            [data-error-headline] { margin: 2.5rem 0 0; font-size: 1.75rem; font-weight: 400; line-height: 2.25rem; text-wrap: balance; }
            [data-error-message] { margin: 0.75rem 0 0; color: var(--md-sys-color-on-surface-variant); text-wrap: balance; }
            [data-error-actions] { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 2.5rem; }
            [data-error-actions] :is(a, button) { display: inline-flex; align-items: center; height: 3.5rem; padding: 0 1.5rem; border: 0; border-radius: 9999px; background: none; color: var(--md-sys-color-primary); font-family: inherit; font-size: 1rem; font-weight: 500; line-height: 1.5rem; text-decoration: none; cursor: pointer; }
            [data-error-actions] > :first-child { background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
            [data-error-actions] :is(a, button):focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }
            CSS);
    }
}