WIP: Add hub filters and update categories to use text instead of name

for consistency

TODO: update url with query params and filters based on the query params

app/_assets/entrypoints/hub.js

@@ -0,0 +1,83 @@
+class Hub {
+  constructor() {
+    this.filters = document.getElementById("filters");
+    this.plugins = document.querySelectorAll("[data-card='plugin']");
+
+    this.deploymentTopologies = this.filters.querySelectorAll(
+      'input[name="deployment-topology"]'
+    );
+    this.categories = this.filters.querySelectorAll('input[name="category"]');
+
+    this.deploymentValues = [];
+    this.categoryValues = [];
+
+    this.addEventListeners();
+  }
+
+  addEventListeners() {
+    const checkboxes = [...this.deploymentTopologies, ...this.categories];
+    checkboxes.forEach((checkbox) => {
+      checkbox.addEventListener("change", () => this.onChange());
+    });
+  }
+
+  onChange() {
+    this.deploymentValues = this.getValues(this.deploymentTopologies);
+    this.categoryValues = this.getValues(this.categories);
+
+    this.filterPlugins();
+  }
+
+  getValues(filterGroup) {
+    return Array.from(filterGroup)
+      .filter((checkbox) => checkbox.checked)
+      .map((checkbox) => checkbox.value);
+  }
+
+  filterPlugins() {
+    this.plugins.forEach((plugin) => {
+      const matchesDeploymentTopology = this.filterBy(
+        plugin,
+        this.deploymentTopologies,
+        "deploymentTopology"
+      );
+      const matchesCategory = this.filterBy(
+        plugin,
+        this.categories,
+        "category"
+      );
+
+      const showPlugin = matchesDeploymentTopology && matchesCategory;
+
+      plugin.classList.toggle("hidden", !showPlugin);
+    });
+
+    this.toggleCategoriesIfEmpty();
+  }
+
+  toggleCategoriesIfEmpty() {
+    this.categories.forEach((cat) => {
+      const category = document.getElementById(cat.value);
+      const showCategory = category.querySelectorAll(
+        '[data-card="plugin"]:not(.hidden)'
+      ).length;
+
+      category.classList.toggle("hidden", !showCategory);
+    });
+  }
+
+  filterBy(plugin, filterGroup, dataAttribute) {
+    const checkedValues = Array.from(filterGroup)
+      .filter((checkbox) => checkbox.checked)
+      .map((checkbox) => checkbox.value);
+
+    const dataValues = plugin.dataset[dataAttribute]?.split(",") || [];
+    return (
+      checkedValues.length === 0 ||
+      checkedValues.some((value) => dataValues.includes(value))
+    );
+  }
+}
+
+// Initialize the Hub once the DOM is fully loaded
+document.addEventListener("DOMContentLoaded", () => new Hub());

app/_data/plugin_categories.yml

@@ -1,24 +1,24 @@
-- name: AI
+- text: AI
   slug: ai
   desc: Govern, secure, and control AI traffic with multi-LLM AI Gateway plugins
-- name: Authentication
+- text: Authentication
   slug: authentication
   desc: Protect your services with an authentication layer
-- name: Security
+- text: Security
   slug: security
   desc: Protect your services with additional security layer
-- name: Traffic Control
+- text: Traffic Control
   slug: traffic-control
   desc: Manage, throttle and restrict inbound and outbound API traffic
-- name: Serverless
+- text: Serverless
   slug: serverless
   desc: Invoke serverless functions in combination with other plugins
-- name: Analytics & Monitoring
+- text: Analytics & Monitoring
   slug: analytics-monitoring
   desc: Visualize, inspect and monitor APIs and microservices traffic
-- name: Transformations
+- text: Transformations
   slug: transformations
   desc: Transform request and responses on the fly on Kong
-- name: Logging
+- text: Logging
   slug: logging
   desc: Log request and response data using the best transport for your infrastructure

app/_includes/cards/plugin.html

@@ -1,6 +1,12 @@
 {% assign plugin = include.plugin %}
 
-<div class="flex rounded-md border border-primary/5 bg-secondary shadow-primary h-full hover:border hover:border-brand-saturated/40 hover:shadow-hover-card min-h-[260px]">
+<div
+  class="flex rounded-md border border-primary/5 bg-secondary shadow-primary h-full hover:border hover:border-brand-saturated/40 hover:shadow-hover-card min-h-[260px]"
+  data-card="plugin"
+  data-category="{{plugin.categories | join: ','}}"
+  data-deployment-topology="{{plugin.works_on | join: ','}}"
+  {% if plugin.tier %}data-tier="{{plugin.tier}}"{% endif %}
+>
     <a href="{{plugin.url}}" class="flex flex-col gap-5 hover:no-underline text-secondary w-full p-6">
         <img src="{{ plugin.icon }}" class="w-8 h-8"/>
 
@@ -20,4 +26,4 @@ <h4>{{ plugin.name | liquify }}</h4>
             </div>
         {% endif %}
     </a>
-</div>
+</div>

app/_includes/checkbox.html

@@ -0,0 +1,3 @@
+<div class="flex">
+    <label class="flex gap-2 py-0.5 w-full text-sm text-primary"><input type="checkbox" value="{{include.value}}" name="{{include.name}}">{{include.label}}</label>
+</div>

app/_layouts/default.html

@@ -45,6 +45,10 @@
     {% if layout.plugin_schema %}
       {% vite_javascript_tag plugin_schema %}
     {% endif %}
+
+    {% if page.hub %}
+      {% vite_javascript_tag hub %}
+    {% endif %}
   </head>
 
   <body class="bg-primary leading-6 h-full">

app/plugins.html

@@ -1,5 +1,6 @@
 ---
 title: Plugins
+hub: true
 layout: default
 ---
 
@@ -49,21 +50,16 @@ <h1 class="font-extrabold text-[40px] leading-[60px]">Kong Plugins</h1>
   </div>
 
 
-  {% assign categories = site.data.plugin_categories | sort: "name" %}
+  {% assign categories = site.data.plugin_categories | sort: "text" %}
   {% assign kong_plugins = site.data.kong_plugins %}
 
   <div class="grid grid-cols-4 gap-16">
-    <div class="w-full flex flex-col gap-8 sticky top-24 self-start">
+    <div id="filters" class="w-full flex flex-col gap-8 sticky top-24 self-start">
       <div class="flex flex-col gap-3">
         <div class="text-sm text-brand font-semibold">Deployment Platforms</div>
         <div class="flex flex-col gap-3">
           {% for deployment_topology in site.data.products.gateway.deployment_topologies %}
-            <div class="flex">
-              <label class="w-full">
-                <input type="checkbox" value="{{deployment_topology.slug}}" name="deployment-topology">
-                {{deployment_topology.text}}
-              </label>
-            </div>
+            {% include checkbox.html value=deployment_topology.slug name="deployment-topology" label=deployment_topology.text %}
           {% endfor %}
         </div>
       </div>
@@ -72,23 +68,18 @@ <h1 class="font-extrabold text-[40px] leading-[60px]">Kong Plugins</h1>
         <div class="flex flex-col gap-3">
 
           {% for category in categories %}
-            <div class="flex">
-              <label class="w-full">
-                <input type="checkbox" value="{{category.slug}}" name="category">
-                {{category.name}}
-              </label>
-            </div>
+            {% include checkbox.html value=category.slug name="category" label=category.text %}
           {% endfor %}
         </div>
       </div>
     </div>
 
     <div class="flex flex-col col-span-3 w-full gap-16">
       {% for cat in categories %}
-        {% assign plugins_for_category = kong_plugins | where_exp: "plugin", "plugin.categories contains cat.slug" | sort: "name" %}
+        {% assign plugins_for_category = kong_plugins | where_exp: "plugin", "plugin.categories contains cat.slug" | sort: "text" %}
         {% if plugins_for_category.size > 0 %}
-          <div class="flex flex-col gap-4">
-            <h2>{{ cat.name }}</h2>
+          <div class="flex flex-col gap-4" id="{{cat.slug}}">
+            <h2>{{ cat.text }}</h2>
 
             <div class="grid auto-rows-fr grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
               {% for plugin in plugins_for_category %}