Add draft banner to GH Pages and PR preview builds (#4445)

This adds a draft banner to the top of Techniques and Understanding
pages in builds run for GitHub Pages deploys or Netlify PR previews.

The banner includes a link to the equivalent specific page under
w3.org/WAI.

Author: kfranqueiro

11ty/CustomLiquid.ts

@@ -158,6 +158,10 @@ export class CustomLiquid extends Liquid {
       const prependedIncludes = ["header"];
       const appendedIncludes = ["wai-site-footer", "site-footer"];
 
+      // Include draft banner at top of informative pages for GH Pages builds and PR previews
+      if (process.env.WCAG_MODE === "editors" || (process.env.COMMIT_REF && !process.env.WCAG_MODE))
+        prependedIncludes.unshift("draft-banner");
+
       if (isUnderstanding)
         prependedIncludes.push(
           isIndex ? "understanding/navigation-index" : "understanding/navigation"

_includes/draft-banner.html

@@ -0,0 +1,10 @@
+{%- comment -%}
+Banner shown only on builds of informative docs for GitHub Pages.
+{%- endcomment -%}
+{%- assign pubSlug = page.url | replace: "techniques", "Techniques" | replace: "understanding", "Understanding" | replace_last: ".html", "" -%}
+<section class="default-grid info" aria-label="Notice">
+  <p class="inner">
+    This is an unpublished editor’s draft that might include content that is not finalized.
+    <a href="https://www.w3.org/WAI/WCAG{{ version }}{{ pubSlug }}">View the published version</a>
+  </p>
+</section>