Skip to content

Commit 209b72f

Browse files
captainbrossetcaptainbrosset
committed
Add scripts to generate weekly in CI
1 parent e4786ff commit 209b72f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+6504
-1797
lines changed

‎.github/workflows/generate-site.yml

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
name: Generate data and build dashboard
2+
3+
on:
4+
schedule:
5+
# Every Friday at midnight
6+
- cron: '0 0 * * FRI'
7+
workflow_dispatch:
8+
9+
jobs:
10+
build:
11+
runs-on: ubuntu-latest
12+
13+
steps:
14+
- name: Check-out the repository
15+
uses: actions/checkout@v4
16+
17+
- name: Update dependencies
18+
run: |
19+
npm update web-features
20+
npx npm-check-updates -u
21+
npm install
22+
npx playwright install
23+
24+
- name: Compute feature data
25+
run: npm run generate
26+
27+
- name: Retrieve latest WPT revision and results
28+
run: |
29+
npm run get-wpt-shas
30+
npm run update-wpt
31+
32+
- name: Commit changes
33+
run: |
34+
git config --local user.email "${{ github.actor }}@users.noreply.github.com"
35+
git config --local user.name "${{ github.actor }}"
36+
git add .
37+
git commit -m "Weekly regen" --allow-empty
38+
git push origin main
39+
40+
- name: Generate site
41+
run: npm run build-site
42+
43+
- name: Deploy to GitHub Pages
44+
uses: JamesIves/github-pages-deploy-action@v4
45+
with:
46+
folder: docs

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
docs
2+
node_modules

‎README.md

+110-7
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,115 @@
1-
# Microsoft Edge web platform top developer needs dashboard
1+
# Microsoft Edge - 2024 web platform top developer needs
22

3-
As part of our commitment to the web platform, we continuously listen to developer signals and feedback. We leverage what we learn to implement the features that developers need to build great web experiences. We also know that developers need those features, especially those that can't be polyfilled, or which create new architectural opportunities, to be available across all browsers.
3+
This repository contains the data and scripts that are used to generate the [Microsoft Edge - 2024 web platform top developer needs](https://microsoftedge.github.io/TopDeveloperNeeds/) dashboard.
44

5-
This repository contains the source code for a dashboard that represents our view of progress across the web ecosystem towards resolving top developer pain points and closing interoperability gaps.
5+
For more information about the dashboard, see [Introducing the Edge 2024 web platform top developer needs dashboard](https://blogs.windows.com/msedgedev/2024/04/18/2024-web-platform-top-developer-needs-dashboard/) oin the Microsoft Edge blog.
66

7-
Access the dashboard at [https://MicrosoftEdge.github.io/TopDeveloperNeeds](https://MicrosoftEdge.github.io/TopDeveloperNeeds).
7+
The rest of this README file explains how to update the dashboard data and site.
88

9-
See also:
9+
## Prerequisites
1010

11-
* [Our announcement blog post](https://blogs.windows.com/msedgedev/2024/04/18/2024-web-platform-top-developer-needs-dashboard).
12-
* [A GitHub issue to provide feedback on the dashboard](https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/782).
11+
* Install [Node.js](https://nodejs.org).
12+
* Install the required dependencies by typing `npm install`.
13+
14+
## Updating the list of features
15+
16+
The features listed on the dashboard are defined in the `features.json` file.
17+
18+
To update the list of features, make changes to the file. The file contains a JSON array of objects, where each object represents a single feature.
19+
20+
Features are based on the features part of the [web-features project](https://github.com/web-platform-dx/web-features/). At a minimum, each feature object must contain the following information:
21+
22+
* `webFeaturesID`: the ID of the feature in the [web-features](https://github.com/web-platform-dx/web-features/) repo.
23+
* `rationale`: a list of reasons why this feature is important for our dashboard. Each reason is an object with the following string properties `{ description, link }`.
24+
* `wpt`: a string starting with `/results`, and including the optional request parameters that's used to retrieve WPT test results on the wpt.fyi site.
25+
26+
For example:
27+
28+
```json
29+
{
30+
"webFeaturesID": "object-view-box",
31+
"wpt": "/results/css?q=object%20view%20box",
32+
"rationale": [
33+
{
34+
"description": "The feature is a pre-requisite for the View Transitions API, which is a highly requested feature",
35+
"link": "https://github.com/w3c/csswg-drafts/issues/7058"
36+
}
37+
]
38+
}
39+
```
40+
41+
If the feature corresponds to a group of features from the web-features repo, make the following changes:
42+
43+
* `name`: define a name for the group of features.
44+
* `webFeaturesIDs`: change this field's type to an array of the IDs of the features in the web-features repo.
45+
46+
For example, the Scrollbar styling group below is a group of three different web-features:
47+
48+
```json
49+
{
50+
"name": "Scrollbar styling",
51+
"webFeaturesID": ["scrollbar-color", "scrollbar-gutter", "scrollbar-width"],
52+
"wpt": "/results/css?q=path%3A%2Fcss%2Fcss-scrollbars%20or%20%28scrollbar-gutter%20and%20path%3A%2Fcss%2Fcss-overflow%29",
53+
"rationale": [
54+
{
55+
"description": "Styling scrollbar ranked #5 in the State of CSS Survey 2023's browser incompatibilities question",
56+
"link": "https://2023.stateofcss.com/en-US/usage/#css_interoperability_features"
57+
}
58+
]
59+
}
60+
```
61+
62+
In addition, you can provide the following optional fields:
63+
64+
* `id`: used to set the anchor link ID for the feature. By default anchor links match web-features IDs. Use `id` to override the default anchor link ID. This can be useful when updating a feature over time, to avoid breaking existing links.
65+
* `name`: to override the name coming from the web-features repo.
66+
* `description`: to override the description coming from the web-features repo.
67+
* `spec`: to override the spec (or specs) coming from the web-features repo.
68+
69+
## Generating the dashboard data
70+
71+
1. Update the dependencies:
72+
73+
* `npm update web-features`
74+
75+
This updates to the most recent version of web-features.
76+
77+
* `npx npm-check-updates -u`
78+
79+
This updates to the most recent version of browser-compat-data, and other dependencies, such as Playwright.
80+
81+
* `npm install`
82+
83+
This installs the missing dependencies if new versions were found at the previous step.
84+
85+
* `npx playwright install`
86+
87+
This re-installs the Playwright executables, if needed.
88+
89+
1. To update the computed feature data file:
90+
91+
* `npm run generate`
92+
93+
This re-generates `site/_data/features.json` based on `features.json`.
94+
95+
1. To retrieve the latest WPT revision for this week:
96+
97+
* `npm run get-wpt-shas`
98+
99+
This adds more entries into the `historical-shas.json` file, which is needed to retrieve WPT test results.
100+
101+
1. To retrieve the WPT test results:
102+
103+
* `npm run update-wpt`
104+
105+
This fetches the missing WPT results for our features based on the `historical-shas.json` file, and puts them in `site/_data/wpt.json` as well as generates front-end files in `site/assets/`.
106+
107+
1. To build the site
108+
109+
* `npm run build-site`
110+
111+
This generates the dashboard website in the `docs` directory.
112+
113+
## Testing the dashboard
114+
115+
To test the built website before publishing it to the live server, run `npm run serve-site` and open a browser window to `http://localhost:8080/`.

‎const.js

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
// The weeks we're interested in getting WPT data from.
2+
export const WEEKS = [
3+
{from: "2023-01-01", to: "2023-01-07"},
4+
{from: "2023-01-08", to: "2023-01-14"},
5+
{from: "2023-01-15", to: "2023-01-21"},
6+
{from: "2023-01-22", to: "2023-01-28"},
7+
{from: "2023-01-29", to: "2023-02-04"},
8+
{from: "2023-02-05", to: "2023-02-11"},
9+
{from: "2023-02-12", to: "2023-02-18"},
10+
{from: "2023-02-19", to: "2023-02-25"},
11+
{from: "2023-02-26", to: "2023-03-04"},
12+
{from: "2023-03-05", to: "2023-03-11"},
13+
{from: "2023-03-12", to: "2023-03-18"},
14+
{from: "2023-03-19", to: "2023-03-25"},
15+
{from: "2023-03-26", to: "2023-04-01"},
16+
{from: "2023-04-02", to: "2023-04-08"},
17+
{from: "2023-04-09", to: "2023-04-15"},
18+
{from: "2023-04-16", to: "2023-04-22"},
19+
{from: "2023-04-23", to: "2023-04-29"},
20+
{from: "2023-04-30", to: "2023-05-06"},
21+
{from: "2023-05-07", to: "2023-05-13"},
22+
{from: "2023-05-14", to: "2023-05-20"},
23+
{from: "2023-05-21", to: "2023-05-27"},
24+
{from: "2023-05-28", to: "2023-06-03"},
25+
{from: "2023-06-04", to: "2023-06-10"},
26+
{from: "2023-06-11", to: "2023-06-17"},
27+
{from: "2023-06-18", to: "2023-06-24"},
28+
{from: "2023-06-25", to: "2023-07-01"},
29+
{from: "2023-07-02", to: "2023-07-08"},
30+
{from: "2023-07-09", to: "2023-07-15"},
31+
{from: "2023-07-16", to: "2023-07-22"},
32+
{from: "2023-07-23", to: "2023-07-29"},
33+
{from: "2023-07-30", to: "2023-08-05"},
34+
{from: "2023-08-06", to: "2023-08-12"},
35+
{from: "2023-08-13", to: "2023-08-19"},
36+
{from: "2023-08-20", to: "2023-08-26"},
37+
{from: "2023-08-27", to: "2023-09-02"},
38+
{from: "2023-09-03", to: "2023-09-09"},
39+
{from: "2023-09-10", to: "2023-09-16"},
40+
{from: "2023-09-17", to: "2023-09-23"},
41+
{from: "2023-09-24", to: "2023-09-30"},
42+
{from: "2023-10-01", to: "2023-10-07"},
43+
{from: "2023-10-08", to: "2023-10-14"},
44+
{from: "2023-10-15", to: "2023-10-21"},
45+
{from: "2023-10-22", to: "2023-10-28"},
46+
{from: "2023-10-29", to: "2023-11-04"},
47+
{from: "2023-11-05", to: "2023-11-11"},
48+
{from: "2023-11-12", to: "2023-11-18"},
49+
{from: "2023-11-19", to: "2023-11-25"},
50+
{from: "2023-11-26", to: "2023-12-02"},
51+
{from: "2023-12-03", to: "2023-12-09"},
52+
{from: "2023-12-10", to: "2023-12-16"},
53+
{from: "2023-12-17", to: "2023-12-23"},
54+
{from: "2023-12-24", to: "2023-12-30"},
55+
{from: "2023-12-31", to: "2024-01-06"},
56+
{from: "2024-01-07", to: "2024-01-13"},
57+
{from: "2024-01-14", to: "2024-01-20"},
58+
{from: "2024-01-21", to: "2024-01-27"},
59+
{from: "2024-01-28", to: "2024-02-03"},
60+
{from: "2024-02-04", to: "2024-02-10"},
61+
{from: "2024-02-11", to: "2024-02-17"},
62+
{from: "2024-02-18", to: "2024-02-24"},
63+
{from: "2024-02-25", to: "2024-03-02"},
64+
{from: "2024-03-03", to: "2024-03-09"},
65+
{from: "2024-03-10", to: "2024-03-16"},
66+
{from: "2024-03-17", to: "2024-03-23"},
67+
{from: "2024-03-24", to: "2024-03-30"},
68+
{from: "2024-03-31", to: "2024-04-06"},
69+
{from: "2024-04-07", to: "2024-04-13"},
70+
{from: "2024-04-14", to: "2024-04-20"},
71+
{from: "2024-04-21", to: "2024-04-27"},
72+
{from: "2024-04-28", to: "2024-05-04"},
73+
{from: "2024-05-05", to: "2024-05-11"},
74+
{from: "2024-05-12", to: "2024-05-18"},
75+
{from: "2024-05-19", to: "2024-05-25"},
76+
{from: "2024-05-26", to: "2024-06-01"},
77+
{from: "2024-06-02", to: "2024-06-08"},
78+
{from: "2024-06-09", to: "2024-06-15"},
79+
{from: "2024-06-16", to: "2024-06-22"},
80+
{from: "2024-06-23", to: "2024-06-29"},
81+
{from: "2024-06-30", to: "2024-07-06"},
82+
{from: "2024-07-07", to: "2024-07-13"},
83+
{from: "2024-07-14", to: "2024-07-20"},
84+
{from: "2024-07-21", to: "2024-07-27"},
85+
{from: "2024-07-28", to: "2024-08-03"},
86+
{from: "2024-08-04", to: "2024-08-10"},
87+
{from: "2024-08-11", to: "2024-08-17"},
88+
{from: "2024-08-18", to: "2024-08-24"},
89+
{from: "2024-08-25", to: "2024-08-31"},
90+
{from: "2024-09-01", to: "2024-09-07"},
91+
{from: "2024-09-08", to: "2024-09-14"},
92+
{from: "2024-09-15", to: "2024-09-21"},
93+
{from: "2024-09-22", to: "2024-09-28"},
94+
{from: "2024-09-29", to: "2024-10-05"},
95+
{from: "2024-10-06", to: "2024-10-12"},
96+
{from: "2024-10-13", to: "2024-10-19"},
97+
{from: "2024-10-20", to: "2024-10-26"},
98+
{from: "2024-10-27", to: "2024-11-02"},
99+
{from: "2024-11-03", to: "2024-11-09"},
100+
{from: "2024-11-10", to: "2024-11-16"},
101+
{from: "2024-11-17", to: "2024-11-23"},
102+
{from: "2024-11-14", to: "2024-11-30"},
103+
{from: "2024-12-01", to: "2024-12-07"},
104+
{from: "2024-12-08", to: "2024-12-14"},
105+
{from: "2024-12-15", to: "2024-12-21"},
106+
{from: "2024-12-22", to: "2024-12-28"}
107+
];
108+
109+
// The browsers we're interested in.
110+
export const BROWSERS = ["chrome", "edge", "firefox", "safari"];
111+
112+
// We're only getting experimental browser data, to get the most recent WPT results.
113+
export const BROWSER_FLAVOR = "experimental";
114+
115+
// The branch where we're getting the WPT data from.
116+
export const WPT_BRANCH = "master";

‎eleventy.config.cjs

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
module.exports = function (eleventyConfig) {
2+
eleventyConfig.addPassthroughCopy("site/assets");
3+
4+
return {
5+
dir: {
6+
input: "site",
7+
output: "docs",
8+
},
9+
};
10+
}

0 commit comments

Comments
 (0)