Add support for experimental content

ARIA/apg/index/index.md

@@ -67,6 +67,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     <ul>
       <li><a href="#examples_by_role_label">Examples by Role</a></li>
       <li><a href="#examples_by_props_label">Examples by Properties and States</a></li>
+
     </ul>
     <section id="examples_by_roles">
       <h2 id="examples_by_role_label">Examples by Role</h2>
@@ -949,6 +950,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
           </tr></tbody>
       </table>
     </section>
+
   </div>
 
 

content-assets/wai-aria-practices/shared/js/app.js

@@ -20,14 +20,20 @@
     // Determine we are on an example page
     if (!document.location.href.match(/examples\/[^/]+\.html/)) return;
 
+    const isExperimental =
+      document.querySelector('main')?.getAttribute('data-content-phase') ===
+      'experimental';
+
+    const usageWarningLink = isExperimental
+      ? '/templates/experimental-example-usage-warning.html'
+      : '/templates/example-usage-warning.html';
+
     // Generate the usage warning link using app.js link as a starting point
     const scriptSource = document
       .querySelector('[src$="app.js"]')
       .getAttribute('src');
-    const fetchSource = scriptSource.replace(
-      '/js/app.js',
-      '/templates/example-usage-warning.html'
-    );
+
+    const fetchSource = scriptSource.replace('/js/app.js', usageWarningLink);
 
     // Load and parse the usage warning and insert it before the h1
     const html = await (await fetch(fetchSource)).text();

scripts/pre-build/library/determineContentType.js

@@ -45,7 +45,10 @@ const determineContentType = (sourcePath) => {
   }
   if (
     sourcePath.endsWith("shared/templates/read-this-first.html") ||
-    sourcePath.endsWith("shared/templates/example-usage-warning.html")
+    sourcePath.endsWith("shared/templates/example-usage-warning.html") ||
+    sourcePath.endsWith(
+      "shared/templates/experimental-example-usage-warning.html"
+    )
   ) {
     return "template";
   }

scripts/pre-build/library/transformExample.js

@@ -9,8 +9,14 @@ const wrapTablesWithResponsiveDiv = require("./wrapTablesWithResponsiveDiv");
 const removeConflictingCss = require("./removeConflictingCss");
 const getExampleLastModifiedDate = require("./getExampleLastModifiedDate");
 
-const loadNotice = async () => {
-  const relativePath = "content/shared/templates/example-usage-warning.html";
+const loadNoticeCommon = async ({ isExperimental }) => {
+  let relativePath;
+  if (isExperimental) {
+    relativePath =
+      "content/shared/templates/experimental-example-usage-warning.html";
+  } else {
+    relativePath = "content/shared/templates/example-usage-warning.html";
+  }
   const templateSourcePath = path.resolve(sourceRoot, relativePath);
   const noticeContent = await fs.readFile(templateSourcePath, {
     encoding: "utf8",
@@ -28,7 +34,8 @@ const loadNotice = async () => {
   };
 };
 
-const loadedNotice = loadNotice();
+const loadedNotice = loadNoticeCommon({ isExperimental: false });
+const loadedExperimentalNotice = loadNoticeCommon({ isExperimental: true });
 
 const transformExample = async (sourcePath, sourceContents) => {
   const { sitePath, githubPath } = rewriteSourcePath(sourcePath);
@@ -46,7 +53,16 @@ const transformExample = async (sourcePath, sourceContents) => {
 
   await rewriteElementPaths(html, { onSourcePath: sourcePath });
 
-  const getNotice = await loadedNotice;
+  const isExperimental =
+    html.querySelector("main")?.getAttribute("data-content-phase") ===
+    "experimental";
+
+  let getNotice;
+  if (isExperimental) {
+    getNotice = await loadedExperimentalNotice;
+  } else {
+    getNotice = await loadedNotice;
+  }
   const notice = await getNotice(sourcePath);
   html.querySelector("body").insertAdjacentHTML("afterbegin", notice);