web-platform-dx · Jun 23, 2024 · Jun 24, 2024 · Jun 24, 2024 · Jun 24, 2024 · Jun 26, 2024
diff --git a/.eleventy.js b/.eleventy.js
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -0,0 +1,11 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
+
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "daily"
diff --git a/README.md b/README.md
@@ -1,33 +1,18 @@
-# web-features explorer
+# web-docs-backlog
 
-A website to visualize the web platform data that's maintained in the [web-platform-dx/web-features](https://github.com/web-platform-dx/web-features/) repository in interesting ways, including a monthly release note.
-
-The website: https://web-platform-dx.github.io/web-features-explorer/
-
-## Goal
-
-* To visualize the web-features data.
-* To provide a way to explore the data in user-friendly ways, such as:
-  * By [baseline-low features](https://web-platform-dx.github.io/web-features-explorer/recent/) (newly available on the web platform).
-  * By [baseline-high features](https://web-platform-dx.github.io/web-features-explorer/baseline/) (widely available on the web platform).
-  * By [monthly release notes](https://web-platform-dx.github.io/web-features-explorer/monthly/).
-  * Or, by features that are [not yet available](https://web-platform-dx.github.io/web-features-explorer/nobaseline/) on the web platform.
-* To test various use cases that consumers of this data have.
-* To detect issues in the data.
+A website to visualize the web platform reference pages that's maintained by Open Web Docs and partners.
 
 ## Architecture
 
 ### Data
 
-The data that the website is based on comes from the [web-features](https://www.npmjs.com/package/web-features) npm package, by using its **next** version (which always provide the data from the latest commit on the web-features repo).
-
-In addition, the [@mdn/browser-compat-data](https://www.npmjs.com/package/browser-compat-data) npm package is used to get various other pieces of information, such as links to MDN documentation and links to bug trackers.
+The data that the website is based on comes from the [@mdn/browser-compat-data](https://www.npmjs.com/package/browser-compat-data) npm package
 
 To ensure you have the latest data:
 
 1. Run `npx npm-check-updates -u`
 
-1. Run `npm update web-features`
+1. Run `npm update @mdn/browser-compat-data`
 
 ### Build
 
@@ -42,17 +27,17 @@ To re-generate the website, after updating the data:
 1. Run `npm install`
 
 1. Run `npm run build` to generate the site
-   
-   You can also run `npm run serve` to start a local server and watch for changes
+
+   You can also run `npx eleventy --serve` to start a local server and watch for changes
 
 ### Deployment
 
 The website is deployed to production using [GitHub Pages](https://pages.github.com/).
 
-The static HTML pages are generated on the [gh-pages branch](https://github.com/web-platform-dx/web-features-explorer/tree/gh-pages).
+The static HTML pages are generated on the [gh-pages branch](https://github.com/web-platform-dx/web-docs-backlog/tree/gh-pages).
 
 ### Automatic updates
 
 The website is automatically updated on every push to the main branch by using a GitHub Actions script found in `.github/workflows/generate-site.yaml`.
 
-The dependencies are also automatically updated every day by using the GitHub Actions script in `.github/workflows/bump-deps.yaml`.
+The dependencies are also automatically updated everyday by dependabot.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,13 +1,16 @@
 {
-  "name": "web-features-explorer",
-  "description": "Visualize web features",
+  "name": "web-docs-backlog",
+  "description": "Backlog for web platform docs",
   "devDependencies": {
-    "@11ty/eleventy": "^2.0.1",
-    "@mdn/browser-compat-data": "^5.5.34",
-    "web-features": "next"
+    "@11ty/eleventy": "3.0.0",
+    "@mdn/browser-compat-data": "^5.7.1",
+    "compute-baseline": "^0.1.1",
+    "patch-package": "^8.0.0"
   },
   "scripts": {
     "build": "npx rimraf docs && npx @11ty/eleventy",
-    "serve": "npx @11ty/eleventy --serve"
-  }
+    "serve": "npx @11ty/eleventy --serve",
+    "postinstall": "patch-package"
+  },
+  "type": "module"
 }
diff --git a/patches/compute-baseline+0.1.1.patch b/patches/compute-baseline+0.1.1.patch
@@ -0,0 +1,18 @@
+diff --git a/node_modules/compute-baseline/dist/baseline/support.js b/node_modules/compute-baseline/dist/baseline/support.js
+index 451b8a0..3c1f3b5 100644
+--- a/node_modules/compute-baseline/dist/baseline/support.js
++++ b/node_modules/compute-baseline/dist/baseline/support.js
+@@ -17,12 +17,7 @@ export function support(feature, browsers) {
+             }
+         }
+         const currentlySupported = unqualifiedReleases.includes(b.current());
+-        if (currentlySupported) {
+-            support.set(b, lastInitialRelease(unqualifiedReleases));
+-        }
+-        else {
+-            support.set(b, undefined);
+-        }
++        support.set(b, lastInitialRelease(unqualifiedReleases));
+         logReleaseOmissions(feature, qualifiedReleases, unqualifiedReleases);
+     }
+     return support;
diff --git a/site/_includes/baseline.njk b/site/_includes/baseline.njk
@@ -1,5 +1,24 @@
-<div class="availability">
-  {% if not feature.status.baseline %}Limited availability{% endif %}
-  {% if feature.status.baseline === "low" %}Newly available since {{ feature.status.baseline_low_date }} (baseline low){% endif %}
-  {% if feature.status.baseline === "high" %}Widely available since {{ feature.status.baseline_high_date }} (baseline high){% endif %}
-</div>
+{% if feature.compat.status.deprecated %}
+  <img class="deprecated" src="/assets/deprecated.svg" width="20px" height="20px" alt="deprecated" title="deprecated" />
+{% endif %}
+
+{% if not feature.compat.status.standard_track %}
+  <img class="nonstandard" src="/assets/nonstandard.svg" width="20px" height="20px" alt="non-standard" title="non-standard" />
+{% endif %}
+
+<span class="availability baseline-{{ feature.status.baseline }}">
+  {% if not feature.status.baseline %}
+    Limited availability. In {{feature.status.support | length }} browsers only: 
+    {% for key,value in feature.status.support %}
+       [{{key}}: {{value}}]
+    {% endfor %}
+  {% endif %}
+
+  {% if feature.status.baseline === "low" %}
+    Newly available since {{ feature.status.baseline_low_date }} (baseline low)
+  {% endif %}
+
+  {% if feature.status.baseline === "high" %}
+    Widely available since {{ feature.status.baseline_high_date }} (baseline high)
+  {% endif %}
+</span>
diff --git a/site/_includes/feature_full.njk b/site/_includes/feature_full.njk
@@ -6,7 +6,6 @@
   <p>{{ feature.description_html | safe }}</p>
 
   <h3>Compatibility{% if feature.caniuse %} <span class="subtext">(<a href="https://caniuse.com/{{ feature.caniuse }}">view on caniuse.com</a>)</span>{% endif %}</h3>
-  {% include "compat.njk" %}
 
   {% include "mdn_docs.njk" %}
 

diff --git a/site/_includes/feature_short.njk b/site/_includes/feature_short.njk
@@ -1,10 +1,2 @@
-<div id="{{ feature.id }}" class="feature short baseline-{{ feature.status.baseline }}">
-  <div class="header">
-    <h2>{{ feature.name }}</h2>
-    {% include "baseline.njk" %}
-  </div>
-  <p>{{ feature.description_html | safe }}</p>
-  <p><strong><a href="/features/{{ feature.id | slugify }}/">Learn more</a></strong></p>
-
-  {% include "compat.njk" %}
-</div>
+{% include "baseline.njk" %}
+ <a href="{{ feature.compat.spec_url }}">{{ feature.id }}</a>
diff --git a/site/_includes/layout.njk b/site/_includes/layout.njk
@@ -8,16 +8,18 @@
   </head>
   <body>
 
-    <header><a href="/">web-features explorer</a></header>
+    <header><a href="/">Web platform missing reference pages</a></header>
 
     <nav>
       <ul>
-        <li><a href="/recent">Newly available</a></li>
-        <li><a href="/baseline">Widely available</a></li>
-        <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="/monthly">Monthly updates</a></li>
+        <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="/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>
 
@@ -26,8 +28,8 @@
     </main>
 
     <footer>
-      <p>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></p>
-      <p>Source code: <a href="https://github.com/web-platform-dx/web-features-explorer">web-features-explorer GitHub repo</a>.</p>
+      <p>Generated on {{ versions.date }} using <a href="https://github.com/mdn/browser-compat-data/">browser-compat-data</a> <code>{{ versions.bcd }}</code></p>
+      <p>Source code: <a href="https://github.com/Elchi3/web-docs-backlog">web-docs-backlog</a> (forked from <a href="https://github.com/web-platform-dx/web-features-explorer">web-platform-dx/web-features-explorer</a>).</p>
     </footer>
 
   </body>

diff --git a/site/all.njk b/site/all.njk
@@ -1,10 +1,14 @@
 ---
-title: All features
+title: All features with missing documentation
 layout: layout.njk
 ---
 
 <h1>{{ title }}</h1>
 
+<p>Sorted alphabetically.</p>
+
+<p>{{allFeatures.length }} features found.</p>
+
 <ul class="features">
   {% for feature in allFeatures %}
     <li>

diff --git a/site/assets/deprecated.svg b/site/assets/deprecated.svg
diff --git a/site/assets/nonstandard.svg b/site/assets/nonstandard.svg
diff --git a/site/assets/styles.css b/site/assets/styles.css
@@ -72,6 +72,10 @@ h3 .subtext {
   font-weight: normal;
 }
 
+.features li {
+  padding: 15px;
+}
+
 .feature {
   padding: var(--margin);
   border-radius: 0.5rem;
@@ -134,14 +138,15 @@ h3 .subtext {
   background-size: 1.5rem;
   background-image: url(./baseline-limited.svg);
   margin-left: auto;
+  margin-right: 5px;
 }
 
-.baseline-low .availability {
+.baseline-low {
   --bg: var(--baseline-low-label-bg);
   background-image: url(./baseline-low.svg);
 }
 
-.baseline-high .availability {
+.baseline-high {
   --bg: var(--baseline-high-label-bg);
   background-image: url(./baseline-high.svg);
 }
@@ -286,32 +291,6 @@ nav li {
   margin: 0;
 }
 
-.monthly-update-list {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
-  gap: var(--margin);
-}
-
-.monthly-update-list .month-entry {
-  padding: 0 calc(var(--margin) / 2);
-  border-radius: 0.5rem;
-  background: var(--background-alt);
-}
-
-.monthly-update-list .month-entry h2 {
-  margin: 1rem 0;
-}
-
-.month-update h2 {
-  display: flex;
-  gap: .5rem;
-  justify-content: space-between;
-}
-
-.month-update h2 div {
-  background: none;
-}
-
 footer {
   border-block-start: 2px solid;
   margin-block-start: var(--margin);

diff --git a/site/baseline.njk b/site/baseline.njk
@@ -1,11 +1,13 @@
 ---
-title: Widely available features
+title: Widely available features with missing reference documentation
 layout: layout.njk
 ---
 
 <h1>{{ title }}</h1>
 
-<p>These features have been supported across all core browsers for a while.</p>
+<p>Sorted by how recently the feature became baseline high.</p>
+
+<p>{{baselineFeatures.length }} features found.</p>
 
 <ul class="features">
   {% for feature in baselineFeatures %}

diff --git a/site/chromium.njk b/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>
diff --git a/site/feature.njk b/site/feature.njk
diff --git a/site/fresh.njk b/site/fresh.njk
@@ -0,0 +1,17 @@
+---
+title: Freshly implemented features with missing reference documentation
+layout: layout.njk
+---
+<h1>{{ title }}</h1>
+
+<p>Fresh means implemented recently in either Chrome 120+ or Firefox 120+ or Safari 17+. Sorted alphabetically.</p>
+
+<p>{{freshFeatures.length }} features found.</p>
+
+<ul class="features">
+  {% for feature in freshFeatures %}
+    <li>
+      {% include "feature_short.njk" %}
+    </li>
+  {% endfor %}
+</ul>
diff --git a/site/gecko.njk b/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>
diff --git a/site/index.njk b/site/index.njk
@@ -1,8 +1,8 @@
 ---
-title: Web features explorer
+title: Web platform documentation backlog
 layout: layout.njk
 ---
 
 <h1>{{ title }}</h1>
 
-<p>This website displays various lists of web features, organized by whether they are available on the web platform or not.</p>
+<p>This site displays missing reference documentation for web platform features.</p>
diff --git a/site/limited.njk b/site/limited.njk
@@ -0,0 +1,17 @@
+---
+title: Limited availability features with missing reference documentation
+layout: layout.njk
+---
+<h1>{{ title }}</h1>
+
+<p>Sorted by amount of browsers supported.</p>
+
+<p>{{limitedFeatures.length }} features found.</p>
+
+<ul class="features">
+  {% for feature in limitedFeatures %}
+    <li>
+      {% include "feature_short.njk" %}
+    </li>
+  {% endfor %}
+</ul>
diff --git a/site/missingone.njk b/site/missingone.njk
diff --git a/site/monthly-updates.njk b/site/monthly-updates.njk
diff --git a/site/monthly.njk b/site/monthly.njk
diff --git a/site/nobaseline.njk b/site/nobaseline.njk
diff --git a/site/recent.njk b/site/recent.njk
@@ -1,10 +1,13 @@
 ---
-title: Newly available features
+title: Newly available features with missing reference documentation
 layout: layout.njk
 ---
 <h1>{{ title }}</h1>
 
-<p>These web features became supported in all core browsers recently.</p>
+<p>Sorted by how recently the feature became baseline low.</p>
+
+
+<p>{{recentBaselineFeatures.length }} features found.</p>
 
 <ul class="features">
   {% for feature in recentBaselineFeatures %}

diff --git a/site/webkit.njk b/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>