Minor improvements to the groups page

package.json

@@ -3,7 +3,7 @@
   "description": "Visualize web features",
   "devDependencies": {
     "@11ty/eleventy": "^2.0.1",
-    "@mdn/browser-compat-data": "^5.5.38",
+    "@mdn/browser-compat-data": "^5.5.39",
     "web-features": "next"
   },
   "scripts": {

site/_includes/layout.njk

@@ -17,6 +17,7 @@
         <li><a href="/nobaseline">Not yet available</a></li>
         <li><a href="/missingone">Missing in just one engine</a></li>
         <li><a href="/all">All features</a></li>
+        <li><a href="/groups">Groups</a></li>
         <li><a href="/monthly">Monthly updates</a></li>
       </ul>
     </nav>

site/assets/styles.css

@@ -312,12 +312,23 @@ nav li {
   background: none;
 }
 
+.groups li {
+  padding: .25rem;
+}
+
 .groups li li {
   margin-inline-start: 2rem;
 }
 
-.groups .group {
-  border-inline-start: 1px solid;
+.groups summary {
+  cursor: pointer;
+}
+
+.groups details[open] {
+  background-image: linear-gradient(to right, black 1px, transparent 0);
+  background-position: .3rem 1rem;
+  background-size: 100% calc(100% - 1rem);
+  background-repeat: no-repeat;
 }
 
 footer {

site/groups.njk

@@ -5,21 +5,25 @@ layout: layout.njk
 
 {% macro groupMacro(id, group, allGroups) %}
   <li class="group" id="{{ id }}">
-    <p><strong>{{ group.name }}</strong></p>
-    <ul class="children-groups">
-      {% for id2, group2 in allGroups %}
-        {% if group2.parent === id %}
-          {{ groupMacro(id2, group2, allGroups) }}
-        {% endif %}
-      {% endfor %}
-    </ul>
-    <ul class="features">
-      {% for feature in allFeatures %}
-        {% if feature.group.includes(id) %}
-          <li>{{ feature.name }}</li>
-        {% endif %}
-      {% endfor %}
-    </ul>
+    <details>
+      <summary>{{ group.name }}</summary>
+      <ul class="children-groups">
+        {% for id2, group2 in allGroups %}
+          {% if group2.parent === id %}
+            {{ groupMacro(id2, group2, allGroups) }}
+          {% endif %}
+        {% endfor %}
+      </ul>
+      <ul class="features">
+        {% for feature in allFeatures %}
+          {% if feature.group.includes(id) %}
+            <li>
+              <a href="/features/{{ feature.id | slugify }}/">{{ feature.name }}</a>
+            </li>
+          {% endif %}
+        {% endfor %}
+      </ul>
+    </details>
   </li>
 {% endmacro %}
 
@@ -32,3 +36,12 @@ layout: layout.njk
     {% endif %}
   {% endfor %}
 </ul>
+
+<h2>Ungrouped features</h2>
+<ul class="features">
+  {% for feature in allFeatures %}
+    {% if feature.group.length === 0 %}
+      <li>{{ feature.name }}</li>
+    {% endif %}
+  {% endfor %}
+</ul>