oddbird · wlonk · Nov 16, 2017 · Nov 17, 2017 · Nov 17, 2017 · Nov 17, 2017
diff --git a/assets/js/base.js b/assets/js/base.js
@@ -151,8 +151,27 @@ export const initializeNav = () => {
         nav.attr('aria-expanded', btn.attr('aria-pressed'));
       }
     };
-
     screenTest(mql);
     mql.addListener(screenTest);
   }
 };
+
+const filterSiblings = (selector, filter) => {
+  $(`${selector} ~ section`).each((idx, node) => {
+    if (filter === '' || node.id.includes(filter)) {
+      $(node).show();
+    } else {
+      $(node).hide();
+    }
+  });
+};
+
+export const initializePageFilters = () => {
+  $('#page-filter').submit(event => {
+    event.preventDefault();
+    return false;
+  });
+  $('#page-filter input').keyup(() => {
+    filterSiblings('#page-filter', $('#page-filter input').val());
+  });
+};
diff --git a/assets/js/init.js b/assets/js/init.js
@@ -9,4 +9,5 @@ $(() => {
   base.initializeToggles();
   base.initializeIframes();
   base.initializeNav();
+  base.initializePageFilters();
 });
diff --git a/dist/js/base.js b/dist/js/base.js
diff --git a/dist/js/init.js b/dist/js/init.js
diff --git a/docs/api_json-export.html b/docs/api_json-export.html
@@ -250,6 +250,12 @@ <h3 data-sassdoc="nav-title">
         <div data-sassdoc-page="api_json-export">
 
 
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+
 
 
 

diff --git a/docs/assets/js/base.js b/docs/assets/js/base.js
diff --git a/docs/assets/js/init.js b/docs/assets/js/init.js
diff --git a/docs/config-colors.html b/docs/config-colors.html
@@ -363,6 +363,12 @@ <h4 class="param-title">
 </section>
 
 
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+
 
 
 

diff --git a/docs/config-fonts.html b/docs/config-fonts.html
@@ -363,6 +363,12 @@ <h4 class="param-title">
 </section>
 
 
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+
 
 
 

diff --git a/docs/config-scale.html b/docs/config-scale.html
@@ -250,6 +250,12 @@ <h3 data-sassdoc="nav-title">
         <div data-sassdoc-page="config-scale">
 
 
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+
 
 
 

diff --git a/docs/config-utils.html b/docs/config-utils.html
@@ -325,6 +325,12 @@ <h1 id="herman-config-private-helpers">Herman Config: Private<span class="widont
 </section>
 
 
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+
 
 
 

diff --git a/docs/config-z-index.html b/docs/config-z-index.html
@@ -363,6 +363,12 @@ <h4 class="param-title">
 </section>
 
 
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+
 
 
 

diff --git a/docs/config_api-utilities.html b/docs/config_api-utilities.html
@@ -328,6 +328,12 @@ <h1 id="private-api-utilities">Private API Utilities</h1>
 </section>
 
 
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+
 
 
 

diff --git a/docs/demo_colors.html b/docs/demo_colors.html
@@ -250,6 +250,12 @@ <h3 data-sassdoc="nav-title">
         <div data-sassdoc-page="demo_colors">
 
 
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+
 
 
 

diff --git a/docs/demo_examples.html b/docs/demo_examples.html
@@ -250,6 +250,12 @@ <h3 data-sassdoc="nav-title">
         <div data-sassdoc-page="demo_examples">
 
 
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+
 
 
 

diff --git a/docs/demo_fonts.html b/docs/demo_fonts.html
@@ -250,6 +250,12 @@ <h3 data-sassdoc="nav-title">
         <div data-sassdoc-page="demo_fonts">
 
 
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+
 
 
 

diff --git a/docs/demo_icons.html b/docs/demo_icons.html
@@ -250,6 +250,12 @@ <h3 data-sassdoc="nav-title">
         <div data-sassdoc-page="demo_icons">
 
 
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+
 
 
 

diff --git a/docs/demo_sizes.html b/docs/demo_sizes.html
@@ -250,6 +250,12 @@ <h3 data-sassdoc="nav-title">
         <div data-sassdoc-page="demo_sizes">
 
 
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+
 
 
 

diff --git a/docs/demo_test-sassdoc.html b/docs/demo_test-sassdoc.html
@@ -329,6 +329,12 @@ <h1 id="sassdoc-annotations">SassDoc Annotations</h1>
 </section>
 
 
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+
 
 
 

diff --git a/docs/style-code.html b/docs/style-code.html
@@ -363,6 +363,12 @@ <h4 class="param-title">
 </section>
 
 
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+
 
 
 

diff --git a/docs/style-icons.html b/docs/style-icons.html
@@ -392,6 +392,12 @@ <h3 class="item-subtitle">
 </section>
 
 
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+
 
 
 

diff --git a/docs/style-nav.html b/docs/style-nav.html
@@ -325,6 +325,12 @@ <h1 id="herman-navigation-component">Herman Navigation Component</h1>
 </section>
 
 
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+
 
 
 

diff --git a/docs/style-sections.html b/docs/style-sections.html
@@ -325,6 +325,12 @@ <h1 id="herman-section-arrow-component">Herman Section-Arrow Component</h1>
 </section>
 
 
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+
 
 
 

diff --git a/docs/style-typography.html b/docs/style-typography.html
@@ -325,6 +325,12 @@ <h1 id="herman-typography">Herman Typography</h1>
 </section>
 
 
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+
 
 
 

diff --git a/templates/filter_form.j2 b/templates/filter_form.j2
@@ -0,0 +1,3 @@
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
diff --git a/templates/group.njk b/templates/group.njk
@@ -13,6 +13,7 @@
 {% endblock %}
 
 {% block main %}
+  {% include 'filter_form.j2' %}
   {% for item in items %}
     {% set type = item.context.type %}
     {% include 'item/_item.njk' %}
-Original file line number
+Diff line change
@@ Expand Up / @@ -250,6 +250,12 @@ <h3 data-sassdoc="nav-title"> @@
             <div data-sassdoc-page="api_json-export">
+    <form id="page-filter">
+      <input placeholder="filter">
+    </form>
@@ Expand Down @@