Andreas Reinhold / reiniandClaude Sonnet 5
a8c2d88fbb
Plan step 36 (containment group, error pages): errors::minimal's class lists move into resources/css/components/error-page.css, keyed on data-md-error-page/-art/-shape/-code/-headline/-message/-actions; body carries no hook of its own and is styled by a bare `body` selector, matching how ErrorPage::fallbackStyles() already styles it (no other rewritten view is a full HTML document). The section contract (title, code, headline, message, shape, actions) and the framework's 401/402 compatibility are untouched, since neither depends on a class or a hook. The shape's <x-shape> (a component outside this batch, and one with no "fill the parent" prop) is coloured and sized to its container by a plain `svg` descendant selector rather than a class or a new prop. The page's font stays a literal system stack, not var(--md-ref-typeface-brand): Tailwind's own `font-sans` utility this replaces was never the brand font either (resources/css/tokens/theme.css's --font-sans is the only utility that is), and an error page must read before any webfont has loaded. ErrorPage::fallbackStyles() draws onto the same hooks, renamed the same way (data-error-* -> data-md-error-*, data-error-fallback -> data-md-error-fallback) so the no-build path keeps working; how it is built (a hand-written heredoc, not Stylesheets::bundle()) is unchanged, per step 40. Updated in the same commit: tests/Feature/ErrorPagesTest.php and tests/Browser/ErrorPagesTest.php. The error pages' views live outside resources/views/components/, so they are not in ContainmentStylesheetsTest's dataset (its "imports what its view renders" check reads a fixed resources/views/components/<name>.blade.php path); adapted tests/Feature/ErrorPagesTest.php instead, with the same stylesheet- shape, import, ViewClasses, token/px-breakpoint and containment-block checks the dataset gives every other component. Imported from the Containment block of components.css. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
82 lines
3.5 KiB
PHP
82 lines
3.5 KiB
PHP
{{-- The layout every error page extends: this package's 403, 404, 419, 429, 500 and 503, and the
|
|
framework's own 401 and 402, which extend `errors::minimal` and find this file before the
|
|
framework's (the provider appends this folder's parent to `view.paths`).
|
|
|
|
Sections — the framework layout's `title`, `code` and `message`, plus three of its own, so
|
|
either layout renders the other's pages:
|
|
`title` the browser tab, followed by the app name;
|
|
`code` the status, drawn in display type over the shape;
|
|
`headline` what happened, in a few words (without it, `message` is the headline);
|
|
`message` one sentence on what to do about it;
|
|
`shape` an M3 Expressive shape name (`cookie-7` by default), in primary-container;
|
|
`actions` the buttons; by default a filled Home and, when the visitor came from a page on
|
|
the way here, a text Back.
|
|
|
|
The app's own Vite entries (`livewire-material.showcase.vite`) bring its scheme, font and
|
|
the package's stylesheets, including this layout's own,
|
|
resources/css/components/error-page.css. But an error page is also what shows while a deploy
|
|
has no build yet, so when those tags cannot be made the page brings a small stylesheet of its
|
|
own instead: the app's scheme from its scheme data, drawn onto the same `data-md-error-*`
|
|
hooks (`src/Support/ErrorPage.php::fallbackStyles()`). Keep the hooks in step across both
|
|
when changing the markup. The shape turns once a minute, unless the visitor asks for reduced
|
|
motion. --}}
|
|
|
|
@php
|
|
$assets = \NoNameWeb\LivewireMaterial\Support\ErrorPage::assets();
|
|
$back = \NoNameWeb\LivewireMaterial\Support\ErrorPage::backUrl();
|
|
@endphp
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="robots" content="noindex" />
|
|
|
|
<title>@yield('title') · {{ config('app.name') }}</title>
|
|
|
|
<x-livewire-material::theme-script />
|
|
|
|
@if ($assets !== null)
|
|
{{ $assets }}
|
|
@else
|
|
<style data-md-error-fallback>{{ \NoNameWeb\LivewireMaterial\Support\ErrorPage::fallbackStyles() }}</style>
|
|
@endif
|
|
</head>
|
|
<body>
|
|
<main data-md-error-page>
|
|
<div data-md-error-art>
|
|
<div data-md-error-shape>
|
|
<x-livewire-material::shape :name="trim($__env->yieldContent('shape', 'cookie-7'))" />
|
|
</div>
|
|
|
|
<p data-md-error-code>@yield('code')</p>
|
|
</div>
|
|
|
|
<h1 data-md-error-headline>
|
|
@hasSection('headline')
|
|
@yield('headline')
|
|
@else
|
|
@yield('message')
|
|
@endif
|
|
</h1>
|
|
|
|
@hasSection('headline')
|
|
<p data-md-error-message>@yield('message')</p>
|
|
@endif
|
|
|
|
<div data-md-error-actions>
|
|
@hasSection('actions')
|
|
@yield('actions')
|
|
@else
|
|
<x-livewire-material::button :link="url('/')" :label="__('Go home')" variant="filled" size="md" no-wire-navigate />
|
|
|
|
@if ($back !== null)
|
|
<x-livewire-material::button :link="$back" :label="__('Go back')" variant="text" size="md" no-wire-navigate />
|
|
@endif
|
|
@endif
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html>
|