Parse react-partial props for ids in README

w3c · Feb 8, 2024 · ef648d0 · ef648d0
1 parent 36726b1
commit ef648d0
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 7 deletions.
diff --git a/.link-checker.js b/.link-checker.js
@@ -1,3 +1,5 @@
+const HTMLParser = require('node-html-parser');
+
 module.exports = {
   filesToIgnore: [
     // For example:
@@ -18,13 +20,27 @@ module.exports = {
     {
       name: 'github',
       pattern: /^https:\/\/github\.com\/.*/,
-      matchHash: (ids, hash) =>
-        ids.includes(hash) || ids.includes(`user-content-${hash}`),
+      matchHash: (ids, hash, ssr) => {
+        if (ssr) {
+          // This is where the react-partial keeps data about READMEs and other *.md files
+          const overviewFiles =
+            ssr['props']['initialPayload']['overview']['overviewFiles'];
+          for (let file of overviewFiles) {
+            if (file['richText']) {
+              const html = HTMLParser.parse(file['richText']);
+              const githubIds = html
+                .querySelectorAll('[id]')
+                .map((idElement) => idElement.getAttribute('id'));
+              return githubIds.includes(`user-content-${hash}`);
+            }
+          }
+        }
+        return ids.includes(hash) || ids.includes(`user-content-${hash}`);
+      },
     },
   ],
   ignoreHashesOnExternalPagesMatchingRegex: [
     // Some hash links are resolved with JS and are therefore difficult to check algorithmically
     /^https:\/\/html\.spec\.whatwg\.org\/multipage\//,
-    'https://github.com/w3c/aria-practices#code-conformance', // TODO: Remove when #2907 is resolved
   ],
 };
diff --git a/scripts/link-checker.js b/scripts/link-checker.js
@@ -33,7 +33,7 @@ async function checkLinks() {
     return getLineNumber;
   };
 
-  const checkPathForHash = (hrefOrSrc, ids = [], hash) => {
+  const checkPathForHash = (hrefOrSrc, ids = [], hash, ssr) => {
     // On some websites, the ids may not exactly match the hash included
     // in the link.
     // For e.g. GitHub will prepend client facing ids with their own
@@ -46,7 +46,7 @@ async function checkLinks() {
     const handler = options.hashCheckHandlers.find(({ pattern }) =>
       pattern.test(hrefOrSrc)
     );
-    if (handler) return handler.matchHash(ids, hash);
+    if (handler) return handler.matchHash(ids, hash, ssr);
     else return ids.includes(hash);
   };
 
@@ -142,7 +142,18 @@ async function checkLinks() {
               .querySelectorAll('[id]')
               .map((idElement) => idElement.getAttribute('id'));
 
-            return { ok: response.ok, status: response.status, ids };
+            // Handle GitHub README links.
+            // These links are stored within a react-partial element
+            const ssr = html
+              .querySelectorAll('react-partial')
+              .filter(
+                (partialElement) =>
+                  partialElement.getAttribute('partial-name') ===
+                  'repos-overview' // This is the partial that handles the READMEs
+              )
+              .flatMap((element) => element.getElementsByTagName('script'))
+              .map((element) => JSON.parse(element.innerHTML))[0];
+            return { ok: response.ok, status: response.status, ids, ssr };
           } catch (error) {
             return {
               errorMessage:
@@ -298,7 +309,7 @@ async function checkLinks() {
         if (
           !isHashCheckingDisabled &&
           hash &&
-          !checkPathForHash(hrefOrSrc, pageData.ids, hash)
+          !checkPathForHash(hrefOrSrc, pageData.ids, hash, pageData.ssr)
         ) {
           consoleError(
             `Found broken external link on ${htmlPath}:${lineNumber}:${columnNumber}, ` +