From b1f3de643a87e42eeb2779a948846ce9d72500b6 Mon Sep 17 00:00:00 2001
From: Pete LePage <petele@google.com>
Date: Tue, 17 Sep 2024 15:51:42 -0400
Subject: [PATCH 1/6] first cut

---
 gh-pages/eleventy.config.js |  1 +
 gh-pages/src/check.md       | 53 +++++++++++++++++++++++++++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 gh-pages/src/check.md

diff --git a/gh-pages/eleventy.config.js b/gh-pages/eleventy.config.js
index 1a72caec02c..5a5cc393085 100644
--- a/gh-pages/eleventy.config.js
+++ b/gh-pages/eleventy.config.js
@@ -6,6 +6,7 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addPassthroughCopy("./src/assets/img");
   eleventyConfig.addPassthroughCopy("./src/assets/fonts");
   eleventyConfig.addPassthroughCopy("./src/assets/css");
+  eleventyConfig.addPassthroughCopy({"../packages/web-features/data.json": "assets/data/data.json"});
   eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
   const mdOpts = {
     html: true,
diff --git a/gh-pages/src/check.md b/gh-pages/src/check.md
new file mode 100644
index 00000000000..5aa776df30f
--- /dev/null
+++ b/gh-pages/src/check.md
@@ -0,0 +1,53 @@
+---
+layout: "default.html"
+title: "Check feature status"
+---
+
+
+<input type="text" id="feature-name" list="feature-list" />
+<button type="button" id="butSub">Check</button>
+
+<datalist id="feature-list"></datalist>
+
+
+<div id="status-container"></div>
+
+<script src="https://cdn.jsdelivr.net/npm/baseline-status@1.0.4/baseline-status.min.js" type="module"></script>
+
+<script>
+  const inp = document.getElementById('feature-name');
+  const but = document.getElementById('butSub');
+  const container = document.getElementById('status-container');
+  const featureList = document.getElementById('feature-list');
+
+  but.addEventListener('click', () => {
+    addStatus(inp.value);
+  });
+
+  function removeStatus() {
+    const elems = container.getElementsByTagName('baseline-status');
+    for (const elem of elems) {
+      elem.remove();
+    }
+  }
+
+  function addStatus(featureId) {
+    removeStatus();
+    const elem = document.createElement('baseline-status');
+    elem.setAttribute('featureId', featureId);
+    container.appendChild(elem);
+  }
+
+  async function populateFeatureList() {
+    const resp = await fetch('../assets/data/data.json');
+    const data = await resp.json();
+    const keys = Object.keys(data.features);
+    keys.forEach((key) => {
+      const elem = document.createElement('option');
+      elem.setAttribute('value', key);
+      featureList.appendChild(elem);
+    });
+  }
+
+  populateFeatureList();
+</script>

From f31f5f8d9a9a542421fff5d33e572a6ddae87f6e Mon Sep 17 00:00:00 2001
From: Pete LePage <petele@google.com>
Date: Wed, 18 Sep 2024 11:34:18 -0400
Subject: [PATCH 2/6] simplified

---
 gh-pages/eleventy.config.js         | 21 ++++++++++--
 gh-pages/package-lock.json          |  9 +++++
 gh-pages/package.json               |  6 ++--
 gh-pages/src/_includes/default.html |  1 +
 gh-pages/src/check.md               | 53 -----------------------------
 gh-pages/src/index.md               |  2 +-
 gh-pages/src/lookup.md              | 47 +++++++++++++++++++++++++
 7 files changed, 81 insertions(+), 58 deletions(-)
 delete mode 100644 gh-pages/src/check.md
 create mode 100644 gh-pages/src/lookup.md

diff --git a/gh-pages/eleventy.config.js b/gh-pages/eleventy.config.js
index 5a5cc393085..11b5f1fb3a8 100644
--- a/gh-pages/eleventy.config.js
+++ b/gh-pages/eleventy.config.js
@@ -1,13 +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.addPassthroughCopy({"../packages/web-features/data.json": "assets/data/data.json"});
-  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,
diff --git a/gh-pages/package-lock.json b/gh-pages/package-lock.json
index 142e25b8ec9..a966d8c392e 100644
--- a/gh-pages/package-lock.json
+++ b/gh-pages/package-lock.json
@@ -7,6 +7,9 @@
     "": {
       "name": "@web-platform-dx/web-features/site",
       "version": "0.1.0",
+      "dependencies": {
+        "web-features": "^1.3.0-dev-20240918141109-a1c1086"
+      },
       "devDependencies": {
         "@11ty/eleventy": "^2.0.1",
         "markdown-it": "^14.1.0",
@@ -2695,6 +2698,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/web-features": {
+      "version": "1.3.0-dev-20240918141109-a1c1086",
+      "resolved": "https://registry.npmjs.org/web-features/-/web-features-1.3.0-dev-20240918141109-a1c1086.tgz",
+      "integrity": "sha512-eUvE2Wx4WaGTuM0D4dbD0mHKosguJfd7wCsPyecKG+p2yLS0IrkOVHJEn/atjbjBvHK4tI6i2GSGrjqYFLJ4pA==",
+      "license": "Apache-2.0"
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/gh-pages/package.json b/gh-pages/package.json
index 21bd31e93ed..09f570eabc8 100644
--- a/gh-pages/package.json
+++ b/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"
   }
 }
diff --git a/gh-pages/src/_includes/default.html b/gh-pages/src/_includes/default.html
index 3dc416fc1cc..b5123d066f2 100644
--- a/gh-pages/src/_includes/default.html
+++ b/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>
diff --git a/gh-pages/src/check.md b/gh-pages/src/check.md
deleted file mode 100644
index 5aa776df30f..00000000000
--- a/gh-pages/src/check.md
+++ /dev/null
@@ -1,53 +0,0 @@
----
-layout: "default.html"
-title: "Check feature status"
----
-
-
-<input type="text" id="feature-name" list="feature-list" />
-<button type="button" id="butSub">Check</button>
-
-<datalist id="feature-list"></datalist>
-
-
-<div id="status-container"></div>
-
-<script src="https://cdn.jsdelivr.net/npm/baseline-status@1.0.4/baseline-status.min.js" type="module"></script>
-
-<script>
-  const inp = document.getElementById('feature-name');
-  const but = document.getElementById('butSub');
-  const container = document.getElementById('status-container');
-  const featureList = document.getElementById('feature-list');
-
-  but.addEventListener('click', () => {
-    addStatus(inp.value);
-  });
-
-  function removeStatus() {
-    const elems = container.getElementsByTagName('baseline-status');
-    for (const elem of elems) {
-      elem.remove();
-    }
-  }
-
-  function addStatus(featureId) {
-    removeStatus();
-    const elem = document.createElement('baseline-status');
-    elem.setAttribute('featureId', featureId);
-    container.appendChild(elem);
-  }
-
-  async function populateFeatureList() {
-    const resp = await fetch('../assets/data/data.json');
-    const data = await resp.json();
-    const keys = Object.keys(data.features);
-    keys.forEach((key) => {
-      const elem = document.createElement('option');
-      elem.setAttribute('value', key);
-      featureList.appendChild(elem);
-    });
-  }
-
-  populateFeatureList();
-</script>
diff --git a/gh-pages/src/index.md b/gh-pages/src/index.md
index 439505b32db..b4e42bdf95a 100644
--- a/gh-pages/src/index.md
+++ b/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.
 
diff --git a/gh-pages/src/lookup.md b/gh-pages/src/lookup.md
new file mode 100644
index 00000000000..5a2b7f26bdb
--- /dev/null
+++ b/gh-pages/src/lookup.md
@@ -0,0 +1,47 @@
+---
+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).
+
+<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 }}</option>
+  {% endfor %}
+</select>
+
+<div id="status-container">
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/baseline-status@1.0.4/baseline-status.min.js" type="module"></script>
+
+<script>
+  const select = document.getElementById('feature-select');
+  const container = document.getElementById('status-container');
+
+  select.addEventListener('change', (e) => {
+    removeStatusElement();
+    const newKey = e.target.value;
+    if (newKey) {
+      addStatusElement(newKey);
+    }
+  });
+
+  function removeStatusElement() {
+    const elems = container.getElementsByTagName('baseline-status');
+    for (const elem of elems) {
+      elem.remove();
+    }
+  }
+
+  function addStatusElement(featureId) {
+    const elem = document.createElement('baseline-status');
+    elem.setAttribute('featureId', featureId);
+    container.appendChild(elem);
+  }
+</script>

