Automate all overviews, fix bugs with filtering

docs/_includes/grouped-pages.njk

@@ -4,7 +4,7 @@
 {% for category, pages in allPages | groupByTags(categories) -%}
   <h2 class="index-category">{{ category | getCategoryTitle(categories) }}</h2>
     {%- for page in pages -%}
-      {%- if not page.data.parent -%}
+      {%- if not page.data.parent or listChildren -%}
         {% include "page-card.njk" %}
       {%- endif -%}
     {%- endfor -%}

docs/_layouts/overview.njk

@@ -0,0 +1,25 @@
+---
+layout: page-outline
+tags: ["overview"]
+---
+{% set forTag = forTag or (page.url | split('/') | last) %}
+{% if description %}
+  <div class="index-summary">{{ description | markdown | safe }}</div>
+{% endif %}
+
+<div id="block-filter">
+  <wa-input type="search" placeholder="Search {{ title }}" clearable autofocus>
+	<wa-icon slot="prefix" name="search"></wa-icon>
+  </wa-input>
+</div>
+
+{% set allPages = collections[forTag] %}
+{% include "grouped-pages.njk" %}
+
+<link href="/assets/styles/filter.css" rel="stylesheet">
+<script type="module" src="/assets/scripts/filter.js"></script>
+
+{% if content | trim %}
+<br> {# Temp fix for spacing issue #}
+{{ content | safe }}
+{% endif %}

docs/_utils/filters.js

@@ -38,8 +38,12 @@ export function getTitleFromUrl(url, collection) {
   return item?.data.title || '';
 }
 
+export function split(text, separator) {
+  return (text + '').split(separator).filter(Boolean);
+}
+
 export function breadcrumbs(url, { withCurrent = false } = {}) {
-  const parts = url.split('/').filter(Boolean);
+  const parts = split(url, '/');
   const ret = [];
 
   while (parts.length) {

docs/assets/scripts/filter.js

@@ -0,0 +1,25 @@
+function updateResults(input) {
+  const filter = input.value.toLowerCase().trim();
+  let filtered = Boolean(filter);
+
+  for (let grid of document.querySelectorAll('.index-grid')) {
+    grid.classList.toggle('filtered', filtered);
+
+    for (let item of grid.querySelectorAll('a:has(> wa-card)')) {
+      let isMatch = true;
+
+      if (filter) {
+        const content = item.textContent.toLowerCase() + ' ' + (item.getAttribute('data-keywords') + ' ');
+        isMatch = content.includes(filter);
+      }
+
+      item.hidden = !isMatch;
+    }
+  }
+}
+
+document.documentElement.addEventListener('wa-input', e => {
+  if (e.target?.matches('#block-filter wa-input')) {
+    updateResults(e.target);
+  }
+});

docs/assets/styles/filter.css

@@ -0,0 +1,37 @@
+wa-card#drawer-card::part(header) {
+  --spacing: 0;
+  justify-content: flex-end;
+  overflow: hidden;
+}
+
+#block-filter {
+  margin-block-end: var(--wa-space-xl);
+}
+
+.index-grid.filtered {
+  h2 {
+    /* Hide headings while filtering */
+    display: none;
+  }
+
+  &:not(:has(> a:not([hidden]))) {
+    /* We’re filtering and there are no results */
+
+    &::before {
+      content: var(--empty-message);
+      grid-column: 1 / -1;
+      color: var(--wa-color-on-quiet);
+      font-style: italic;
+      font-weight: var(--wa-font-weight-action);
+    }
+
+    /* Show empty state when there's a search filter and no results */
+    &[data-empty] {
+      --empty-message: attr(data-empty);
+    }
+
+    &:not([data-empty]) {
+      --empty-message: 'No results';
+    }
+  }
+}

docs/docs/components/index.njk

@@ -1,7 +1,7 @@
 ---
 title: Components
 description: Components are the essential building blocks to create intuitive, cohesive experiences. Browse the library of customizable, framework-friendly web components included in Web Awesome.
-layout: page-outline
+layout: overview
 categories:
   - actions
   - feedback: 'Feedback & Status'
@@ -12,70 +12,3 @@ categories:
   - helpers: 'Utilities'
 override:tags: []
 ---
-
-<div id="component-filter">
-  <wa-input type="search" placeholder="Search components" clearable autofocus></wa-input>
-</div>
-
-{% set allPages = collections.components %}
-{% include "grouped-pages.njk" %}
-
-<div id="component-filter-empty" hidden>
-  No results
-</div>
-
-<script type="module">
-  const container = document.getElementById('component-filter');
-  const empty = document.getElementById('component-filter-empty');
-  const grid = document.getElementById('content');
-  const input = container.querySelector('wa-input');
-
-  function updateResults() {
-    const filter = input.value.toLowerCase().trim();
-
-    // Hide headings while filtering
-    grid.querySelectorAll('h2').forEach(heading => {
-      heading.hidden = filter === '' ? false : true;
-    });
-
-    // Show matching components
-    grid.querySelectorAll('a:has(> wa-card)').forEach(link => {
-      console.log(link);
-      const content = link.textContent.toLowerCase();
-      const keywords = link.getAttribute('data-keywords') || '';
-      const isMatch = filter === '' || (content + keywords).includes(filter);
-      link.hidden = !isMatch;
-    });
-
-    // Show empty state when there's a search filter and no results
-    if (filter !== '' && grid.querySelector('a:not([hidden])') === null) {
-      empty.hidden = false;
-    } else {
-      empty.hidden = true;
-    }
-  }
-
-  input.addEventListener('wa-input', updateResults);
-</script>
-
-<style>
-  wa-card#drawer-card::part(header) {
-    --spacing: 0;
-    justify-content: flex-end;
-    overflow: hidden;
-  }
-
-  #component-filter {
-    margin-block-end: var(--wa-space-xl);
-  }
-
-  #component-filter-empty {
-    border: dashed var(--wa-border-width-m) var(--wa-color-neutral-border-quiet);
-    border-radius: var(--wa-border-radius-l);
-    font-size: var(--wa-font-size-l);
-    color: var(--wa-color-text-quiet);
-    text-align: center;
-    padding-block: var(--wa-space-2xl);
-    margin-block-start: 0
-  }
-</style>

