Refactor widget catalog pages to generate from data (#12760)

- Moves the widget catalog at `/resource/widgets` to a Jaspr component
- Generates all '/ui/widgets/<category>" pages from data and remove
empty markdown files
- Remove CatalogPageLayout 

Resolves #12739

Author: schultek

site/lib/main.dart

@@ -29,7 +29,6 @@ import 'src/components/tutorial/summary_card.dart';
 import 'src/components/tutorial/tutorial_outline.dart';
 import 'src/components/util/component_ref.dart';
 import 'src/extensions/registry.dart';
-import 'src/layouts/catalog_page_layout.dart';
 import 'src/layouts/doc_layout.dart';
 import 'src/layouts/toc_layout.dart';
 import 'src/loaders/data_processor.dart';
@@ -72,7 +71,7 @@ Component get _docsFlutterDevSite => ContentApp.custom(
     rawOutputPattern: _passThroughPattern,
     extensions: allNodeProcessingExtensions,
     components: _embeddableComponents,
-    layouts: const [DocLayout(), TocLayout(), CatalogPageLayout()],
+    layouts: const [DocLayout(), TocLayout()],
     theme: const ContentTheme.none(),
     secondaryOutputs: [
       const RobotsTxtOutput(),
@@ -113,6 +112,7 @@ List<CustomComponent> get _embeddableComponents => [
   const Stepper(),
   const WidgetCatalogCategories(),
   const TutorialOutline(),
+  const WidgetCatalogGrid(),
   CustomComponent(
     pattern: RegExp('OSSelector', caseSensitive: false),
     builder: (_, _, _) => const OsSelector(),

site/lib/src/components/pages/widget_catalog.dart

@@ -6,6 +6,10 @@ import 'package:collection/collection.dart';
 import 'package:jaspr/jaspr.dart';
 import 'package:jaspr_content/jaspr_content.dart';
 
+import '../../markdown/markdown_parser.dart';
+import '../../models/widget_catalog_model.dart';
+import '../../util.dart';
+
 class WidgetCatalogCategories extends CustomComponentBase {
   const WidgetCatalogCategories();
 
@@ -24,10 +28,10 @@ class WidgetCatalogCategories extends CustomComponentBase {
           {'catalog': {'index': final List<Object?> index}} =>
             index
                 .cast<Map<String, Object?>>()
-                .map(_WidgetCatalogCategory.new)
+                .map(WidgetCatalogCategory.new)
                 .sortedBy((c) => c.name),
           _ => throw Exception(
-            'Catalog not found. '
+            'Widget Catalog not found. '
             'Make sure the `data/catalog/index.yml` file exists.',
           ),
         };
@@ -59,16 +63,123 @@ class WidgetCatalogCategories extends CustomComponentBase {
   }
 }
 
-extension type _WidgetCatalogCategory(Map<String, Object?> _data) {
-  String get id =>
-      _data['id'] as String? ??
-      (throw Exception('Missing id for widget catalog category. '));
-  String get name =>
-      _data['name'] as String? ??
-      (throw Exception('Missing name for widget catalog category. '));
-  String get description =>
-      _data['description'] as String? ??
-      (throw Exception(
-        'Missing description for widget catalog category "$name".',
-      ));
+class WidgetCatalogGrid extends CustomComponentBase {
+  const WidgetCatalogGrid();
+
+  @override
+  Pattern get pattern => 'WidgetCatalogGrid';
+
+  @override
+  Component apply(
+    String name,
+    Map<String, String> attributes,
+    Component? child,
+  ) {
+    return Builder(
+      builder: (context) {
+        final widgets = switch (context.page.data) {
+          {'catalog': {'widgets': final List<Object?> widgets}} =>
+            widgets
+                .cast<Map<String, Object?>>()
+                .map(WidgetCatalogWidget.new)
+                .sortedBy((c) => c.name),
+          _ => throw Exception(
+            'Catalog not found. '
+            'Make sure the `data/catalog/widgets.yml` file exists.',
+          ),
+        };
+
+        return div(classes: 'card-grid', [
+          for (final widget in widgets) WidgetCatalogCard(widget: widget),
+        ]);
+      },
+    );
+  }
+}
+
+class WidgetCatalogCard extends StatelessComponent {
+  const WidgetCatalogCard({
+    required this.widget,
+    this.isMaterialCatalog = false,
+    this.subcategory,
+    super.key,
+  });
+
+  final WidgetCatalogWidget widget;
+  final bool isMaterialCatalog;
+  final WidgetCatalogSubcategory? subcategory;
+
+  @override
+  Component build(BuildContext context) {
+    return a(href: widget.link, classes: 'card outlined-card', [
+      _buildCardImageHolder(),
+      div(classes: 'card-header', [
+        span(classes: 'card-title', [text(widget.name)]),
+      ]),
+      div(classes: 'card-content', [
+        p([
+          DashMarkdown(
+            inline: true,
+            content: truncateWords(widget.description, 25),
+          ),
+        ]),
+      ]),
+    ]);
+  }
+
+  Component _buildCardImageHolder() {
+    final holderClass = isMaterialCatalog
+        ? 'card-image-holder-material-3'
+        : 'card-image-holder';
+
+    final imageAlt = isMaterialCatalog
+        ? 'Rendered example of the ${widget.name} Material widget.'
+        : 'Rendered image or visualization of the ${widget.name} widget.';
+
+    final styleAttributes = isMaterialCatalog && subcategory?.color != null
+        ? {'style': '--bg-color: ${subcategory?.color}'}
+        : <String, String>{};
+
+    final placeholder = img(
+      alt:
+          'Placeholder Flutter logo in place of '
+          'missing widget image or visualization.',
+      src: '/assets/images/docs/catalog-widget-placeholder.png',
+      attributes: {'aria-hidden': 'true'},
+    );
+
+    return div(
+      classes: holderClass,
+      attributes: styleAttributes,
+      [
+        if (isMaterialCatalog) ...[
+          // Material catalog always expects an image.
+          if (widget.imageSrc case final imageSrc? when imageSrc.isNotEmpty)
+            img(alt: imageAlt, src: imageSrc)
+          else
+            placeholder,
+          if (widget.hoverBackgroundSrc case final hoverBackgroundSrc?
+              when hoverBackgroundSrc.isNotEmpty)
+            div(classes: 'card-image-material-3-hover', [
+              img(
+                alt:
+                    'Decorated background for '
+                    'Material widget visualizations.',
+                src: hoverBackgroundSrc,
+                attributes: {'aria-hidden': 'true'},
+              ),
+            ]),
+        ] else ...[
+          // Standard catalog prefers vector, then image, then placeholder.
+          if (widget.vector case final vector? when vector.isNotEmpty)
+            raw(vector)
+          else if (widget.imageSrc case final imageSrc?
+              when imageSrc.isNotEmpty)
+            img(alt: imageAlt, src: imageSrc)
+          else
+            placeholder,
+        ],
+      ],
+    );
+  }
 }