From 233abc72b2eb7b06d84ed918133bba8d0148f3cb Mon Sep 17 00:00:00 2001 From: Dimitrie Hoekstra Date: Fri, 24 Jul 2026 11:10:47 +0200 Subject: [PATCH 1/3] Add use-case and outcome lens pages and cross-link includes --- .../components/industry-use-cases.njk | 27 ++++++++++++++ .../components/related-resources.njk | 2 +- src/_includes/components/use-case-chips.njk | 30 ++++++++++++++++ src/_includes/components/use-case-links.njk | 23 ++++++++++++ src/_includes/explore-more-content.njk | 6 ++-- src/_includes/layouts/use-case.njk | 35 +++++++++++++++++++ src/use-cases.njk | 32 +++++++++++++++-- src/use-cases/edge-connectivity.njk | 12 ++++++- src/use-cases/production-monitoring.njk | 13 +++++++ src/use-cases/uns.njk | 1 + 10 files changed, 173 insertions(+), 8 deletions(-) create mode 100644 src/_includes/components/industry-use-cases.njk create mode 100644 src/_includes/components/use-case-chips.njk create mode 100644 src/_includes/components/use-case-links.njk diff --git a/src/_includes/components/industry-use-cases.njk b/src/_includes/components/industry-use-cases.njk new file mode 100644 index 0000000000..dc78f04250 --- /dev/null +++ b/src/_includes/components/industry-use-cases.njk @@ -0,0 +1,27 @@ +{# ============================================================ + USE CASES FOR THIS INDUSTRY - derived grid. + Lists every use-case page whose `industries[]` front-matter + contains the current page's fileSlug. Mapping source of truth: + the Use Cases Asana project (Industry field). + ============================================================ #} +{% set industrySlug = page.fileSlug %} +
+
+

Use cases in {{ industryDisplayName or hero.eyebrow or title }}

+

Operational workflow patterns teams in this industry build and own with FlowFuse.

+
+ {% for uc in collections["use-case"] | sort(false, true, "data.title") %} + {% if uc.data.industries and industrySlug in uc.data.industries %} + +

{{ uc.data.title }}

+

{{ uc.data.problem }}

+ + View use case + {% include "components/icons/arrow-right.svg" %} + + + {% endif %} + {% endfor %} +
+
+
diff --git a/src/_includes/components/related-resources.njk b/src/_includes/components/related-resources.njk index 9dea7522fd..4b0759e225 100644 --- a/src/_includes/components/related-resources.njk +++ b/src/_includes/components/related-resources.njk @@ -39,7 +39,7 @@ diff --git a/src/_includes/components/use-case-chips.njk b/src/_includes/components/use-case-chips.njk new file mode 100644 index 0000000000..93e8e48e77 --- /dev/null +++ b/src/_includes/components/use-case-chips.njk @@ -0,0 +1,30 @@ +{# ============================================================ + USE CASE CONTEXT BAND - labeled links to the industry lens + pages. Reads `industries[]` (slugs) from page front-matter. + The slug->label maps mirror + the Use Cases Asana project fields (source of truth). + Rendered near the end of the use-case page, not under the hero. + ============================================================ #} +{% set industryLabels = { + "automotive": "Automotive", + "food-beverage": "Food & Beverage", + "life-sciences": "Life Sciences", + "aviation-aerospace": "Aviation & Aerospace", + "aerospace-components": "Aerospace Components", + "renewables": "Renewables", + "semiconductors": "Semiconductors", + "electronics-appliances": "Electronics & Appliances" +} %} +{% if industries %} +
+
+ {% if industries %} + Common in these industries +

+ {% for slug in industries %}{{ industryLabels[slug] or slug }}{% if not loop.last %}, {% endif %}{% endfor %} + · all industries +

+ {% endif %} +
+
+{% endif %} diff --git a/src/_includes/components/use-case-links.njk b/src/_includes/components/use-case-links.njk new file mode 100644 index 0000000000..6ccc0867c2 --- /dev/null +++ b/src/_includes/components/use-case-links.njk @@ -0,0 +1,23 @@ +{# ============================================================ + USE CASE LINKS - systematic cross-link cards. + The host page declares which use cases to feature: + {% set featuredUseCases = ["slug-a", "slug-b"] %} + {% include "components/use-case-links.njk" %} + Card content (title, problem line, url) derives from each + use-case page's own front matter, so copy lives in one place. + ============================================================ #} +{% if featuredUseCases %} +
+ {% for slug in featuredUseCases %} + {% for uc in collections["use-case"] %} + {% if uc.fileSlug == slug %} + +

{{ uc.data.title }}

+

{{ uc.data.problem }}

+ View use case {% include "components/icons/arrow-right.svg" %} + + {% endif %} + {% endfor %} + {% endfor %} +
+{% endif %} diff --git a/src/_includes/explore-more-content.njk b/src/_includes/explore-more-content.njk index 6ae0c0a6af..281a5f258c 100644 --- a/src/_includes/explore-more-content.njk +++ b/src/_includes/explore-more-content.njk @@ -22,9 +22,9 @@ {%- endfor -%} - - See all - {% include "components/icons/arrow-long-right.svg" %} + + See all + {% include "components/icons/arrow-long-right.svg" %}
diff --git a/src/_includes/layouts/use-case.njk b/src/_includes/layouts/use-case.njk index 7e50b4cb4f..a13a7c0c34 100644 --- a/src/_includes/layouts/use-case.njk +++ b/src/_includes/layouts/use-case.njk @@ -26,6 +26,7 @@ sitemapPriority: 0.7 {% 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 %} +{% if aiBuildLayer %}{% set nav = nav.concat([{ id: "ai-build-layer", label: "Build It With AI" }]) %}{% endif %}
@@ -203,6 +204,34 @@ sitemapPriority: 0.7
{% endif %} + {% if aiBuildLayer %} + +
+
+

06 · Build it with AI

+

{{ aiBuildLayer.heading or "From described to deployed, with the FlowFuse Expert" }}

+

{{ aiBuildLayer.intro }}

+
+ {% for step in aiBuildLayer.steps %} +
+
+ {% include "components/icons/sparkles.svg" %} + Step {% if loop.index < 10 %}0{% endif %}{{ loop.index }} +
+

{{ step.title }}

+

{{ step.detail }}

+
+ {% endfor %} +
+ {% if aiBuildLayer.note %} +

{{ aiBuildLayer.note }}

+ {% endif %} +
+
+ {% endif %} + {# ============================================================ LEGACY SKELETON FALL-BACK (only when no rich blocks defined) ============================================================ #} @@ -253,6 +282,11 @@ sitemapPriority: 0.7 {% endif %} {% endif %} + + {% include "components/use-case-chips.njk" %} + @@ -273,4 +307,5 @@ sitemapPriority: 0.7
+ diff --git a/src/use-cases.njk b/src/use-cases.njk index 05953a9b38..e1dbbc879b 100644 --- a/src/use-cases.njk +++ b/src/use-cases.njk @@ -20,19 +20,45 @@ meta: - +
-
+

Operational use cases

+

Problems operations teams own, and how they are solved with FlowFuse. Each use case is also reachable by industry.

+
{% for uc in collections["use-case"] | sort(false, true, "data.title") %} + {% if uc.data.values %}

{{ uc.data.title }}

{{ uc.data.problem }}

- + View use case {% include "components/icons/arrow-right.svg" %} + {% endif %} + {% endfor %} +
+
+
+ + +
+
+

By architecture

+

How FlowFuse is deployed and where it sits in your stack. Architectures are the technical evaluator's entry point; the use cases above are what gets built on them.

+
+ {% for uc in collections["use-case"] | sort(false, true, "data.title") %} + {% if not uc.data.values %} + +

{{ uc.data.title }}

+

{{ uc.data.problem }}

+ + View architecture + {% include "components/icons/arrow-right.svg" %} + + + {% endif %} {% endfor %}
diff --git a/src/use-cases/edge-connectivity.njk b/src/use-cases/edge-connectivity.njk index 45d7386ba8..24f78989e6 100644 --- a/src/use-cases/edge-connectivity.njk +++ b/src/use-cases/edge-connectivity.njk @@ -1,7 +1,7 @@ --- layout: solution title: FlowFuse for Edge Connectivity -problem: "Deploy and manage Node-RED instances on edge hardware at scale — from a single pane of glass, without touching each device." +problem: "Deploy and manage Node-RED instances on edge hardware at scale, from a single pane of glass, without touching each device." image: /images/solutions/og-solutions-edge-connectivity.jpg subtitle: heroImg: ./images/pictograms/edge_blue.png @@ -75,6 +75,16 @@ description:
+ +
+
+

What teams build at the edge

+ {% set featuredUseCases = ["shop-floor-communication", "production-monitoring"] %} + {% include "components/use-case-links.njk" %} +

Get the Device Agent

+
+
+

diff --git a/src/use-cases/production-monitoring.njk b/src/use-cases/production-monitoring.njk index 2d9476c006..5086a4a875 100644 --- a/src/use-cases/production-monitoring.njk +++ b/src/use-cases/production-monitoring.njk @@ -4,6 +4,19 @@ meta: title: "Production Monitoring | Use Cases | FlowFuse" description: "Real-time visibility into what your production lines are actually doing. Build the monitoring app your operation needs with FlowFuse and Node-RED: connect any protocol, deploy at the edge or in the cloud, and roll out across sites." problem: "Your operation is running. You just can't see it clearly enough, until something breaks." +industries: ["automotive", "food-beverage", "life-sciences", "aviation-aerospace", "aerospace-components", "renewables", "semiconductors", "electronics-appliances"] +values: ["production-performance"] + +aiBuildLayer: + intro: "The FlowFuse Expert works on this use case with you: describe the monitoring you need and get a working starting flow, then query what it captures in plain language." + steps: + - title: "Describe it, get a starting flow" + detail: "Tell the Expert which lines and KPIs to watch; it assembles tabs, nodes and wiring for a monitoring starting point. Currently in open beta on FlowFuse Cloud." + - title: "Refine with in-editor assistance" + detail: "Function Builder and inline completions handle counters, shift logic and dashboard bindings; the flow explainer documents the result." + - title: "Ask your plant anything" + detail: "Expose captured production data through MCP tools and query it with Expert's Insights mode (beta): 'which line lost the most output this shift?'" + note: "AI capabilities noted as beta are in open beta on FlowFuse Cloud at time of writing." customerPain: heading: "Visibility gaps are expensive." diff --git a/src/use-cases/uns.njk b/src/use-cases/uns.njk index 5110a691c2..a76c5193b3 100644 --- a/src/use-cases/uns.njk +++ b/src/use-cases/uns.njk @@ -1,6 +1,7 @@ --- layout: page title: "FlowFuse for UNS" +image: /images/solutions/flowfuse-uns.png problem: "Adopt a Unified Namespace without ripping out existing infrastructure. FlowFuse connects producers and consumers through MQTT with low-code flows." nohero: true meta: From c987db9f9084664a29e987fe54f224c195e2a85b Mon Sep 17 00:00:00 2001 From: Dimitrie Hoekstra Date: Fri, 24 Jul 2026 12:46:57 +0200 Subject: [PATCH 2/3] Trigger Netlify deploy preview build From 8f047a31bd34e69252f1c2be1440e0e57c1eb5ef Mon Sep 17 00:00:00 2001 From: Dimitrie Hoekstra Date: Fri, 24 Jul 2026 13:16:15 +0200 Subject: [PATCH 3/3] Trim trailing whitespace --- src/use-cases/uns.njk | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/use-cases/uns.njk b/src/use-cases/uns.njk index a76c5193b3..cf660121f9 100644 --- a/src/use-cases/uns.njk +++ b/src/use-cases/uns.njk @@ -32,15 +32,15 @@ meta:

{% image "./images/solutions/ff-uns.png", "FlowFuse connected to many industrial devices", [400] %}
-
+
- +

Unlock the power of your real-time data

IT and data professionals are often challenged by the complexities of accessing and analyzing data scattered across disparate systems in manufacturing environments. UNS offers a solution to these challenges by providing a standardized way to access and utilize real-time data across your entire manufacturing operation.

-
+
{% set sections = [ { @@ -93,14 +93,14 @@ meta:
{% endfor %}
- +

From Data Source to Application:
Streamline Your UNS Workflows with FlowFuse

{% image "./images/solutions/flowfuse-uns.png", "FlowFuse UNS Workflow", [1024] %}
- +

The FlowFuse Advantage

@@ -132,7 +132,7 @@ meta: "description": "Empowering your teams to build custom solutions with ease." } ] %} - + {% for section in sections %}

{{ section.title }}