fix: Replace deprecated DOMNodeInserted with MutationObserver for Alg…

…olia DocSearch initialization

- Removed deprecated DOMNodeInserted event listener
- Implemented MutationObserver to monitor changes in the DOM
- Added error handling for better debugging
- Ensured observation starts only after DOM is fully loaded
- Included comments for better code understanding and future updates

doc/templates/uno/partials/scripts.tmpl.partial

@@ -16,30 +16,107 @@ startOnLoad: false
 });
 mermaid.init(undefined, ".lang-mermaid");
 </script>
+
 <!-- Algolia DocSearch -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />
 <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
 <script>
-    function handleCreateSearchBox(){
-      if (document.getElementById("docsearch")){
-        if (document.getElementById("docsearch").children.length>0)
-        {
-          document.removeEventListener('DOMNodeInserted', handleCreateSearchBox);
-        }
-        else {
-          docsearch({
-            container: '#docsearch',
-            appId: 'PHB9D8WS99',
-            indexName: 'platform',
-            apiKey: '7877394996f96cde1a9b795dce3f7787',
-            placeholder: 'Search Docs...'
-          });
-          console.log(docsearch);
+    /**
+     * Initialize Algolia DocSearch
+     * This function initializes DocSearch for the element with id 'docsearch'.
+     */
+    function initializeDocSearch() {
+        console.log("initializeDocSearch called");
+        try {
+            const searchBox = document.getElementById("docsearch");
+
+            if (searchBox) {
+                console.log("Found 'docsearch' element");
+                if (searchBox.children.length > 0) {
+                    console.log("Search box already initialized.");
+                } else {
+                    console.log("Initializing DocSearch...");
+                    docsearch({
+                        container: '#docsearch',
+                        appId: 'PHB9D8WS99',
+                        indexName: 'platform',
+                        apiKey: '7877394996f96cde1a9b795dce3f7787',
+                        placeholder: 'Search Docs...'
+                    });
+                    console.log("DocSearch initialized.");
+                }
+            } else {
+                console.warn("'docsearch' element not found.");
+            }
+        } catch (error) {
+            console.error("Error initializing DocSearch:", error);
         }
-      }
     }
-    window.addEventListener('DOMNodeInserted', handleCreateSearchBox);
+
+    /**
+     * Set up MutationObserver to watch for additions to the DOM
+     * This function sets up a MutationObserver to monitor the entire document for added nodes.
+     * If the 'docsearch' element is added, it will call initializeDocSearch().
+     */
+    function observeDocSearch() {
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.addedNodes.length) {
+                    mutation.addedNodes.forEach((node) => {
+                        if (node.id === 'docsearch') {
+                            console.log("'docsearch' element added to DOM");
+                            initializeDocSearch();
+                        }
+                    });
+                }
+            });
+        });
+
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true
+        });
+
+        console.log("MutationObserver set up to observe 'docsearch' element");
+    }
+
+    /**
+     * DOMContentLoaded event handler
+     * This function handles the DOMContentLoaded event to ensure the DOM is fully loaded.
+     * It then checks if the 'docsearch' element is present and initializes DocSearch.
+     * If the element is not present, it sets up the MutationObserver.
+     */
+    document.addEventListener('DOMContentLoaded', () => {
+        console.log("DOMContentLoaded event fired");
+
+        // Check if the element already exists
+        if (document.getElementById('docsearch')) {
+            console.log("'docsearch' element already present in DOM");
+            initializeDocSearch();
+        } else {
+            console.log("'docsearch' element not present in DOM, setting up MutationObserver");
+            observeDocSearch();
+        }
+
+        // Additional verification for scripts
+        console.log("Verifying Algolia scripts");
+        const cssLink = document.querySelector('link[href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"]');
+        const jsScript = document.querySelector('script[src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"]');
+
+        if (cssLink) {
+            console.log("Algolia CSS loaded successfully");
+        } else {
+            console.warn("Algolia CSS not found");
+        }
+
+        if (jsScript) {
+            console.log("Algolia JS loaded successfully");
+        } else {
+            console.warn("Algolia JS not found");
+        }
+    });
 </script>
+
 <!-- Easy-copy-code -->
 <script>
 $(function() {