Add support for data-skipto parameters

scripts/pre-build/library/formatForJekyll.js

@@ -7,14 +7,30 @@ const formatForJekyll = ({
   content,
   enableSidebar = false,
   githubPath,
-  head = "",
+  head = null,
   footer = null,
 }) => {
   const permalink = `/ARIA/apg/${sitePath}`;
 
+  let headContent = '';
+  let skipToScriptTag = `<script src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"`;
+  let skipToScriptData = null;
+
+  if (head) {
+    skipToScriptData = head.querySelector('script[data-skipto]')?.getAttribute('data-skipto');
+    if (skipToScriptData) skipToScriptTag += `data-skipto="${skipToScriptData}"`;
+
+    // Remove skipto.js script tag in head to avoid loading twice; it's always included through `formattedSkipToScript`
+    const skipToScriptTagToRemove = head.querySelectorAll('script').find(el => el.getAttribute('src').includes('js/skipto.js'));
+    if (skipToScriptTagToRemove) skipToScriptTagToRemove.remove();
+    headContent = head.innerHTML;
+  }
+  skipToScriptTag += '></script>';
+
   // Must be formatted because html which is indented by 4 spaces
   // will be interpreted as a code block by the markdown engine
-  const formattedHead = prettier.format(head, { parser: "html" });
+  const formattedHead = prettier.format(headContent, { parser: "html" });
+  const formattedSkipToScript = prettier.format(skipToScriptTag, { parser: "html" });
 
   return `---
 # This file was generated by scripts/pre-build/library/formatForJekyll.js
@@ -76,9 +92,7 @@ ${
 <div>
 ${content}
 </div>
-<script 
-  src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
-></script>
+${formattedSkipToScript}
 ${/* `, { parser: "html" })} */ ""}`;
 };
 

scripts/pre-build/library/transformAboutContent.js

@@ -33,7 +33,7 @@ const transformAboutContent = async (sourcePath, sourceContents) => {
       removeDuplicateMainTag(html.querySelector("body").innerHTML)
     ),
     enableSidebar,
-    head: html.querySelector("head").innerHTML,
+    head: html.querySelector("head"),
   });
 };
 

scripts/pre-build/library/transformExample.js

@@ -69,7 +69,7 @@ const transformExample = async (sourcePath, sourceContents) => {
       wrapTablesWithResponsiveDiv(html.querySelector("body").innerHTML)
     ),
     enableSidebar: true,
-    head: html.querySelector("head").innerHTML,
+    head: html.querySelector("head"),
     footer: `
       <div class="example-page-footer">
         <p>${relatedIssuesLink}</p>

scripts/pre-build/library/transformExampleIndex.js

@@ -22,7 +22,7 @@ const transformExampleIndex = async (sourcePath, sourceContents) => {
     githubPath,
     content: removeDuplicateMainTag(html.querySelector("body").innerHTML),
     enableSidebar: true,
-    head: html.querySelector("head").innerHTML,
+    head: html.querySelector("head"),
   });
 };
 

scripts/pre-build/library/transformHomepage.js

@@ -111,11 +111,16 @@ const transformHomepage = async (sourcePath, sourceContents) => {
     <div class="bottom-off-white-section off-white-section"></div>
   `;
 
+  // Remove conflicting `img { *` CSS properties; safe to do while the source apg-home.html ONLY has that single rule
+  // defined inside it's `<style>` tag
+  html.querySelector("head").querySelector("style").remove();
+
   return formatForJekyll({
     title: "ARIA Authoring Practices Guide",
     sitePath,
     githubPath,
     content: homepageContent,
+    head: html.querySelector("head"),
   });
 };
 

scripts/pre-build/library/transformPattern.js

@@ -40,7 +40,7 @@ const transformPattern = async (sourcePath, sourceContents) => {
     githubPath,
     content: removeDuplicateMainTag(html.querySelector("body").innerHTML),
     enableSidebar: true,
-    head: html.querySelector("head").innerHTML,
+    head: html.querySelector("head"),
     footer: "",
   });
 };

scripts/pre-build/library/transformPatternIndex.js

@@ -42,7 +42,7 @@ const transformPatternIndex = async (sourcePath, sourceContents) => {
     githubPath,
     content,
     enableSidebar: false,
-    head: html.querySelector("head").innerHTML,
+    head: html.querySelector("head"),
   });
 };
 

scripts/pre-build/library/transformPractice.js

@@ -25,7 +25,7 @@ const transformPractice = async (sourcePath, sourceContents) => {
       removeDuplicateMainTag(html.querySelector("body").innerHTML)
     ),
     enableSidebar: true,
-    head: html.querySelector("head").innerHTML,
+    head: html.querySelector("head"),
   });
 };
 

scripts/pre-build/library/transformPracticeIndex.js

@@ -29,7 +29,7 @@ const transformPatternIndex = async (sourcePath, sourceContents) => {
     githubPath,
     content,
     enableSidebar: false,
-    head: html.querySelector("head").innerHTML,
+    head: html.querySelector("head"),
   });
 };