Refactor controller and overview page.

src/Controller/PatternLibraryController.php

@@ -3,6 +3,7 @@
 namespace Drupal\ui_patterns\Controller;
 
 use Drupal\Core\Controller\ControllerBase;
+use Drupal\Core\Theme\ThemeManager;
 use Drupal\ui_patterns\UiPatternsManager;
 use Symfony\Component\DependencyInjection\ContainerInterface;
 
@@ -20,10 +21,18 @@ class PatternLibraryController extends ControllerBase {
    */
   protected $patternsManager;
 
+  /**
+   * Theme manager service.
+   *
+   * @var \Drupal\Core\Theme\ThemeManager
+   */
+  protected $themeManager;
+
   /**
    * {@inheritdoc}
    */
-  public function __construct(UiPatternsManager $ui_patterns_manager) {
+  public function __construct(UiPatternsManager $ui_patterns_manager, ThemeManager $theme_manager) {
+    $this->themeManager = $theme_manager;
     $this->patternsManager = $ui_patterns_manager;
   }
 
@@ -31,7 +40,10 @@ class PatternLibraryController extends ControllerBase {
    * {@inheritdoc}
    */
   public static function create(ContainerInterface $container) {
-    return new static($container->get('plugin.manager.ui_patterns'));
+    return new static(
+      $container->get('plugin.manager.ui_patterns'),
+      $container->get('theme.manager')
+    );
   }
 
   /**
@@ -55,6 +67,7 @@ class PatternLibraryController extends ControllerBase {
 
     $definition = $this->patternsManager->getDefinition($name);
     $definition['rendered'] = $this->patternsManager->renderExample($name);
+    $definition['meta'] = $this->themeManager->render('patterns_meta_information', ['pattern' => $definition]);
 
     return [
       '#theme' => 'patterns_single_page',
@@ -73,6 +86,7 @@ class PatternLibraryController extends ControllerBase {
     $definitions = $this->patternsManager->getDefinitions();
     foreach ($definitions as $name => $definition) {
       $definitions[$name]['rendered'] = $this->patternsManager->renderExample($name);
+      $definitions[$name]['meta'] = $this->themeManager->render('patterns_meta_information', ['pattern' => $definition]);
     }
 
     return [

templates/patterns-meta-information.html.twig

+{#
+/**
+ * @file
+ * UI Pattern meta information.
+ */
+#}
+
+{% if pattern is not empty %}
+
+  {# Pattern name and desciption. #}
+  <h3>{{ pattern.label }}</h3>
+  <p>{{ pattern.description }}</p>
+
+  {# Pattern fields descriptions. #}
+  <table>
+    <thead>
+    <tr>
+      <th>{{ "ID"|t }}</th>
+      <th>{{ "Field"|t }}</th>
+      <th>{{ "Description"|t }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for name, field in pattern.fields %}
+      <tr>
+        <td><code class="fs4">{{ name }}</code></td>
+        <td>{{ field.label }}</td>
+        <td>{{ field.description }}</td>
+      </tr>
+    {% endfor %}
+    </tbody>
+  </table>
+
+{% endif %}

templates/patterns-overview-page.html.twig

@@ -23,28 +23,7 @@
 
     {# Pattern name and desciption. #}
     <a name="{{ pattern_name }}"></a>
-    <h3>{{ pattern.label }}</h3>
-    <p>{{ pattern.description }}</p>
-
-    {# Pattern fields descriptions. #}
-    <table>
-      <thead>
-        <tr>
-          <th>{{ "ID"|t }}</th>
-          <th>{{ "Field"|t }}</th>
-          <th>{{ "Description"|t }}</th>
-        </tr>
-      </thead>
-      <tbody>
-      {% for name, field in pattern.fields %}
-        <tr>
-          <td><code class="fs4">{{ name }}</code></td>
-          <td>{{ field.label }}</td>
-          <td>{{ field.description }}</td>
-        </tr>
-      {% endfor %}
-      </tbody>
-    </table>
+    {{ pattern.meta }}
 
     {# Rendered pattern preview. #}
     <fieldset>

templates/patterns-single-page.html.twig

@@ -7,29 +7,7 @@
 
 {% if pattern is not empty %}
 
-  {# Pattern name and desciption. #}
-  <h3>{{ pattern.label }}</h3>
-  <p>{{ pattern.description }}</p>
-
-  {# Pattern fields descriptions. #}
-  <table>
-    <thead>
-    <tr>
-      <th>{{ "ID"|t }}</th>
-      <th>{{ "Field"|t }}</th>
-      <th>{{ "Description"|t }}</th>
-    </tr>
-    </thead>
-    <tbody>
-    {% for name, field in pattern.fields %}
-      <tr>
-        <td><code class="fs4">{{ name }}</code></td>
-        <td>{{ field.label }}</td>
-        <td>{{ field.description }}</td>
-      </tr>
-    {% endfor %}
-    </tbody>
-  </table>
+  {{ pattern.meta }}
 
   {# Rendered pattern preview. #}
   <fieldset>

ui_patterns.module

@@ -20,6 +20,10 @@ function ui_patterns_theme($existing, $type, $theme, $path) {
       'variables' => ['pattern' => NULL],
       'path' => $path . '/templates',
     ],
+    'patterns_meta_information' => [
+      'variables' => ['pattern' => NULL],
+      'path' => $path . '/templates',
+    ],
   ];
 
   $definitions = \Drupal::service('plugin.manager.ui_patterns')->getDefinitions();