From 1416edda76b4289851afb38e8d717856b9cc548a Mon Sep 17 00:00:00 2001
From: Patrick Brosset <patrickbrossset@gmail.com>
Date: Fri, 12 Jul 2024 22:05:25 +0200
Subject: [PATCH] Minor improvements to the groups page

---
 package-lock.json         | 17 ++++++++--------
 package.json              |  2 +-
 site/_includes/layout.njk |  1 +
 site/assets/styles.css    | 15 ++++++++++++--
 site/groups.njk           | 43 +++++++++++++++++++++++++--------------
 5 files changed, 51 insertions(+), 27 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 139c988e60..ec1f81421a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,7 +7,7 @@
       "name": "web-features-explorer",
       "devDependencies": {
         "@11ty/eleventy": "^2.0.1",
-        "@mdn/browser-compat-data": "^5.5.38",
+        "@mdn/browser-compat-data": "^5.5.39",
         "web-features": "next"
       }
     },
@@ -182,9 +182,9 @@
       "dev": true
     },
     "node_modules/@mdn/browser-compat-data": {
-      "version": "5.5.38",
-      "resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-5.5.38.tgz",
-      "integrity": "sha512-rwwTAkFM5CRuECirmKB/OoG1MXW9v8LAWv8u4NBu8cghRf6zNIKVJ9s+7TT5tXwLRlfbTR2sb7V0rWcD68eXhg==",
+      "version": "5.5.39",
+      "resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-5.5.39.tgz",
+      "integrity": "sha512-22awGsC5t7sGOT2u5EU1RA64L+F87GWYXHZkh0ofjJsLGObqNDDVSTlumd/+6YK3QwlOIEVWAsqmJymrrSqBlA==",
       "dev": true
     },
     "node_modules/@nodelib/fs.scandir": {
@@ -2357,11 +2357,10 @@
       }
     },
     "node_modules/web-features": {
-      "version": "0.10.0-dev-20240711121026-bc193b6",
-      "resolved": "https://registry.npmjs.org/web-features/-/web-features-0.10.0-dev-20240711121026-bc193b6.tgz",
-      "integrity": "sha512-fgTbbbh5wOtBGXeUTPvYNej90CfBZr+NssV3VlEjgh2jPIWdiKBry4mLOpgZb/AxtAfyDtExxFlMorXMs3YsZw==",
-      "dev": true,
-      "license": "Apache-2.0"
+      "version": "0.10.0-dev-20240712162446-72638bd",
+      "resolved": "https://registry.npmjs.org/web-features/-/web-features-0.10.0-dev-20240712162446-72638bd.tgz",
+      "integrity": "sha512-tWJZW8TeoYXoQ+HiQyyqTCijri5lPUcRLZdPE+VAI3y4FGy/9uAGoPNwYGYhZaTuyfhy4f6U5qDQ8bztVkg1Rg==",
+      "dev": true
     },
     "node_modules/which": {
       "version": "2.0.2",
diff --git a/package.json b/package.json
index 35b647cffc..13af309b7b 100644
--- a/package.json
+++ b/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": {
diff --git a/site/_includes/layout.njk b/site/_includes/layout.njk
index 8dbe00153f..ed16697649 100644
--- a/site/_includes/layout.njk
+++ b/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>
diff --git a/site/assets/styles.css b/site/assets/styles.css
index d56c78703d..91f41a4dc0 100644
--- a/site/assets/styles.css
+++ b/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 {
diff --git a/site/groups.njk b/site/groups.njk
index 5b65e72be9..70a8be8f3d 100644
--- a/site/groups.njk
+++ b/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>
\ No newline at end of file