Generate guidelines during Netlify PR preview builds (#4141)

This effectively replaces what the pr-preview bot currently does (and what #2220 sought to do within the repo). The problem with the pr-preview bot is its previews don't fully work (e.g. as seen in #4123). ## Changes - Remove `.pr-preview.json` to stop pr-preview bot from running - Add logic to `eleventy.config.ts` to copy `guidelines` folder assets and run through spec-generator (the same thing we use for GH Pages builds; also the same thing used by the pr-preview bot, IIUC) when running a standard build through netlify - Conditionally add guidelines list item to top-level `index.html` (which is only used for local dev and PR builds) - Tangentially, rename our github-pages push workflow to be more distinguishable in the Actions tab
w3c · Nov 15, 2024 · 0df965a · 0df965a
1 parent b99ada8
commit 0df965a
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 7 deletions.
diff --git a/.github/workflows/11ty-publish.yaml b/.github/workflows/11ty-publish.yaml
@@ -1,4 +1,4 @@
-name: CI
+name: Push to gh-pages branch
 
 # Reference documentation: https://docs.github.com/en/actions/reference
 

diff --git a/.pr-preview.json b/.pr-preview.json
diff --git a/eleventy.config.ts b/eleventy.config.ts
@@ -1,7 +1,10 @@
+import axios from "axios";
 import compact from "lodash-es/compact";
+import { mkdirp } from "mkdirp";
 import { rimraf } from "rimraf";
 
-import { copyFile } from "fs/promises";
+import { copyFile, writeFile } from "fs/promises";
+import { join } from "path";
 
 import { CustomLiquid } from "11ty/CustomLiquid";
 import {
@@ -184,7 +187,31 @@ export default function (eleventyConfig: any) {
   eleventyConfig.on("eleventy.after", async ({ dir }: EleventyEvent) => {
     // addPassthroughCopy can only map each file once,
     // but base.css needs to be copied to a 2nd destination
-    await copyFile(`${dir.input}/css/base.css`, `${dir.output}/understanding/base.css`);
+    await copyFile(
+      join(dir.input, "css", "base.css"),
+      join(dir.output, "understanding", "base.css")
+    );
+
+    // Output guidelines/index.html and dependencies for PR runs (not for GH Pages or W3C site)
+    const sha = process.env.COMMIT_REF; // Read environment variable exposed by Netlify
+    if (sha && !process.env.WCAG_MODE) {
+      await mkdirp(join(dir.output, "guidelines"));
+      await copyFile(
+        join(dir.input, "guidelines", "guidelines.css"),
+        join(dir.output, "guidelines", "guidelines.css")
+      );
+      await copyFile(
+        join(dir.input, "guidelines", "relative-luminance.html"),
+        join(dir.output, "guidelines", "relative-luminance.html")
+      );
+
+      const url = `https://raw.githack.com/${GH_ORG}/${GH_REPO}/${sha}/guidelines/index.html?isPreview=true`;
+      const { data: processedGuidelines } = await axios.get(
+        `https://labs.w3.org/spec-generator/?type=respec&url=${encodeURIComponent(url)}`,
+        { responseType: "text" }
+      );
+      await writeFile(`${dir.output}/guidelines/index.html`, processedGuidelines);
+    }
   });
 
   eleventyConfig.setLibrary(

diff --git a/index.html b/index.html
@@ -1,3 +1,9 @@
+---js
+// Same condition used for copying guidelines assets in eleventy.config.ts
+const includeGuidelines = process.env.COMMIT_REF && !process.env.WCAG_MODE;
+const repoUrl = process.env.REPOSITORY_URL;
+const prNumber = process.env.REVIEW_ID;
+---
 <!DOCTYPE html>
 <html lang="en">
 	<head>
@@ -6,7 +12,16 @@
 	</head>
 	<body>
 		<h1>Web Content Accessibility Guidelines {{ versionDecimal }}</h1>
+    {% if repoUrl and prNumber -%}
+    <p>
+      <strong>Note:</strong> This is a <strong>preview</strong> for
+      <a href="{{ repoUrl }}/pull/{{ prNumber }}">PR #{{ prNumber }}</a>.
+    </p>
+    {%- endif %}
 		<ul>
+      {% if includeGuidelines -%}
+        <li><a href="guidelines/">Guidelines</a></li>
+      {%- endif %}
 			<li><a href="techniques/">Techniques</a></li>
 			<li><a href="understanding/">Understanding Docs</a></li>
 		</ul>

diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
   "license": "W3C",
   "dependencies": {
     "@11ty/eleventy": "^3.0.0",
+    "axios": "^1.7.7",
     "cheerio": "^1.0.0",
     "glob": "^10.3.16",
     "gray-matter": "^4.0.3",