better tagging

Author: doomy

content/crates.toml

@@ -1,28 +1,35 @@
 [[crates]]
 source = "crates"
 key = "fundsp"
+tags = ["DSP"]
 
 [[crates]]
 source = "crates"
 key = "cpal"
+tags = ["devices"]
 
 [[crates]]
 source = "crates"
 key = "coremidi"
+tags = ["MIDI"]
 
 [[crates]]
 source = "github"
 key = "wrl/baseplug"
+tags = ["framework","VST2"]
 
 [[crates]]
 source = "github"
 key = "RustAudio/baseview"
+tags = ["windowing","GUI"]
 
 [[crates]]
 source = "github"
 key = "robbert-vdh/nih-plug"
+tags = ["framework","VST3","CLAP"]
 
 [[crates]]
 source = "github"
 key = "glowcoil/clap-sys"
+tags = ["bindings","CLAP"]
 

sass/main.scss

@@ -70,6 +70,7 @@ body {
 }
 
 .tags {
+    text-transform: capitalize;
     display: flex;
     flex-wrap: wrap;
     gap: 0.3em;

templates/index.html

@@ -65,19 +65,19 @@ <h2>Audio crates</h2>
         {% set name = data.name %}
         {% set description = data.description %}
         {% set url = data.svn_url %}
-        {% set keywords = data.topics %}
+        {# {% set keywords = data.topics %} #}
 
         {% elif source == "crates" %}
         {# Get crates API page to pull information #}
         {% set data = load_data(url="https://crates.io/api/v1/crates/"~crate.key, format="json") %}
         {% set name = data.crate.name %}
         {% set description = data.crate.description %}
         {% set url = "https://crates.io/crates/"~name %}
-        {% set keywords = data.crate.keywords %}
+        {# {% set keywords = data.crate.keywords %} #}
 
         {% endif %}
 
-        <div class='crate' data-keywords='{{ keywords | join(sep=" ") }}'>
+        <div class='crate' data-keywords='{{ crate.tags | join(sep=" ") }}'>
             <a target=" _blank" href={{url}}>
                 <h4>
                     <pre>{{ name }}</pre>
@@ -86,8 +86,8 @@ <h4>
             <p>{{ description }}</p>
 
             <div class="tags">
-                {% for keyword in keywords %}
-                <span class="filter-tag tag" data-keyword={{keyword}}>{{keyword}}</span>
+                {% for tag in crate.tags %}
+                <span class="filter-tag tag" data-keyword={{tag}}>{{tag}}</span>
                 {% endfor %}
             </div>
             {# <div class="details">
@@ -189,10 +189,12 @@ <h2>{{group | capitalize}}</h2>
         var filter_element = document.querySelector(".filters");
         var filters = [];
         [].forEach.call(tags, function (tag) {
-            filters.push(tag.innerText)
+            filters.push(tag.dataset.keyword)
         });
         // Dedup
-        filters = [...new Set(filters)].sort();
+        filters = [...new Set(filters)].sort(function (a, b) {
+            return a.localeCompare(b);
+        });
         enabled_filters = []
 
         function build_filters() {
@@ -252,7 +254,7 @@ <h2>{{group | capitalize}}</h2>
         tags = document.querySelectorAll(".filter-tag");
         [].forEach.call(tags, function (tag) {
             tag.addEventListener("click", (ev) => {
-                let keyword = tag.innerText;
+                let keyword = tag.dataset.keyword;
                 toggle_filter(keyword);
             });
         });