diff --git a/docs/superpowers/plans/2026-03-13-certified-nodes-redesign.md b/docs/superpowers/plans/2026-03-13-certified-nodes-redesign.md new file mode 100644 index 0000000000..8c714e2e33 --- /dev/null +++ b/docs/superpowers/plans/2026-03-13-certified-nodes-redesign.md @@ -0,0 +1,333 @@ +# Certified Nodes Redesign Implementation Plan + +> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Transform `/integrations/` into a premium enterprise integration hub where certified integrations are the hero, with community Node-RED nodes as secondary. + +**Architecture:** Data-driven Eleventy pagination generates integration detail pages from a YAML manifest. The existing `certifiedNodes.js` API data is enriched with marketing content from the YAML. The catalog index page gets a complete redesign with a dark hero, category filters, and a two-tier card layout separating certified from community nodes. + +**Tech Stack:** Eleventy 2.0, Nunjucks, Tailwind CSS, YAML data files, client-side JS for filtering + +**Spec:** `docs/superpowers/specs/2026-03-13-certified-nodes-redesign-design.md` + +**Branch:** `certified-nodes-redesign` (based on `solutions-scaffolding`) + +--- + +## File Structure + +### New Files +| File | Responsibility | +|------|---------------| +| `src/_data/certifiedIntegrations.yaml` | Master data: integration definitions with marketing content | +| `src/_data/integrationPairs.js` | Generates all pair combinations for Connect X to Y pages | +| `src/integrations/integrations-certified.njk` | Eleventy pagination template for integration detail pages | +| `src/_includes/layouts/certified-integration.njk` | Layout for integration detail pages | +| `src/_includes/layouts/integration-connect.njk` | Layout for Connect X to Y pages | +| `src/integrations/connect/connect.njk` | Pagination template for connect pair pages | +| `src/integrations/connect/index.njk` | Index listing all connect pair pages | + +### Modified Files +| File | Change | +|------|--------| +| `src/integrations/index.njk` | Complete redesign: new hero, category filters, dual-section layout | + +--- + +## Chunk 1: Data Layer + +### Task 1: Create the Certified Integrations YAML Data File + +**Files:** +- Create: `src/_data/certifiedIntegrations.yaml` + +This is the master content file. Each integration groups certified node packages with marketing content. + +- [ ] **Step 1: Create the YAML data file** + +Create `src/_data/certifiedIntegrations.yaml` with: +- A `categories` array defining: industrial-protocols, cloud-and-data, enterprise-systems, edge-and-iot +- An `integrations` array with 6 integrations: opc-ua, mqtt, modbus, s7, ethernet-ip, http-rest +- Each integration has: slug, name, shortName, icon, category, description, heroDescription, certifiedNodes (array of npm package names), useCases (3 per integration), benefits (3 per integration), trustSignals (sla, supportResponse, updateFrequency, certificationLevel), relatedIntegrations, meta (title, description, keywords) + +Follow the exact YAML structure from the design spec. Key content per integration: +- **OPC-UA**: certifiedNodes: [node-red-contrib-opcua], use cases: SCADA Modernization, IT/OT Convergence, Predictive Maintenance +- **MQTT**: certifiedNodes: [@flowfuse/node-red-contrib-aedes], use cases: Unified Namespace, IoT Data Ingestion, Event-Driven Automation +- **Modbus**: certifiedNodes: [node-red-contrib-modbus], use cases: Legacy Equipment Integration, Energy Monitoring, Process Data Collection +- **S7**: certifiedNodes: [node-red-contrib-s7], use cases: PLC Data Visualization, MES Integration, Cloud Connectivity +- **Ethernet/IP**: certifiedNodes: [], use cases: Rockwell Integration, Production Monitoring, Multi-Vendor Bridging +- **HTTP/REST**: certifiedNodes: [], use cases: Cloud Platform Integration, ERP Connectivity, Webhook Automation + +- [ ] **Step 2: Verify YAML is valid** + +Run: `cd /home/sprite/website && node -e "const yaml = require('js-yaml'); const fs = require('fs'); yaml.load(fs.readFileSync('src/_data/certifiedIntegrations.yaml', 'utf8')); console.log('YAML valid')"` +Expected: `YAML valid` + +- [ ] **Step 3: Commit** + +```bash +git add src/_data/certifiedIntegrations.yaml +git commit -m "feat: add certified integrations YAML data file with 6 integrations" +``` + +--- + +### Task 2: Create the Integration Pairs Data Generator + +**Files:** +- Create: `src/_data/integrationPairs.js` + +Follows the exact pattern of `src/_data/protocolPairs.js`. + +- [ ] **Step 1: Create integrationPairs.js** + +Read `certifiedIntegrations.yaml`, generate all N*(N-1) pairs. Each pair has: slug (`{from}-and-{to}`), from (full integration object), to (full integration object), title, description, meta (title, description, keywords). + +Use `js-yaml` and `fs` to read the YAML, same as `protocolPairs.js` reads `protocols.yaml`. + +- [ ] **Step 2: Verify it runs** + +Run: `cd /home/sprite/website && node -e "const pairs = require('./src/_data/integrationPairs.js')(); console.log(pairs.length + ' pairs generated'); console.log(pairs[0].slug)"` +Expected: `30 pairs generated` and a slug like `opc-ua-and-mqtt` + +- [ ] **Step 3: Commit** + +```bash +git add src/_data/integrationPairs.js +git commit -m "feat: add integration pairs data generator for Connect X to Y pages" +``` + +--- + +## Chunk 2: Integration Detail Pages + +### Task 3: Create the Certified Integration Detail Layout + +**Files:** +- Create: `src/_includes/layouts/certified-integration.njk` + +Layout extending `layouts/base.njk` with sitemapPriority 0.9. Sections top-to-bottom: + +1. **Hero** (dark gradient `linear-gradient(135deg, #1a1a2e, #16213e, #0f3460)`): + - Green "Certified" badge + "Enterprise Integration" label + - `h1` with `integrationName`, white text + - `heroDescription` paragraph in gray-300 + - Trust signal pills row (SLA, support response, update frequency) — white/10 bg with white/20 border + - Two CTAs: "TALK TO AN EXPERT" (primary) + "START FREE TRIAL" (outlined, white border) + - Uses `capture()` analytics with `page: 'integration-{slug}'` + +2. **Use Cases** ("What You Can Build"): + - 3-column card grid from `useCasesJson` (parsed with `| fromJson` filter) + - Each card: white bg, gray-200 border, title + description + +3. **How It Works** (gray-50 bg): + - Architecture diagram: `[integrationShortName]` → `[FlowFuse]` → `[Any System]` + - Same visual pattern as `layouts/connect.njk` connection diagram + - Explanatory paragraph below + +4. **Benefits** ("Why Choose FlowFuse Certified"): + - 3-column card grid from `benefitsJson` (parsed with `| fromJson`) + - Each card: green certified checkmark icon, title, description + +5. **Included Nodes** (gray-50 bg): + - Lists `certifiedNodeIds` as code elements + - Links to npm package pages + - "Certified" badge per node + +6. **Related Integrations** ("Connect {name} to..."): + - Grid of links to other certified integrations' connect pages + - Pattern: iterate `certifiedIntegrations.integrations`, skip self, link to `/integrations/{self}/and/{other}/` + +7. **CTA**: `{% include "common-cta.njk" %}` + +Template variables consumed: `integrationName`, `integrationShortName`, `integrationSlug`, `heroDescription`, `useCasesJson`, `benefitsJson`, `certifiedNodeIds`, `trustSla`, `trustSupportResponse`, `trustUpdateFrequency` + +- [ ] **Step 1: Create the layout file** + +- [ ] **Step 2: Commit** + +```bash +git add src/_includes/layouts/certified-integration.njk +git commit -m "feat: add certified integration detail page layout" +``` + +--- + +### Task 4: Create the Pagination Template for Integration Detail Pages + +**Files:** +- Create: `src/integrations/integrations-certified.njk` + +Follows the exact pattern of `src/solutions/protocols/protocols.njk`. + +- [ ] **Step 1: Create the pagination template** + +```yaml +pagination: + data: certifiedIntegrations.integrations + size: 1 + alias: integration +layout: layouts/certified-integration.njk +eleventyComputed: + permalink: /integrations/{{ integration.slug }}/ + title: "{{ integration.name }} Integration | FlowFuse" + integrationName: "{{ integration.name }}" + integrationShortName: "{{ integration.shortName }}" + integrationSlug: "{{ integration.slug }}" + heroDescription: "{{ integration.heroDescription }}" + useCasesJson: "{{ integration.useCases | json }}" + benefitsJson: "{{ integration.benefits | json }}" + certifiedNodeIds: "{{ integration.certifiedNodes }}" + trustSla: "{{ integration.trustSignals.sla }}" + trustSupportResponse: "{{ integration.trustSignals.supportResponse }}" + trustUpdateFrequency: "{{ integration.trustSignals.updateFrequency }}" + meta: + title: "{{ integration.meta.title }}" + description: "{{ integration.meta.description }}" + keywords: "{{ integration.meta.keywords }}" +``` + +Note: `useCases` and `benefits` are arrays of objects. Serialize to JSON via `| json` filter so the layout can parse them back with `| fromJson`. Both filters exist in `.eleventy.js`. + +- [ ] **Step 2: Commit** + +```bash +git add src/integrations/integrations-certified.njk +git commit -m "feat: add pagination template for certified integration detail pages" +``` + +--- + +### Task 5: Create Connect Pages for Integration Pairs + +**Files:** +- Create: `src/_includes/layouts/integration-connect.njk` +- Create: `src/integrations/connect/connect.njk` +- Create: `src/integrations/connect/index.njk` + +- [ ] **Step 1: Create the connect page layout** + +`src/_includes/layouts/integration-connect.njk` — extends `layouts/base.njk`, sitemapPriority 0.7. Same dark gradient hero as the detail page. Sections: +- Hero with "Certified Integration" badges, "Connect {fromName} to {toName}" heading, connection diagram (from → FlowFuse → to), CTAs +- Content body (`{{ content | safe }}`) +- Reverse direction link to `/integrations/{to}/and/{from}/` +- "Learn More" section linking to both integration detail pages +- Common CTA include + +Template variables: `fromName`, `fromShortName`, `fromSlug`, `toName`, `toShortName`, `toSlug`, `pairDescription` + +- [ ] **Step 2: Create the pagination template** + +`src/integrations/connect/connect.njk` — pagination over `integrationPairs`, size 1. Permalink: `/integrations/{{ pair.from.slug }}/and/{{ pair.to.slug }}/`. Content body includes: +- "How to Connect {from} to {to}" heading +- 3-step guide (same pattern as `src/solutions/connect/connect.njk` but with green accent colors and "certified" language) +- "Why use FlowFuse Certified nodes" callout box (green-50 bg, green-200 border) + +- [ ] **Step 3: Create the connect index page** + +`src/integrations/connect/index.njk` — layout `nohero.njk`. Lists all pairs grouped by source integration. + +- [ ] **Step 4: Commit** + +```bash +git add src/_includes/layouts/integration-connect.njk src/integrations/connect/ +git commit -m "feat: add Connect X to Y pages for certified integration pairs" +``` + +--- + +## Chunk 3: Catalog Index Page Redesign + +### Task 6: Redesign the Integrations Catalog Index Page + +**Files:** +- Modify: `src/integrations/index.njk` + +Complete rewrite. Extends `layouts/catalog.njk` (same as current). New structure: + +1. **Hero** (dark gradient, same as detail pages): + - Green "Enterprise-Grade Connectivity" eyebrow + - "Certified Integrations for Node-RED" h1 + - Enterprise value proposition subtitle + - Stats bar: integration count (from `certifiedIntegrations.integrations | length`), "99.9%" SLA, "24h" support, "5,000+" community nodes + +2. **Category filter bar** (sticky, gray-50 bg): + - Pill buttons: "All" (active by default) + one per category from `certifiedIntegrations.categories` + - JS `filterIntegrations(category, btn)` toggles `.certified-integration-card` visibility by `data-category` + - CSS: `.integration-filter-pill` (white bg, gray border) + `.integration-filter-pill.active` (gray-900 bg, white text) + +3. **Certified integrations grid**: + - "Certified" green badge + "Enterprise Integrations" heading + - Server-rendered 3-column grid of `certifiedIntegrations.integrations` + - Each card: `` to `/integrations/{slug}/`, green-100 border, certified checkmark icon, "Certified" badge, name, description (line-clamp-2), category tag, node count, trust signal pills (SLA Backed, Commercial Support) + - `data-category` attribute for JS filtering + +4. **Divider** + +5. **Community nodes section**: + - "Community" grey badge + "Node-RED Ecosystem" heading + "5,000+ nodes" subtitle + - Search input for filtering + - Client-side rendered 4-column grid fetching from `https://ff-integrations.flowfuse.cloud/api/nodes` + - Filter out certified node IDs (embedded from YAML at build time via Nunjucks set) + - Each community tile: simple card with node name, description (line-clamp-2), weekly download count + - Links to `https://flows.nodered.org/node/{id}` + - Pagination with Previous/Next + + Note on XSS safety: Community node data (names, descriptions) from the API are rendered using `textContent` or template literals that are inserted via DOM text nodes. The API data is from a trusted first-party FlowFuse service. The existing codebase already uses this same pattern for community nodes. + +6. **Bottom CTA**: "Need a custom integration?" with Contact Sales + Start Free Trial + +- [ ] **Step 1: Rewrite `src/integrations/index.njk`** + +- [ ] **Step 2: Commit** + +```bash +git add src/integrations/index.njk +git commit -m "feat: redesign integrations catalog with certified hero and community section" +``` + +--- + +## Chunk 4: Build Verification + +### Task 7: Verify the Build + +- [ ] **Step 1: Install dependencies** + +Run: `cd /home/sprite/website && npm install` + +- [ ] **Step 2: Run the Eleventy build** + +Run: `cd /home/sprite/website && npx @11ty/eleventy --dryrun 2>&1 | tail -30` + +Should generate pages including `/integrations/`, `/integrations/opc-ua/`, `/integrations/opc-ua/and/mqtt/`, etc. + +- [ ] **Step 3: Verify generated page count** + +Run: `cd /home/sprite/website && npx @11ty/eleventy --dryrun 2>&1 | grep -c "integrations/"` + +Expected: ~38 pages (6 detail + 30 pairs + 1 catalog + 1 connect index). + +- [ ] **Step 4: Fix any build errors and commit** + +### Task 8: Handle Permalink Conflicts + +The existing `src/integrations/integrations.njk` generates pages at `/integrations/{node-id}/`. Our slugs (opc-ua, mqtt, modbus, s7, ethernet-ip, http-rest) should not conflict with npm package names (node-red-contrib-*). Verify no conflicts exist. + +- [ ] **Step 1: Check for conflicts** + +Run: `cd /home/sprite/website && node -e "const yaml = require('js-yaml'); const fs = require('fs'); const data = yaml.load(fs.readFileSync('src/_data/certifiedIntegrations.yaml', 'utf8')); console.log('Slugs:', data.integrations.map(i => i.slug).join(', '))"` + +If any slug matches an npm package name from `integrations.js`, rename the slug. + +### Task 9: Start Dev Server and Verify + +- [ ] **Step 1: Start the development server via Sprite service** + +- [ ] **Step 2: Verify key pages render correctly** + +Check: `/integrations/`, `/integrations/opc-ua/`, `/integrations/opc-ua/and/mqtt/`, `/integrations/connect/` + +- [ ] **Step 3: Create a checkpoint** + +Run: `sprite-env checkpoints create --comment "Certified nodes redesign complete: catalog, detail pages, connect pages"` diff --git a/docs/superpowers/specs/2026-03-13-certified-nodes-redesign-design.md b/docs/superpowers/specs/2026-03-13-certified-nodes-redesign-design.md new file mode 100644 index 0000000000..86bd2c3382 --- /dev/null +++ b/docs/superpowers/specs/2026-03-13-certified-nodes-redesign-design.md @@ -0,0 +1,182 @@ +# Certified Nodes Redesign — Design Spec + +## Context + +FlowFuse is relaunching its certified nodes offering under the "Trusted Nodes" initiative. The current certified nodes page is a simple paginated grid. The goal is to transform `/integrations/` into a premium enterprise integration hub where certified integrations are the hero, with community Node-RED nodes as secondary. + +This builds on the `solutions-scaffolding` branch (PR #4641) which already provides data-driven pagination for protocols, use cases, teams, and connect pages. + +## Decisions Made + +| Decision | Choice | +|----------|--------| +| Page grouping | Integration-level (e.g., one "OPC-UA" page covering client + server nodes) | +| Primary audience | Enterprise/procurement teams | +| Relationship to existing integrations | Replace — certified nodes become THE integrations story | +| Content depth per integration | Solution-oriented — use cases, architecture, trust signals, CTAs | +| Number of integrations | 10+ (scalable, data-driven) | +| Pricing on pages | None — CTAs drive to Contact Sales / Start Free Trial | +| Starting point | Build on PR #4641 scaffolding | + +## Information Architecture + +### URL Structure + +``` +/integrations/ → Catalog page (filterable grid) +/integrations/{slug}/ → Integration detail page (solution landing page) +/integrations/{slug}/and/{slug}/ → "Connect X to Y" cross-sell page +``` + +### Integration Content Model + +Each integration groups multiple certified node packages into a single marketable entity. Defined in a new YAML data file: + +```yaml +# src/_data/certifiedIntegrations.yaml +integrations: + - slug: opc-ua + name: OPC-UA + shortName: OPC-UA + icon: opc-ua.svg + category: industrial-protocols + description: > + Industrial automation protocol for secure, reliable + machine-to-machine communication + heroDescription: > + Connect to any OPC-UA enabled device with commercially + supported, SLA-backed Node-RED nodes. + certifiedNodes: + - "@flowfuse/node-red-contrib-opcua-client" + - "@flowfuse/node-red-contrib-opcua-server" + useCases: + - title: SCADA Modernization + description: Bridge legacy SCADA to modern cloud platforms + - title: IT/OT Convergence + description: Connect shop floor data to enterprise IT systems + - title: Predictive Maintenance + description: Stream machine telemetry for real-time analytics + benefits: + - title: Commercial Support + description: 24h response SLA with dedicated engineering team + - title: Rigorous Testing + description: Tested against 50+ OPC-UA server implementations + - title: Guaranteed Compatibility + description: Validated with every FlowFuse release + trustSignals: + sla: "99.9% uptime" + supportResponse: "24h" + updateFrequency: "Monthly" + certificationLevel: "Enterprise" + relatedIntegrations: [mqtt, modbus] + meta: + title: "OPC-UA Integration for Node-RED | FlowFuse" + description: "Enterprise-grade OPC-UA connectivity..." + keywords: "opc-ua, node-red, industrial automation" +``` + +### Categories + +- **Industrial Protocols** — OPC-UA, MQTT, Modbus, S7, BACnet +- **Cloud & Data** — AWS, Azure, GCP, databases +- **Enterprise Systems** — SAP, Salesforce, ServiceNow +- **Edge & IoT** — GPIO, serial, BLE, sensors + +## Page Designs + +### 1. Catalog Page (`/integrations/`) + +Replaces the existing integrations index. Structure top-to-bottom: + +1. **Hero section** — Dark gradient background. "Enterprise-Grade Connectivity" eyebrow, "Certified Integrations for Node-RED" headline, enterprise value proposition subtitle. Stats bar: integration count, SLA, support response time, community node count. + +2. **Filter bar** — Search input + category pill filters (All, Industrial Protocols, Cloud & Data, Enterprise Systems, Edge & IoT). Client-side filtering without page reload. + +3. **Certified integrations section** — "Certified / Enterprise Integrations" header with green badge. 3-column card grid. Each card: green border, certified badge, icon, name, short description, category tag, node count, trust signal pills (SLA Backed, Commercial Support). Cards link to `/integrations/{slug}/`. + +4. **Divider** + +5. **Community nodes section** — "Community / Node-RED Ecosystem" header with grey badge + "5,000+ nodes" subtitle. 4-column compact card grid (muted styling: grey border, smaller, less detail). Shows top community nodes by downloads. "View all community nodes" link. + +6. **Bottom CTA** — "Need a custom integration?" with Contact Sales + Start Free Trial buttons. + +### 2. Integration Detail Page (`/integrations/{slug}/`) + +Solution landing page per certified integration, designed for procurement teams: + +1. **Hero** — Integration icon + name, certified badge, one-line tagline, heroDescription paragraph, two CTAs (Contact Sales, Start Free Trial). Trust signal pills row (SLA, support response, update frequency). + +2. **Use cases section** — "What You Can Build" header. 3-column card grid showing use cases with title, description, and optional icon. + +3. **How it works** — "How FlowFuse Connects [Integration]" header. Visual architecture showing: Source System → FlowFuse (with Node-RED) → Target System. Brief explanation of the data flow. + +4. **Benefits section** — 3-column grid of benefit cards with icon, title, description. Sourced from the `benefits` array in the data file. + +5. **Included nodes** — "Certified Nodes Included" header. Lists the actual npm packages with version, last updated, download count. Links to npm. This is the technical detail layer for engineers who accompany procurement teams. + +6. **Related integrations** — "Connect OPC-UA to..." grid linking to other certified integrations and to `/integrations/{slug}/and/{slug}/` connect pages. + +7. **CTA** — Reuse `common-cta.njk` pattern. Contact Sales focus. + +### 3. Connect Pages (`/integrations/{slug}/and/{slug}/`) + +Reuse the existing connect page pattern from PR #4641's `protocolPairs.js` but generate from the certified integrations data instead of (or in addition to) protocols. + +## Data Pipeline + +### New Files + +| File | Purpose | +|------|---------| +| `src/_data/certifiedIntegrations.yaml` | Integration definitions with marketing content | +| `src/_data/integrationPairs.js` | Generates all integration pair combinations for connect pages | +| `src/integrations/integrations-certified.njk` | Pagination template for certified integration detail pages | +| `src/_includes/layouts/certified-integration.njk` | Layout for integration detail pages | + +### Modified Files + +| File | Change | +|------|--------| +| `src/integrations/index.njk` | Complete redesign — new hero, filter bar, dual-section layout | +| `src/_data/integrations.js` | Add `certifiedIntegrations` data merge, mark certified nodes with integration parent | +| Navigation includes | Add certified integrations to Solutions mega-menu | + +### Data Flow + +``` +certifiedIntegrations.yaml + ↓ +certifiedIntegrations.js (reads YAML, enriches with live npm data from certifiedNodes.js) + ↓ +Eleventy pagination → /integrations/{slug}/ pages + ↓ +integrationPairs.js (generates pairs) → /integrations/{slug}/and/{slug}/ pages +``` + +The existing `certifiedNodes.js` continues to fetch live data from `catalog.flowfuse.com`. The new `certifiedIntegrations` data file maps those nodes into integration groups and adds the marketing layer. + +## Technical Approach + +- Follow the exact same pattern as `protocols.yaml` → `protocols.njk` → `layouts/protocol.njk` +- Nunjucks templates with Tailwind CSS classes +- Eleventy pagination for page generation +- Client-side JS for catalog filtering (same pattern as current integrations index) +- Responsive: mobile-first, 1-col → 2-col → 3-col grid breakpoints +- SEO: meta title, description, keywords, Open Graph, canonical URLs per integration page + +## Visual Design + +- Follow existing FlowFuse design system (Heebo font, indigo/teal/red accent colors) +- Certified integrations: green (#2e7d32) border + badge for trust signaling +- Community nodes: grey/muted styling for clear visual hierarchy +- Dark gradient hero (consistent with modern FlowFuse pages) +- Card-based layout throughout +- Trust signal pills as small badges (SLA Backed, Commercial Support, etc.) + +## Out of Scope + +- Per-integration pricing or licensing +- User reviews or ratings +- Automated node certification pipeline +- Changes to flows.nodered.org +- Blog content or customer stories (can be added later via `relatedPosts` field) diff --git a/src/_data/certifiedIntegrations.yaml b/src/_data/certifiedIntegrations.yaml new file mode 100644 index 0000000000..20692630ac --- /dev/null +++ b/src/_data/certifiedIntegrations.yaml @@ -0,0 +1,265 @@ +# Certified Integrations for FlowFuse +# +# Master data file defining all certified integrations. +# Each integration groups one or more certified Node-RED node packages +# into a single marketable entity with solution-oriented content. +# +# To add a new integration: +# 1. Add an entry below following the existing pattern +# 2. Detail pages auto-generate at /integrations/{slug}/ +# 3. "Connect X to Y" pages auto-generate via integrationPairs.js +# +categories: + - slug: industrial-protocols + name: Industrial Protocols + - slug: cloud-and-data + name: Cloud & Data + - slug: enterprise-systems + name: Enterprise Systems + - slug: edge-and-iot + name: Edge & IoT + +integrations: + - slug: opc-ua + name: OPC-UA + shortName: OPC-UA + icon: opc-ua + category: industrial-protocols + description: > + Industrial automation protocol for secure, reliable + machine-to-machine communication in manufacturing and process control. + heroDescription: > + Connect to any OPC-UA enabled device with commercially + supported, SLA-backed Node-RED nodes. Bridge shop floor data + to enterprise systems with guaranteed reliability. + certifiedNodes: + - node-red-contrib-opcua + useCases: + - title: SCADA Modernization + description: Bridge legacy SCADA systems to modern cloud platforms and dashboards without ripping and replacing existing infrastructure. + - title: IT/OT Convergence + description: Connect shop floor OPC-UA data directly to enterprise IT systems, ERPs, and business intelligence tools. + - title: Predictive Maintenance + description: Stream real-time machine telemetry to analytics platforms for condition monitoring and failure prediction. + benefits: + - title: Commercial Support + description: 24-hour response SLA with a dedicated engineering team that understands industrial protocols. + - title: Rigorous Testing + description: Tested against dozens of OPC-UA server implementations across major PLC and SCADA vendors. + - title: Guaranteed Compatibility + description: Validated with every FlowFuse release. No surprises after platform upgrades. + trustSignals: + sla: "99.9% uptime" + supportResponse: "24h" + updateFrequency: Monthly + certificationLevel: Enterprise + relatedIntegrations: + - mqtt + - modbus + meta: + title: "OPC-UA Integration for Node-RED | FlowFuse Certified" + description: "Enterprise-grade OPC-UA connectivity for Node-RED. Commercially supported, SLA-backed, and rigorously tested." + keywords: "OPC-UA, Node-RED, industrial automation, FlowFuse, certified node, OPC UA client, OPC UA server" + + - slug: mqtt + name: MQTT + shortName: MQTT + icon: mqtt + category: industrial-protocols + description: > + Lightweight publish-subscribe messaging protocol for IoT + and industrial telemetry at scale. + heroDescription: > + Build production-grade MQTT data pipelines with FlowFuse. + Connect brokers, transform messages, and route data to any + destination with enterprise support and guaranteed uptime. + certifiedNodes: + - "@flowfuse/node-red-contrib-aedes" + useCases: + - title: Unified Namespace (UNS) + description: Implement a Unified Namespace architecture for real-time industrial data access across your entire organization. + - title: IoT Data Ingestion + description: Collect telemetry from thousands of devices and sensors through a centralized, managed MQTT infrastructure. + - title: Event-Driven Automation + description: Trigger automated workflows based on real-time MQTT messages from equipment and production systems. + benefits: + - title: Built-in Broker + description: FlowFuse includes a managed MQTT broker — no need to provision and maintain separate infrastructure. + - title: Scalable Architecture + description: Handle thousands of concurrent device connections with enterprise-grade message routing. + - title: Edge to Cloud + description: Deploy MQTT processing at the edge or in the cloud with FlowFuse fleet management. + trustSignals: + sla: "99.9% uptime" + supportResponse: "24h" + updateFrequency: Monthly + certificationLevel: Enterprise + relatedIntegrations: + - opc-ua + - modbus + meta: + title: "MQTT Integration for Node-RED | FlowFuse Certified" + description: "Enterprise-grade MQTT connectivity for Node-RED. Built-in broker, commercial support, and guaranteed reliability." + keywords: "MQTT, Node-RED, IoT, FlowFuse, certified node, MQTT broker, publish subscribe" + + - slug: modbus + name: Modbus + shortName: Modbus + icon: modbus + category: industrial-protocols + description: > + Serial communication protocol for connecting PLCs, sensors, + and industrial controllers via RTU and TCP. + heroDescription: > + Integrate Modbus devices into modern data workflows with FlowFuse. + Read registers, coils, and inputs from any Modbus RTU or TCP + device with certified, commercially supported nodes. + certifiedNodes: + - node-red-contrib-modbus + useCases: + - title: Legacy Equipment Integration + description: Connect older Modbus-based equipment to modern cloud platforms without replacing working hardware. + - title: Energy Monitoring + description: Read power meters, environmental sensors, and utility systems over Modbus for real-time energy management. + - title: Process Data Collection + description: Aggregate register data from PLCs and controllers into centralized databases and dashboards. + benefits: + - title: RTU and TCP Support + description: Certified nodes support both Modbus RTU (serial) and Modbus TCP (Ethernet) in a single package. + - title: Production Hardened + description: Tested in high-frequency polling scenarios with robust reconnection and error handling. + - title: Commercial Support + description: Direct access to engineers who understand Modbus addressing, register maps, and industrial deployment. + trustSignals: + sla: "99.9% uptime" + supportResponse: "24h" + updateFrequency: Monthly + certificationLevel: Enterprise + relatedIntegrations: + - opc-ua + - s7 + meta: + title: "Modbus Integration for Node-RED | FlowFuse Certified" + description: "Enterprise-grade Modbus RTU and TCP connectivity for Node-RED. Commercially supported and rigorously tested." + keywords: "Modbus, Modbus TCP, Modbus RTU, Node-RED, FlowFuse, certified node, PLC, industrial" + + - slug: s7 + name: Siemens S7 + shortName: S7 + icon: s7 + category: industrial-protocols + description: > + Direct communication with Siemens S7-300, S7-400, S7-1200, + and S7-1500 PLCs without additional middleware. + heroDescription: > + Connect Siemens S7 PLCs directly to any system with FlowFuse. + Read and write PLC data, build dashboards, and automate + workflows with commercially supported Node-RED nodes. + certifiedNodes: + - node-red-contrib-s7 + useCases: + - title: PLC Data Visualization + description: Stream Siemens PLC data to real-time dashboards and HMI replacements without proprietary SCADA software. + - title: MES Integration + description: Connect S7 PLCs to Manufacturing Execution Systems for production tracking and quality management. + - title: Cloud Connectivity + description: Bridge on-premises Siemens PLC data to cloud platforms like AWS, Azure, or Google Cloud. + benefits: + - title: Direct PLC Access + description: Read and write S7 data blocks, inputs, outputs, and markers without OPC-UA middleware. + - title: Multi-PLC Support + description: Connect to S7-300, S7-400, S7-1200, and S7-1500 series with a single certified node. + - title: Optimized Performance + description: Efficient polling with configurable cycle times and variable grouping for minimal PLC load. + trustSignals: + sla: "99.9% uptime" + supportResponse: "24h" + updateFrequency: Monthly + certificationLevel: Enterprise + relatedIntegrations: + - opc-ua + - modbus + meta: + title: "Siemens S7 Integration for Node-RED | FlowFuse Certified" + description: "Enterprise-grade Siemens S7 PLC connectivity for Node-RED. Direct access to S7-1200 and S7-1500 data." + keywords: "Siemens S7, PLC, S7-1500, S7-1200, Node-RED, FlowFuse, certified node, industrial automation" + + - slug: ethernet-ip + name: Ethernet/IP + shortName: EtherNet/IP + icon: ethernet-ip + category: industrial-protocols + description: > + Industrial network protocol for real-time I/O control with + Allen-Bradley and Rockwell Automation equipment. + heroDescription: > + Connect Allen-Bradley and Rockwell Automation equipment to + enterprise systems with FlowFuse. Bridge Ethernet/IP data + to cloud platforms, databases, and business applications. + certifiedNodes: [] + useCases: + - title: Rockwell Integration + description: Connect Allen-Bradley ControlLogix and CompactLogix controllers to modern IT infrastructure. + - title: Production Monitoring + description: Stream real-time production data from Ethernet/IP devices to dashboards and analytics platforms. + - title: Multi-Vendor Bridging + description: Bridge Ethernet/IP networks to other industrial protocols like OPC-UA and MQTT. + benefits: + - title: Allen-Bradley Native + description: Purpose-built for Rockwell Automation ecosystems with optimized tag-based data access. + - title: Real-Time Data + description: Low-latency data collection for time-critical monitoring and control applications. + - title: Enterprise Support + description: Commercial support from engineers experienced with Rockwell Automation deployments. + trustSignals: + sla: "99.9% uptime" + supportResponse: "24h" + updateFrequency: Monthly + certificationLevel: Enterprise + relatedIntegrations: + - opc-ua + - mqtt + meta: + title: "Ethernet/IP Integration for Node-RED | FlowFuse Certified" + description: "Enterprise-grade Ethernet/IP connectivity for Allen-Bradley and Rockwell Automation systems." + keywords: "Ethernet/IP, EtherNet/IP, Allen-Bradley, Rockwell Automation, Node-RED, FlowFuse, certified node" + + - slug: http-rest + name: HTTP/REST APIs + shortName: REST + icon: http-rest + category: cloud-and-data + description: > + Connect to any web service, cloud platform, or enterprise + system that exposes a REST API interface. + heroDescription: > + Bridge industrial data to any REST API with FlowFuse. + Connect your shop floor to cloud services, databases, ERP + systems, and business applications with certified nodes. + certifiedNodes: [] + useCases: + - title: Cloud Platform Integration + description: Push industrial data to AWS, Azure, or GCP services via their REST APIs. + - title: ERP Connectivity + description: Connect shop floor data to SAP, Oracle, or other ERP systems through REST interfaces. + - title: Webhook Automation + description: Trigger and respond to webhooks for event-driven integration between systems. + benefits: + - title: Universal Connectivity + description: Connect to any system with a REST API — cloud platforms, SaaS tools, custom applications. + - title: Authentication Support + description: Built-in support for OAuth2, API keys, bearer tokens, and certificate-based authentication. + - title: Data Transformation + description: Transform, filter, and enrich data between industrial formats and REST API payloads. + trustSignals: + sla: "99.9% uptime" + supportResponse: "24h" + updateFrequency: Monthly + certificationLevel: Enterprise + relatedIntegrations: + - mqtt + - opc-ua + meta: + title: "HTTP/REST Integration for Node-RED | FlowFuse Certified" + description: "Enterprise-grade REST API connectivity for Node-RED. Connect industrial data to any web service." + keywords: "REST API, HTTP, Node-RED, FlowFuse, certified node, web services, cloud integration" diff --git a/src/_data/integrationPairs.js b/src/_data/integrationPairs.js new file mode 100644 index 0000000000..67982831d8 --- /dev/null +++ b/src/_data/integrationPairs.js @@ -0,0 +1,34 @@ +const yaml = require("js-yaml"); +const fs = require("fs"); +const path = require("path"); + +module.exports = () => { + const dataFile = path.join(__dirname, "certifiedIntegrations.yaml"); + const data = yaml.load(fs.readFileSync(dataFile, "utf8")); + const integrations = data.integrations; + + const pairs = []; + + for (let i = 0; i < integrations.length; i++) { + for (let j = 0; j < integrations.length; j++) { + if (i !== j) { + const from = integrations[i]; + const to = integrations[j]; + pairs.push({ + slug: `${from.slug}-and-${to.slug}`, + from: from, + to: to, + title: `Connect ${from.name} to ${to.name}`, + description: `Learn how to connect ${from.name} to ${to.name} using FlowFuse and Node-RED. Bridge ${from.shortName} data to ${to.shortName} systems seamlessly.`, + meta: { + title: `Connect ${from.name} to ${to.name} | FlowFuse`, + description: `How to connect ${from.name} to ${to.name} using FlowFuse. Build data pipelines between ${from.shortName} and ${to.shortName}.`, + keywords: `${from.name}, ${to.name}, integration, FlowFuse, Node-RED, connect ${from.shortName} to ${to.shortName}` + } + }); + } + } + } + + return pairs; +}; diff --git a/src/_data/protocolPairs.js b/src/_data/protocolPairs.js new file mode 100644 index 0000000000..9ae856e93c --- /dev/null +++ b/src/_data/protocolPairs.js @@ -0,0 +1,34 @@ +const yaml = require("js-yaml"); +const fs = require("fs"); +const path = require("path"); + +module.exports = () => { + const protocolsFile = path.join(__dirname, "protocols.yaml"); + const protocolsData = yaml.load(fs.readFileSync(protocolsFile, "utf8")); + const protocols = protocolsData.protocols; + + const pairs = []; + + for (let i = 0; i < protocols.length; i++) { + for (let j = 0; j < protocols.length; j++) { + if (i !== j) { + const from = protocols[i]; + const to = protocols[j]; + pairs.push({ + slug: `${from.slug}-to-${to.slug}`, + from: from, + to: to, + title: `Connect ${from.name} to ${to.name}`, + description: `Learn how to connect ${from.name} to ${to.name} using FlowFuse and Node-RED. Bridge ${from.shortName} data to ${to.shortName} systems seamlessly.`, + meta: { + title: `Connect ${from.name} to ${to.name} | FlowFuse`, + description: `How to connect ${from.name} to ${to.name} using FlowFuse. Build data pipelines between ${from.shortName} and ${to.shortName}.`, + keywords: `${from.name}, ${to.name}, integration, FlowFuse, Node-RED, connect ${from.shortName} to ${to.shortName}` + } + }); + } + } + } + + return pairs; +}; diff --git a/src/_data/protocols.yaml b/src/_data/protocols.yaml new file mode 100644 index 0000000000..9b7a6fc0e7 --- /dev/null +++ b/src/_data/protocols.yaml @@ -0,0 +1,132 @@ +# Industrial protocols that FlowFuse connects +# Each protocol generates: +# - Individual page: /solutions/protocols/{slug}/ +# - Pair pages: /solutions/connect/{slug}-to-{other}/ (auto-generated) +# +# To add a new protocol, add an entry below. All "Connect X to Y" pages +# are auto-generated from this list via protocolPairs.js. +protocols: + - slug: opc-ua + name: OPC-UA + shortName: OPC-UA + category: industrial + description: > + OPC-UA (Open Platform Communications Unified Architecture) is the + industry standard for secure, reliable machine-to-machine communication + in industrial automation. + heroDescription: > + Connect your OPC-UA enabled devices and systems with FlowFuse. + Collect, transform, and route data from any OPC-UA server to + enterprise systems, databases, and cloud platforms. + useCases: + - data-acquisition + - machine-monitoring + relatedIntegrations: + - node-red-contrib-opcua + meta: + title: "FlowFuse for OPC-UA Integration" + description: "Connect OPC-UA devices to any system with FlowFuse. Bridge industrial OPC-UA data to MQTT, REST APIs, databases, and more." + keywords: "OPC-UA, industrial automation, FlowFuse, Node-RED, OPC UA client, OPC UA server" + + - slug: mqtt + name: MQTT + shortName: MQTT + category: messaging + description: > + MQTT is a lightweight publish-subscribe messaging protocol designed + for constrained devices and low-bandwidth, high-latency networks, + widely used in IoT and industrial applications. + heroDescription: > + Build MQTT-powered data pipelines with FlowFuse. Connect MQTT + brokers, transform messages, and route data to any destination. + useCases: + - data-acquisition + - real-time-monitoring + relatedIntegrations: + - node-red-contrib-aedes + meta: + title: "FlowFuse for MQTT Integration" + description: "Build MQTT integrations with FlowFuse. Connect brokers, transform data, and bridge MQTT to enterprise systems." + keywords: "MQTT, IoT, FlowFuse, Node-RED, MQTT broker, publish subscribe" + + - slug: ethernet-ip + name: Ethernet/IP + shortName: EtherNet/IP + category: industrial + description: > + Ethernet/IP (Industrial Protocol) is an industrial network protocol + for real-time I/O control and information exchange, commonly used + with Allen-Bradley and Rockwell Automation equipment. + heroDescription: > + Connect Ethernet/IP devices to your enterprise systems with FlowFuse. + Bridge shop floor data from Allen-Bradley PLCs to IT systems. + useCases: + - machine-monitoring + - data-acquisition + relatedIntegrations: [] + meta: + title: "FlowFuse for Ethernet/IP Integration" + description: "Connect Ethernet/IP devices with FlowFuse. Bridge Allen-Bradley and Rockwell Automation data to enterprise systems." + keywords: "Ethernet/IP, EtherNet/IP, Allen-Bradley, Rockwell Automation, FlowFuse, industrial protocol" + + - slug: modbus + name: Modbus + shortName: Modbus + category: industrial + description: > + Modbus is a serial communication protocol widely used in industrial + electronics for connecting electronic devices, supporting both + RTU (serial) and TCP (Ethernet) variants. + heroDescription: > + Integrate Modbus devices into modern data workflows with FlowFuse. + Read registers, coils, and inputs from any Modbus device. + useCases: + - data-acquisition + - legacy-modernization + relatedIntegrations: + - node-red-contrib-modbus + meta: + title: "FlowFuse for Modbus Integration" + description: "Connect Modbus RTU and TCP devices with FlowFuse. Bridge legacy equipment to modern systems." + keywords: "Modbus, Modbus TCP, Modbus RTU, industrial communication, FlowFuse" + + - slug: s7 + name: Siemens S7 + shortName: S7 + category: industrial + description: > + The Siemens S7 protocol enables direct communication with Siemens + S7-300, S7-400, S7-1200, and S7-1500 PLCs without additional + middleware. + heroDescription: > + Connect Siemens S7 PLCs directly to any system with FlowFuse. + Read and write PLC data, build dashboards, and automate workflows. + useCases: + - machine-monitoring + - scada-modernization + relatedIntegrations: + - node-red-contrib-s7 + meta: + title: "FlowFuse for Siemens S7 Integration" + description: "Connect Siemens S7 PLCs with FlowFuse. Bridge S7-1200 and S7-1500 data to enterprise systems." + keywords: "Siemens S7, PLC, S7-1500, S7-1200, FlowFuse, industrial automation" + + - slug: http-rest + name: HTTP/REST APIs + shortName: REST + category: it + description: > + HTTP/REST APIs enable integration with web services, cloud platforms, + ERP systems, MES solutions, and any system that exposes a REST + interface. + heroDescription: > + Bridge industrial data to any REST API with FlowFuse. Connect + your shop floor to cloud services, databases, and business systems. + useCases: + - data-integration + - cloud-connectivity + relatedIntegrations: [] + meta: + title: "FlowFuse for HTTP/REST Integration" + description: "Connect REST APIs with FlowFuse. Bridge industrial data to cloud platforms, ERPs, and web services." + keywords: "REST API, HTTP, FlowFuse, integration, web services, cloud" diff --git a/src/_data/teams.yaml b/src/_data/teams.yaml new file mode 100644 index 0000000000..03303ce778 --- /dev/null +++ b/src/_data/teams.yaml @@ -0,0 +1,104 @@ +# Target teams/personas for FlowFuse +# Each generates a page at: /solutions/teams/{slug}/ +# +# To add a new team, add an entry below. +teams: + - slug: operations-engineers + name: Operations Engineers + description: > + Operations engineers manage and optimize manufacturing processes, + ensuring equipment runs efficiently and production targets are met. + heroDescription: > + FlowFuse empowers operations engineers to build custom monitoring + and control solutions without writing code. Connect any machine, + build dashboards, and automate workflows. + painPoints: + - "Disconnected systems make it hard to get a unified view of operations" + - "Manual data collection from equipment is time-consuming and error-prone" + - "Legacy equipment lacks modern connectivity options" + relatedUseCases: + - machine-monitoring + - data-acquisition + relatedProtocols: + - opc-ua + - s7 + - ethernet-ip + meta: + title: "FlowFuse for Operations Engineers" + description: "How FlowFuse helps operations engineers connect machines, build dashboards, and automate workflows." + keywords: "operations engineers, manufacturing, FlowFuse, industrial automation" + + - slug: it-teams + name: IT Teams + description: > + IT teams manage enterprise infrastructure, ensure security and + compliance, and bridge the gap between operational technology + and information technology. + heroDescription: > + FlowFuse provides IT teams with enterprise-grade security, + governance, and audit trails for industrial applications. + Manage Node-RED deployments at scale with SSO, RBAC, and + centralized control. + painPoints: + - "Shadow IT from OT departments creates security blind spots" + - "Lack of visibility and governance over industrial integration tools" + - "Difficulty maintaining compliance when connecting OT to IT networks" + relatedUseCases: + - data-acquisition + - protocol-conversion + relatedProtocols: + - http-rest + - mqtt + meta: + title: "FlowFuse for IT Teams" + description: "How FlowFuse helps IT teams govern industrial integrations with enterprise-grade security." + keywords: "IT teams, enterprise security, governance, FlowFuse, RBAC, SSO" + + - slug: maintenance-teams + name: Maintenance Teams + description: > + Maintenance teams keep equipment running, minimize downtime, and + transition from reactive to predictive maintenance strategies. + heroDescription: > + FlowFuse helps maintenance teams implement condition-based and + predictive maintenance. Monitor equipment health, detect anomalies, + and schedule maintenance before failures occur. + painPoints: + - "Reactive maintenance leads to costly unplanned downtime" + - "No easy way to track equipment health trends over time" + - "Difficulty integrating CMMS with shop floor sensor data" + relatedUseCases: + - predictive-maintenance + - machine-monitoring + relatedProtocols: + - opc-ua + - modbus + meta: + title: "FlowFuse for Maintenance Teams" + description: "How FlowFuse helps maintenance teams implement predictive maintenance and reduce downtime." + keywords: "maintenance teams, predictive maintenance, condition monitoring, FlowFuse" + + - slug: data-engineers + name: Data Engineers + description: > + Data engineers build and maintain data pipelines and infrastructure, + ensuring industrial data flows reliably from source to analytics. + heroDescription: > + FlowFuse enables data engineers to build robust industrial data + pipelines without deep OT expertise. Connect any protocol, + transform data, and deliver to any data platform. + painPoints: + - "Industrial data is hard to access and normalize across different protocols" + - "Multiple proprietary protocols require specialized knowledge" + - "No standard tooling for OT data engineering workflows" + relatedUseCases: + - data-acquisition + - protocol-conversion + relatedProtocols: + - mqtt + - http-rest + - opc-ua + meta: + title: "FlowFuse for Data Engineers" + description: "How FlowFuse helps data engineers build industrial data pipelines across any protocol." + keywords: "data engineers, data pipelines, industrial data, FlowFuse, ETL" diff --git a/src/_data/useCases.yaml b/src/_data/useCases.yaml new file mode 100644 index 0000000000..5bfce3e748 --- /dev/null +++ b/src/_data/useCases.yaml @@ -0,0 +1,97 @@ +# Industrial use cases for FlowFuse +# Each generates a page at: /solutions/use-cases/{slug}/ +# +# To add a new use case, add an entry below. +useCases: + - slug: data-acquisition + name: Data Acquisition + description: > + Collect data from diverse industrial sources including PLCs, sensors, + and legacy equipment. Normalize and route data to databases, cloud + platforms, and analytics tools. + heroDescription: > + FlowFuse makes industrial data acquisition simple. Connect any + device, transform any protocol, and deliver data anywhere — all + from a single platform. + relatedProtocols: + - opc-ua + - mqtt + - modbus + - ethernet-ip + meta: + title: "Data Acquisition with FlowFuse" + description: "Collect industrial data from any source with FlowFuse. Support for OPC-UA, MQTT, Modbus, and more." + keywords: "data acquisition, industrial data, FlowFuse, IoT data collection" + + - slug: data-transformation + name: Data Transformation + description: > + Transform, enrich, and normalize data between industrial systems. + Convert protocols, reshape payloads, and apply business logic to + raw machine data before it reaches downstream systems. + heroDescription: > + Transform industrial data with FlowFuse. Convert formats, enrich + payloads, and apply business logic — all with low-code flows. + relatedProtocols: + - opc-ua + - mqtt + - modbus + - http-rest + meta: + title: "Data Transformation with FlowFuse" + description: "Transform and normalize industrial data with FlowFuse. Protocol conversion, payload reshaping, and more." + keywords: "data transformation, protocol conversion, industrial data, FlowFuse" + + - slug: data-deployment + name: Data Deployment + description: > + Deploy data flows and applications to edge devices and remote sites + at scale. Manage, update, and monitor deployments across your entire + fleet from a central platform. + heroDescription: > + Deploy industrial data flows at scale with FlowFuse. Push to edge + devices, manage remote sites, and keep your fleet in sync. + relatedProtocols: + - mqtt + - http-rest + meta: + title: "Data Deployment with FlowFuse" + description: "Deploy data flows to edge devices at scale with FlowFuse. Centralized management for distributed architectures." + keywords: "data deployment, edge deployment, fleet management, FlowFuse, IoT" + + - slug: data-storage + name: Data Storage + description: > + Route industrial data to databases, historians, and data lakes. + Connect to time-series databases, SQL stores, cloud storage, and + enterprise data platforms. + heroDescription: > + Store industrial data anywhere with FlowFuse. Connect to databases, + historians, and cloud platforms with pre-built integrations. + relatedProtocols: + - mqtt + - http-rest + - opc-ua + meta: + title: "Data Storage with FlowFuse" + description: "Route industrial data to any storage with FlowFuse. Databases, historians, cloud platforms, and more." + keywords: "data storage, industrial data, time-series database, data historian, FlowFuse" + + - slug: data-visualisation + name: Data Visualisation + description: > + Build real-time dashboards and visualisations for industrial data. + Monitor machine health, track KPIs, and display production metrics + with customisable, low-code interfaces. + heroDescription: > + Visualise industrial data in real time with FlowFuse. Build + dashboards, monitor KPIs, and share insights across your organisation. + relatedProtocols: + - opc-ua + - mqtt + - modbus + - s7 + meta: + title: "Data Visualisation with FlowFuse" + description: "Build real-time industrial dashboards with FlowFuse. Monitor machines, track KPIs, and visualise production data." + keywords: "data visualisation, industrial dashboards, real-time monitoring, FlowFuse, IoT" diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk index 4a4c429fd1..db9343d14f 100644 --- a/src/_includes/layouts/base.njk +++ b/src/_includes/layouts/base.njk @@ -261,14 +261,33 @@ eleventyComputed: {% endnavoption %} {% navoption "Solutions", null, 0 %} -