docs/docs/layout.njk

@@ -1,27 +1,7 @@
 ---
 title: Layout
-description: Browse Web Awesome's components and utilities for creating responsive web layouts.
-layout: page-outline
+description: 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.
+layout: overview
 categories: ["components", "utilities"]
+override:tags: []
 ---
-
-<style>
-  wa-page > main {
-    max-width: 120ch;
-    margin-inline: auto;
-  }
-  .index-grid wa-card::part(header) {
-    background-color: var(--wa-color-neutral-fill-quiet);
-    border-bottom: none;
-  }
-  wa-card .component-name,
-  wa-card .page-name {
-    font-size: var(--wa-font-size-s);
-    font-weight: var(--wa-font-weight-action);
-  }
-</style>
-
-<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>
-
-{% set allPages = collections.layout %}
-{% include "grouped-pages.njk" %}

docs/docs/native/index.njk

@@ -1,7 +1,7 @@
 ---
 title: Native Styles
 description: Native Styles use your theme to style native HTML elements to match the look and feel of Web Awesome components.
-layout: page-outline
+layout: overview
 categories: ['forms', 'apps', 'content']
 override:tags: []
 ---
@@ -10,13 +10,7 @@ override:tags: []
 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.
-{% endmarkdown %}
 
-{% set allPages = collections.native %}
-{% include "grouped-pages.njk" %}
-
-<br> {# Temp fix for spacing issue #}
-{% markdown %}
 ## Installation
 
 To use all Web Awesome page styles (including [utilities](/docs/utilities/)), include the following stylesheet in your project:

docs/docs/patterns/index.njk

@@ -1,5 +1,8 @@
 ---
 title: Patterns
-description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
-layout: page-outline
----
+description: Patterns are reusable solutions to common design problems.
+layout: overview
+categories: ["e-commerce"]
+listChildren: true
+override:tags: []
+---

docs/docs/theming/index.njk

@@ -1,10 +1,6 @@
 ---
 title: Theming
-description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
+description: A theme is a collection of pre-defined CSS custom properties that control global styles from color to shadows. These custom properties thread through all Web Awesome components for a consistent look and feel.
+layout: overview
 override:tags: []
 ---
-
-<p class="index-summary">A theme is a collection of pre-defined CSS custom properties that control global styles from color to shadows. These custom properties thread through all Web Awesome components for a consistent look and feel.</p>
-
-{% set allPages = collections.theming %}
-{% include "grouped-pages.njk" %}

docs/docs/theming/theming.json

@@ -1,4 +1,7 @@
 {
   "layout": "page-outline.njk",
-  "tags": ["theming"]
+  "tags": ["theming"],
+  "eleventyComputed": {
+    "icon": "theming/{{ page.fileSlug }}"
+  }
 }

docs/docs/utilities/index.njk

@@ -2,16 +2,11 @@
 title: Style Utilities
 description: Web Awesome provides a few style utilities to customize styles in ways that cannot necessarily be described by semantic HTML.
   Some of these correspond to component attributes, but we also expose utility classes so you can apply these styles to native elements too.
-layout: page-outline
-override:tags: []
+layout: overview
 categories: ["layout"]
+override:tags: []
 ---
 
-{% set allPages = collections.utilities %}
-{% include "grouped-pages.njk" %}
-
-
-<br> {# Temp fix for spacing issue #}
 {% markdown %}
 ## Installation