Landing page for FlowFuse Dashboard

src/_data/dashboard.json

@@ -0,0 +1,37 @@
+{
+  "section2": [
+    {
+      "title": "Effortless Development",
+      "description": "FlowFuse Dashboard's intuitive interface allows you to drag-and-drop widgets, buttons, and other elements to create rich dashboards without writing a single line of code. This significantly reduces development time and empowers non-technical users to build powerful applications."
+    },
+    {
+      "title": "Enhanced User Experience",
+      "description": "Go beyond simple data visualization. FlowFuse Dashboard lets you create interactive dashboards with features like buttons and user-specific views. This empowers users to explore data, filter results, and take actions directly within the dashboard."
+    },
+    {
+      "title": "Extensible Ecosystem",
+      "description": "Node-RED actively fosters a growing community of developers. This means a constantly expanding library of widgets and nodes, ensuring you have the tools you need to build any dashboard you can imagine."
+    },
+    {
+      "title": "Flexible deployment with FlowFuse",
+      "description": "With FlowFuse you can deploy FlowFuse Dashboard along with enterprise-grade features on the cloud or on-premises. This ensures a smooth and efficient development experience, for a high-performance and scalable solution."
+    }
+  ],
+  "resources": [
+    {
+      "url": "/blog/2024/03/dashboard-getting-started/",
+      "title": "Getting Started with Node-RED Dashboard 2.0",
+      "image": "/blog/2024/03/images/getting-started-with-dashboard-2.png"
+    },
+    {
+      "url": "/webinars/2024/node-red-dashboard-multi-user/",
+      "title": "Personalised Multi User Dashboards with Node-RED Dashboard 2.0",
+      "image": "/images/webinars/multi-user-dashboard-with-node-red-dashboard-2-0-webinar-2024-february.jpg"
+    },
+    {
+      "url": "/ebooks/ultimate-guide-to-building-applications-with-flowfuse-dashboard-for-node-red/",
+      "title": "The Ultimate Guide to Building Applications with FlowFuse Dashboard for Node-RED",
+      "image": "/images/ebooks/ebook_dashboard.png"
+    }
+  ]
+}

src/_includes/layouts/base.njk

@@ -192,6 +192,7 @@ eleventyComputed:
                                 {% navoption "Roadmap", "/product/roadmap/", 1, "map" %}{% endnavoption %}
                                 {% navoption "Customer Stories", "/customer-stories/", 1, "presentation" %}{% endnavoption %}
                                 {% navoption "Blueprint Library", "/blueprints/", 1, "building-library" %}{% endnavoption %}
+                                {% navoption "FlowFuse Dashboard", "/product/dashboard/", 1, "chart" %}{% endnavoption %}
                             </ul>
                         {% endnavoption %}
                         {% navoption "Solutions", null, 0 %}
@@ -223,7 +224,7 @@ eleventyComputed:
                                 {% navoption "Docs", "/docs/", 1, "document-text" %}{% endnavoption %}
                                 {% navoption "Support forums", "https://discourse.nodered.org/c/vendors/flowfuse/24/", 1, "chat-bubble-left-right-sm" %}{% endnavoption %}
                                 {% navoption "Customer Stories", "/customer-stories/", 1, "presentation" %}{% endnavoption %}
-                                {% navoption "Node-RED", "/node-red/", 1, "info" %}{% endnavoption %}
+                                {% navoption "Node-RED", "/node-red/", 1, "nr-icon" %}{% endnavoption %}
                                 {% navoption "Unified Namespace", "/unified-namespace/", 1, "info" %}{% endnavoption %}
                             </ul>
                         {% endnavoption %}

src/_includes/migration.njk

