Adds filters back to Headless CMS page

Author: zachleat

.eleventy.js

@@ -92,7 +92,13 @@ module.exports = function(eleventyConfig) {
   });
 
   eleventyConfig.addFilter('unique', (array) => {
-    return [...new Set(array)];
+    let caseInsensitive = {};
+    for(let val of array) {
+      if(typeof val === "string") {
+        caseInsensitive[val.toLowerCase()] = val;
+      }
+    }
+    return Object.values(caseInsensitive);
   });
 
   // Get a random selection of items from an array

src/css/tailwind.css

@@ -316,6 +316,8 @@ details[open] .summary-swap-open {
 }
 
 /* Filters */
+.filter-opensource--hide,
+.filter-typeofcms--hide,
 .filter-language--hide,
 .filter-template--hide,
 .filter-license--hide {

src/site/_includes/components/cards.njk

@@ -1,8 +1,10 @@
 {% macro repo(item, loopIndex, githubData) %}
 <div id="{{item.id}}" class="generator-card flex flex-col h-full"
-  data-filter-template="{%- if item.data.templates %}{{ item.data.templates | join(",") | lower }}{% endif %}"
-  data-filter-language="{%- if item.data.language %}{{ item.data.language | join(",") | lower }}{% endif %}"
-  data-filter-license="{%- if item.data.license %}{{ item.data.license | join(",") | lower }}{% endif %}">
+  {%- if item.data.typeofcms %} data-filter-typeofcms="{{ item.data.typeofcms | lower }}"{% endif %}
+  {%- if item.data.opensource %} data-filter-opensource="{{ item.data.opensource | lower }}"{% endif %}
+  {%- if item.data.templates %} data-filter-template="{{ item.data.templates | join(",") | lower }}"{% endif %}
+  {%- if item.data.language %} data-filter-language="{{ item.data.language | join(",") | lower }}"{% endif %}
+  {%- if item.data.license %} data-filter-license="{{ item.data.license | join(",") | lower }}"{% endif %}>
   <a href="{{ item.url }}" class="flex-grow block border-0 bg-white text-gray-700 rounded-t-lg last:rounded-b-lg">
     <div class="text-xl md:text-2xl lg:text-3xl font-bold text-ellipsis text-black bg-gradient-to-b border-b border-black rounded-t-lg p-4
     {%- if loopIndex % 4 === 0 %} bg-gradient-card-sunrise

src/site/headless-cms.njk

@@ -13,11 +13,37 @@ layout: layouts/base.njk
 </section>
 
 <section class="cards mt-12">
-  <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-  {% for item in collections.cms | sortTools(github) %}
-    {{ cards.repo(item, loop.index0, github) }}
-  {% endfor %}
-  </div>
+  <filter-container>
+    <form class="pb-4">
+      <div class="pb-2">
+        <strong class="pr-4">Filter</strong>
+        <span data-filter-results></span>
+      </div>
+      <label class="inline-flex pr-4 pb-2">
+        <span class="sr-only">CMS Type</span>
+        <select data-filter-bind="typeofcms" class="text-white py-1 rounded border border-white bg-transparent">
+          <option selected value="">Any CMS Type</option>
+          {%- for template in collections.cms | select("data.typeofcms") | unique | sort(false, false) %}
+          <option value="{{ template | lower }}">{{ template }}</option>
+          {%- endfor %}
+        </select>
+      </label>
+      <label class="inline-flex pr-4 pb-2">
+        <span class="sr-only">License</span>
+        <select data-filter-bind="opensource" class="text-white py-1 rounded border border-white bg-transparent">
+          <option selected value="">Any License</option>
+          {%- for opensource in collections.cms | select("data.opensource") | unique | sort(true, false) %}
+          <option value="{{ opensource | lower }}">{% if opensource == "No" %}Closed{% else %}Open{% endif %} source</option>
+          {%- endfor %}
+        </select>
+      </label>
+    </form>
+    <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+    {% for item in collections.cms | sortTools(github) %}
+      {{ cards.repo(item, loop.index0, github) }}
+    {% endfor %}
+    </div>
+  </filter-container>
 </section>
 
 <section class="mt-12">

src/site/headless-cms/gridly.md

@@ -5,6 +5,7 @@ twitter: GridlyCMS
 typeofcms: "API Driven"
 supportedgenerators:
   - All
+opensource: No
 description: A collaborative headless CMS for multilingual games-as-a-service projects with a powerful API, browser-based spreadsheet UI, and built-in functions to handle localization and frequent updates.
 
 ---