Add top-level index.html for dev only (not GH Pages / W3C site) (#4081)

kfranqueiro · web-flow · commit 7e0f5eae7824 · 2024-10-03T11:26:29.000-04:00
This is a re-do of #4076, with one change: it only pre-clears the output folder (`_site`) for W3C site builds, not for GitHub Pages builds. The deploy script for the latter depends on the output folder _not_ being cleared, in order to layer the new build on top of existing contents. (Fortunately this failed loudly the first time upon deploy, so it didn't affect the contents of the gh-pages branch.) I tested using my own fork this time to make sure the GitHub Pages build would complete, and confirmed that the top-level index.html added in this PR does _not_ output for that build, leaving the existing top-level index.html in the gh-pages branch intact.
diff --git a/.eleventyignore b/.eleventyignore
@@ -1,5 +1,6 @@
-*.*
+*.md
 11ty/
+acknowledgements.html
 acknowledgements/
 conformance-challenges/
 guidelines/
diff --git a/11ty/CustomLiquid.ts b/11ty/CustomLiquid.ts
@@ -89,6 +89,8 @@ export class CustomLiquid extends Liquid {
       const isIndex = indexPattern.test(filepath);
       const isTechniques = techniquesPattern.test(filepath);
       const isUnderstanding = understandingPattern.test(filepath);
+      
+      if (!isTechniques && !isUnderstanding) return super.parse(html);
 
       const $ = flattenDom(html, filepath);
 
diff --git a/eleventy.config.ts b/eleventy.config.ts
@@ -1,4 +1,5 @@
 import compact from "lodash-es/compact";
+import { rimraf } from "rimraf";
 
 import { copyFile } from "fs/promises";
 
@@ -124,6 +125,7 @@ export default function (eleventyConfig: any) {
   eleventyConfig.addGlobalData("eleventyComputed", {
     // permalink determines output structure; see https://www.11ty.dev/docs/permalinks/
     permalink: ({ page, isUnderstanding }: GlobalData) => {
+      if (page.inputPath === "./index.html" && process.env.WCAG_MODE) return false;
       if (isUnderstanding) {
         // understanding-metadata.html exists in 2 places; top-level wins in XSLT process
         if (/\/20\/understanding-metadata/.test(page.inputPath)) return false;
@@ -173,6 +175,12 @@ export default function (eleventyConfig: any) {
 
   eleventyConfig.addPassthroughCopy("working-examples/**");
 
+  eleventyConfig.on("eleventy.before", async ({ runMode }: EleventyEvent) => {
+    // Clear the _site folder before builds intended for the W3C site,
+    // to avoid inheriting dev-only files from previous runs
+    if (runMode === "build" && process.env.WCAG_MODE === "publication") await rimraf("_site");
+  });
+
   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
diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8"/>
+		<title>Web Content Accessibility Guidelines {{ versionDecimal }}</title>
+	</head>
+	<body>
+		<h1>Web Content Accessibility Guidelines {{ versionDecimal }}</h1>
+		<ul>
+			<li><a href="techniques/">Techniques</a></li>
+			<li><a href="understanding/">Understanding Docs</a></li>
+		</ul>
+	</body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "liquidjs": "^10.17.0",
     "lodash-es": "^4.17.21",
     "mkdirp": "^3.0.1",
+    "rimraf": "^5.0.10",
     "tsx": "^4.11.0"
   },
   "devDependencies": {
