A website to visualize the web platform data that's maintained in the 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/
- To visualize the web-features data.
- To provide a way to explore the data in user-friendly ways, such as:
- By baseline-low features (newly available on the web platform).
- By baseline-high features (widely available on the web platform).
- By monthly release notes.
- Or, by features that are not yet available on the web platform.
- To test various use cases that consumers of this data have.
- To detect issues in the data.
The data that the website is based on comes from the 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 npm package is used to get various other pieces of information, such as links to MDN documentation and links to bug trackers.
To ensure you have the latest data:
-
Run
npx npm-check-updates -u
-
Run
npm update web-features
The website consists of static HTML pages and uses a build script to generate those HTML pages from the data.
The template files, from which the static HTML pages get generated, use the 11ty static website generator. The template files are found in the site
directory.
The result of the build script is found in the docs
directory, which is the directory that GitHub Pages uses to serve the website (see Deployment).
To re-generate the website, after updating the data:
-
Run
npm install
-
Run
npm run build
to generate the siteYou can also run
npm run serve
to start a local server and watch for changes
The website is deployed to production using GitHub Pages.
The static HTML pages are generated on the gh-pages branch.
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
.