From bcec4f6bcb0278e8b3af8cde581e3e8c4493a103 Mon Sep 17 00:00:00 2001
From: Pete LePage <petele@google.com>
Date: Wed, 18 Sep 2024 12:10:56 -0400
Subject: [PATCH 3/6] minor styling

---
 gh-pages/src/assets/css/style.css | 12 ++++++++++++
 gh-pages/src/lookup.md            | 17 +++++++++--------
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/gh-pages/src/assets/css/style.css b/gh-pages/src/assets/css/style.css
index aa748189381..f2c9f513beb 100644
--- a/gh-pages/src/assets/css/style.css
+++ b/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;
+}
diff --git a/gh-pages/src/lookup.md b/gh-pages/src/lookup.md
index 5a2b7f26bdb..60660f37ee1 100644
--- a/gh-pages/src/lookup.md
+++ b/gh-pages/src/lookup.md
@@ -6,14 +6,15 @@ 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).
 
-<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 }}</option>
-  {% endfor %}
-</select>
+<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>

From 166d10952336981b5c218ff55896a8961f863da7 Mon Sep 17 00:00:00 2001
From: Pete LePage <petele@google.com>
Date: Wed, 18 Sep 2024 12:18:42 -0400
Subject: [PATCH 4/6] fix weird spacing

