Embeddd workspace into website

content/posts/delta-robot/index.md

@@ -25,10 +25,7 @@ The robot's forward and inverse kinematics were first implemented in a [jupyter
 
 The forward and inverse kinematics were then implemented in C++ following the approach described on the Trossen Robotics forum [1]. Access to the kinematics lets us plan paths in the joint space significantly easier and safer since the workspace is irregular. Once a joint trajectory is planned, the path can be verified to stay in the workspace
 
-<div id="workspace-container"></div>
-
-<div align="center">
-  <img src="workspace.png" alt="Delta Robot Workspace" style="border-radius: 15px; width: 50%; margin-left: 5px; display: inline-block;">
+<div id="workspace-container" style="display: flex; width: 95%; justify-content: center; ">
 </div>
 
 <div>

layouts/_default/single.html

@@ -84,25 +84,29 @@
   </a>
 
   {{ if eq .Page.Title "Delta Robot ROS Package" }}
+  <!-- Hidden div containing the workspace content -->
+  <div id="hidden-workspace" style="display: none;">
+    {{ partial "workspace_plot.html" . }}
+  </div>
   <script>
   document.addEventListener("DOMContentLoaded", function () {
     const workspaceContainer = document.getElementById("workspace-container");
+    const hiddenWorkspace = document.getElementById("hidden-workspace");
 
-    if (workspaceContainer) {
-      fetch("/workspace_plot.html") // Ensure this path is correct
-        .then(response => {
-          if (!response.ok) {
-            throw new Error("Failed to load workspace.html");
-          }
-          return response.text();
-        })
-        .then(data => {
-          workspaceContainer.innerHTML = data; // Embed workspace.html content
-        })
-        .catch(error => console.error("Error loading workspace:", error));
+    if (workspaceContainer && hiddenWorkspace) {
+      // Move the content from the hidden div into the visible workspace container
+      workspaceContainer.innerHTML = hiddenWorkspace.innerHTML;
+      hiddenWorkspace.remove(); // Remove the original hidden div
+
+      // Ensure scripts inside the moved content are executed
+      workspaceContainer.querySelectorAll("script").forEach(oldScript => {
+        const newScript = document.createElement("script");
+        newScript.text = oldScript.textContent;
+        document.body.appendChild(newScript);
+      });
     }
   });
-  </script>
+</script>
   {{ end }}
 </section>
 {{ end }}