naive solution to embedding iframes into example pages

w3c · Dec 20, 2021 · 58f182c · 58f182c
1 parent 306c806
commit 58f182c
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 2 deletions.
diff --git a/scripts/pre-build/library/loadExamples/loadExample.js b/scripts/pre-build/library/loadExamples/loadExample.js
@@ -5,7 +5,7 @@ const walkHtmlElements = require("../../utilities/walkHtmlElements");
 const getTemplateBoilerplate = require("../getTemplateBoilerplate");
 const { getHandleElement, getContent } = require("./handleElement");
 
-const loadExample = async (filePath, { exampleRelativeDirectory }) => {
+const loadExample = async (filePath, { exampleRelativeDirectory, reportId }) => {
   const html = await fs.readFile(filePath, { encoding: "utf8" });
   const slug = path.basename(filePath).slice(0, -5);
   const permalink = `/index/${exampleRelativeDirectory}/${slug}`;
@@ -16,6 +16,13 @@ const loadExample = async (filePath, { exampleRelativeDirectory }) => {
 
   const { title, head, body, outline, relatedLinks } = getContent();
 
+  const testReportNav = reportId ? `<li><a href="#test-report">Test Report</a></li>` : '';
+
+  const testReport = reportId ? `<section>
+  <h2 id="test-report" tabindex="-1">Test Report</h2>
+  <iframe width="560" height="315" src="https://aria-at.w3.org/reports/${reportId}"></iframe>
+  </section>` : '';
+
   return {
     fileName: `${slug}.md`,
     fileContent: getTemplateBoilerplate({
@@ -36,10 +43,14 @@ const loadExample = async (filePath, { exampleRelativeDirectory }) => {
                   `;
                 })
                 .join(" ")}
+                ${testReportNav}
             </ul>
             ${relatedLinks}
           </aside>
-          <div class="sidebar-right">${body}</div>
+          <div class="sidebar-right">
+            ${body}
+            ${testReport}            
+          </div>
         </div>
       `,
     }),

diff --git a/scripts/pre-build/library/loadExamples/loadExamples.js b/scripts/pre-build/library/loadExamples/loadExamples.js
@@ -1,3 +1,4 @@
+const axios = require("axios");
 const fs = require("fs/promises");
 const path = require("path");
 const { promiseFiles: getPaths } = require("node-dir");
@@ -56,12 +57,45 @@ const loadExamples = async () => {
 
   await editAppJs({ destinationExamplesPath });
 
+  const query = `
+    query {
+      testPlanReports {
+        testPlanVersion {
+          id
+          testPlan {
+            id
+          }
+          gitSha
+          updatedAt
+        }
+        status
+      }
+    }
+  `
+
+  const response = await axios.post(
+   'https://aria-at.w3.org/api/graphql',
+   { query }
+  )
+
+  const finalizedTestReports = response.data.data.testPlanReports.filter(testPlanVersion => testPlanVersion.status === 'FINALIZED')
+
   for (const currentPath of exampleFilePaths) {
     const exampleRelative = path.relative(examplesPath, currentPath);
     const exampleRelativeDirectory = path.dirname(exampleRelative);
+
+    const exampleName = currentPath.replace('.html','').split('/').pop();
+    const reportUrls = finalizedTestReports.filter(report => report.testPlanVersion.testPlan.id === exampleName);
+    let url = reportUrls[0]
+    if (reportUrls.length > 1) {
+      // Get the latest SHA for an example
+      url = reportUrls.reduce((a, b) => Date.parse(a.testPlanVersion.updatedAt) > Date.parse(b.testPlanVersion.updatedAt) ? a : b
+      )
+    }
 
     const { fileName, fileContent } = await loadExample(currentPath, {
       exampleRelativeDirectory,
+      reportId: url && url.testPlanVersion.id
     });
 
     const destinationPath = path.join(

diff --git a/scripts/pre-build/package-lock.json b/scripts/pre-build/package-lock.json
diff --git a/scripts/pre-build/package.json b/scripts/pre-build/package.json
@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "axios": "^0.24.0",
     "fuzzysearch": "^1.0.3",
     "lodash": "^4.17.21",
     "node-dir": "^0.1.17",

diff --git a/scripts/pre-build/yarn.lock b/scripts/pre-build/yarn.lock
@@ -2,6 +2,13 @@
 # yarn lockfile v1
 
 
+"axios@^0.24.0":
+  "integrity" "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA=="
+  "resolved" "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz"
+  "version" "0.24.0"
+  dependencies:
+    "follow-redirects" "^1.14.4"
+
 "balanced-match@^1.0.0":
   "integrity" "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
   "resolved" "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
@@ -76,6 +83,11 @@
   "resolved" "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz"
   "version" "2.2.0"
 
+"follow-redirects@^1.14.4":
+  "integrity" "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A=="
+  "resolved" "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.6.tgz"
+  "version" "1.14.6"
+
 "fs.realpath@^1.0.0":
   "integrity" "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
   "resolved" "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"