add version filter to assets (#832)

Co-authored-by: Carter Anderson <[email protected]> Co-authored-by: Mikkel Rasmussen <[email protected]>
bevyengine · Jan 2, 2024 · 7b032d7 · 7b032d7
1 parent 15c5f1d
commit 7b032d7
Show file tree

Hide file tree

Showing 3 changed files with 159 additions and 57 deletions.
diff --git a/sass/pages/_assets.scss b/sass/pages/_assets.scss
@@ -3,6 +3,10 @@
         margin-bottom: 20px;
     }
 
+    .assets-filters {
+        margin-bottom: 20px;
+    }
+
     .asset-section {
         font-size: 2.4rem;
         margin: 0 0 20px;
@@ -31,4 +35,17 @@
             }
         }
     }
-}
+
+    .asset-version-select {
+        border-radius: $border-radius;
+        border: 2px solid #383838;
+        background-color: $syntax-theme-background;
+        font-size: 1.0rem;
+        padding: .4rem;
+
+        &:hover {
+            background-color: $card-hover-background;
+            border: 2px solid #6b6b6b;
+        }
+    }
+}
diff --git a/static/assets.js b/static/assets.js
@@ -1,18 +1,38 @@
+let filters_state = {
+    search_terms: [''],
+    version: '*'
+}
+
+const check_filters = (filters) => (node) => {
+    let results = filters.map(filter => filter(node));
+    return results.every(val => val)
+}
+
+const pass_filters = check_filters([
+    filter_search_terms,
+    filter_version
+]);
+
+function filter_assets() {
+    document.querySelectorAll('.asset-card').forEach(asset => {
+        asset.parentElement.style.display = pass_filters(asset) ? 'block' : 'none'
+    })
+}
+
+//  ------------    Search terms Filtering
+
 const searchElement = document.querySelector('#assets-search')
 
 searchElement.addEventListener("input", (_) => {
-    filterSearchTerms()
+    filters_state.search_terms = searchElement.value.toLowerCase().split(' ');
+    filter_assets()
     hideEmptySubSections()
     hideEmptySections()
 })
 
-function filterSearchTerms() {
-    const searchTerms = searchElement.value.toLowerCase().split(' ')
-    for (const asset of document.querySelectorAll('.asset-card')) {
-        const fullText = asset.text.toLowerCase()
-        const searchMatch = searchTerms.every((term) => fullText.includes(term))
-        asset.parentElement.style.display = searchMatch ? 'block' : 'none'
-    }
+function filter_search_terms(asset_node) {
+    const fullText = asset_node.text.toLowerCase()
+    return filters_state.search_terms.every((term) => fullText.includes(term))
 }
 
 function hideEmptySubSections() {
@@ -36,4 +56,61 @@ function hideEmptySections() {
         }
         section.style.display = 'none'
     })
-}
+}
+
+//  ------------    Version Filtering
+const version_always_show = ['*', 'main', '']
+
+function sort_versions(a, b) {
+    let a1 = a.split('.').map(i => i.padStart(3, '0')).join('');
+    let b1 = b.split('.').map(i => i.padStart(3, '0')).join('');
+    return b1 - a1;
+}
+
+function normalize_version(raw_version) {
+    let version = raw_version?.replace(/^[^\d]+/, '').replace(/[^\d]+$/, '');
+    let normalized_version = version ? Array.from({ ...version.split('.'), length: 3 }, (v, i) => v ?? 0).join('.') : '*'
+    return normalized_version;
+}
+
+function filter_version(asset_node) {
+    let name = asset_node.querySelector('.asset-card__title').innerHTML;
+
+    let tag = asset_node.querySelector('.asset-card__tags .asset-card__bevy-versions .asset-card__tag');
+    if (filters_state.version === 'all_versions') {
+        return true
+    }
+    else if (tag) {
+        let raw_item_value = tag.innerText;
+        let normalized_version = normalize_version(raw_item_value);
+        return [filters_state.version, ...version_always_show].includes(normalized_version);
+    } else return true
+}
+
+let versionsSelect = document.querySelector('#assets-filter');
+if (versionsSelect) {
+    let versionsQuery = document.querySelectorAll('.asset-card .asset-card__bevy-versions .asset-card__tag');
+    [...new Set([...versionsQuery]
+        .map((item) => {
+            let raw_version = item?.innerText;
+            let normalized_version = normalize_version(raw_version);
+            return normalized_version
+        })
+        .filter(i => i)
+        .filter(i => !version_always_show.includes(i))
+        .sort(sort_versions)
+    )].forEach(i => {
+        var opt = document.createElement('option');
+        opt.value = i;
+        opt.innerHTML = i;
+        versionsSelect.appendChild(opt);
+    })
+
+}
+
+document
+    .querySelector('#assets-filter')
+    .addEventListener("change", (item) => {
+        filters_state.version = item.target.value;
+        filter_assets();
+    })
diff --git a/templates/assets.html b/templates/assets.html
@@ -4,70 +4,78 @@
 {% block page_name %}Bevy Assets{% endblock %}
 
 {% block mobile_page_menu %}
