From 43a117951365da8fce7606da512b479e3b6d55f5 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Fri, 20 Dec 2024 12:00:43 -0500
Subject: [PATCH] Automate layout page listing

---
 docs/_includes/page-card.njk        |  2 +
 docs/docs/components/cheatsheet.njk |  1 +
 docs/docs/layout.md                 | 70 ++++++-----------------------
 3 files changed, 16 insertions(+), 57 deletions(-)

diff --git a/docs/_includes/page-card.njk b/docs/_includes/page-card.njk
index e0d3c5562..6dc96847e 100644
--- a/docs/_includes/page-card.njk
+++ b/docs/_includes/page-card.njk
@@ -1,3 +1,4 @@
+ {%- if not page.data.unlisted -%}
  <a href="{{ page.url }}">
 	<wa-card with-header>
 		<div slot="header">
@@ -6,3 +7,4 @@
 		<span class="page-name">{{ page.data.title }}</span>
 	</wa-card>
 </a>
+{%- endif -%}
diff --git a/docs/docs/components/cheatsheet.njk b/docs/docs/components/cheatsheet.njk
index 73d5a2013..cac8444f0 100644
--- a/docs/docs/components/cheatsheet.njk
+++ b/docs/docs/components/cheatsheet.njk
@@ -1,6 +1,7 @@
 ---
 title: Component Cheatsheet
 layout: docs
+unlisted: true
 ---
 
 <style>
diff --git a/docs/docs/layout.md b/docs/docs/layout.md
index d6dac764e..3cbde2f8d 100644
--- a/docs/docs/layout.md
+++ b/docs/docs/layout.md
@@ -13,7 +13,8 @@ layout: page-outline
     background-color: var(--wa-color-neutral-fill-quiet);
     border-bottom: none;
   }
-  wa-card .component-name {
+  wa-card .component-name,
+  wa-card .page-name {
     font-size: var(--wa-font-size-s);
     font-weight: var(--wa-font-weight-action);
   }
@@ -23,61 +24,16 @@ layout: page-outline
 
 <div class="index-grid wa-grid wa-gap-2xl">
   <h2 class="index-category wa-span-grid">Components</h2>
-  <a href="/docs/components/page">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/thumbnail-placeholder.njk" %}
-      </div>
-      <span class="component-name">Page</span>
-    </wa-card>
-  </a>
+  {%- 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>
-  <a href="/docs/layout/cluster">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/layout/cluster.njk" %}
-      </div>
-      <span class="component-name">Cluster</span>
-    </wa-card>
-  </a>
-  <a href="/docs/layout/flank">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/layout/flank.njk" %}
-      </div>
-      <span class="component-name">Flank</span>
-    </wa-card>
-  </a>
-  <a href="/docs/layout/frame">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/layout/frame.njk" %}
-      </div>
-      <span class="component-name">Frame</span>
-    </wa-card>
-  </a>
-  <a href="/docs/layout/grid">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/layout/grid.njk" %}
-      </div>
-      <span class="component-name">Grid</span>
-    </wa-card>
-  </a>
-  <a href="/docs/layout/split">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/layout/split.njk" %}
-      </div>
-      <span class="component-name">Split</span>
-    </wa-card>
-  </a>
-  <a href="/docs/layout/stack">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/layout/stack.njk" %}
-      </div>
-      <span class="component-name">Stack</span>
-    </wa-card>
-  </a>
+  {%- for page in collections.utilities | sort -%}
+  {%- if 'layout' in page.data.tags -%}
+    {% include "page-card.njk" %}
+  {%- endif -%}
+  {%- endfor -%}
 </div>