@@ -0,0 +1,122 @@
+<div class="nohero w-full">
+    <div class="m-auto">
+        <div class="ff-dashboard-migration">
+            <div>
+                <div
+                    class="ff-file-drop-zone"
+                    onclick="openFilePicker();"
+                    ondrop="dropHandler(event);"
+                    ondragover="dragOverHandler(event);">
+                    <p id="drag-instruction">Drag a <i>flow.json</i> file containing Node-RED Dashboard 1.0 nodes here.</p>
+                    <p id="file-selected" style="display: none;">
+                        Flow Uploaded: "<i id="file-selected-name">drop zone</i>""
+                    </p>
+                    <input id="dashboard1-flow-file" name="dashboard1-flow-file" type="file" accept="json" onchange="fileSelected()"/>
+                </div>
+                <a id="dashboard-2-download" style="display:none"></a>
+            </div>
+            <div id="hs-user-form">
+
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    var d1Flow = null
+
+    function openFilePicker () {
+        // open file selector
+        document.getElementById("dashboard1-flow-file").click()
+    }
+
+    function fileSelected () {
+        console.log('file selected')
+        // get file
+        var file = document.getElementById("dashboard1-flow-file").files[0]
+        if (file) {
+            document.getElementById("file-selected-name").innerText = file.name
+            // hide drag instructions
+            document.getElementById("file-selected").style.display = "block"
+            document.getElementById("drag-instruction").style.display = "none"
+        } else {
+            // hide drag instructions
+            document.getElementById("file-selected").style.display = "none"
+            document.getElementById("drag-instruction").style.display = "block"
+        }
+    }
+
+    function downloadFlow (flow) {
+        var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(flow))
+        var dlAnchorElem = document.getElementById('dashboard-2-download')
+        dlAnchorElem.setAttribute("href", dataStr)
+        dlAnchorElem.setAttribute("download", "flow-dashboard2.json")
+        dlAnchorElem.click()
+    }
+
+    function migrateFile() {
+        // Your migration logic goes here
+
+        var file = null
+        var selectedFile = document.getElementById("dashboard1-flow-file").files
+        if (selectedFile) {
+            file = selectedFile[0]
+        } else {
+            file = d1Flow
+        }
+
+        if (file) {
+            fetch('https://dashboard-migration-service.flowfuse.cloud/migrate-flow', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: file
+            }).then(function (response) {
+                return response.json()
+            }).then(function (body) {
+                downloadFlow(body)
+            }).catch((err) => {
+                console.error('Error migrating flow', err)
+            })
+        }
+    }
+
+    function dropHandler(event) {
+
+        // Prevent default behavior (Prevent file from being opened)
+        ev.preventDefault()
+
+        if (ev.dataTransfer.items) {
+            // Use DataTransferItemList interface to access the file(s)
+            [...ev.dataTransfer.items].forEach((item, i) => {
+                // If dropped items aren't files, reject them
+                if (item.kind === "file") {
+                    d1Flow = item.getAsFile();
+                }
+            });
+        } else {
+            // Use DataTransfer interface to access the file(s)
+            [...ev.dataTransfer.files].forEach((file, i) => {
+                console.log(`… file[${i}].name = ${dashboard1Flow.name}`)
+            });
+        }
+    }
+
+    function dragOverHandler(event) {
+        event.preventDefault();
+    }
+
+    function displayHubSpotForm() {
+        hbspt.forms.create({
+            target: '#hs-user-form',
+            region: "eu1",
+            portalId: "26586079",
+            formId:"968a9ab6-3dd8-45b2-991c-3f055dc18787",
+            onFormSubmitted: function ($form) {
+                migrateFile()
+            }
+        });
+    }
+</script>
+<script async type="text/javascript" charset="utf-8" src="//js-eu1.hsforms.net/forms/embed/v2.js" onload="displayHubSpotForm()"></script>

src/css/style.css

@@ -754,6 +754,52 @@ h4:hover .header-anchor {
     transform: translateX(0);
 }
 
+/*
+    Migration Service
+*/
+
+.ff-file-drop-zone {
+    background-color: theme(colors.blue.50);
+    border: 1px dashed theme(colors.blue.300);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    height: 100%;
+    padding: 64px;
+    text-align: center;
+}
+
+.ff-file-drop-zone:hover {
+    background-color: theme(colors.blue.100);
+    border: 1px solid theme(colors.blue.300);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.ff-file-drop-zone input[type="file"] {
+    display: none;
+}
+
+.ff-dashboard-migration {
+    display: grid;
+    flex-direction: column;
+    gap: 32px;
+    justify-content: center;
+    @apply max-md:px-6;
+}
+
+.ff-dashboard-migration-actions {
+    margin: auto;
+}
+
+@media (min-width: 680px) {
+    .ff-dashboard-migration {
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
 /*
     Footer
 */