From 68e53a4ef137420ca2a9b72f3aaa1899f01ec7ec Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Thu, 19 Dec 2024 12:39:56 -0500
Subject: [PATCH] Automatic util listing on sidebar

---
 docs/_includes/sidebar.njk              | 46 ++++++++++++++-----------
 docs/docs/components/components.json    |  3 +-
 docs/docs/components/page.md            |  2 +-
 docs/docs/components/visually-hidden.md |  1 +
 docs/docs/utilities/utilities.json      |  3 +-
 5 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/docs/_includes/sidebar.njk b/docs/_includes/sidebar.njk
index a41606e38..c4e00787d 100644
--- a/docs/_includes/sidebar.njk
+++ b/docs/_includes/sidebar.njk
@@ -58,30 +58,47 @@
   </h2>
   <ul>
     {% for page in collections.native | sort %}
+    {% if page.fileSlug != 'native' and not page.unlisted %}
     <li>
       <a href="/docs/native/{{ page.fileSlug }}">{{ page.data.title }}</a>
     </li>
+    {% endif %}
+    {% endfor %}
+  </ul>
+</wa-details>
+
+<wa-details {{ 'open' if '/utilities/' in page.url }}>
+  <h2 slot=summary>
+    <a href="/docs/utilities/" title="Overview">Style utilities
+      <wa-icon name="grid-2"></wa-icon>
+    </a>
+  </h2>
+  <ul>
+    {% for page in collections.utilities | sort %}
+    {% if page.fileSlug != 'utilities' and not page.unlisted %}
+    <li>
+      <a href="/docs/utilities/{{ page.fileSlug }}">{{ page.data.title }}</a>
+    </li>
+    {% endif %}
     {% endfor %}
   </ul>
 </wa-details>
 
 {# Layout #}
-{% if not isAlpha %}
 <h2>
   <a href="/docs/layout" title="Overview">Layout
     <wa-icon name="grid-2"></wa-icon>
   </a>
 </h2>
 <ul>
-  <li><a href="/docs/components/page">Page</a></li>
-  <li><a href="/docs/layout/cluster">Cluster</a></li>
-  <li><a href="/docs/layout/flank">Flank</a></li>
-  <li><a href="/docs/layout/frame">Frame</a></li>
-  <li><a href="/docs/layout/grid">Grid</a></li>
-  <li><a href="/docs/layout/split">Split</a></li>
-  <li><a href="/docs/layout/stack">Stack</a></li>
+  {% for page in collections.layout | sort %}
+    {% if page.fileSlug != 'layout' and not page.unlisted %}
+    <li>
+      <a href="{{ page.url }}">{{ page.data.title }}</a>
+    </li>
+    {% endif %}
+  {% endfor %}
 </ul>
-{% endif %}
 
 {# Patterns #}
 {% if not isAlpha %}
@@ -137,14 +154,3 @@
     <a href="/docs/theming/component-groups">Component Groups</a>
   </li>
 </ul>
-
-{# Style Utilities #}
-{% if not isAlpha %}
-<h2>Style Utilities</h2>
-<ul>
-  <li><a href="/docs/style-utilities/align-items">Align Items</a></li>
-  <li><a href="/docs/style-utilities/border-radius">Border Radius</a></li>
-  <li><a href="/docs/style-utilities/gap">Gap</a></li>
-  <li><a href="/docs/style-utilities/text">Text</a></li>
-</ul>
-{% endif %}
diff --git a/docs/docs/components/components.json b/docs/docs/components/components.json
index 09bdf2af9..b6a308a6c 100644
--- a/docs/docs/components/components.json
+++ b/docs/docs/components/components.json
@@ -1,3 +1,4 @@
 {
-  "layout": "component.njk"
+  "layout": "component.njk",
+  "tags": ["components"]
 }
diff --git a/docs/docs/components/page.md b/docs/docs/components/page.md
index bcb8d2f77..21afd37b5 100644
--- a/docs/docs/components/page.md
+++ b/docs/docs/components/page.md
@@ -1,7 +1,7 @@
 ---
 title: Page
 description: Pages offer an easy way to scaffold entire page layouts using minimal markup.
-tags: component
+tags: ["component", "layout"]
 isPro: true
 order: 1
 ---
diff --git a/docs/docs/components/visually-hidden.md b/docs/docs/components/visually-hidden.md
index 851fd0bd6..4542c6b89 100644
--- a/docs/docs/components/visually-hidden.md
+++ b/docs/docs/components/visually-hidden.md
@@ -2,6 +2,7 @@
 title: Visually Hidden
 description: The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
 tags: component
+noAlpha: true
 ---
 
 According to [The A11Y Project](https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/), "there are real world situations where visually hiding content may be appropriate, while the content should remain available to assistive technologies, such as screen readers. For instance, hiding a search field's label as a common magnifying glass icon is used in its stead."
diff --git a/docs/docs/utilities/utilities.json b/docs/docs/utilities/utilities.json
index 72c8a991b..af7dbba50 100644
--- a/docs/docs/utilities/utilities.json
+++ b/docs/docs/utilities/utilities.json
@@ -1,3 +1,4 @@
 {
-  "layout": "page-outline"
+  "layout": "page-outline",
+  "tags": ["utilities"]
 }