update htmlembed

app/src/components/HtmlEmbed.astro

@@ -105,104 +105,106 @@ const htmlWithId =
 <script>
   // Re-execute <script> tags inside the injected fragment (innerHTML doesn't run scripts)
   // Uses IntersectionObserver for lazy loading - only executes when embed is visible
-  const scriptEl = document.currentScript;
-  const figure = scriptEl?.previousElementSibling?.closest(".html-embed");
-  const mount = scriptEl ? scriptEl.previousElementSibling : null;
+  (() => {
+    const scriptEl = document.currentScript;
+    const figure = scriptEl?.previousElementSibling?.closest(".html-embed");
+    const mount = scriptEl ? scriptEl.previousElementSibling : null;
 
-  if (!mount || !figure) return;
+    if (!mount || !figure) return;
 
-  let executed = false;
-  const execute = () => {
-    if (executed || !mount) return;
-    executed = true;
+    let executed = false;
+    const execute = () => {
+      if (executed || !mount) return;
+      executed = true;
 
-    const scripts = mount.querySelectorAll("script");
-    scripts.forEach((old) => {
-      // ignore non-executable types (e.g., application/json)
-      if (
-        old.type &&
-        old.type !== "text/javascript" &&
-        old.type !== "module" &&
-        old.type !== ""
-      )
-        return;
-      if (old.dataset.executed === "true") return;
-      old.dataset.executed = "true";
-      if (old.src) {
-        const s = document.createElement("script");
-        Array.from(old.attributes).forEach((attr) =>
-          s.setAttribute(attr.name, attr.value),
-        );
-        document.body.appendChild(s);
-      } else {
-        try {
-          // run inline
-          (0, eval)(old.text || "");
-        } catch (e) {
-          console.error("HtmlEmbed inline script error:", e);
+      const scripts = mount.querySelectorAll("script");
+      scripts.forEach((old) => {
+        // ignore non-executable types (e.g., application/json)
+        if (
+          old.type &&
+          old.type !== "text/javascript" &&
+          old.type !== "module" &&
+          old.type !== ""
+        )
+          return;
+        if (old.dataset.executed === "true") return;
+        old.dataset.executed = "true";
+        if (old.src) {
+          const s = document.createElement("script");
+          Array.from(old.attributes).forEach((attr) =>
+            s.setAttribute(attr.name, attr.value),
+          );
+          document.body.appendChild(s);
+        } else {
+          try {
+            // run inline
+            (0, eval)(old.text || "");
+          } catch (e) {
+            console.error("HtmlEmbed inline script error:", e);
+          }
         }
-      }
-    });
+      });
 
-    // Mark as loaded
-    figure.classList.add("html-embed--loaded");
-  };
+      // Mark as loaded
+      figure.classList.add("html-embed--loaded");
+    };
 
-  // Check if IntersectionObserver is supported
-  if ("IntersectionObserver" in window) {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting && !executed) {
-            observer.disconnect();
-            // Small delay to ensure DOM is ready
-            if (document.readyState === "loading") {
-              document.addEventListener("DOMContentLoaded", execute, {
-                once: true,
-              });
-            } else {
-              // Use requestAnimationFrame to ensure execution after DOM is fully ready
-              requestAnimationFrame(() => {
-                setTimeout(execute, 0);
-              });
+    // Check if IntersectionObserver is supported
+    if ("IntersectionObserver" in window) {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting && !executed) {
+              observer.disconnect();
+              // Small delay to ensure DOM is ready
+              if (document.readyState === "loading") {
+                document.addEventListener("DOMContentLoaded", execute, {
+                  once: true,
+                });
+              } else {
+                // Use requestAnimationFrame to ensure execution after DOM is fully ready
+                requestAnimationFrame(() => {
+                  setTimeout(execute, 0);
+                });
+              }
             }
-          }
-        });
-      },
-      {
-        // Start loading when element is 100px away from viewport
-        rootMargin: "100px",
-        threshold: 0.01,
-      },
-    );
+          });
+        },
+        {
+          // Start loading when element is 100px away from viewport
+          rootMargin: "100px",
+          threshold: 0.01,
+        },
+      );
 
-    observer.observe(figure);
+      observer.observe(figure);
 
-    // Fallback: if still not loaded after 3 seconds, load anyway (for edge cases)
-    setTimeout(() => {
-      if (!executed) {
-        observer.disconnect();
-        if (document.readyState === "loading") {
-          document.addEventListener("DOMContentLoaded", execute, {
-            once: true,
-          });
-        } else {
-          requestAnimationFrame(() => {
-            setTimeout(execute, 0);
-          });
+      // Fallback: if still not loaded after 3 seconds, load anyway (for edge cases)
+      setTimeout(() => {
+        if (!executed) {
+          observer.disconnect();
+          if (document.readyState === "loading") {
+            document.addEventListener("DOMContentLoaded", execute, {
+              once: true,
+            });
+          } else {
+            requestAnimationFrame(() => {
+              setTimeout(execute, 0);
+            });
+          }
         }
-      }
-    }, 3000);
-  } else {
-    // Fallback for browsers without IntersectionObserver support
-    if (document.readyState === "loading") {
-      document.addEventListener("DOMContentLoaded", execute, { once: true });
+      }, 3000);
     } else {
-      requestAnimationFrame(() => {
-        setTimeout(execute, 0);
-      });
+      // Fallback for browsers without IntersectionObserver support
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", execute, { once: true });
+      } else {
+        requestAnimationFrame(() => {
+          setTimeout(execute, 0);
+        });
+      }
     }
-  }
+  })();
 </script>
 
 <style is:global>