add version filter to assets

bevyengine · Nov 17, 2023 · 7733a32 · 7733a32
1 parent 4673619
commit 7733a32
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 49 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,4 @@
             }
         }
     }
-}
+}
diff --git a/static/assets.js b/static/assets.js
@@ -36,4 +36,44 @@ function hideEmptySections() {
         }
         section.style.display = 'none'
     })
-}
+}
+
+//  ------------    Version Filtering
+function normalize_version(raw_version) {
+    let version = raw_version
+        .replace(/^[^\d]+/, '')
+        .replace(/[^\d]+$/, '');
+    return version ? Array.from({ ...version.split('.'), length: 3 }, (v, i) => v ?? 0).join('.') : null;
+}
+
+let versionsQuery = document.querySelectorAll('.asset-card .asset-card__tags .asset-card__bevy-versions .asset-card__tag');
+let versions = [...new Set([...versionsQuery]
+    .map(item => normalize_version(item.innerText))
+    .filter(i => i)
+)];
+
+
+let versionsSelect = document.querySelector('#assets-filter');
+if (versionsSelect) {
+    versions.map(i => {
+        var opt = document.createElement('option');
+        opt.value = i;
+        opt.innerHTML = i;
+        versionsSelect.appendChild(opt);
+    })
+}
+
+document
+    .querySelector('#assets-filter')
+    .addEventListener("change", (item) => {
+
+        for (const asset of document.querySelectorAll('.asset-card')) {
+            let tag = asset.querySelector('.asset-card__tags .asset-card__bevy-versions .asset-card__tag');
+            if (tag) {
+                const searchMatch = item.target.value === normalize_version(tag.innerText);
+                asset.parentElement.style.display = searchMatch ? 'block' : 'none'
+            } else {
+                asset.parentElement.style.display = 'none'
+            }
+        }
+    })
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 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 %}