Andreas Reinhold / reiniandClaude Sonnet 5
9c8b39600b
Plan step 38 (first batch): layout.blade.php, index.blade.php, section.blade.php, shell.blade.php and the example component now lay out through the layout components (pane, stack, row, grid, surface) and their props, text through the md-* classes, and everything else through showcase.css's data-md-showcase-* hooks — no Tailwind utility remains in any of them. The head links the new stylesheet route after @vite(...), not before: that entry opens the document's first @layer statement, and linking the showcase's own bundle ahead of it re-anchors the material layer before Tailwind's own and lets its preflight's `padding: 0` beat the search view's padding-top (found by a failing browser test). @vite(...) stays, its Tailwind CSS entry included, only for the section views (still Tailwind until the next batches) and the JS runtime; the config comment says so. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
48 lines
1.9 KiB
PHP
48 lines
1.9 KiB
PHP
{{-- One showcase example: the Blade in `code`, rendered, with the source beside it — one string,
|
|
so what is shown and what is written can never disagree. --}}
|
|
|
|
@props(['title' => null, 'code', 'stack' => false])
|
|
|
|
@php
|
|
// Written as an application without a prefix writes it; under a configured prefix the tags are
|
|
// rewritten to it, so what renders and what is shown is what this application would write.
|
|
$prefix = config('livewire-material.prefix');
|
|
|
|
if (filled($prefix)) {
|
|
$names = collect(glob(\NoNameWeb\LivewireMaterial\LivewireMaterialServiceProvider::componentPath().'/*.blade.php'))
|
|
->map(fn (string $path): string => preg_quote(basename($path, '.blade.php'), '/'))
|
|
->sortByDesc(fn (string $name): int => strlen($name))
|
|
->implode('|');
|
|
|
|
$code = preg_replace('/<(\/?)x-('.$names.')(?=[\s\/>])/', '<$1x-'.$prefix.'::$2', $code);
|
|
}
|
|
@endphp
|
|
|
|
<x-livewire-material::surface
|
|
:id="$title ? \NoNameWeb\LivewireMaterial\Showcase\Sections::anchor($title) : null"
|
|
padding="space200"
|
|
corner="lg"
|
|
data-md-showcase-example
|
|
>
|
|
<x-livewire-material::stack gap="space200">
|
|
@if ($title)
|
|
<h3 class="md-type-title-md">{{ $title }}</h3>
|
|
@endif
|
|
|
|
@if ($stack)
|
|
<x-livewire-material::stack gap="space200">
|
|
{!! \Illuminate\Support\Facades\Blade::render($code) !!}
|
|
</x-livewire-material::stack>
|
|
@else
|
|
<x-livewire-material::row gap="space200" wrap align="center">
|
|
{!! \Illuminate\Support\Facades\Blade::render($code) !!}
|
|
</x-livewire-material::row>
|
|
@endif
|
|
|
|
<details>
|
|
<summary class="md-type-label-md md-ink-variant md-focus-ring" data-md-showcase-code-summary>Blade</summary>
|
|
<pre class="md-type-body-sm" data-md-showcase-code><code>{{ trim($code) }}</code></pre>
|
|
</details>
|
|
</x-livewire-material::stack>
|
|
</x-livewire-material::surface>
|