Skip to content

Use case pages: add a How It Works section - #5498

Draft
dimitrieh wants to merge 1 commit into
mainfrom
feat/use-case-how-it-works
Draft

Use case pages: add a How It Works section#5498
dimitrieh wants to merge 1 commit into
mainfrom
feat/use-case-how-it-works

Conversation

@dimitrieh

Copy link
Copy Markdown
Contributor

Description

Use case pages carried only what and why. This adds a howItWorks block to the use case layout so a page can also show how FlowFuse builds the thing: the component breakdown, the design pattern chosen, an end-to-end architecture diagram, and the hand-off into the product docs.

Filled in for the two use case pages, Production Monitoring and Shop Floor Communication. Diagrams are placehold.co stand-ins pending an art request; the layout renders a dashed border and a "Placeholder diagram" caption while diagram.placeholder is set.

Two supporting fixes:

  • Section eyebrow numbers were hardcoded while the sticky nav numbers came from loop.index, so they desynced on any page omitting a block. Both now derive from one lookup over the nav array.
  • architecture: "edge-connectivity" on Shop Floor Communication was front-matter the layout never read. It now sits inside howItWorks and renders as a link to the architecture page the use case sits on.

Content note for review: the design pattern assigned to each page is a first pass and needs a sales sign-off. Per-pattern docs pages do not exist yet, so docsUrl points at the nearest real pages (/docs/user/devops-pipelines/, /docs/user/envvar/) rather than at pattern docs.

Related Issue(s)

None.

Checklist

  • I have read the contribution guidelines
  • I have considered the performance impact of these changes
  • Suitable unit/system level tests have been added and they pass
  • Documentation has been updated
  • For blog PRs, an Art Request has been created (instructions)

Use case pages carried only what and why. This adds a howItWorks block to
the layout covering the component breakdown, the design pattern chosen,
an end-to-end architecture diagram and the hand-off into the product docs.

Filled in for production monitoring and shop floor communication, with
placehold.co stand-ins until the real diagrams are drawn.

Two supporting fixes: section eyebrow numbers now derive from the nav array
instead of being hardcoded, so they no longer drift when a page omits a
block; and the architecture front-matter key on shop floor communication,
which the layout never read, now renders as a link to the architecture page
the use case sits on.
@dimitrieh

Copy link
Copy Markdown
Contributor Author

@netlify

netlify Bot commented Aug 4, 2026

Copy link
Copy Markdown

Deploy Preview for flowforge-website ready!

Name Link
🔨 Latest commit 5a3f9b9
🔍 Latest deploy log https://app.netlify.com/projects/flowforge-website/deploys/6a72434754fdf90008e27ecc
😎 Deploy Preview https://deploy-preview-5498--flowforge-website.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 64 (🟢 up 4 from production)
Accessibility: 96 (no change from production)
Best Practices: 100 (no change from production)
SEO: 92 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@dgatti0213

Copy link
Copy Markdown
Contributor

I like the direction but you need to break down the problem like this: https://docs.google.com/drawings/d/1u2xDF5igAhPMYzAmBxOY4eRKJvdKuY7MoGWbPPUIUUU/edit

production monitoring consists of a software app and a hardware app

Main point: Use case does not = 1 app
use-case could mean many apps that sum to the use case.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants