Skip to content

Commit aa2e11d

Browse files
daniel-montalvogithub-actions[bot]dtsengchromium
authored
Editorial: Improve netlify preview (#2703)
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: David Tseng <dtseng@google.com>
1 parent 4c60da4 commit aa2e11d

File tree

8 files changed

+256
-47
lines changed

8 files changed

+256
-47
lines changed

.github/workflows/preview.yml

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
name: Preview
2+
3+
on:
4+
pull_request:
5+
types: [opened, synchronize]
6+
7+
jobs:
8+
build-and-deploy:
9+
runs-on: ubuntu-latest
10+
steps:
11+
- name: Checkout repo
12+
uses: actions/checkout@v6
13+
with:
14+
fetch-depth: 0
15+
16+
- name: Set up Node.js
17+
uses: actions/setup-node@v3
18+
with:
19+
node-version: "latest"
20+
21+
- name: Install additional dependencies
22+
run: npm install axios yargs
23+
24+
- name : Install respec globally
25+
run : npm install -g respec
26+
27+
- name: Build site
28+
run: bash ./common/script/pr-preview.sh
29+
30+
- name: Deploy site to Netlify
31+
uses: nwtgck/actions-netlify@v3.0
32+
with:
33+
publish-dir: "./public"
34+
github-token: ${{ secrets.GITHUB_TOKEN }}
35+
deploy-message: ${{ github.event.pull_request.title }}
36+
alias: deploy-preview-${{ github.event.number }}
37+
enable-pull-request-comment: true
38+
enable-commit-comment: true
39+
overwrites-pull-request-comment: true
40+
env:
41+
NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
42+
NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
43+
timeout-minutes: 5
44+
45+
- name: Update PR comment with preview and diff links
46+
env:
47+
SITE_NAME: wai-aria
48+
run: |
49+
node common/script/prComment.mjs \
50+
--repo ${{ github.repository }} \
51+
--pull_request_number ${{ github.event.pull_request.number }} \
52+
--token ${{ secrets.GITHUB_TOKEN }} \
53+
--update_pr

.pr-preview.json

Lines changed: 0 additions & 4 deletions
This file was deleted.

common/script/pr-preview.sh

Lines changed: 33 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,41 @@
33
# build relative links to ARIA spec
44
find . -maxdepth 1 -type f -name "index.html" -exec sed -i 's|ED: "https://w3c\.github\.io/|ED: "./|g' {} +
55

6-
# build lins to ARIA from chil specs
6+
# build lins to ARIA from child specs
77
find . -mindepth 2 -type f -name "index.html" -exec sed -i 's|ED: "https://w3c\.github\.io/aria/|ED: "/|g' {} +
88

99
# build relative links for child specs
1010
find . -mindepth 2 -type f -name "index.html" -exec perl -pi -e 's|ED: "https://w3c\.github\.io/(?!aria)|ED: "/|g' {} +
11+
12+
# make output directory
13+
mkdir -p public/accname
14+
mkdir -p public/core-aam
15+
mkdir -p public/dpub-aam
16+
mkdir -p public/dpub-aria
17+
mkdir -p public/graphics-aam
18+
mkdir -p public/graphics-aria
19+
mkdir -p public/svg-aam
20+
mkdir -p public/mathml-aam
21+
mkdir -p public/pdf-aam
22+
1123
# build all specs
12-
npx respec -s index.html -o index.html --localhost
13-
npx respec -s accname/index.html -o accname/index.html --localhost
14-
npx respec -s core-aam/index.html -o core-aam/index.html --localhost
15-
npx respec -s dpub-aam/index.html -o dpub-aam/index.html --localhost
16-
npx respec -s dpub-aria/index.html -o dpub-aria/index.html --localhost
17-
npx respec -s graphics-aam/index.html -o graphics-aam/index.html --localhost
18-
npx respec -s graphics-aria/index.html -o graphics-aria/index.html --localhost
19-
npx respec -s svg-aam/index.html -o svg-aam/index.html --localhost
20-
npx respec -s mathml-aam/index.html -o mathml-aam/index.html --localhost
21-
npx respec -s pdf-aam/index.html -o pdf-aam/index.html --localhost
24+
npx respec -s index.html -o public/index.html --localhost --disable-sandbox
25+
echo "Built ARIA"
26+
npx respec -s accname/index.html -o public/accname/index.html --localhost --disable-sandbox
27+
echo "Built AccName"
28+
npx respec -s core-aam/index.html -o public/core-aam/index.html --localhost --disable-sandbox
29+
echo "Built Core AAM"
30+
npx respec -s dpub-aam/index.html -o public/dpub-aam/index.html --localhost --disable-sandbox
31+
echo "Built DPub AAM"
32+
npx respec -s dpub-aria/index.html -o public/dpub-aria/index.html --localhost --disable-sandbox
33+
echo "Built DPUB ARIA"
34+
npx respec -s graphics-aam/index.html -o public/graphics-aam/index.html --localhost --disable-sandbox
35+
echo "Built graphics AAM"
36+
npx respec -s graphics-aria/index.html -o public/graphics-aria/index.html --localhost --disable-sandbox
37+
echo "Built graphics ARIA"
38+
npx respec -s svg-aam/index.html -o public/svg-aam/index.html --localhost --disable-sandbox
39+
echo "Built SVG AAM"
40+
npx respec -s mathml-aam/index.html -o public/mathml-aam/index.html --localhost --disable-sandbox
41+
echo "Built mathml-aam"
42+
npx respec -s pdf-aam/index.html -o public/pdf-aam/index.html --localhost --disable-sandbox
43+
echo "Built PDF AAM"

common/script/prComment.mjs

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
import axios from "axios";
2+
import fs from "fs";
3+
import path from "path";
4+
import yargs from "yargs";
5+
import { hideBin } from "yargs/helpers";
6+
import { fileURLToPath } from "url";
7+
8+
const __filename = fileURLToPath(import.meta.url);
9+
const __dirname = path.dirname(__filename);
10+
11+
// Parse command-line arguments with fallbacks to GitHub Actions environment variables
12+
const args = yargs(hideBin(process.argv))
13+
.option("repo", {
14+
alias: "r",
15+
type: "string",
16+
description: "GitHub repository in the format owner/repo",
17+
default: process.env.GITHUB_REPOSITORY,
18+
})
19+
.option("pull_request_number", {
20+
alias: "pr",
21+
type: "number",
22+
description: "Pull request number",
23+
default: process.env.PR_NUMBER ? parseInt(process.env.PR_NUMBER) : undefined,
24+
})
25+
.option("token", {
26+
alias: "t",
27+
type: "string",
28+
description: "GitHub personal access token",
29+
default: process.env.GITHUB_TOKEN,
30+
})
31+
.option("build_specs", {
32+
alias: "b",
33+
type: "boolean",
34+
description: "Build specs before generating links",
35+
default: true,
36+
})
37+
.option("update_pr", {
38+
alias: "u",
39+
type: "boolean",
40+
description: "Update the PR description with preview links",
41+
default: false,
42+
})
43+
.option("base_ref", {
44+
type: "string",
45+
description: "Base branch reference for git diff",
46+
default: process.env.GITHUB_BASE_REF || "main",
47+
})
48+
.help().argv;
49+
50+
const { repo, pull_request_number, token, update_pr, build_specs, base_ref } = args;
51+
52+
async function updatePRDescription(markdownContent) {
53+
if (!update_pr) return;
54+
55+
try {
56+
// Get current PR description
57+
const prResponse = await axios.get(`https://api.github.com/repos/${repo}/pulls/${pull_request_number}`, {
58+
headers: {
59+
Authorization: `token ${token}`,
60+
Accept: 'application/vnd.github.v3+json'
61+
}
62+
});
63+
64+
const currentBody = prResponse.data.body || '';
65+
66+
// Remove any existing preview section
67+
const cleanedBody = currentBody.replace(/🚀 \*\*Netlify Preview\*\*:[\s\S]*?(?=\n\n|\n$|$)/g, '').trim();
68+
69+
// Create new body with preview links prepended
70+
const newBody = `🚀 **Netlify Preview**:
71+
🔄 **this PR updates the following sspecs**:
72+
${markdownContent}
73+
74+
${cleanedBody}`.trim();
75+
76+
// Update PR description
77+
await axios.patch(`https://api.github.com/repos/${repo}/pulls/${pull_request_number}`, {
78+
body: newBody
79+
}, {
80+
headers: {
81+
Authorization: `token ${token}`,
82+
Accept: 'application/vnd.github.v3+json'
83+
}
84+
});
85+
86+
console.log('PR description updated successfully');
87+
} catch (error) {
88+
console.error('Error updating PR description:', error.message);
89+
}
90+
}
91+
92+
// Define the base URLs
93+
// Use Netlify site and context to build preview URL
94+
// Get Netlify site name from environment variable or default to 'wai-aria'
95+
const netlifySite = process.env.SITE_NAME || 'wai-aria';
96+
// Get Netlify context from environment variable or default to 'deploy-preview'
97+
const netlifyContext = process.env.CONTEXT || process.env.NETLIFY_CONTEXT || 'deploy-preview';
98+
const previewBaseURL = `https://${netlifyContext}-${pull_request_number}--${netlifySite}.netlify.app`;
99+
// Extract repo owner and name from the repo parameter (format: owner/repo)
100+
const repoOwner = repo.split('/')[0];
101+
const repoName = repo.split('/')[1];
102+
const EDBaseURL = `https://${repoOwner}.github.io/${repoName}`;
103+
104+
async function getChangedFiles() {
105+
const { execSync } = await import('child_process');
106+
try {
107+
// Use git diff to get changed files
108+
const diffOutput = execSync(`git diff --name-only origin/${base_ref}...HEAD`, { encoding: 'utf-8' });
109+
const files = diffOutput.split('\n').filter(Boolean);
110+
111+
// Filter to only include index.html files
112+
const specSources = files.filter(file =>
113+
file === 'index.html' || file.endsWith('/index.html')
114+
);
115+
116+
// Skip if no index files were changed
117+
if (specSources.length === 0) {
118+
console.log('No index.html files changed in this PR. Skipping preview generation.');
119+
return;
120+
}
121+
122+
// Build the Markdown list with preview URLs and diff links
123+
const markdownList = specSources.map((file) => {
124+
const previewUrl = `${previewBaseURL}/${file}`;
125+
126+
// Build ED URL based on file path
127+
let EDUrl;
128+
if (file === 'index.html') {
129+
// Main spec: https://w3c.github.io/aria/
130+
EDUrl = `${EDBaseURL}/`;
131+
} else if (file.endsWith('/index.html')) {
132+
// Child specs: https://w3c.github.io/core-aam/ (not /aria/core-aam/)
133+
const dirName = file.split('/').slice(-2, -1)[0];
134+
EDUrl = `https://w3c.github.io/${dirName}/`;
135+
}
136+
137+
const diffUrl = `https://services.w3.org/htmldiff?doc1=${encodeURIComponent(EDUrl)}&doc2=${encodeURIComponent(previewUrl)}`;
138+
139+
// Generate spec name based on file path
140+
let specName;
141+
if (file === 'index.html') {
142+
specName = 'ARIA';
143+
} else if (file.endsWith('/index.html')) {
144+
// Extract directory name for subdirectory index.html files
145+
const dirName = file.split('/').slice(-2, -1)[0];
146+
specName = dirName;
147+
}
148+
149+
return `- [${specName} preview](${previewUrl}) &mdash; [${specName} diff](${diffUrl})`;
150+
}).join("\n");
151+
152+
// Output the Markdown list
153+
console.log(markdownList);
154+
155+
// Optionally, write the output to a file
156+
const outputPath = path.join(__dirname, "changed_files.md");
157+
fs.writeFileSync(outputPath, markdownList, "utf8");
158+
console.log(`Markdown list written to ${outputPath}`);
159+
160+
// Update PR description if requested
161+
await updatePRDescription(markdownList);
162+
} catch (error) {
163+
console.error("Error fetching changed files:", error.message);
164+
process.exit(1);
165+
}
166+
}
167+
168+
(async () => {
169+
await getChangedFiles();
170+
})();

core-aam/.pr-preview.json

Lines changed: 0 additions & 4 deletions
This file was deleted.

dpub-aria/.pr-preview.json

Lines changed: 0 additions & 4 deletions
This file was deleted.

netlify.toml

Lines changed: 0 additions & 20 deletions
This file was deleted.

pdf-aam/.pr-preview.json

Lines changed: 0 additions & 4 deletions
This file was deleted.

0 commit comments

Comments
 (0)