Update formatForJekyll.js to only include skipto.js once with any app…

…licable data attribs; update transformHomepage.js to remove conflicting style tag
w3c · Jan 23, 2024 · 64d1b52 · 64d1b52
1 parent 6c6ac9b
commit 64d1b52
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/scripts/pre-build/library/formatForJekyll.js b/scripts/pre-build/library/formatForJekyll.js
@@ -13,16 +13,24 @@ const formatForJekyll = ({
   const permalink = `/ARIA/apg/${sitePath}`;
 
   let headContent = '';
-  let skipToData = null;
+  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;
-    skipToData = head.querySelector('script[data-skipto]')?.getAttribute('data-skipto');
   }
+  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(headContent, { parser: "html" });
+  const formattedSkipToScript = prettier.format(skipToScriptTag, { parser: "html" });
 
   return `---
 # This file was generated by scripts/pre-build/library/formatForJekyll.js
@@ -84,10 +92,7 @@ ${
 <div>
 ${content}
 </div>
-<script
-  src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
-  ${skipToData ? `data-skipto="${skipToData}"` : 'data-skipto'}
-></script>
+${formattedSkipToScript}
 ${/* `, { parser: "html" })} */ ""}`;
 };
 

diff --git a/scripts/pre-build/library/transformHomepage.js b/scripts/pre-build/library/transformHomepage.js
@@ -111,7 +111,9 @@ const transformHomepage = async (sourcePath, sourceContents) => {
     <div class="bottom-off-white-section off-white-section"></div>
   `;
 
-  // TODO: Remove conflicting img css properties
+  // 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",