@healthcatalyst/catalyst-docfx-template 1.0.158 → 1.0.161

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@healthcatalyst/catalyst-docfx-template",
-  "version": "1.0.158",
+  "version": "1.0.161",
   "license": "MIT",
   "description": "A DocFX Template patching the Default template.",
   "publishConfig": {

package/styles/main.js

@@ -154,66 +154,131 @@ copyCode.on('success', function(event) {
     }, 2000);
 });
 
+// Helper function to replace tokens in text nodes only (preserves DOM and event listeners)
+function replaceTokensInNode(node, replacements) {
+  if (node.nodeType === Node.TEXT_NODE) {
+    let text = node.textContent;
+    for (let [key, value] of Object.entries(replacements)) {
+      let token = "{{ " + key + " }}";
+      if (text.includes(token)) {
+        text = text.replaceAll(token, value);
+      }
+    }
+    if (text !== node.textContent) {
+      node.textContent = text;
+    }
+  } else {
+    for (let child of node.childNodes) {
+      replaceTokensInNode(child, replacements);
+    }
+  }
+}
+
+function getSiteRootPath() {
+  var pathSegments = window.location.pathname.split('/').filter(Boolean);
+  return pathSegments.length ? '/' + pathSegments[0] + '/' : '/';
+}
+
 // Replace {{ keys }} with plain-text values in sourcedContent/terms.json at directory root
 
-/*var terms = (function () {
+var terms = (function () {
     var json = null;
-    var pathname = window.location.pathname;
-    // console.log(pathname);
+    var termsPath = getSiteRootPath() + "sourcedContent/terms.json";
     $.ajax({
-      async: false,
+      async: true,
       global: false,
-      url: pathname + "/sourcedContent/terms.json",
+      url: termsPath,
       dataType: "json",
       success: function (data) {
         json = data;
+        
+        // Replace tokens after data loads
+        if (json) {
+          replaceTokensInNode(document.body, json);
+        }
+      },
+      error: function(xhr, status, error) {
+        console.error('❌ TERMS LOAD FAILED: Could not fetch ' + termsPath);
+        console.error('Status:', status, '| Error:', error);
+        console.error('Token replacement will NOT occur. Check terms.json path and CORS.');
+        document.body.setAttribute('data-terms-load-failed', 'true');
       }
     });
-
-    for (let [key, value] of Object.entries(json)) {
-      // console.log(`${key}: ${value}`);
-      var toReplace = "{{ " + key + " }}";
-      var replaceWith = value;
-      document.body.innerHTML = document.body.innerHTML.replace(
-        toReplace,
-        replaceWith
-      );
-    }
     return terms;
-  })();*/
+  })();
   
   // Replace {{ keys }} with icon and message banner from sourcedContent/messages.json at directory root
   
 var messages = (function () {
     var json = null;
-    var pathname = window.location.pathname;
-    // console.log(pathname)
+  var messagesPath = getSiteRootPath() + "sourcedContent/messages.json";
+    
     $.ajax({
-      async: false,
+      async: true,
       global: false,
-      url: pathname + "/sourcedContent/messages.json",
+      url: messagesPath,
       dataType: "json",
       success: function (data) {
         json = data;
+        
+        if (json) {
+          // Create a TreeWalker to find text nodes with message tokens
+          var walker = document.createTreeWalker(
+            document.body,
+            NodeFilter.SHOW_TEXT,
+            null,
+            false
+          );
+          
+          var nodesToReplace = [];
+          var node;
+          
+          // Find all text nodes containing message tokens
+          while (node = walker.nextNode()) {
+            for (var k in json) {
+              var token = "{{ " + k + " }}";
+              if (node.textContent.includes(token)) {
+                nodesToReplace.push({ node: node, key: k, token: token });
+              }
+            }
+          }
+          
+          // Replace tokens with message elements (safe DOM manipulation)
+          nodesToReplace.forEach(function(item) {
+            var o = json[item.key];
+            var parts = item.node.textContent.split(item.token);
+            
+            // Create message element safely
+            var messageP = document.createElement('p');
+            messageP.className = 'message';
+            
+            var icon = document.createElement('i');
+            icon.className = 'fa ' + o.icon; // CSS classes are safe
+            
+            var messageText = document.createTextNode(o.message); // Text is safe
+            
+            messageP.appendChild(icon);
+            messageP.appendChild(messageText);
+            
+            // Replace the text node with: textBefore + messageElement + textAfter
+            var parent = item.node.parentNode;
+            
+            if (parts[0]) {
+              parent.insertBefore(document.createTextNode(parts[0]), item.node);
+            }
+            parent.insertBefore(messageP, item.node);
+            if (parts[1]) {
+              parent.insertBefore(document.createTextNode(parts[1]), item.node);
+            }
+            parent.removeChild(item.node);
+          });
+        }
       },
+      error: function(xhr, status, error) {
+        console.error('❌ MESSAGES LOAD FAILED: Could not fetch ' + messagesPath);
+        console.error('Status:', status, '| Error:', error);
+        document.body.setAttribute('data-messages-load-failed', 'true');
+      }
     });
-    for (var k in json) {
-      var o = json[k];
-      // console.log(o.message);
-      // console.log(o.icon);
-      var toReplace = "{{ " + k + " }}";
-      var replaceWith =
-        '<p class="message">' +
-        '<i class="fa ' +
-        o.icon +
-        '"></i>' +
-        o.message +
-        "</p>";
-      document.body.innerHTML = document.body.innerHTML.replace(
-        toReplace,
-        replaceWith
-      );
-    }
     return messages;
-  })();
-  
+  })();