From 64d1b52f55ebd43f2f3cec9d87cd96530f72b8fc Mon Sep 17 00:00:00 2001
From: Howard Edwards <howarde.edwards@gmail.com>
Date: Tue, 23 Jan 2024 11:28:57 -0500
Subject: [PATCH] Update formatForJekyll.js to only include skipto.js once with
 any applicable data attribs; update transformHomepage.js to remove
 conflicting style tag

---
 scripts/pre-build/library/formatForJekyll.js   | 17 +++++++++++------
 scripts/pre-build/library/transformHomepage.js |  4 +++-
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/scripts/pre-build/library/formatForJekyll.js b/scripts/pre-build/library/formatForJekyll.js
index da431aca6..b51492fea 100644
--- 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
index 1c9197afc..ead2c2e61 100644
--- 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",