-    {{assets_macros::assets_menu(prefix="mobile-menu", root=section)}}
+{{assets_macros::assets_menu(prefix="mobile-menu", root=section)}}
 {% endblock %}
 
 {% block page_menu %}
-    {{assets_macros::assets_menu(prefix="page-menu", root=section)}}
+{{assets_macros::assets_menu(prefix="page-menu", root=section)}}
 {% endblock %}
 
 {% block page_content %}
-    <div class="assets">
-        {{ assets_macros::init_svg() }}
+<div class="assets">
+    {{ assets_macros::init_svg() }}
 
-        <div class="assets-search">
-            <input class="assets-search__input" type="text" id="assets-search" placeholder="Search (ie: 0.11 MIT)">
-        </div>
+    <div class="assets-search">
+        <input class="assets-search__input" type="text" id="assets-search" placeholder="Search (ie: 0.11 MIT)">
+    </div>
 
-        <div class="assets-intro media-content">
-            A collection of third-party Bevy assets, plugins, learning resources, and apps made by the community. If you would like to
-            share what you're working on, <a href="https://github.com/bevyengine/bevy-assets">submit a pull request</a>!
-        </div>
+    <div class="assets-filters">
+        <label>Bevy last supported version</label>
+        <select class="asset-version-select" id="assets-filter">
+            <option value="all_versions">All</option>
+        </select>
+    </div>
 
-        {% for subsection in section.subsections %}
-        {% set section = get_section(path=subsection) %}
+    <div class="assets-intro media-content">
+        A collection of third-party Bevy assets, plugins, learning resources, and apps made by the community. If you
+        would like to
+        share what you're working on, <a href="https://github.com/bevyengine/bevy-assets">submit a pull request</a>!
+    </div>
 
-        <h1 class="asset-section" id="{{ section.title | slugify }}">
-            {{ section.title }}<a class="anchor-link" href="#{{ section.title | slugify }}">#</a>
-        </h1>
+    {% for subsection in section.subsections %}
+    {% set section = get_section(path=subsection) %}
 
-        {% if section.pages %}
-        <div class="item-grid item-grid--multi-cols">
-            {% set pages = section.pages %}
-            {% if section.extra.sort_order_reversed %}
-            {% set pages = section.pages | reverse %}
-            {% endif %}
-            {% for post in pages %}
-            {{ assets_macros::card(post=post) }}
-            {% endfor %}
-        </div>
-        {% endif %}
+    <h1 class="asset-section" id="{{ section.title | slugify }}">
+        {{ section.title }}<a class="anchor-link" href="#{{ section.title | slugify }}">#</a>
+    </h1>
 
-        {% set subsections = section.subsections %}
+    {% if section.pages %}
+    <div class="item-grid item-grid--multi-cols">
+        {% set pages = section.pages %}
         {% if section.extra.sort_order_reversed %}
-        {% set subsections = section.subsections | reverse %}
+        {% set pages = section.pages | reverse %}
         {% endif %}
-        {% for subsection in subsections %}
-        {% set section = get_section(path=subsection) %}
+        {% for post in pages %}
+        {{ assets_macros::card(post=post) }}
+        {% endfor %}
+    </div>
+    {% endif %}
 
-        <h3 class="asset-subsection" id="{{ section.title | slugify }}">
-            {{ section.title }}<a class="anchor-link" href="#{{ section.title | slugify }}">#</a>
-        </h3>
-        <div class="item-grid item-grid--multi-cols">
-            {% set pages = section.pages %}
-            {% if section.extra.sort_order_reversed %}
-            {% set pages = section.pages | reverse %}
-            {% endif %}
-            {% for post in pages %}
-            {{ assets_macros::card(post=post) }}
-            {% endfor %}
-        </div>
+    {% set subsections = section.subsections %}
+    {% if section.extra.sort_order_reversed %}
+    {% set subsections = section.subsections | reverse %}
+    {% endif %}
+    {% for subsection in subsections %}
+    {% set section = get_section(path=subsection) %}
 
-        {% endfor %}
+    <h3 class="asset-subsection" id="{{ section.title | slugify }}">
+        {{ section.title }}<a class="anchor-link" href="#{{ section.title | slugify }}">#</a>
+    </h3>
+    <div class="item-grid item-grid--multi-cols">
+        {% set pages = section.pages %}
+        {% if section.extra.sort_order_reversed %}
+        {% set pages = section.pages | reverse %}
+        {% endif %}
+        {% for post in pages %}
+        {{ assets_macros::card(post=post) }}
         {% endfor %}
     </div>
 
-    <script type="module">
-        import '/assets.js'
-    </script>
+    {% endfor %}
+    {% endfor %}
+</div>
+
+<script type="module">
+    import '/assets.js'
+</script>
 {% endblock %}