Add Baseline status lookup page to site

.github/workflows/gh-pages-build-deploy.yml

@@ -7,8 +7,9 @@ on:
     branches:
       - "main"
     paths:
-      - "gh-pages/**"
-      - ".github/workflows/gh-pages-build-deploy.yml"
+      - "gh-pages/**" # Rebuild when any of the pages are updated.
+      - ".github/workflows/gh-pages-build-deploy.yml" # Rebuild when this file is updated.
+      - "packages/web-features/package.json"  # Rebuild when a new package is released.
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -41,6 +42,7 @@ jobs:
         with:
           cache: npm
           node-version-file: .node-version
+          cache-dependency-path: gh-pages/package-lock.json
       - name: NPM Install
         run: npm ci
         working-directory: gh-pages/

gh-pages/eleventy.config.js

@@ -1,12 +1,30 @@
 const { EleventyHtmlBasePlugin } = require("@11ty/eleventy");
 const markdownIt = require("markdown-it");
 const markdownItAnchor = require("markdown-it-anchor");
+const webFeatures = require("web-features/data.json");
 
 module.exports = function (eleventyConfig) {
+  eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
   eleventyConfig.addPassthroughCopy("./src/assets/img");
   eleventyConfig.addPassthroughCopy("./src/assets/fonts");
   eleventyConfig.addPassthroughCopy("./src/assets/css");
-  eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
+
+  // Get keys from features, loop through them to create an array of
+  // objects with the feature names & keys.
+  eleventyConfig.addGlobalData("featuresList", () => {
+    const result = [];
+
+    const features = webFeatures.features;
+    const keys = Object.keys(features);
+    for (const key of keys) {
+      const featureName = features[key].name;
+      const name = featureName.replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+      result.push({ key, name });
+    }
+
+    return result;
+  });
+
   const mdOpts = {
     html: true,
     breaks: true,

gh-pages/package.json

@@ -13,11 +13,13 @@
   "scripts": {
     "build:dev": "eleventy",
     "build:prod": "eleventy --pathprefix=web-features",
-    "dev": "eleventy --serve"
+    "dev": "eleventy --serve",
+    "clean": "rm -rf ../_site"
   },
   "devDependencies": {
     "@11ty/eleventy": "^2.0.1",
     "markdown-it": "^14.1.0",
-    "markdown-it-anchor": "^9.1.0"
+    "markdown-it-anchor": "^9.1.0",
+    "web-features": "next"
   }
 }

gh-pages/src/_includes/default.html

@@ -45,6 +45,7 @@
           <li><a href="/">Baseline</a></li>
           <li><a href="/web-features/">web-features</a></li>
           <li><a href="/webdx-cg/">WebDX Community Group</a></li>
+          <li><a href="/lookup/">Lookup Baseline status</a></li>
           <li><a href="/use-baseline/">Baseline in your project</a></li>
           <li><a href="/name-and-logo-usage-guidelines/">Name and logo usage guidelines</a></li>
           <li><a href="/baseline-in-the-wild/">Baseline in the wild</a></li>

gh-pages/src/assets/css/style.css

@@ -342,3 +342,15 @@ table.logos img {
 table.logos img.dark-bg {
   background-color: black;
 }
+
+label {
+  display: block;
+}
+
+select {
+  width: 100%;
+}
+
+baseline-status {
+  margin-top: 2em;
+}

gh-pages/src/index.md

@@ -21,7 +21,7 @@ Baseline is calculated using the following core browser set:
 
 ## How do I find the Baseline status of a feature?
 
-You can find at-a-glance Baseline statuses on [Can I Use](https://caniuse.com/) feature entries, and [MDN Web Docs](https://developer.mozilla.org/) reference pages. See [Baseline in the wild](/baseline-in-the-wild/) for more examples.
+You can find at-a-glance Baseline statuses on [Can I Use](https://caniuse.com/) feature entries, and [MDN Web Docs](https://developer.mozilla.org/) reference pages, or on our [lookup](/lookup/) page. See [Baseline in the wild](/baseline-in-the-wild/) for more examples.
 
 You can [use Baseline on your site](/use-baseline/) too.
 

gh-pages/src/lookup.md

@@ -0,0 +1,73 @@
+---
+layout: "default.html"
+title: "Lookup Baseline status"
+description: Lookup Baseline status for a web feature.
+---
+
+Look up the Baseline status of a web feature using the [`<baseline-status>` web component](https://github.com/web-platform-dx/baseline-status).
+
+<div>
+  <label for="feature-select">Web feature</label>
+  <select name="feature" id="feature-select">
+    <option value=""></option>
+{% for feature in featuresList %}<option value="{{ feature.key }}">{{ feature.name }} ({{ feature.key }})</option>
+{% endfor %}
+  </select>
+</div>
+
+<div id="status-container">
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/baseline-status.min.js" type="module"></script>
+
+<script>
+  const select = document.getElementById("feature-select");
+  const container = document.getElementById("status-container");
+
+  // On page load, if a query string is provided, update the widget.
+  updateFromQueryString();
+
+  // When the back/forward buttons are used, update the widget.
+  window.addEventListener("popstate", (e) => {
+    updateFromQueryString();
+  });
+
+  // When an item is selected, update the widget.
+  select.addEventListener("change", (e) => {
+    const newKey = e.target.value;
+    if (newKey) {
+      addStatusElement(newKey, true);
+    }
+  });
+
+  // Read the query string and update the widget.
+  function updateFromQueryString() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const qsKey = urlParams.get("key");
+    if (qsKey) {
+      addStatusElement(qsKey);
+      select.value = qsKey;
+    }
+  }
+
+  // Add the status element to the page, and optionally update the query string.
+  function addStatusElement(featureId, updateQueryString) {
+    removeStatusElement();
+    const elem = document.createElement("baseline-status");
+    elem.setAttribute("featureId", featureId);
+    container.appendChild(elem);
+    if (updateQueryString) {
+      const url = new URL(location);
+      url.searchParams.set("key", featureId);
+      history.pushState({}, "", url);
+    }
+  }
+
+  // Remove all status elements from the page.
+  function removeStatusElement() {
+    const elems = container.getElementsByTagName("baseline-status");
+    for (const elem of elems) {
+      elem.remove();
+    }
+  }
+</script>