Add views for Chromium, Gecko, WebKit; note how things are sorted

.eleventy.js

@@ -72,6 +72,24 @@ export default function (eleventyConfig) {
     new Date(a.status.baseline_low_date)).sort((a, b) => Object.keys(b.status.support).length - Object.keys(a.status.support).length);
   });
 
+  eleventyConfig.addGlobalData("chromiumFeatures", async () => {
+    return all.filter(feature =>  {
+      return feature.status.support.chrome ;
+    }).sort((a, b) =>  b.status.support.chrome  - a.status.support.chrome )
+  });
+
+  eleventyConfig.addGlobalData("geckoFeatures", async () => {
+    return all.filter(feature =>  {
+      return feature.status.support.firefox ;
+    }).sort((a, b) =>  b.status.support.firefox  - a.status.support.firefox )
+  });
+
+  eleventyConfig.addGlobalData("webkitFeatures", async () => {
+    return all.filter(feature =>  {
+      return feature.status.support.safari ;
+    }).sort((a, b) =>  b.status.support.safari  - a.status.support.safari )
+  });
+
   return {
     dir: {
       input: "site",

site/_includes/layout.njk

@@ -15,7 +15,10 @@
         <li><a href="/recent/">Newly available features</a></li>
         <li><a href="/baseline/">Widely available features</a></li>
         <li><a href="/limited/">Limited availability features</a></li>
-         <li><a href="/fresh/">Freshly implemented features</a></li>
+        <li><a href="/fresh/">Freshly implemented features</a></li>
+        <li><a href="/chromium/">Chromium implemented features</a></li>
+        <li><a href="/gecko/">Gecko implemented features</a></li>
+        <li><a href="/webkit/">WebKit implemented features</a></li>
         <li><a href="/all/">All features</a></li>
       </ul>
     </nav>

site/all.njk

@@ -5,6 +5,8 @@ layout: layout.njk
 
 <h1>{{ title }}</h1>
 
+<p>Sorted alphabetically.</p>
+
 <p>{{allFeatures.length }} features found.</p>
 
 <ul class="features">

site/baseline.njk

@@ -5,6 +5,8 @@ layout: layout.njk
 
 <h1>{{ title }}</h1>
 
+<p>Sorted by how recently the feature became baseline high.</p>
+
 <p>{{baselineFeatures.length }} features found.</p>
 
 <ul class="features">

site/chromium.njk

@@ -0,0 +1,17 @@
+---
+title: Chromium implemented features with missing reference documentation
+layout: layout.njk
+---
+<h1>{{ title }}</h1>
+
+<p>Sorted by recently implemented.</p>
+
+<p>{{chromiumFeatures.length }} features found.</p>
+
+<ul class="features">
+  {% for feature in chromiumFeatures %}
+    <li>
+      {% include "feature_short.njk" %}
+    </li>
+  {% endfor %}
+</ul>

site/fresh.njk

@@ -4,7 +4,7 @@ layout: layout.njk
 ---
 <h1>{{ title }}</h1>
 
-<p>Fresh means implemented recently in either Chrome 120+ or Firefox 120+ or Safari 17+.</p>
+<p>Fresh means implemented recently in either Chrome 120+ or Firefox 120+ or Safari 17+. Sorted alphabetically.</p>
 
 <p>{{freshFeatures.length }} features found.</p>
 

site/gecko.njk

@@ -0,0 +1,17 @@
+---
+title: Gecko implemented features with missing reference documentation
+layout: layout.njk
+---
+<h1>{{ title }}</h1>
+
+<p>Sorted by recently implemented.</p>
+
+<p>{{geckoFeatures.length }} features found.</p>
+
+<ul class="features">
+  {% for feature in geckoFeatures %}
+    <li>
+      {% include "feature_short.njk" %}
+    </li>
+  {% endfor %}
+</ul>

site/limited.njk

@@ -4,6 +4,8 @@ layout: layout.njk
 ---
 <h1>{{ title }}</h1>
 
+<p>Sorted by amount of browsers supported.</p>
+
 <p>{{limitedFeatures.length }} features found.</p>
 
 <ul class="features">

site/recent.njk

@@ -4,6 +4,9 @@ layout: layout.njk
 ---
 <h1>{{ title }}</h1>
 
+<p>Sorted by how recently the feature became baseline low.</p>
+
+
 <p>{{recentBaselineFeatures.length }} features found.</p>
 
 <ul class="features">

site/webkit.njk

@@ -0,0 +1,17 @@
+---
+title: WebKit implemented features with missing reference documentation
+layout: layout.njk
+---
+<h1>{{ title }}</h1>
+
+<p>Sorted by recently implemented.</p>
+
+<p>{{webkitFeatures.length }} features found.</p>
+
+<ul class="features">
+  {% for feature in webkitFeatures %}
+    <li>
+      {% include "feature_short.njk" %}
+    </li>
+  {% endfor %}
+</ul>