---
 gh-pages/src/lookup.md | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/gh-pages/src/lookup.md b/gh-pages/src/lookup.md
index 60660f37ee1..cafa69a31a0 100644
--- a/gh-pages/src/lookup.md
+++ b/gh-pages/src/lookup.md
@@ -10,9 +10,8 @@ Look up the Baseline status of a web feature using the [`<baseline-status>` web
   <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 %}
+{% for feature in featuresList %}<option value="{{ feature.key }}">{{ feature.name }} ({{ feature.key }})</option>
+{% endfor %}
   </select>
 </div>
 

From 58711f825696c758d9bdf07348c466d9562fd038 Mon Sep 17 00:00:00 2001
From: Pete LePage <petele@google.com>
Date: Wed, 18 Sep 2024 12:51:11 -0400
Subject: [PATCH 5/6] Add query string support

---
 gh-pages/src/lookup.md | 50 ++++++++++++++++++++++++++++++++----------
 1 file changed, 38 insertions(+), 12 deletions(-)

diff --git a/gh-pages/src/lookup.md b/gh-pages/src/lookup.md
index cafa69a31a0..8ec08185786 100644
--- a/gh-pages/src/lookup.md
+++ b/gh-pages/src/lookup.md
@@ -21,27 +21,53 @@ Look up the Baseline status of a web feature using the [`<baseline-status>` web
 <script src="https://cdn.jsdelivr.net/npm/baseline-status@1.0.4/baseline-status.min.js" type="module"></script>
 
 <script>
-  const select = document.getElementById('feature-select');
-  const container = document.getElementById('status-container');
+  const select = document.getElementById("feature-select");
+  const container = document.getElementById("status-container");
 
-  select.addEventListener('change', (e) => {
-    removeStatusElement();
+  // 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);
+      addStatusElement(newKey, true);
     }
   });
 
-  function removeStatusElement() {
-    const elems = container.getElementsByTagName('baseline-status');
-    for (const elem of elems) {
-      elem.remove();
+  // 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;
     }
   }
 
-  function addStatusElement(featureId) {
-    const elem = document.createElement('baseline-status');
-    elem.setAttribute('featureId', featureId);
+  // 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>

From 0c3700e0523f5ae1466f6aedda068835880c765c Mon Sep 17 00:00:00 2001
From: Pete LePage <petele@google.com>
Date: Wed, 18 Sep 2024 15:14:52 -0400
Subject: [PATCH 6/6] Update when website builds happen

---
 .github/workflows/gh-pages-build-deploy.yml | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/gh-pages-build-deploy.yml b/.github/workflows/gh-pages-build-deploy.yml
index 727f2828113..a232b215a0b 100644
--- a/.github/workflows/gh-pages-build-deploy.yml
+++ b/.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/