Add M3 error pages and the Markdown mail theme
tests / feature (8.5) (push) Successful in 1m8s
tests / browser (safari, webkit) (push) Has been cancelled
tests / browser (firefox, firefox) (push) Has been cancelled
tests / lint (push) Successful in 1m5s
tests / feature (8.4) (push) Successful in 1m11s
tests / browser (chrome, chromium) (push) Failing after 6m9s

Error pages for 401 to 503 in an error-view root appended to view.paths,
with an inline fallback when the Vite build is missing, and a mail theme
rendered from the application's scheme JSON, with opt-in header and
message components. Completes Phase 9.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
This commit is contained in:
Andreas Reinhold / reini
2026-09-13 08:55:58 +02:00
co-authored by Claude Opus 5
parent ab692b66bb
commit 8f174520eb
29 changed files with 1595 additions and 2 deletions
+1
View File
@@ -26,5 +26,6 @@
@include('livewire-material::showcase.sections.bars')
@include('livewire-material::showcase.sections.navigation')
@include('livewire-material::showcase.sections.data')
@include('livewire-material::showcase.sections.pages')
</main>
@endsection
+1 -1
View File
@@ -18,7 +18,7 @@
<a href="{{ route('livewire-material.showcase') }}" class="shrink-0 type-title-lg max-sm:hidden">Livewire Material</a>
<nav class="-my-2 flex min-w-0 flex-1 gap-x-4 overflow-x-auto py-2 whitespace-nowrap type-label-lg text-on-surface-variant [scrollbar-width:none]" aria-label="Sections">
@foreach (['colour' => 'Colour', 'type' => 'Type', 'shape' => 'Shape', 'elevation' => 'Elevation', 'motion' => 'Motion', 'icons' => 'Icons', 'buttons' => 'Buttons', 'menus' => 'Menus', 'communication' => 'Communication', 'progress' => 'Progress', 'containment' => 'Containment', 'carousel' => 'Carousel', 'fields' => 'Fields', 'chips' => 'Chips', 'sliders' => 'Sliders', 'pickers' => 'Date pickers', 'timepickers' => 'Time pickers', 'bars' => 'Bars', 'navigation' => 'Navigation', 'data' => 'Data'] as $anchor => $section)
@foreach (['colour' => 'Colour', 'type' => 'Type', 'shape' => 'Shape', 'elevation' => 'Elevation', 'motion' => 'Motion', 'icons' => 'Icons', 'buttons' => 'Buttons', 'menus' => 'Menus', 'communication' => 'Communication', 'progress' => 'Progress', 'containment' => 'Containment', 'carousel' => 'Carousel', 'fields' => 'Fields', 'chips' => 'Chips', 'sliders' => 'Sliders', 'pickers' => 'Date pickers', 'timepickers' => 'Time pickers', 'bars' => 'Bars', 'navigation' => 'Navigation', 'data' => 'Data', 'pages' => 'Pages'] as $anchor => $section)
<a href="#{{ $anchor }}" class="rounded-corner-xs hover:text-on-surface focus-ring">{{ $section }}</a>
@endforeach
</nav>
+40
View File
@@ -0,0 +1,40 @@
{{-- The showcase's sample Markdown mail: every part the theme styles — heading, prose, bold,
a list, the button, a panel, a table, subcopy and the footer slot. Markdown, so it stays
unindented. --}}
<x-mail::message>
# Your export is ready
Hello Anna, the report you asked for on **Monday** has finished. It holds three files and stays available for seven days.
<x-mail::button :url="url('/')">
Download the export
</x-mail::button>
<x-mail::panel>
Files are deleted automatically once they expire. Download them before **20 September** to keep a copy.
</x-mail::panel>
<x-mail::table>
| File | Rows | Size |
|:-----|-----:|-----:|
| customers.csv | 1,204 | 184 KB |
| orders.csv | 8,930 | 1.2 MB |
| summary.pdf | — | 96 KB |
</x-mail::table>
What happens next:
1. Open the export from the button above.
2. Check the summary before you share it.
Thanks,<br>
{{ config('app.name') }}
<x-slot:subcopy>
If the button does not work, paste this address into your browser: [{{ url('/') }}]({{ url('/') }})
</x-slot:subcopy>
<x-slot:footer>
© {{ date('Y') }} {{ config('app.name') }} · [Privacy]({{ url('/') }}) · [Unsubscribe]({{ url('/') }})
</x-slot:footer>
</x-mail::message>
@@ -0,0 +1,16 @@
<section id="pages" class="scroll-mt-24 space-y-6">
<h2 class="type-headline-md">Pages</h2>
<p class="max-w-3xl type-body-md text-on-surface-variant">
The error pages, raised for real so an app's own <code>resources/views/errors</code> still wins, and the Markdown mail theme
(<code>livewire-material::mail.theme</code>) on a sample mail, both in this application's scheme.
</p>
<div class="flex flex-wrap items-center gap-2">
@foreach (['401', '402', '403', '404', '419', '429', '500', '503'] as $code)
<x-button :link="route('livewire-material.error', $code)" :label="$code" variant="tonal" no-wire-navigate />
@endforeach
<x-button :link="route('livewire-material.mail')" label="Sample mail" icon="mail" variant="outlined" no-wire-navigate />
</div>
</section>