diff --git a/.eleventy.js b/.eleventy.js
index ada9d83de2..4a2141bf23 100644
--- a/.eleventy.js
+++ b/.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 = [];
diff --git a/site/about.njk b/site/about.njk
index 3143f51761..307eae36c1 100644
--- a/site/about.njk
+++ b/site/about.njk
@@ -13,4 +13,15 @@ layout: layout.njk
The website also displays Baseline information for each web feature. To learn more about Baseline, see What is Baseline?.
The website's content was last generated on {{ versions.date }} using web-features {{ versions.webFeatures }}
and browser-compat-data {{ versions.bcd }}
. The source code of the website is at web-features-explorer GitHub repo.
+
+ Other pages
+
+ 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.
+
+ - bcd-mapping: the list of unmapped BCD keys, and % of completion.
+ - browse: a directory of the features, organized by web development tasks.
+ - groups: a directory of the features, organized by web-feature groups.
+ - ids: the list of all features, with their IDs, and BCD keys, to help find existing features.
+ - timeline: experimental timeline showing the number of baseline features over time.
+
diff --git a/site/bcd-mapping.njk b/site/bcd-mapping.njk
new file mode 100644
index 0000000000..5345edfebb
--- /dev/null
+++ b/site/bcd-mapping.njk
@@ -0,0 +1,18 @@
+---
+title: BCD key mapping
+layout: layout.njk
+---
+
+
+ {{ title }}
+
+ The web-features project has {{ bcdMapping.mapped.length }} BCD keys mapped, out of {{ bcdMapping.all.length }} total BCD keys ({{ bcdMapping.percentage }}% complete).
+
+ Unmapped BCD keys
+
+
+ {% for key in bcdMapping.unmapped %}
+ - {{ key }}
+ {% endfor %}
+
+