Automatic util listing on sidebar

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 %}

docs/docs/components/components.json

@@ -1,3 +1,4 @@
 {
-  "layout": "component.njk"
+  "layout": "component.njk",
+  "tags": ["components"]
 }

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
 ---

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."

docs/docs/utilities/utilities.json

@@ -1,3 +1,4 @@
 {
-  "layout": "page-outline"
+  "layout": "page-outline",
+  "tags": ["utilities"]
 }