Add API for features

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

@@ -49,7 +49,11 @@ jobs:
         with:
           cache: npm
           node-version-file: .node-version
-      - name: NPM Install
+      - name: NPM Install web-features
+        run: npm ci
+      - name: NPM Build web-features
+        run: npm run build
+      - name: NPM Install gh-pages
         run: npm ci
         working-directory: gh-pages/
       - name: Build pages

gh-pages/src/api/api.11tydata.js

@@ -0,0 +1,7 @@
+module.exports = async function () {
+  const { features } = await import("../../../packages/web-features/index.js");
+  return {
+    features: Object.keys(features).map((id) => ({ ...features[id], id })),
+    featureList: { features: Object.keys(features) },
+  };
+};

gh-pages/src/api/feature.liquid

@@ -0,0 +1,9 @@
+---
+pagination:
+  data: features
+  size: 1
+  alias: feature
+permalink: "api/v1/features/{{ feature.id | slugify }}.json"
+---
+{{ feature | json }}
+

gh-pages/src/api/features.liquid

@@ -0,0 +1,5 @@
+---
+permalink: "api/v1/features.json"
+---
+{{ featureList | json }}
+

gh-pages/src/use-baseline.md

@@ -18,3 +18,54 @@ When visiting sites like [Can I Use](https://caniuse.com), [MDN Web Docs](https:
 Are you writing a blog post or article or presenting at a conference? Use the [Baseline logos](/name-and-logo-usage-guidelines/) as a shorthand to let your audience know the status of a feature.
 
 The [`<baseline-status>` web component](https://github.com/web-platform-dx/baseline-status) is also available to include on your site or pages to indicate the status of a web feature. It renders at run-time, so it’s always up to date with the latest Baseline status.
+
+## Use the API
+
+This site serves features via an API. These features are up to date with the `main` branch, and may be ahead of the latest release.
+
+### List features
+
+Returns a list of the keys of all existing features.
+
+`GET https://web-platform-dx.github.io/api/v1/features.json`
+
+```json
+{
+  "features": [
+    "a",
+    "abbr",
+    ...
+    "zoom",
+    "zstd"
+  ]
+}
+```
+
+[Example](https://web-platform-dx.github.io/api/v1/features.json)
+
+### Read feature
+
+Returns the data for a specific feature.
+
+`GET https://web-platform-dx.github.io/api/v1/features/[featureId].json`
+
+```json
+{
+  "compat_features": [
+    ...
+  ],
+  "description": "",
+  "description_html": "",
+  "group": "html-elements",
+  "name": "\u003Ca\u003E",
+  "spec": "",
+  "status": {
+    ...
+  },
+  "id": "a"
+}
+```
+
+The data is `FeatureData` as defined in the [Web Features schema](https://github.com/web-platform-dx/web-features/blob/main/schemas/data.schema.json#L27), with the addition of the `id` key.
+
+[Example](https://web-platform-dx.github.io/api/v1/features/a.json)