diff --git a/.eleventy.js b/.eleventy.js index ec50646650..da490491da 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -221,6 +221,7 @@ module.exports = function(eleventyConfig) { eleventyConfig.addLayoutAlias('page', 'layouts/page.njk'); eleventyConfig.addLayoutAlias('nohero', 'layouts/nohero.njk'); eleventyConfig.addLayoutAlias('solution', 'layouts/solution.njk'); + eleventyConfig.addLayoutAlias('use-case', 'layouts/use-case.njk'); eleventyConfig.addLayoutAlias('catalog', 'layouts/catalog.njk'); eleventyConfig.addLayoutAlias('redirect', 'layouts/redirect.njk'); diff --git a/nuxt/components/AppHeader.vue b/nuxt/components/AppHeader.vue index a109055823..56d99e91b4 100644 --- a/nuxt/components/AppHeader.vue +++ b/nuxt/components/AppHeader.vue @@ -148,16 +148,16 @@ onMounted(() => {
  • By Industry
  • By Use Case
    • @@ -195,7 +195,7 @@ onMounted(() => { @@ -205,7 +205,7 @@ onMounted(() => { Sign In Free Trial - Talk to Us + Contact Us diff --git a/src/_data/features.json b/src/_data/features.json index 3a7421c16b..d0bf64f557 100644 --- a/src/_data/features.json +++ b/src/_data/features.json @@ -30,7 +30,7 @@ "imageFolder": "./images/pictograms/", "imageFile": "edge_blue.png", "imageAlt": " edge management.", - "content": "FlowFuse allows you to deploy and manage Node-RED instances out to edge devices. This allows you to deploy the exact same instance out to hundreds or thousands of edge devices and monitor their status." + "content": "FlowFuse allows you to deploy and manage Node-RED instances out to edge devices. This allows you to deploy the exact same instance out to hundreds or thousands of edge devices and monitor their status." },{ "title": "Software Delivery Pipelines", "imageFolder": "./images/pictograms/", diff --git a/src/_includes/components/icons/wind-turbine.svg b/src/_includes/components/icons/wind-turbine.svg index 370902f3ed..4a4e3104f9 100644 --- a/src/_includes/components/icons/wind-turbine.svg +++ b/src/_includes/components/icons/wind-turbine.svg @@ -1,3 +1,11 @@ - - + + + + + + + + + + diff --git a/src/_includes/components/related-resources.njk b/src/_includes/components/related-resources.njk new file mode 100644 index 0000000000..9dea7522fd --- /dev/null +++ b/src/_includes/components/related-resources.njk @@ -0,0 +1,55 @@ +{# ============================================================ + RELATED RESOURCES + Three columns: Case studies / eBooks and Whitepapers / Blog. + Content opts in via a dedicated front matter field: + usecase: + - production-monitoring + The layout passes `useCaseSlug` (e.g. "production-monitoring"). + ============================================================ #} + +{% set caseStudies = [] %} +{% set whitepapers = [] %} +{% set blogPosts = [] %} +{% for item in collections.all %} + {% if item.data.usecase and useCaseSlug in item.data.usecase %} + {% if "/customer-stories/" in item.url %} + {% set caseStudies = (caseStudies.push(item), caseStudies) %} + {% elif "/ebooks/" in item.url or "/whitepaper/" in item.url %} + {% set whitepapers = (whitepapers.push(item), whitepapers) %} + {% elif "/blog/" in item.url %} + {% set blogPosts = (blogPosts.push(item), blogPosts) %} + {% endif %} + {% endif %} +{% endfor %} + +{% set columns = [ + {heading: "Case studies", items: caseStudies}, + {heading: "eBooks and Whitepapers", items: whitepapers}, + {heading: "Blog", items: blogPosts} +] %} + +
    +
    +

    Related resources

    +
    + {% for column in columns %} +
    +

    {{ column.heading }}

    + {% if column.items.length %} + + {% else %} +
    +

    More coming soon

    +
    + {% endif %} +
    + {% endfor %} +
    +
    +
    diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk index f0dcab4a67..af71b47612 100644 --- a/src/_includes/layouts/base.njk +++ b/src/_includes/layouts/base.njk @@ -218,13 +218,13 @@ eleventyComputed: {% navoption "By Use Case", null, 1, null, true, "pl-3 title border-l-2 sm:col-start-2 sm:row-start-1" %}{% endnavoption %}
  • - diff --git a/src/_includes/layouts/use-case.njk b/src/_includes/layouts/use-case.njk new file mode 100644 index 0000000000..7e50b4cb4f --- /dev/null +++ b/src/_includes/layouts/use-case.njk @@ -0,0 +1,276 @@ +--- +layout: layouts/base.njk +sitemapPriority: 0.7 +--- +{# ============================================================ + USE CASE LAYOUT (content-driven, pain-led narrative) + + Per-page front-matter (rich, preferred): + problem hero sub-headline (the pain in one line) + customerPain { heading, intro[], cards[ {icon,title,detail} ] } + outcomeFirst { heading, intro, dimensions[ {label,title,detail} ] } + whyItMatters { heading, intro, points[ {title,detail} ] } + competition { heading, intro, traps[ {label,title,detail} ] } + comparison { without[ {title,detail} ], with[ {title,detail} ] } + + Legacy fall-back front-matter (simple skeleton, still supported): + gap[], workflow[], outcomes[] + + No customer names and no attributed quotes on the public page. + ============================================================ #} + +{# --- build the sticky section nav from the blocks that exist --- #} +{% set nav = [] %} +{% if customerPain %}{% set nav = nav.concat([{ id: "customer-pain", label: "Customer Pain" }]) %}{% endif %} +{% if outcomeFirst %}{% set nav = nav.concat([{ id: "outcome-first", label: "Outcome First" }]) %}{% endif %} +{% if whyItMatters %}{% set nav = nav.concat([{ id: "why-it-matters", label: "Why It Matters" }]) %}{% endif %} +{% if competition %}{% set nav = nav.concat([{ id: "competition", label: "Why Off-the-Shelf Fails" }]) %}{% endif %} +{% if comparison %}{% set nav = nav.concat([{ id: "with-without", label: "With / Without FlowFuse" }]) %}{% endif %} + +
    + + +
    +
    +

    Use case

    +

    {{ title }}

    +

    {{ problem }}

    +
    + Talk to an expert +
    +
    +
    + + {% if nav.length %} + + + {% endif %} + + {% if customerPain %} + +
    +
    +

    01 · Customer pain

    +

    {{ customerPain.heading }}

    +
    + {% for paragraph in customerPain.intro %} +

    {{ paragraph }}

    + {% endfor %} +
    +
    + {% for card in customerPain.cards %} +
    +
    + {% include "components/icons/" + card.icon + ".svg" %} +
    +

    {{ card.title }}

    +

    {{ card.detail }}

    +
    + {% endfor %} +
    +
    +
    + {% endif %} + + {% if outcomeFirst %} + +
    +
    +

    02 · Outcome first

    +

    {{ outcomeFirst.heading }}

    +

    {{ outcomeFirst.intro }}

    +
    + {% for dim in outcomeFirst.dimensions %} +
    + {{ dim.label }} +

    {{ dim.title }}

    +

    {{ dim.detail }}

    +
    + {% endfor %} +
    +
    +
    + {% endif %} + + {% if whyItMatters %} + +
    +
    +

    03 · Why this is important

    +

    {{ whyItMatters.heading }}

    +

    {{ whyItMatters.intro }}

    +
    + {% for point in whyItMatters.points %} +
    + {% if loop.index < 10 %}0{% endif %}{{ loop.index }} +
    +

    {{ point.title }}

    +

    {{ point.detail }}

    +
    +
    + {% endfor %} +
    +
    +
    + {% endif %} + + {% if competition %} + +
    +
    +

    04 · Why off-the-shelf doesn't work

    +

    {{ competition.heading }}

    +

    {{ competition.intro }}

    +
    + {% for trap in competition.traps %} +
    +
    + {% include "components/icons/x-circle.svg" %} + {{ trap.label }} +
    +

    {{ trap.title }}

    +

    {{ trap.detail }}

    +
    + {% endfor %} +
    +
    +
    + {% endif %} + + {% if comparison %} + +
    +
    +

    05 · With / without FlowFuse

    +
    +
    +

    Without FlowFuse

    +
    + {% for row in comparison.without %} +
    + {% include "components/icons/x-mark.svg" %} +
    +
    {{ row.title }}
    +

    {{ row.detail }}

    +
    +
    + {% endfor %} +
    +
    +
    +

    With FlowFuse

    +
    + {% for row in comparison.with %} +
    + {% include "components/icons/check-circle.svg" %} +
    +
    {{ row.title }}
    +

    {{ row.detail }}

    +
    +
    + {% endfor %} +
    +
    +
    +
    +
    + {% endif %} + + {# ============================================================ + LEGACY SKELETON FALL-BACK (only when no rich blocks defined) + ============================================================ #} + {% if not nav.length %} + {% if gap %} +
    +
    +

    The operational gap

    +
    + {% for paragraph in gap %} +

    {{ paragraph }}

    + {% endfor %} +
    +

    Placeholder copy. Generic operational framing for this workflow pattern.

    +
    +
    + {% endif %} + {% if workflow %} +
    +
    +

    The operational workflow

    +
      + {% for item in workflow %} +
    • + {% include "components/icons/check.svg" %} + {{ item }} +
      • + {% endfor %} +
    +
    +
    + {% endif %} + {% if outcomes %} +
    +
    +

    Outcomes

    +
    + {% for outcome in outcomes %} +
    + {% include "components/icons/arrow-trending-up.svg" %} +

    {{ outcome }}

    +
    + {% endfor %} +
    +

    Placeholder outcomes. No customer names or real figures.

    +
    +
    + {% endif %} + {% endif %} + + + {% set useCaseSlug = page.fileSlug %} + {% include "components/related-resources.njk" %} + + +
    +
    +

    {{ closingCta.heading or "See it on your operations" }}

    +

    {{ closingCta.description or "Talk to an expert, or get started with FlowFuse today." }}

    +
    + Talk to an expert + Get started +
    +
    +
    + +
    diff --git a/src/blog/2025/04/building-oee-dashboard-with-flowfuse-2.md b/src/blog/2025/04/building-oee-dashboard-with-flowfuse-2.md index 5a3d21fcd6..f31d6f4dcc 100644 --- a/src/blog/2025/04/building-oee-dashboard-with-flowfuse-2.md +++ b/src/blog/2025/04/building-oee-dashboard-with-flowfuse-2.md @@ -3,6 +3,8 @@ title: "Part 2: Building an OEE Dashboard with FlowFuse" subtitle: Step-by-step guide to building your own OEE Dashboard. description: Learn how to build an OEE Dashboard using FlowFuse Dashboard (Node-RED Dashboard 2.0). This step-by-step guide covers data collection, OEE calculations, and dashboard creation with simulated production and downtime data. date: 2025-04-09 +usecase: + - production-monitoring authors: ["sumit-shinde"] image: /blog/2025/04/images/oee-dashboard-buildig-ff-2.png keywords: free oee dashboard, oee dashboard free, building oee dashboard, node-red oee dashboard, flowfuse oee dashboard diff --git a/src/blog/2025/04/building-oee-dashboard-with-flowfuse-part-1.md b/src/blog/2025/04/building-oee-dashboard-with-flowfuse-part-1.md index 9c5e0e8343..11b5603743 100644 --- a/src/blog/2025/04/building-oee-dashboard-with-flowfuse-part-1.md +++ b/src/blog/2025/04/building-oee-dashboard-with-flowfuse-part-1.md @@ -3,6 +3,8 @@ title: "Part 1: Building an OEE Dashboard with FlowFuse" subtitle: Defining OEE and Planning an Effective Dashboard description: Create an OEE dashboard with FlowFuse to track equipment performance, optimize efficiency, and gain real-time production insights date: 2025-04-01 +usecase: + - production-monitoring authors: ["sumit-shinde"] image: /blog/2025/04/images/building-oee-dashboard-part1.png keywords: free oee dashboard, oee dashboard free, building oee dashboard, node-red oee dashboard, flowfuse oee dashboard diff --git a/src/blog/2025/05/building-andon-task-manager-with-ff.md b/src/blog/2025/05/building-andon-task-manager-with-ff.md index 42fd2f6567..f91ec54470 100644 --- a/src/blog/2025/05/building-andon-task-manager-with-ff.md +++ b/src/blog/2025/05/building-andon-task-manager-with-ff.md @@ -3,6 +3,8 @@ title: "Part 1: Building an Andon Task Manager with FlowFuse" subtitle: Build a real-time Andon Task Manager with FlowFuse and Node-RED, covering key features, dashboard design, and data storage. description: Learn how to build a real-time Andon Task Manager using FlowFuse and Node-RED. This step-by-step guide covers request tracking, dashboard design, and data storage with SQLite and context storage. date: 2025-05-08 +usecase: + - production-monitoring authors: ["sumit-shinde"] image: /blog/2025/05/images/Building-an-Andon-Task-Manager-with-FlowFuse-1.png keywords: free andon task manager dashboard, andon task manager free, building andon task manager, node-red andon task manager, flowfuse andon task manager diff --git a/src/blog/2025/09/preventive-maintenance-equipment-failure.md b/src/blog/2025/09/preventive-maintenance-equipment-failure.md index 8c18c4390c..ea8eb630e7 100644 --- a/src/blog/2025/09/preventive-maintenance-equipment-failure.md +++ b/src/blog/2025/09/preventive-maintenance-equipment-failure.md @@ -3,6 +3,8 @@ title: "Preventive Maintenance in Manufacturing: Avoid Multi-Million Dollar Equi subtitle: "How industrial data platforms are turning equipment failures from crisis events into predictable, manageable costs" description: "Unplanned downtime costs manufacturers millions. Learn how preventive maintenance software and data platforms like FlowFuse cut failures, boost OEE, and deliver lasting ROI." date: 2025-09-04 +usecase: + - production-monitoring authors: ["sumit-shinde"] image: /blog/2025/09/images/preventive-maintenance-blog.png keywords: preventive maintenance, predictive maintenance, maintenance software, equipment monitoring, industrial data platforms, manufacturing downtime, OEE improvement diff --git a/src/blog/2025/11/building-hmi-for-equipment-control.md b/src/blog/2025/11/building-hmi-for-equipment-control.md index fe3d028e68..b04e2ed8a7 100644 --- a/src/blog/2025/11/building-hmi-for-equipment-control.md +++ b/src/blog/2025/11/building-hmi-for-equipment-control.md @@ -3,6 +3,8 @@ title: "Building a Web HMI for Factory Equipment Control" subtitle: "Create web-based operator interfaces for industrial equipment" description: "Build a modern HMI using FlowFuse to monitor and control factory equipment from any browser" date: 2025-11-19 +usecase: + - production-monitoring keywords: FlowFuse, web HMI, PLC control, Node-RED dashboard, industrial automation, edge device, MQTT, factory monitoring, SCADA alternative, remote equipment control authors: ["sumit-shinde"] image: /blog/2025/11/images/building-a-web-hmi-for-factory.png diff --git a/src/blog/2026/05/fixing-oee-measurement-in-manufacturing.md b/src/blog/2026/05/fixing-oee-measurement-in-manufacturing.md index de494a81c6..8bc6a26050 100644 --- a/src/blog/2026/05/fixing-oee-measurement-in-manufacturing.md +++ b/src/blog/2026/05/fixing-oee-measurement-in-manufacturing.md @@ -3,6 +3,8 @@ title: "OEE Is Misleading Your Factory — Here's How to Fix It" subtitle: "Why the OEE score on your dashboard does not match what is happening on the floor." description: "Most factories measure OEE wrong. Manual logs miss small stops, definitions drift, and operators game the score. A practical look at what to do about it." date: 2026-05-07 +usecase: + - production-monitoring keywords: authors: ["sumit-shinde"] image: /blog/2026/05/images/oee-is-misleading.png diff --git a/src/customer-stories/manufacturing-digital-transformation.md b/src/customer-stories/manufacturing-digital-transformation.md index 4abd5cba56..5c183ce23f 100644 --- a/src/customer-stories/manufacturing-digital-transformation.md +++ b/src/customer-stories/manufacturing-digital-transformation.md @@ -3,6 +3,8 @@ title: Node-RED Enables Digital Transformation of a Large US Manufacturing Compa description: Read how a US manufacturing giant uses Node-RED and FlowFuse for digital transformation, deploying thousands of instances to boost operational efficiency and innovation. image: /images/stories/large-us-manufacturing.jpg date: 2023-05-04 +usecase: + - production-monitoring logo: hubspot: formId: 826044fa-9760-4f47-84d0-bfe0234f1fa7 diff --git a/src/customer-stories/scaling-industrial-iot-operations-while-maintaining-competitive-edge.md b/src/customer-stories/scaling-industrial-iot-operations-while-maintaining-competitive-edge.md index b2ad90957a..59caa4c004 100644 --- a/src/customer-stories/scaling-industrial-iot-operations-while-maintaining-competitive-edge.md +++ b/src/customer-stories/scaling-industrial-iot-operations-while-maintaining-competitive-edge.md @@ -3,6 +3,8 @@ title: Scaling Industrial IoT Operations While Maintaining Competitive Edge description: Discover how Walter built a future-proof industrial application platform with FlowFuse—connecting machines, unifying data, and scaling operations without increasing IT overhead. image: /images/stories/walter.png date: 2025-12-16 +usecase: + - production-monitoring logo: hubspot: formId: 1cab86cb-5c81-40ab-be4b-a6ae94f38ac8 diff --git a/src/customer-stories/scaling-manufacturing-automation-with-flowfuse.md b/src/customer-stories/scaling-manufacturing-automation-with-flowfuse.md index 4ed014f1b2..8439158c98 100644 --- a/src/customer-stories/scaling-manufacturing-automation-with-flowfuse.md +++ b/src/customer-stories/scaling-manufacturing-automation-with-flowfuse.md @@ -3,6 +3,8 @@ title: Scaling Manufacturing Automation with FlowFuse description: Arch Systems leverages FlowFuse and Node-RED to integrate MES systems, automate 100+ databases, and deliver scalable, real-time manufacturing data processing. image: /images/stories/arch_systems.jpeg date: 2025-09-29 +usecase: + - production-monitoring logo: hubspot: formId: ef56a0ea-7b50-4eed-b6aa-cf5421233e03 diff --git a/src/ebooks/ultimate-guide-to-building-applications-with-flowfuse-dashboard-for-node-red.md b/src/ebooks/ultimate-guide-to-building-applications-with-flowfuse-dashboard-for-node-red.md index 2f4c205220..9a71dda75f 100644 --- a/src/ebooks/ultimate-guide-to-building-applications-with-flowfuse-dashboard-for-node-red.md +++ b/src/ebooks/ultimate-guide-to-building-applications-with-flowfuse-dashboard-for-node-red.md @@ -9,6 +9,8 @@ meta: title: The Ultimate Guide to Building Applications with FlowFuse Dashboard for Node-RED description: Discover the power of the FlowFuse Dashboard for Node-RED with our comprehensive eBook. Learn how to effortlessly create stunning UIs, from data charts to custom components, and enable collaborative full-stack application development. Ideal for developers of all levels, this guide unlocks the potential of your data in industrial IoT environments. Keywords: FlowFuse Dashboard, Node-RED Dashboard, Dashboard 2.0, IoT dashboard creation, Low-code platform, Data visualization, UI development, Industrial IoT, Dashboard design +usecase: + - production-monitoring hubspot: formId: 372e557c-9f90-48e8-81da-d7e462f8ef55 cta: "download-ebook" diff --git a/src/index.njk b/src/index.njk index 3f0a14ae53..490cd76b80 100644 --- a/src/index.njk +++ b/src/index.njk @@ -28,19 +28,19 @@ capabilities: imagePath: "images/home/home-dashboard.png" imageAlt: "FlowFuse Dashboard" solutions: - - href: "/solutions/it-ot-middleware/" + - href: "/use-cases/it-ot-middleware/" image: "./images/home/home-itot-middleware.png" imageAlt: "Image of workers on a factory shop floor with desks, computers and dashboards on the screen" icon: "components/icons/cog.svg" title: "IT/OT Middleware" description: "Connect disparate systems and industrial protocols with a unified platform. Accelerate development and enable seamless collaboration between IT and OT teams to optimize real-time data flow." - - href: "/solutions/scada/" + - href: "/use-cases/scada/" image: "./images/home/home-scada.png" imageAlt: "Image of a woman working on a computer with industrial dashboards on the screen in industrial environment" icon: "components/icons/adjustments-horizontal.svg" title: "SCADA" description: "Modernize your SCADA systems with a modular and flexible platform. Build custom interfaces and control logic in a fraction of the time, gaining full visibility of your operations in an agile and secure way." - - href: "/solutions/mes/" + - href: "/use-cases/mes/" image: "./images/home/home-mes.png" imageAlt: "A factory centrally connected with various devices and systems" icon: "components/icons/chart.svg" diff --git a/src/landing/plc.njk b/src/landing/plc.njk index 0290f91532..bf534cbc54 100644 --- a/src/landing/plc.njk +++ b/src/landing/plc.njk @@ -322,7 +322,7 @@ resources:

    Use FlowFuse as the adapter layer between your PLCs and an MQTT-based UNS. Normalize data from Siemens, Allen-Bradley, and legacy equipment into a common topic hierarchy.

    - Learn about UNS → + Learn about UNS → diff --git a/src/llms.njk b/src/llms.njk index a8736c275e..dab82d2fb5 100644 --- a/src/llms.njk +++ b/src/llms.njk @@ -21,12 +21,12 @@ eleventyExcludeFromCollections: true ## Solutions -- [IT/OT Middleware]({{ site.baseURL }}/solutions/it-ot-middleware/): Connect industrial systems with enterprise IT -- [Edge Connectivity]({{ site.baseURL }}/solutions/edge-connectivity/): Manage Node-RED at the edge -- [Data Integration]({{ site.baseURL }}/solutions/data-integration/): Integrate industrial and enterprise data sources -- [Unified Namespace (UNS)]({{ site.baseURL }}/solutions/uns/): UNS architecture with Node-RED and FlowFuse -- [MES]({{ site.baseURL }}/solutions/mes/): Manufacturing Execution Systems integration -- [SCADA]({{ site.baseURL }}/solutions/scada/): SCADA modernization with Node-RED +- [IT/OT Middleware]({{ site.baseURL }}/use-cases/it-ot-middleware/): Connect industrial systems with enterprise IT +- [Edge Connectivity]({{ site.baseURL }}/use-cases/edge-connectivity/): Manage Node-RED at the edge +- [Data Integration]({{ site.baseURL }}/use-cases/data-integration/): Integrate industrial and enterprise data sources +- [Unified Namespace (UNS)]({{ site.baseURL }}/use-cases/uns/): UNS architecture with Node-RED and FlowFuse +- [MES]({{ site.baseURL }}/use-cases/mes/): Manufacturing Execution Systems integration +- [SCADA]({{ site.baseURL }}/use-cases/scada/): SCADA modernization with Node-RED ## Platform diff --git a/src/node-red/index.njk b/src/node-red/index.njk index b91664927e..2e48218f65 100644 --- a/src/node-red/index.njk +++ b/src/node-red/index.njk @@ -21,7 +21,7 @@ meta: answer: > Node-RED can be used for a wide variety of use cases, including: