Get @flowfuse/flow-renderer working for examples

docs/examples/01-simple-launch-monitor.md

@@ -2,6 +2,11 @@
 
 `examples/01 - Simple launch + monitor.json`
 
+<script id="flow-01" type="application/json">
+--8<-- "examples/01 - Simple launch + monitor.json"
+</script>
+<div class="flow-renderer" data-flow-id="flow-01" style="height: 400px"></div>
+
 ![01 - Simple launch + monitor.json](../img/example_flow_01.png)
 
 This is the most basic example workflow that demonstrates the core _Launch workflow_ and _Monitor workflow_ nodes.

docs/examples/02-launch-on-file-upload.md

@@ -2,6 +2,11 @@
 
 `examples/02 - Launch on file upload.json`
 
+<script id="flow-01" type="application/json">
+--8<-- "examples/02 - Launch on file upload.json"
+</script>
+<div class="flow-renderer" data-flow-id="flow-01" style="height: 400px"></div>
+
 ![02 - Launch on file upload.json](../img/example_flow_02.png)
 
 This flow uses the _Poll files_ node to periodically check for the presence

docs/examples/03-auto-resume-on-failure.md

@@ -2,6 +2,11 @@
 
 `examples/03 - Auto-resume on workflow failure.json`
 
+<script id="flow-01" type="application/json">
+--8<-- "examples/03 - Auto-resume on workflow failure.json"
+</script>
+<div class="flow-renderer" data-flow-id="flow-01" style="height: 400px"></div>
+
 This workflow demonstrates how to automatically resume a failed Nextflow workflow using the workflow ID from the failed run. This pattern is useful for recovering from transient errors without re-running successfully completed tasks.
 
 The flow implements an automatic resume pattern:

docs/examples/04-rnaseq-differential-abundance.md

@@ -6,6 +6,11 @@ title: Pipeline chaining
 
 `examples/04 - RNA-seq to DifferentialAbundance.json`
 
+<script id="flow-01" type="application/json">
+--8<-- "examples/04 - RNA-seq to DifferentialAbundance.json"
+</script>
+<div class="flow-renderer" data-flow-id="flow-01" style="height: 400px"></div>
+
 ![04 - RNA-seq to DifferentialAbundance.json](../img/example_flow_04.png)
 
 This workflow demonstrates chaining nf-core/rnaseq and nf-core/differentialabundance pipelines together.

docs/examples/05-studio-slack-webhook.md

@@ -6,6 +6,11 @@ title: Studio + Slack webhook
 
 `examples/05 - Studio on run fail + Slack webhook.json`
 
+<script id="flow-01" type="application/json">
+--8<-- "examples/05 - Studio on run fail + Slack webhook.json"
+</script>
+<div class="flow-renderer" data-flow-id="flow-01" style="height: 400px"></div>
+
 ![05 - Studio on run fail + Slack webhook.json](../img/example_flow_03.png)
 
 This workflow has three parts to it:

docs/overrides/main.html

@@ -0,0 +1,39 @@
+{% extends "base.html" %} {% block extrahead %} {{ super() }}
+<script type="module">
+  import FlowRenderer from "{{ base_url }}/customisation/flow-renderer.min.js";
+  // Make FlowRenderer available globally
+  window.FlowRenderer = FlowRenderer;
+
+  // Auto-render all flow containers on page load
+  function renderAllFlows() {
+    const renderer = new FlowRenderer();
+
+    // Find all flow-renderer containers
+    document.querySelectorAll(".flow-renderer[data-flow-id]").forEach((container) => {
+      const flowId = container.getAttribute("data-flow-id");
+      const flowDataElement = document.getElementById(flowId);
+
+      if (flowDataElement) {
+        try {
+          const flow = JSON.parse(flowDataElement.textContent);
+          renderer.renderFlows(flow, { container: container });
+        } catch (e) {
+          console.error(`Failed to render flow ${flowId}:`, e);
+        }
+      } else {
+        console.error(`Flow data element not found: ${flowId}`);
+      }
+    });
+  }
+
+  // Render flows when DOM is ready
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", renderAllFlows);
+  } else {
+    renderAllFlows();
+  }
+
+  // Dispatch event to signal that FlowRenderer is ready
+  window.dispatchEvent(new Event("flowRendererReady"));
+</script>
+{% endblock %}

mkdocs.yml

@@ -31,6 +31,7 @@ nav:
 
 theme:
   name: material
+  custom_dir: docs/overrides
   logo: img/node-red-seqera.svg
   favicon: img/favicon.svg
   features: