noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Give each canonical layout a page of its own in the Layout section

Browse Source 
Plan step 38: the Layout section's Overview keeps its breakpoint
table and live "This window" readout (now a shared
<x-showcase::breakpoint-readout> partial, and the five breakpoint
cards a real range-queried data-md-showcase-breakpoint-card instead
of Tailwind's max-medium:/medium:max-expanded: variants), but the
three canonical layouts move off it onto a page of their own:
/material/layout/{list-detail,supporting-pane,feed}
(ShowcaseController::layout(), routes/showcase.php), each built on
the real component, sharing one <x-section-nav> Sections::
layoutPages() feeds. The search index gains an entry per page with
its own URL, and the component-homes scan now also reads the three
pages' own source so <x-list-detail>, <x-supporting-pane> and
<x-feed> keep a home.

The whole section moves onto the layout components and md-* classes:
no bespoke Tailwind grid or table styling remains.

LayoutTest's browser test now visits the three dedicated pages
instead of one shared /material/layout; a new Feature test asserts
each page renders and is linked from the Layout section.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 04:22:38 +02:00
co-authored by Claude Sonnet 5
parent 44a29a8ea2
commit 487176d345
11 changed files with 355 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Showcase/Sections.php
+41
View File
@@ -40,6 +40,19 @@ class Sections
}
}
// The Layout section's three canonical layouts (plan step 38): each is a page of its own
// rather than an anchor on the Overview, so its search entry carries its own URL; the
// page's own source joins the Layout section's for the component-homes scan below, so
// <x-list-detail>, <x-supporting-pane> and <x-feed> still find a home.
foreach (static::layoutPages() as $key => $page) {
if ($key === 'layout') {
continue;
}
$entries[] = ['title' => $page['title'], 'kind' => 'Example', 'context' => 'Layout', 'url' => $page['url'].'#'.static::anchor($page['title']), 'keywords' => ''];
$sources['layout'] .= (string) file_get_contents(static::layoutPagePath($key));
}
// A section that names a component in its introduction is its home; otherwise the first that uses it.
foreach (['/&lt;x-([a-z0-9-]+)&gt;/', '/<x-(?:livewire-material::)?([a-z0-9-]+)(?=[\\s\\/>])/'] as $pattern) {
foreach ($sources as $key => $source) {
@@ -76,6 +89,34 @@ class Sections
return dirname(__DIR__, 2).'/resources/views/showcase/sections/'.$key.'.blade.php';
}
/**
* The Layout section's own pages (plan step 38): the overview and the three canonical
* layouts, each on a page of its own, sharing one `<x-section-nav>` and the live breakpoint
* readout rather than three anchors on the Overview. They are not top-level destinations of
* their own — `Sections::all()` still has one `layout` entry for the rail and the overview
* grid — so this is their own small index instead.
*
* @return array<string, array{title: string, icon: string, url: string}>
*/
public static function layoutPages(): array
{
return [
'layout' => ['title' => 'Overview', 'icon' => 'devices', 'url' => route('livewire-material.section', 'layout', false)],
'list-detail' => ['title' => 'List-detail', 'icon' => 'view_sidebar', 'url' => route('livewire-material.layout', 'list-detail', false)],
'supporting-pane' => ['title' => 'Supporting pane', 'icon' => 'splitscreen', 'url' => route('livewire-material.layout', 'supporting-pane', false)],
'feed' => ['title' => 'Feed', 'icon' => 'view_agenda', 'url' => route('livewire-material.layout', 'feed', false)],
];
}
/**
* One of the Layout section's own pages' view file (`layoutPages()`'s keys but `layout`
* itself, which is `path('layout')`).
*/
public static function layoutPagePath(string $key): string
{
return dirname(__DIR__, 2).'/resources/views/showcase/layout/'.$key.'.blade.php';
}
/**
* @return array<string, array{title: string, icon: string, group: string, description: string}>
*/