The web platform features explorer website visualizes the web platform data that's maintained in the web-platform-dx/web-features repository.
View the live website at https://web-platform-dx.github.io/web-features-explorer/.
- To test and visualize the data that's in the web-features repo.
- To connect the data to other relevant sources of information about web features.
- To provide web developers with useful ways to stay up to date with the web and explore features.
The data that the website is based on comes from the web-features NPM package. The site uses the next version if the package, which provide the data from the latest commit on the web-features repo.
In addition, the site uses the @mdn/browser-compat-data NPM package to get various other pieces of information, such as links to MDN documentation and links to bug trackers.
The web pages are built by using the Eleventy static site generator.
To run the website locally, clone the repository, make sure the dependencies are updated, and then build the site.
To ensure you have the latest data:
-
Run
npx npm-check-updates -u
-
Run
npm update web-features
-
npm install
To build the site:
-
Run
npm run build
to generate the site -
Check the
docs
folder for the resulting build files.
The source template files used to build the site are in the site
folder.
To run the website on a local development server:
-
Run
npm run serve
. -
Open a web browser and go to
http://localhost:8080
. -
Modify a source file, wait for the build to run automatically, and for the changes to appear in the browser.
The website is deployed to production using GitHub Pages. The static HTML pages are generated in the gh-pages branch on a regular basis by the 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
.