Move grouping logic to separate subtemplate and use it on layout too

docs/_includes/grouped-pages.njk

@@ -0,0 +1,13 @@
+{# Cards for pages listed by category #}
+
+{% for category, pages in allPages | groupByTags(categories) -%}
+<section id="{{ category }}" class="index-grid">
+  <h2 class="index-category">{{ category | capitalize }}</h2>
+    {%- for page in pages -%}
+      {%- if not page.data.unlisted -%}
+        {% include "page-card.njk" %}
+      {%- endif -%}
+    {%- endfor -%}
+</section>
+{%- endfor -%}
+

docs/_includes/page-card.njk

@@ -1,5 +1,4 @@
- {%- if not page.data.unlisted -%}
- <a href="{{ page.url }}">
+<a href="{{ page.url }}">
 	<wa-card with-header>
 		<div slot="header">
 		{% include "svgs/" + (page.data.icon or "thumbnail-placeholder") + ".njk" %}
@@ -7,4 +6,3 @@
 		<span class="page-name">{{ page.data.title }}</span>
 	</wa-card>
 </a>
-{%- endif -%}

docs/docs/layout.md

@@ -2,6 +2,7 @@
 title: Layout
 description: Browse Web Awesome's components and utilities for creating responsive web layouts.
 layout: page-outline
+categories: ["components", "utilities"]
 ---
 
 <style>
@@ -22,18 +23,5 @@ layout: page-outline
 
 <p style="max-width: 80ch">Layout components and utility classes help you organize content that can adapt to any device or screen size. Browse the collection of responsive layout tools included in Web Awesome Pro.</p>
 
-<div class="index-grid wa-grid wa-gap-2xl">
-  <h2 class="index-category wa-span-grid">Components</h2>
-  {%- for page in collections.components | sort -%}
-  {%- if 'layout' in page.data.tags -%}
-    {% include "page-card.njk" %}
-  {%- endif -%}
-  {%- endfor -%}
-
-  <h2 class="index-category wa-span-grid">Utilities</h2>
-  {%- for page in collections.utilities | sort -%}
-  {%- if 'layout' in page.data.tags -%}
-    {% include "page-card.njk" %}
-  {%- endif -%}
-  {%- endfor -%}
-</div>
+{% set allPages = collections.layout %}
+{% include "grouped-pages.njk" %}

docs/docs/native/index.md

@@ -10,14 +10,8 @@ Web Awesome works _with_ the platform, rather than trying to reinvent it.
 If all you need is styles, you don’t need to use new `<wa-*>` elements!
 We also provide styles that make native HTML elements look good so you can continue using what you know and gradually adopt Web Awesome as you see fit.
 
-<div id="component-grid" class="index-grid">
-  {% for category, pages in collections.native | groupByTags(categories) -%}
-  <h2 class="index-category">{{ category | capitalize }}</h2>
-    {%- for page in pages -%}
-        {% include "page-card.njk" %}
-    {%- endfor -%}
-  {%- endfor -%}
-</div>
+{% set allPages = collections.native %}
+{% include "grouped-pages.njk" %}
 
 <br> {# Temp fix for spacing issue #}
 

docs/docs/utilities/index.md

@@ -7,14 +7,8 @@ override:tags: []
 categories: ["layout"]
 ---
 
-<div id="component-grid" class="index-grid">
-  {% for category, pages in collections.utilities | groupByTags(categories) -%}
-  <h2 class="index-category">{{ category | capitalize }}</h2>
-    {%- for page in pages -%}
-        {% include "page-card.njk" %}
-    {%- endfor -%}
-  {%- endfor -%}
-</div>
+{% set allPages = collections.utilities %}
+{% include "grouped-pages.njk" %}
 
 <br> {# Temp fix for spacing issue #}