From d828dd3600ed99efc7ba6b260aa04fbf273d9bde Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Wed, 26 Mar 2025 15:22:48 -0400
Subject: [PATCH] Use overviews in pattern subcategories (#826)

* Do not error if no pages

* Automatically set parents and tags for patterns

* Update overview.njk

* [WIP] Use overview pages for pattern listings

* Remove explicit parents

---------

Co-authored-by: lindsaym-fa <dev@lindsaym.design>
---
 docs/docs/patterns/app/action-panel.md        |  4 +--
 docs/docs/patterns/app/app.json               |  3 ++
 docs/docs/patterns/app/comments.md            |  6 ++--
 docs/docs/patterns/app/data-display.md        |  4 +--
 docs/docs/patterns/app/description-list.md    |  4 +--
 docs/docs/patterns/app/empty-state.md         |  4 +--
 docs/docs/patterns/app/faq.md                 |  4 +--
 docs/docs/patterns/app/feed.md                |  4 +--
 docs/docs/patterns/app/grid.md                |  4 +--
 docs/docs/patterns/app/index.njk              | 26 ++---------------
 docs/docs/patterns/app/leaderboard.md         |  4 +--
 docs/docs/patterns/app/pagination.md          |  4 +--
 docs/docs/patterns/app/pricing.md             | 18 ++++++------
 .../patterns/ecommerce/category-filter.md     |  6 ++--
 .../patterns/ecommerce/category-preview.md    | 16 +++++------
 docs/docs/patterns/ecommerce/checkout-form.md |  4 +--
 docs/docs/patterns/ecommerce/ecommerce.json   |  3 ++
 docs/docs/patterns/ecommerce/incentives.md    |  6 ++--
 docs/docs/patterns/ecommerce/index.njk        | 28 +++----------------
 docs/docs/patterns/ecommerce/order-history.md |  6 ++--
 docs/docs/patterns/ecommerce/order-summary.md | 12 ++++----
 docs/docs/patterns/ecommerce/product-list.md  | 24 ++++++++--------
 .../patterns/ecommerce/product-overview.md    |  6 ++--
 .../patterns/ecommerce/product-preview.md     | 10 +++----
 docs/docs/patterns/ecommerce/review.md        | 10 +++----
 docs/docs/patterns/ecommerce/shopping-cart.md | 20 ++++++-------
 .../patterns/ecommerce/store-navigation.md    |  3 +-
 docs/docs/patterns/information/index.njk      | 26 +++--------------
 .../patterns/information/information.json     |  3 ++
 docs/docs/patterns/information/newsletter.md  |  5 ++--
 docs/docs/patterns/information/paywall.md     |  4 +--
 .../docs/patterns/information/social-share.md |  2 --
 32 files changed, 92 insertions(+), 191 deletions(-)
 create mode 100644 docs/docs/patterns/app/app.json
 create mode 100644 docs/docs/patterns/ecommerce/ecommerce.json
 create mode 100644 docs/docs/patterns/information/information.json

diff --git a/docs/docs/patterns/app/action-panel.md b/docs/docs/patterns/app/action-panel.md
index 6a0812b41..cb7669cff 100644
--- a/docs/docs/patterns/app/action-panel.md
+++ b/docs/docs/patterns/app/action-panel.md
@@ -1,8 +1,6 @@
 ---
 title: Action Panel
 description: 'These patterns help add user actions to dashboards'
-parent: app
-tags: app
 icon: action-panel
 ---
 ## Examples
@@ -41,4 +39,4 @@ icon: action-panel
     <wa-switch size="large"></wa-switch>
   </div>
 </wa-card>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/app/app.json b/docs/docs/patterns/app/app.json
new file mode 100644
index 000000000..ec69525f8
--- /dev/null
+++ b/docs/docs/patterns/app/app.json
@@ -0,0 +1,3 @@
+{
+  "tags": ["app"]
+}
diff --git a/docs/docs/patterns/app/comments.md b/docs/docs/patterns/app/comments.md
index abc7ea673..2f0522859 100644
--- a/docs/docs/patterns/app/comments.md
+++ b/docs/docs/patterns/app/comments.md
@@ -1,8 +1,6 @@
 ---
 title: Comments
 description: 'For feedback forms and message boxes'
-parent: app
-tags: app
 ---
 ## Examples
 
@@ -34,7 +32,7 @@ tags: app
           <wa-icon-button name="link" variant="solid" label="Bold"></wa-icon-button>
           <wa-icon-button name="face-smile" variant="solid" label="Italic"></wa-icon-button>
         </div>
-        </wa-button><wa-button>Comment</wa-button>  
+        </wa-button><wa-button>Comment</wa-button>
       </div>
     </div>
   </div>
@@ -72,4 +70,4 @@ tags: app
     <wa-button variant="brand">Save</wa-button>
   </div>
 </wa-card>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/app/data-display.md b/docs/docs/patterns/app/data-display.md
index b0cc3bf3c..6e722e0e2 100644
--- a/docs/docs/patterns/app/data-display.md
+++ b/docs/docs/patterns/app/data-display.md
@@ -1,8 +1,6 @@
 ---
 title: Data Display
 description: TODO
-parent: app
-tags: app
 ---
 ## Examples
 
@@ -157,4 +155,4 @@ tags: app
   </section>
   </div>
 </wa-card>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/app/description-list.md b/docs/docs/patterns/app/description-list.md
index 8736a671f..3593d4c16 100644
--- a/docs/docs/patterns/app/description-list.md
+++ b/docs/docs/patterns/app/description-list.md
@@ -1,8 +1,6 @@
 ---
 title: Description List
 description: 'Shows the user information with labels and values in an easy to read format.'
-parent: app
-tags: app
 ---
 ## Examples
 
@@ -241,4 +239,4 @@ tags: app
     </a>
   </div>
 </wa-card>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/app/empty-state.md b/docs/docs/patterns/app/empty-state.md
index 820d48c4e..61d757ce5 100644
--- a/docs/docs/patterns/app/empty-state.md
+++ b/docs/docs/patterns/app/empty-state.md
@@ -1,8 +1,6 @@
 ---
 title: Empty State
 description: TODO
-parent: app
-tags: app
 ---
 ## Examples
 
@@ -110,4 +108,4 @@ tags: app
     <a href="#">Or start from an empty project →</a>
   </div>
 </wa-card>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/app/faq.md b/docs/docs/patterns/app/faq.md
index b30fddc08..1d4b00c74 100644
--- a/docs/docs/patterns/app/faq.md
+++ b/docs/docs/patterns/app/faq.md
@@ -1,8 +1,6 @@
 ---
 title: FAQ
 description: 'The user has questions concerning a site and its related services'
-parent: app
-tags: app
 ---
 ## Examples
 
@@ -122,4 +120,4 @@ tags: app
     </div>
   </dl>
 </div>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/app/feed.md b/docs/docs/patterns/app/feed.md
index 3d9ada8d0..0383de8d3 100644
--- a/docs/docs/patterns/app/feed.md
+++ b/docs/docs/patterns/app/feed.md
@@ -1,8 +1,6 @@
 ---
 title: Feed
 description: TODO
-parent: app
-tags: app
 ---
 
 ```html {.example}
@@ -83,4 +81,4 @@ tags: app
     }
   }
 </style>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/app/grid.md b/docs/docs/patterns/app/grid.md
index 0cc7aab2f..4f88761ac 100644
--- a/docs/docs/patterns/app/grid.md
+++ b/docs/docs/patterns/app/grid.md
@@ -1,8 +1,6 @@
 ---
 title: Grid
 description: TODO
-parent: app
-tags: app
 ---
 
 ```html {.example}
@@ -163,4 +161,4 @@ tags: app
     </div>
   </wa-card>
 </div>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/app/index.njk b/docs/docs/patterns/app/index.njk
index 9efa42648..1d8996549 100644
--- a/docs/docs/patterns/app/index.njk
+++ b/docs/docs/patterns/app/index.njk
@@ -1,28 +1,8 @@
 ---
 title: App
 description: TODO
-layout: page
-categories: ["app"]
+parent: patterns
+layout: overview
+override:tags: []
 listChildren: true
 ---
-
-{% set appPages = collections.app %}
-
-<section class="index-grid">
-    {%- for page in appPages -%}
-
-    <a href="{{ page.url }}"{{ page.data.keywords | attr('data-keywords') }}>
-        <wa-card with-header>
-            <div slot="header">
-                {% include "svgs/" + (page.data.icon or "thumbnail-placeholder") + ".njk" %}
-            </div>
-            <span class="page-name">{{ page.data.title }}</span>
-            {% if pageSubtitle -%}
-            <div class="wa-caption-s">{{ pageSubtitle }}</div>
-            {%- endif %}
-        </wa-card>
-    </a>
-
-    {%- endfor -%}
-
-</section>
diff --git a/docs/docs/patterns/app/leaderboard.md b/docs/docs/patterns/app/leaderboard.md
index 944ab6c8f..61dd9982f 100644
--- a/docs/docs/patterns/app/leaderboard.md
+++ b/docs/docs/patterns/app/leaderboard.md
@@ -1,8 +1,6 @@
 ---
 title: Leaderboard
 description: TODO
-parent: app
-tags: app
 ---
 
 ```html{.example}
@@ -366,4 +364,4 @@ tags: app
       </ol>
     </div>
 </div>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/app/pagination.md b/docs/docs/patterns/app/pagination.md
index fa6291cbc..6b597457f 100644
--- a/docs/docs/patterns/app/pagination.md
+++ b/docs/docs/patterns/app/pagination.md
@@ -1,8 +1,6 @@
 ---
 title: Pagination
 description: TODO
-parent: app
-tags: app
 ---
 
 ## Simple Pagination
@@ -41,4 +39,4 @@ tags: app
     <wa-button><wa-icon slot="suffix" name="gear" variant="solid"></wa-icon>Next </wa-button>
   </div>
 </wa-card>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/app/pricing.md b/docs/docs/patterns/app/pricing.md
index 995dd9127..7f34936fa 100644
--- a/docs/docs/patterns/app/pricing.md
+++ b/docs/docs/patterns/app/pricing.md
@@ -1,8 +1,6 @@
 ---
 title: Pricing
 description: TODO
-parent: app
-tags: app
 ---
 
 ```html{.example}
@@ -29,23 +27,23 @@ tags: app
       <div class="wa-stack">
         <div class="wa-flank">
           <wa-icon name="check"></wa-icon>
-          <span class="wa-caption-m">Access to basic features</span>  
+          <span class="wa-caption-m">Access to basic features</span>
         </div>
         <div class="wa-flank">
           <wa-icon name="check"></wa-icon>
-          <span class="wa-caption-m">Basic Reporting and Analytics</span>  
+          <span class="wa-caption-m">Basic Reporting and Analytics</span>
         </div>
         <div class="wa-flank">
           <wa-icon name="check"></wa-icon>
-          <span class="wa-caption-m">10 Individual users</span>  
+          <span class="wa-caption-m">10 Individual users</span>
         </div>
         <div class="wa-flank">
           <wa-icon name="check"></wa-icon>
-          <span class="wa-caption-m">20GB of data for user</span>  
+          <span class="wa-caption-m">20GB of data for user</span>
         </div>
         <div class="wa-flank">
           <wa-icon name="check"></wa-icon>
-          <span class="wa-caption-m">Basic Chat and email</span>  
+          <span class="wa-caption-m">Basic Chat and email</span>
         </div>
       </div>
     </div>
@@ -72,7 +70,7 @@ tags: app
       <div class="wa-stack">
         <div class="wa-flank">
           <wa-icon name="check"></wa-icon>
-          <span class="wa-caption-m">Access to basic features</span>  
+          <span class="wa-caption-m">Access to basic features</span>
         </div>
       </div>
     </div>
@@ -99,7 +97,7 @@ tags: app
       <div class="wa-stack">
         <div class="wa-flank">
           <wa-icon name="check"></wa-icon>
-          <span class="wa-caption-m">Access to basic features</span>  
+          <span class="wa-caption-m">Access to basic features</span>
         </div>
       </div>
     </div>
@@ -134,4 +132,4 @@ tags: app
 
 ### With templates
 
-### With recommendations grid
\ No newline at end of file
+### With recommendations grid
diff --git a/docs/docs/patterns/ecommerce/category-filter.md b/docs/docs/patterns/ecommerce/category-filter.md
index 7df961f8f..081450020 100644
--- a/docs/docs/patterns/ecommerce/category-filter.md
+++ b/docs/docs/patterns/ecommerce/category-filter.md
@@ -1,8 +1,6 @@
 ---
 title: Category Filter
 description: 'Helps the user find the right products with filters to refine search results by specific attributes.'
-parent: ecommerce
-tags: e-commerce
 icon: checkbox
 ---
 
@@ -42,7 +40,7 @@ icon: checkbox
           <wa-checkbox>XXL</wa-checkbox>
         </div>
       </wa-details>
-    </form> 
+    </form>
     <div class="wa-placeholder"></div>
   </div>
 </div>
@@ -82,4 +80,4 @@ icon: checkbox
   </div>
   <div class="wa-placeholder"></div>
 </div>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/ecommerce/category-preview.md b/docs/docs/patterns/ecommerce/category-preview.md
index 721789cdf..9efeb7cb5 100644
--- a/docs/docs/patterns/ecommerce/category-preview.md
+++ b/docs/docs/patterns/ecommerce/category-preview.md
@@ -1,8 +1,6 @@
 ---
 title: Category Preview
 description: 'Help shoppers discover your product offerings with showcases of product categories.'
-parent: ecommerce
-tags: e-commerce
 icon: preview
 ---
 
@@ -17,20 +15,20 @@ icon: preview
   </div>
   <div class="wa-stack">
     <div class="wa-frame:landscape wa-border-radius-s">
-      <img 
+      <img
         src="https://images.unsplash.com/photo-1544441893-675973e31985?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
         alt="An analog watch, cotton pants, crew neck tee, and pair of tennis shoes (Photograph by Mnz)"
       />
     </div>
     <div class="wa-grid">
       <div class="wa-frame:landscape wa-border-radius-s">
-        <img 
+        <img
           src="https://images.unsplash.com/photo-1548768041-2fceab4c0b85?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           alt="Stack of three folded solid color tees (Photograph by Mnz)"
         />
       </div>
       <div class="wa-frame:landscape wa-border-radius-s">
-        <img 
+        <img
           src="https://images.unsplash.com/photo-1544441892-794166f1e3be?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           alt="Pair of bright white tennis shoes(Photograph by Mnz)"
         />
@@ -48,7 +46,7 @@ icon: preview
   <div class="wa-grid">
     <a href="" class="wa-stack wa-link-plain">
       <div class="wa-frame:portrait wa-border-radius-s">
-        <img 
+        <img
           src="https://uploads.webawesome.com/organization.jpg"
           alt="Inside of a closet filled with clothes on wooden hangers and integrated shelving with shoes"
         />
@@ -57,7 +55,7 @@ icon: preview
     </a>
     <a href="" class="wa-stack wa-link-plain">
       <div class="wa-frame:portrait wa-border-radius-s">
-        <img 
+        <img
           src="https://uploads.webawesome.com/bags.jpg"
           alt="Young person hugging a small floral patterned book bag between their arms"
         />
@@ -66,7 +64,7 @@ icon: preview
     </a>
     <a href="" class="wa-stack wa-link-plain">
       <div class="wa-frame:portrait wa-border-radius-s">
-        <img 
+        <img
           src="https://uploads.webawesome.com/outdoor-2.jpg"
           alt="Person in a mountain clearing wearing a waterproof hooded windbreaker in black and orange"
         />
@@ -161,4 +159,4 @@ icon: preview
   </div>
 </div>
 </div>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/ecommerce/checkout-form.md b/docs/docs/patterns/ecommerce/checkout-form.md
index 325efb72b..4e9e736f2 100644
--- a/docs/docs/patterns/ecommerce/checkout-form.md
+++ b/docs/docs/patterns/ecommerce/checkout-form.md
@@ -1,8 +1,6 @@
 ---
 title: Checkout Form
 description: 'Let shoppers checkout with ease with streamlined forms to capture shipping and payment info.'
-parent: ecommerce
-tags: e-commerce
 ---
 
 
@@ -243,4 +241,4 @@ tags: e-commerce
     </div>
   </div>
 </div>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/ecommerce/ecommerce.json b/docs/docs/patterns/ecommerce/ecommerce.json
new file mode 100644
index 000000000..be5dbdf49
--- /dev/null
+++ b/docs/docs/patterns/ecommerce/ecommerce.json
@@ -0,0 +1,3 @@
+{
+  "tags": ["ecommerce"]
+}
diff --git a/docs/docs/patterns/ecommerce/incentives.md b/docs/docs/patterns/ecommerce/incentives.md
index 006ea62bb..43095a25d 100644
--- a/docs/docs/patterns/ecommerce/incentives.md
+++ b/docs/docs/patterns/ecommerce/incentives.md
@@ -1,8 +1,6 @@
 ---
 title: Incentives
 description: 'Encourage shoppers to buy your products with value propositions, discounts, and promotions.'
-parent: ecommerce
-tags: e-commerce
 ---
 
 ## 3 Column
@@ -17,7 +15,7 @@ tags: e-commerce
     <div class="wa-frame wa-border-radius-l">
       <img src="https://uploads.webawesome.com/online-learning.jpg" />
     </div>
-    
+
   </div>
   <div class="wa-grid">
     <div class="wa-stack wa-gap-xs">
@@ -122,4 +120,4 @@ tags: e-commerce
     </div>
 </div>
 </div>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/ecommerce/index.njk b/docs/docs/patterns/ecommerce/index.njk
index 885ba650d..c6598a69c 100644
--- a/docs/docs/patterns/ecommerce/index.njk
+++ b/docs/docs/patterns/ecommerce/index.njk
@@ -1,26 +1,6 @@
 ---
-title: E-commerce
-description: ''
-layout: page
+title: Ecommerce
+parent: patterns
+layout: overview
+override:tags: []
 ---
-
-{% set ecommercePages = collections['e-commerce'] %}
-
-<section class="index-grid">
-    {%- for page in ecommercePages -%}
-
-    <a href="{{ page.url }}"{{ page.data.keywords | attr('data-keywords') }}>
-        <wa-card with-header>
-            <div slot="header">
-                {% include "svgs/" + (page.data.icon or "thumbnail-placeholder") + ".njk" %}
-            </div>
-            <span class="page-name">{{ page.data.title }}</span>
-            {% if pageSubtitle -%}
-            <div class="wa-caption-s">{{ pageSubtitle }}</div>
-            {%- endif %}
-        </wa-card>
-    </a>
-
-    {%- endfor -%}
-
-</section>
diff --git a/docs/docs/patterns/ecommerce/order-history.md b/docs/docs/patterns/ecommerce/order-history.md
index a12e51e69..a889d9c66 100644
--- a/docs/docs/patterns/ecommerce/order-history.md
+++ b/docs/docs/patterns/ecommerce/order-history.md
@@ -1,8 +1,6 @@
 ---
 title: Order History
 description: 'Empower your customers to view past purchases and track upcoming orders with comprehensive order histories.'
-parent: ecommerce
-tags: e-commerce
 ---
 
 ## List
@@ -32,7 +30,7 @@ tags: e-commerce
   <wa-divider></wa-divider>
   <div class="wa-flank" style="--flank-size: 12rem">
     <div class="wa-frame wa-border-radius-s" style="aspect-ratio: 3 / 2">
-      <img 
+      <img
         src="https://img.fortawesome.com/cfa83f3c/light-fixtures.jpg"
         alt=""
       />
@@ -49,7 +47,7 @@ tags: e-commerce
           <wa-button size="small" appearance="plain" variant="neutral">View Product</wa-button>
           <wa-button size="small" appearance="accent" variant="brand">Buy Again</wa-button>
         </div>
-      </div> 
+      </div>
     </div>
   </div>
   <wa-divider></wa-divider>
diff --git a/docs/docs/patterns/ecommerce/order-summary.md b/docs/docs/patterns/ecommerce/order-summary.md
index e2bd0721d..566e1ca31 100644
--- a/docs/docs/patterns/ecommerce/order-summary.md
+++ b/docs/docs/patterns/ecommerce/order-summary.md
@@ -1,8 +1,6 @@
 ---
 title: Order Summary
 description: 'Give shoppers confidence in their purchases with summaries of everything included in their order.'
-parent: ecommerce
-tags: e-commerce
 ---
 
 ## Simple
@@ -26,7 +24,7 @@ tags: e-commerce
           <ul class="wa-stack wa-gap-xl">
             <li class="wa-flank wa-align-items-start">
               <div class="wa-frame wa-border-radius-s">
-                <img 
+                <img
                   src="https://uploads.webawesome.com/vase-1.jpg"
                   alt=""
                 />
@@ -39,7 +37,7 @@ tags: e-commerce
             <wa-divider></wa-divider>
             <li class="wa-flank wa-align-items-start">
               <div class="wa-frame wa-border-radius-s">
-                <img 
+                <img
                   src="https://uploads.webawesome.com/decorative-vase.jpg"
                   alt=""
                 />
@@ -219,7 +217,7 @@ tags: e-commerce
         <p class="wa-caption-m">Wood fired, salt glaze</p>
         <wa-tag variant="success" appearance="filled" size="small">Delivered</wa-tag>
       </div>
-    </div>   
+    </div>
   </wa-card>
   <wa-card>
     <div class="wa-flank wa-align-items-start">
@@ -237,7 +235,7 @@ tags: e-commerce
         <p class="wa-caption-m">High quality Japanese Kutani-yaki ceramic-ware</p>
         <wa-tag variant="neutral" appearance="filled" size="small">Shipping Soon</wa-tag>
       </div>
-    </div>   
+    </div>
   </wa-card>
   <wa-card>
     <div class="wa-flank wa-align-items-start">
@@ -255,7 +253,7 @@ tags: e-commerce
         <p class="wa-caption-m">Koishiwara-yaki style with crystalline glaze</p>
         <wa-tag variant="brand" appearance="filled" size="small">Out for Delivery</wa-tag>
       </div>
-    </div>   
+    </div>
   </wa-card>
   <wa-divider></wa-divider>
   <wa-callout variant="neutral" appearance="filled">
diff --git a/docs/docs/patterns/ecommerce/product-list.md b/docs/docs/patterns/ecommerce/product-list.md
index 0d37e670c..570b01f6b 100644
--- a/docs/docs/patterns/ecommerce/product-list.md
+++ b/docs/docs/patterns/ecommerce/product-list.md
@@ -1,8 +1,6 @@
 ---
 title: Product Lists
 description: 'Let shoppers browse and compare products with detailed lists of the products in your store.'
-parent: ecommerce
-tags: e-commerce
 ---
 
 ## Simple Grid with Ratings
@@ -11,7 +9,7 @@ tags: e-commerce
 <div class="wa-grid wa-gap-2xl">
   <a class="wa-stack wa-align-items-center wa-gap-xs wa-link-plain" href="">
     <div class="wa-frame wa-border-radius-m">
-      <img 
+      <img
         src="https://images.unsplash.com/photo-1633933329864-5d4c4423ad54?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
         alt="Bunch of fresh basil leaves with purple veins (Photograph by Svitlana)"
       />
@@ -23,7 +21,7 @@ tags: e-commerce
   </a>
   <a class="wa-stack wa-align-items-center wa-gap-xs wa-link-plain" href="">
     <div class="wa-frame wa-border-radius-m">
-      <img 
+      <img
         src="https://images.unsplash.com/photo-1662892194342-f95c33cc16e3?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
         alt="Bunch of cut chamomile blooms (Photograph by Rootnot Creations)"
       />
@@ -35,7 +33,7 @@ tags: e-commerce
   </a>
   <a class="wa-stack wa-align-items-center wa-gap-xs wa-link-plain" href="">
     <div class="wa-frame wa-border-radius-m">
-      <img 
+      <img
         src="https://images.unsplash.com/photo-1636396279461-f875646332d9?q=80&w=3360&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
         alt="Canvas bundle of cut lavender blooms (Photograph by volant)"
       />
@@ -47,7 +45,7 @@ tags: e-commerce
   </a>
   <a class="wa-stack wa-align-items-center wa-gap-xs wa-link-plain" href="">
     <div class="wa-frame wa-border-radius-m">
-      <img 
+      <img
         src="https://images.unsplash.com/photo-1501085934018-450c8e615dbc?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
         alt="Blooming marjoram plant (Photograph by Monika Grabkowska)"
       />
@@ -59,7 +57,7 @@ tags: e-commerce
   </a>
   <a class="wa-stack wa-align-items-center wa-gap-xs wa-link-plain" href="">
     <div class="wa-frame wa-border-radius-m">
-      <img 
+      <img
         src="https://images.unsplash.com/photo-1688633767797-455f59c98272?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
         alt="Group of mature oregano plants (Photograph Nikolett Emmert)"
       />
@@ -71,7 +69,7 @@ tags: e-commerce
   </a>
   <a class="wa-stack wa-align-items-center wa-gap-xs wa-link-plain" href="">
     <div class="wa-frame wa-border-radius-m">
-      <img 
+      <img
         src="https://images.unsplash.com/photo-1603109731710-dba41b1096a7?q=80&w=2259&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
         alt="Cluster of peppermint plants (Photograph by Josefin)"
       />
@@ -83,7 +81,7 @@ tags: e-commerce
   </a>
   <a class="wa-stack wa-align-items-center wa-gap-xs wa-link-plain" href="">
     <div class="wa-frame wa-border-radius-m">
-      <img 
+      <img
         src="https://images.unsplash.com/photo-1726994803809-0e065bd4b25b?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
         alt="Mature rosemary stems (Photograph by 360floralflaves)"
       />
@@ -95,7 +93,7 @@ tags: e-commerce
   </a>
   <a class="wa-stack wa-align-items-center wa-gap-xs wa-link-plain" href="">
     <div class="wa-frame wa-border-radius-m">
-      <img 
+      <img
         src="https://images.unsplash.com/photo-1659834742696-44573974981b?q=80&w=3542&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
         alt="Group of sage plants (Photograph by Susie Burleson)"
       />
@@ -115,7 +113,7 @@ tags: e-commerce
   <div class="wa-grid">
     <a href="" class="wa-link-plain">
       <wa-card>
-        <img slot="image" 
+        <img slot="image"
           src="https://images.unsplash.com/photo-1622445272461-c6580cab8755?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           alt="Man in a relaxed fit, white, crew neck t-shirt (Photography by Mediamodifier)"
         />
@@ -131,7 +129,7 @@ tags: e-commerce
     </a>
     <a href="" class="wa-link-plain">
       <wa-card>
-        <img slot="image" 
+        <img slot="image"
           src="https://images.unsplash.com/photo-1554568218-0f1715e72254?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           alt="Woman in a light heather t-shirt printed with sharp black ink (Photograph by Christian Bolt)"
         />
@@ -181,4 +179,4 @@ tags: e-commerce
     </a>
   </div>
 </div>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/ecommerce/product-overview.md b/docs/docs/patterns/ecommerce/product-overview.md
index 3d9a5ad0d..8d803da92 100644
--- a/docs/docs/patterns/ecommerce/product-overview.md
+++ b/docs/docs/patterns/ecommerce/product-overview.md
@@ -1,8 +1,6 @@
 ---
 title: Product Overview
 description: 'Showcase your products with overviews including images, ratings, features, options, and more.'
-parent: ecommerce
-tags: e-commerce
 ---
 
 ## Split with Image
@@ -77,7 +75,7 @@ tags: e-commerce
     </dl>
   </div>
   <div class="wa-frame wa-border-radius-m">
-    <img 
+    <img
       src="https://images.unsplash.com/photo-1600396538702-d234dbb79139?q=80&w=3833&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
       alt="Whole roasted coffee beans (Photograph by Jocelyn Morales)"
     />
@@ -362,7 +360,7 @@ tags: e-commerce
   <div class="wa-stack">
     <img class="wa-border-radius-l"
       src="https://img.fortawesome.com/cfa83f3c/icon-grid-wallpaper.png"
-      alt="Sample of 48 line-style icons" 
+      alt="Sample of 48 line-style icons"
     />
     <wa-tab-group>
       <wa-tab panel="license">License</wa-tab>
diff --git a/docs/docs/patterns/ecommerce/product-preview.md b/docs/docs/patterns/ecommerce/product-preview.md
index 33e508529..55e62233e 100644
--- a/docs/docs/patterns/ecommerce/product-preview.md
+++ b/docs/docs/patterns/ecommerce/product-preview.md
@@ -1,11 +1,9 @@
 ---
 title: Product Preview
 description: 'Give shoppers a quick look at your products as they browse with modal previews.'
-parent: ecommerce
-tags: e-commerce
 icon: preview
 ---
- 
+
 ## With Product Options
 
 ```html {.example}
@@ -16,7 +14,7 @@ icon: preview
   </div>
   <div class="wa-grid wa-gap-xl">
     <div class="wa-frame wa-border-radius-l" style="aspect-ratio: auto">
-      <img 
+      <img
         src="https://images.unsplash.com/photo-1660997351262-6c31d8a35b6c?q=80&w=2000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
         alt="Stan Smith graphic crew-neck tee in honeydew color"
       />
@@ -128,7 +126,7 @@ icon: preview
         <div class="wa-gap-xs wa-stack">
           <h4 class="wa-heading-m">About</h4>
           <p class="wa-body-s">The Champion® Crossbody Bag is crafted for the trendsetter. Its sleek silhouette, paired with a tonal branded adjustable sling strap, ensures you look effortlessly cool no matter where you go.</p>
-        </div> 
+        </div>
         <wa-divider></wa-divider>
         <div class="wa-gap-xs wa-stack">
           <h4 class="wa-heading-m">Details</h4>
@@ -150,7 +148,7 @@ icon: preview
       </div>
       <div class="wa-flank:end wa-align-items-end">
         <wa-button variant="brand" size="medium">
-          <wa-icon slot="suffix" name="cart-shopping" variant="solid"></wa-icon>Add to Cart 
+          <wa-icon slot="suffix" name="cart-shopping" variant="solid"></wa-icon>Add to Cart
         </wa-button>
         <wa-button appearance="outlined" size="medium">
           <wa-icon slot="suffix" name="arrow-right" variant="solid"></wa-icon>View Full Details
diff --git a/docs/docs/patterns/ecommerce/review.md b/docs/docs/patterns/ecommerce/review.md
index dfdf4abf3..7ad6e8235 100644
--- a/docs/docs/patterns/ecommerce/review.md
+++ b/docs/docs/patterns/ecommerce/review.md
@@ -1,8 +1,6 @@
 ---
 title: Product Reviews
 description: 'Help shoppers make informed decisions with ratings, reviews, and testimonials from your customers.'
-parent: ecommerce
-tags: e-commerce
 ---
 ## Multi column
 
@@ -174,7 +172,7 @@ tags: e-commerce
       <wa-rating label="Rating" precision="0.5" value="5" readonly></wa-rating>
       <p>I recently purchased the Modern Sofa Couch, and I couldn't be happier with my decision! The process from ordering to delivery was smooth and hassle-free</p>
     </div>
-   
+
   </div>
   <wa-divider></wa-divider>
   <div class="wa-flank wa-align-items-center">
@@ -190,7 +188,7 @@ tags: e-commerce
       <wa-rating label="Rating" precision="0.5" value="3.4" readonly></wa-rating>
       <p>The cushions are soft yet supportive, and the sectional layout gives plenty of space to stretch out. It’s perfect for movie nights or just lounging with a good book.</p>
     </div>
-    
+
   </div>
   <wa-divider></wa-divider>
   <div class="wa-flank wa-align-items-center">
@@ -206,8 +204,8 @@ tags: e-commerce
       <wa-rating label="Rating" precision="0.5" value="3.8" readonly></wa-rating>
       <p>The leather is high quality, but it’s a little firmer than I thought. That said, after sitting on it for a while, it does soften up and feels more comfortable. It’s perfect if you’re looking for a more structured seating experience.</p>
     </div>
-    
+
   </div>
   <wa-divider></wa-divider>
 </div>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/ecommerce/shopping-cart.md b/docs/docs/patterns/ecommerce/shopping-cart.md
index 36766542a..61ccfb182 100644
--- a/docs/docs/patterns/ecommerce/shopping-cart.md
+++ b/docs/docs/patterns/ecommerce/shopping-cart.md
@@ -1,8 +1,6 @@
 ---
 title: Shopping Cart
 description: 'Give shoppers an overview of selected items with shopping carts that let them edit items and proceed to checkout.'
-parent: ecommerce
-tags: e-commerce
 ---
 
 ## Two Columns with Summary Card
@@ -14,7 +12,7 @@ tags: e-commerce
     <div class="wa-stack wa-gap-xl">
       <article class="wa-flank wa-gap-xl" style="--flank-size: 8rem">
         <div class="wa-frame wa-border-radius-m">
-          <img 
+          <img
             src="https://images.unsplash.com/photo-1523381294911-8d3cead13475?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDIzNDd8&ixlib=rb-4.0.3&q=80&w=1080"
             alt=""
           />
@@ -32,7 +30,7 @@ tags: e-commerce
       </article>
       <article class="wa-flank wa-gap-xl" style="--flank-size: 8rem">
         <div class="wa-frame wa-border-radius-m">
-          <img 
+          <img
             src="https://images.unsplash.com/photo-1564859227552-81fde4a1df0b?q=80&w=2671&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
             alt=""
           />
@@ -50,7 +48,7 @@ tags: e-commerce
       </article>
       <article class="wa-flank wa-gap-xl" style="--flank-size: 8rem">
         <div class="wa-frame wa-border-radius-m">
-          <img 
+          <img
             src="https://images.unsplash.com/photo-1503341733017-1901578f9f1e?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
             alt=""
           />
@@ -205,12 +203,12 @@ tags: e-commerce
   <div class="wa-stack">
     <article class="wa-flank" style="--flank-size: 6rem">
       <div class="wa-frame wa-border-radius-m">
-        <img 
+        <img
           src="https://images.unsplash.com/photo-1704677982224-89cd6d039fa6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDEwOTJ8&ixlib=rb-4.0.3&q=80&w=1080"
           alt=""
         />
       </div>
-      <div class="wa-stack wa-gap-2xs"> 
+      <div class="wa-stack wa-gap-2xs">
         <div class="wa-split wa-gap-2xs">
           <strong>AJ1 Low</strong>
           <strong>$170.00</strong>
@@ -230,7 +228,7 @@ tags: e-commerce
           alt="(Photograph by Hamed darzi)"
         />
       </div>
-      <div class="wa-stack wa-gap-2xs"> 
+      <div class="wa-stack wa-gap-2xs">
         <div class="wa-split wa-gap-2xs">
           <strong>The Trails</strong>
           <strong>$35.00</strong>
@@ -245,12 +243,12 @@ tags: e-commerce
     <wa-divider></wa-divider>
     <article class="wa-flank" style="--flank-size: 6rem">
       <div class="wa-frame wa-border-radius-m">
-        <img 
+        <img
           src="https://images.unsplash.com/photo-1693443687750-611ad77f3aba?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           alt="(Photograph by tian dayong)"
         />
       </div>
-      <div class="wa-stack wa-gap-2xs"> 
+      <div class="wa-stack wa-gap-2xs">
         <div class="wa-split wa-gap-2xs">
           <strong>Outcast 2-pack</strong>
           <strong>$27.00</strong>
@@ -276,4 +274,4 @@ tags: e-commerce
     </wa-button>
   </div>
 </wa-drawer>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/ecommerce/store-navigation.md b/docs/docs/patterns/ecommerce/store-navigation.md
index 3cfb62d10..4a9c32503 100644
--- a/docs/docs/patterns/ecommerce/store-navigation.md
+++ b/docs/docs/patterns/ecommerce/store-navigation.md
@@ -1,7 +1,6 @@
 ---
 title: Store Navigation
 description: 'Help shoppers explore categories and find products with all of the links they need to navigate your store.'
-parent: ecommerce
 unlisted: true
 ---
 
@@ -82,4 +81,4 @@ unlisted: true
 
 
 </style>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/information/index.njk b/docs/docs/patterns/information/index.njk
index c6ae2f61e..4a95f49d4 100644
--- a/docs/docs/patterns/information/index.njk
+++ b/docs/docs/patterns/information/index.njk
@@ -1,26 +1,8 @@
 ---
 title: Information
 description: ''
-layout: page
+parent: patterns
+layout: overview
+override:tags: []
+listChildren: true
 ---
-
-{% set infoPages = collections.information %}
-
-<section class="index-grid">
-    {%- for page in infoPages -%}
-
-    <a href="{{ page.url }}"{{ page.data.keywords | attr('data-keywords') }}>
-        <wa-card with-header>
-            <div slot="header">
-                {% include "svgs/" + (page.data.icon or "thumbnail-placeholder") + ".njk" %}
-            </div>
-            <span class="page-name">{{ page.data.title }}</span>
-            {% if pageSubtitle -%}
-            <div class="wa-caption-s">{{ pageSubtitle }}</div>
-            {%- endif %}
-        </wa-card>
-    </a>
-
-    {%- endfor -%}
-
-</section>
diff --git a/docs/docs/patterns/information/information.json b/docs/docs/patterns/information/information.json
new file mode 100644
index 000000000..6612f3ac9
--- /dev/null
+++ b/docs/docs/patterns/information/information.json
@@ -0,0 +1,3 @@
+{
+  "tags": ["information"]
+}
diff --git a/docs/docs/patterns/information/newsletter.md b/docs/docs/patterns/information/newsletter.md
index c423029e1..818fed5ec 100644
--- a/docs/docs/patterns/information/newsletter.md
+++ b/docs/docs/patterns/information/newsletter.md
@@ -1,11 +1,10 @@
 ---
 title: Newsletter
 description: 'Empower your customers to view past purchases and track upcoming orders with comprehensive order histories.'
-parent: information
-tags: information
 ---
 
 ### Newsletter signup
+
 ```html{.example}
 <wa-card class="news-letter-signup">
   <h2>Subscribe to our Newsletter</h2>
@@ -31,4 +30,4 @@ tags: information
     }
   }
 </style>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/information/paywall.md b/docs/docs/patterns/information/paywall.md
index 6d709a93f..4f4432132 100644
--- a/docs/docs/patterns/information/paywall.md
+++ b/docs/docs/patterns/information/paywall.md
@@ -1,8 +1,6 @@
 ---
 title: Paywall
 description: 'Empower your customers to view past purchases and track upcoming orders with comprehensive order histories.'
-parent: information
-tags: information
 ---
 
 ### Paywall
@@ -24,4 +22,4 @@ tags: information
 </script>
 
 </div>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/information/social-share.md b/docs/docs/patterns/information/social-share.md
index e9269fe1f..d8e2dfdce 100644
--- a/docs/docs/patterns/information/social-share.md
+++ b/docs/docs/patterns/information/social-share.md
@@ -1,8 +1,6 @@
 ---
 title: Social Share
 description: 'Empower your customers to view past purchases and track upcoming orders with comprehensive order histories.'
-parent: information
-tags: information
 ---
 
 ## Examples