bcd mapping status page

.eleventy.js

@@ -21,6 +21,30 @@ const BROWSER_BUG_TRACKERS = {
 
 const MDN_URL_ROOT = "https://developer.mozilla.org/docs/";
 
+function getAllBCDKeys() {
+  function walk(root, acc, keyPrefix = "") {
+    for (const key in root) {
+      if (!keyPrefix && (key === "__meta" || key === "browsers" || key === "webextensions")) {
+        continue;
+      }
+
+      if (key === "__compat") {
+        acc.push(keyPrefix);
+      }
+
+      if (key !== "__compat" && typeof root[key] === "object") {
+        const bcdKey = keyPrefix ? `${keyPrefix}.${key}` : key;
+        walk(root[key], acc, bcdKey);
+      }
+    }
+  }
+
+  const keys = [];
+  walk(bcd, keys);
+
+  return keys;
+}
+
 function findParentGroupId(group) {
   if (!group.parent) {
     return null;
@@ -506,6 +530,32 @@ export default function (eleventyConfig) {
     });
   });
 
+  eleventyConfig.addGlobalData("bcdMapping", () => {
+    const mapped = [];
+    for (const id in features) {
+      const feature = features[id];
+      if (feature.compat_features && feature.compat_features.length) {
+        mapped.push(...feature.compat_features);
+      }
+    }
+
+    const unmapped = [];
+    getAllBCDKeys().forEach(key => {
+      if (!mapped.includes(key)) {
+        unmapped.push(key);
+      }
+    });
+
+    const all = [...mapped, ...unmapped];
+
+    return {
+      all,
+      mapped,
+      unmapped,
+      percentage: ((mapped.length / all.length) * 100).toFixed(0),
+    };
+  });
+
   eleventyConfig.addGlobalData("missingOneBrowserFeatures", () => {
     const missingOne = [];
 

site/about.njk

@@ -13,4 +13,15 @@ layout: layout.njk
   <p>The website also displays Baseline information for each web feature. To learn more about Baseline, see <a href="https://web-platform-dx.github.io/web-features/">What is Baseline?</a>.</p>
 
   <p>The website's content was last generated on {{ versions.date }} using <a href="https://github.com/web-platform-dx/web-features/">web-features</a> <code>{{ versions.webFeatures }}</code> and <a href="https://github.com/mdn/browser-compat-data/">browser-compat-data</a> <code>{{ versions.bcd }}</code>. The source code of the website is at <a href="https://github.com/web-platform-dx/web-features-explorer">web-features-explorer GitHub repo</a>.</p>
+
+  <h2>Other pages</h2>
+
+  <p>Here are a few other pages on this website that might be of interest. They are not in the top-level navigation menu because they are either work in progress or just experiments.</p>
+  <ul>
+    <li><a href="/bcd-mapping">bcd-mapping</a>: the list of unmapped BCD keys, and % of completion.</li>
+    <li><a href="/browse">browse</a>: a directory of the features, organized by web development tasks.</li>
+    <li><a href="/groups">groups</a>: a directory of the features, organized by web-feature groups.</li>
+    <li><a href="/ids">ids</a>: the list of all features, with their IDs, and BCD keys, to help find existing features.</li>
+    <li><a href="/timeline">timeline</a>: experimental timeline showing the number of baseline features over time.</li>
+  </ul>
 </main>

site/bcd-mapping.njk

@@ -0,0 +1,18 @@
+---
+title: BCD key mapping
+layout: layout.njk
+---
+
+<main>
+  <h1>{{ title }}</h1>
+
+  <p>The web-features project has {{ bcdMapping.mapped.length }} BCD keys mapped, out of {{ bcdMapping.all.length }} total BCD keys ({{ bcdMapping.percentage }}% complete).</p>
+
+  <h2>Unmapped BCD keys</h2>
+
+  <ul>
+    {% for key in bcdMapping.unmapped %}
+      <li>{{ key }}</li>
+    {% endfor %}
+  </ul>
+</main>