Enable searching by term and alternate terms on glossary

src/_sass/_site.scss

@@ -16,6 +16,7 @@
 @use 'components/card';
 @use 'components/code';
 @use 'components/content';
+@use 'components/filter-search';
 @use 'components/cookie-notice';
 @use 'components/footer';
 @use 'components/form';

src/_sass/components/_filter-search.scss

@@ -0,0 +1,62 @@
+#filter-and-search {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.75rem;
+  margin-block-start: 1rem;
+  margin-block-end: 1rem;
+
+  &.hidden {
+    display: none;
+  }
+
+  .search-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    gap: 0.5rem;
+
+    .search-wrapper {
+      display: flex;
+      align-items: center;
+      width: 100%;
+
+      border: 1px solid rgba(0, 0, 0, .25);
+      border-radius: 1rem;
+      height: 3rem;
+      padding: 0 .5rem;
+
+      &:has(:focus-visible) {
+        outline: 2px solid var(--focus-outline-color);
+        border-color: transparent;
+      }
+
+      .leading-icon {
+        padding-left: 0.25rem;
+        user-select: none;
+      }
+
+      input {
+        background: none;
+        width: 100%;
+        font-size: 1rem;
+        cursor: text;
+
+        &:focus {
+          outline: none;
+        }
+
+        &::-webkit-search-cancel-button {
+          display: none;
+        }
+      }
+    }
+  }
+
+  + section.content-search-results {
+    margin-block-start: 0.5rem;
+    margin-block-end: 1rem;
+  }
+}

src/_sass/components/_linter-rules.scss

@@ -3,14 +3,11 @@
 
 body.linter-rules {
   --chip-container-color: transparent;
-  --chip-border-color: rgba(0, 0, 0, .5);
+  --chip-border-color: rgba(0, 0, 0, .35);
   --chip-selected-container-color: rgb(194 229 255);
   --chip-text-color: #3a3a3a;
 
-  --text-field-border-color: rgba(0, 0, 0, .5);
-  --text-field-text-color: #3a3a3a;
-
-  --menu-border-color: rgba(0, 0, 0, .5);
+  --menu-border-color: rgba(0, 0, 0, .35);
   --menu-container-color: #ffffff;
   --menu-item-container-color: transparent;
   --menu-item-selected-container-color: rgb(194 229 255);
@@ -20,20 +17,6 @@ body.linter-rules {
   --card-min-width: 19rem;
   --card-text-color: #3a3a3a;
 
-  #filter-and-search {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 0.75rem;
-    margin-block-start: 1rem;
-    margin-block-end: 1rem;
-
-    &.hidden {
-      display: none;
-    }
-  }
-
   .filter-group {
     display: flex;
     align-items: center;
@@ -114,6 +97,11 @@ body.linter-rules {
       @include interaction-style(8%);
     }
 
+    &:focus-visible {
+      outline: 2px solid var(--focus-outline-color);
+      border-color: transparent;
+    }
+
     .chip-icon {
       align-self: center;
       fill: currentcolor;
@@ -139,49 +127,6 @@ body.linter-rules {
     }
   }
 
-  .search-row {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: 100%;
-    gap: 0.5rem;
-
-    .search-wrapper {
-      display: flex;
-      align-items: center;
-      width: 100%;
-
-      border: 1px solid var(--text-field-border-color);
-      border-radius: 20px;
-      height: 3rem;
-      padding: 0 .5rem;
-
-      .leading-icon {
-        padding-left: 0.25rem;
-        user-select: none;
-      }
-
-      input {
-        background: none;
-        width: 100%;
-        font-size: 1rem;
-        cursor: text;
-
-        &:focus {
-          outline: none;
-        }
-
-        &::-webkit-search-cancel-button {
-          display: none;
-        }
-      }
-    }
-  }
-
-  section.content-search-results {
-    margin: 0.5rem 0 1rem;
-  }
-
   .button-menu-wrapper {
     position: relative;
 
@@ -265,9 +210,4 @@ body.linter-rules {
       }
     }
   }
-
-  .search-wrapper:has(:focus-visible), .chip:focus-visible {
-    outline: 2px solid var(--focus-outline-color);
-    border-color: transparent;
-  }
 }

src/content/assets/js/glossary.js

@@ -0,0 +1,45 @@
+function _setupFiltering() {
+  const filterAndSearch = document.getElementById('filter-and-search');
+  const searchContent = document.getElementById('content-search-results');
+  if (filterAndSearch === null || searchContent === null) return;
+
+  const searchInput = filterAndSearch.querySelector('.search-wrapper input');
+  if (searchInput === null) return;
+
+  filterAndSearch.classList.remove('hidden');
+  const cards = searchContent.querySelectorAll('.card');
+
+  function filterCards() {
+    const searchTerm = searchInput.value.trim().toLowerCase();
+
+    cards.forEach(card => {
+      const matchPartially = (card.dataset.partialMatches ?? '').split(',');
+      const matchExactly = (card.dataset.fullMatches ?? '').split(',');
+
+      for (const match of matchPartially) {
+        if (match.includes(searchTerm)) {
+          card.classList.remove('hidden');
+          return;
+        }
+      }
+
+      for (const match of matchExactly) {
+        if (match === searchTerm) {
+          card.classList.remove('hidden');
+          return;
+        }
+      }
+
+      card.classList.add('hidden');
+    });
+  }
+
+  searchInput.addEventListener('input', filterCards);
+  filterCards();
+}
+
+if (document.readyState !== 'loading') {
+  _setupFiltering();
+} else {
+  document.addEventListener('DOMContentLoaded', _setupFiltering);
+}

src/content/resources/glossary.md

@@ -3,6 +3,7 @@ title: Glossary
 description: A glossary reference for terminology used across dart.dev.
 body_class: glossary-page
 toc: false
+js: [{url: '/assets/js/glossary.js', defer: true}]
 ---
 
 {% comment %}
@@ -11,15 +12,26 @@ toc: false
 
 The following are definitions of terms used across the Dart documentation.
 
-{% assign sorted_terms = glossary | sort: "term" %}
+<section id="filter-and-search" class="hidden">
+  <div class="search-row">
+    <div class="search-wrapper">
+      <span class="material-symbols leading-icon" aria-hidden="true">search</span>
+      <input type="search" placeholder="Search terms..." aria-label="Search terms by name...">
+    </div>
+  </div>
+</section>
+
 
+<section id="content-search-results">
 <div class="card-list">
 
+{% assign sorted_terms = glossary | sort: "term" %}
 {% for term in sorted_terms -%}
 
 {% assign cardId = term.id | default: term.term | slugify -%}
 {% assign contentId = cardId | append: '-content' -%}
-<div class="card outlined-card glossary-card expandable-card" id="{{cardId}}">
+<div class="card outlined-card glossary-card expandable-card" id="{{cardId}}"
+  data-partial-matches="{{term.term | downcase}}" data-full-matches="{{term.alternate | default: '' | join: ',' | downcase}}">
 <div class="card-header">
 <h2 class="card-title">{{term.term}}</h2>
 
@@ -93,3 +105,4 @@ The following are definitions of terms used across the Dart documentation.
 
 {% endfor -%}
 </div>
+</section>