Merge pull request #1883 from FlowFuse/1882-docs-blueprints

Docs: Add reference to FF Cloud & Blueprints

Author: joepavitt

README.md

@@ -18,6 +18,17 @@ If you want to use `npm` to install your nodes, you can instead [follow these in
 
 *Note*: this package was previously published under the name `@flowforge/node-red-dashboard`. That package has now been deprecated and will not receive any further updates.
 
+### Cloud Hosted Dashboards
+
+If you're looking to host Node-RED in the Cloud, then look no further than [FlowFuse](https://flowfuse.com/). FlowFuse is a fully managed platform for hosting, securing, managing and scaling Node-RED deployments. You can [sign up today for a free trial](https://app.flowfuse.com/account/create).
+
+<div style="text-align: center; margin-bottom: 12px;">
+    <img width="600" alt="Screenshot of the 'Getting Started with FlowFuse Dashboard' blueprint from FlowFuse Cloud" src="./docs/assets/images/blueprint-getting-started.png">
+    <em style="display: block; text-align: center;">Screenshot of the "Getting Started with FlowFuse Dashboard" blueprint from FlowFuse Cloud</em>
+</div>
+
+FlowFuse also comes with a collection of [FlowFuse Dashboard Blueprints](https://flowfuse.com/blueprints/) to help you get started on your FlowFuse Dashboard journey.
+
 ## Features
 
 FlowFuse Dashboard provides a base set of nodes for building your own user interfaces and data visualisations. Much like it's predecessor, it provides a set of easy-to-use, core nodes, but provides complete flexibility for customisation and control over theming, layout and behaviour if you want to go further.
@@ -28,13 +39,19 @@ The nodes provided integrate seamlessly with any of the existing nodes and flows
 
 ### Data Visualization
 
-<img width="600" alt="Example of data visualisations in FlowFuse Dashboard" src="https://github.com/FlowFuse/node-red-dashboard/assets/99246719/48da3687-bebd-4e2a-88b5-6abe2af4fc46">
+<div style="text-align: center; margin-bottom: 12px;">
+    <img width="600" alt="Example of data visualisations in FlowFuse Dashboard" src="https://github.com/FlowFuse/node-red-dashboard/assets/99246719/48da3687-bebd-4e2a-88b5-6abe2af4fc46">
+    <em style="display: block; text-align: center;">Example of data visualisations in FlowFuse Dashboard</em>
+</div>
 
 No dashboard is complete without data visualisation. FlowFuse Dashboard provides a core `ui-chart` widget to provide a simple, yet powerful way to visualise your data. It supports a wide range of chart types, including line, bar and scatter, with more planned for the near future.
 
 ### Flexible Customisation
 
-<img width="600" alt="Example of a dashboard using custom templates to render a to-do list" src="https://github.com/FlowFuse/node-red-dashboard/assets/99246719/10d2b81b-8dfe-4597-84c8-03c1776287d5">
+<div style="text-align: center; margin-bottom: 12px;">
+    <img width="600" alt="Example of a dashboard using custom templates to render a to-do list" src="https://github.com/FlowFuse/node-red-dashboard/assets/99246719/10d2b81b-8dfe-4597-84c8-03c1776287d5">
+    <em style="display: block; text-align: center;">Example of a dashboard using custom templates to render a to-do list</em>
+</div>
 
 As with Node-RED Dashboard, the new FlowFuse Dashboard, comes with a `ui-template` node which allows you to define your own custom widgets and styling. 
 

docs/assets/images/blueprint-getting-started.png

@@ -26,6 +26,15 @@ Dieses Projekt wurde von FlowFuse ins Leben gerufen, um das ursprüngliche Dashb
 
 <RecommendedTutorials />
 
+## FlowFuse Dashboard Blueprints
+
+Der schnellste Weg, um mit FlowFuse Dashboard zu beginnen, ist die [Anmeldung bei FlowFuse Cloud](https://app.flowfuse.com/account/create) und die Auswahl einer der vorhandenen [FlowFuse Dashboard Blueprints](https://flowfuse.com/blueprints/), zum Beispiel die unten gezeigte [Getting Started with FlowFuse Dashboard](https://flowfuse.com/blueprints/getting-started/dashboard/) Blueprint:
+
+![Screenshot des FlowFuse Cloud Dashboards](../assets/images/blueprint-getting-started.png){data-zoomable}
+_Screenshot der "Getting Started with FlowFuse Dashboard" Blueprint von FlowFuse Cloud_
+
+FlowFuse bietet eine vollständige Lösung, um Ihre Node-RED-Bereitstellungen zu hosten, zu sichern, zu verwalten und zu skalieren, sei es für Ihr eigenes Hobbyprojekt zu Hause oder wenn Sie Tausende von Node-RED-Instanzen am Edge betreiben. Es gibt auch Angebote für Cloud-, Self-Hosted- und Dedicated-Lösungen.
+
 ## Installation
 
 Das Node-RED Dashboard 2.0 von [FlowFuse](https://flowfuse.com) ist im Node-RED Palette Manager verfügbar. Um es zu installieren:

docs/de/getting-started.md

@@ -26,6 +26,15 @@ This project was formed by [FlowFuse](https://flowfuse.com/), as part of efforts
 
 <RecommendedTutorials />
 
+## FlowFuse Dashboard Blueprints
+
+The quickest way to get up and running with FlowFuse Dashboard is to [sign up to FlowFuse Cloud](https://app.flowfuse.com/account/create), and select one of the existing [FlowFuse Dashboard Blueprints](https://flowfuse.com/blueprints/), for example the [Getting Started with FlowFuse Dashboard](https://flowfuse.com/blueprints/getting-started/dashboard/) blueprint show below:
+
+![Screenshot of the FlowFuse Cloud dashboard](../assets/images/blueprint-getting-started.png){data-zoomable}
+_Screenshot of the "Getting Started with FlowFuse Dashboard" blueprint from FlowFuse Cloud_
+
+FlowFuse offers a complete solution to help you host, secure, manage and scale your Node-RED deployments, whether that's for your own home hobby project, or you're running thousands of Node-RED instances at the Edge. It also comes in offerings for Cloud, Self-Hosted and Dedicated solutions.
+
 ## Installation
 
 [FlowFuse](https://flowfuse.com) Dashboard is available in the Node-RED Palette Manager. To install it:
@@ -43,6 +52,10 @@ The nodes will then be available in your editor for you to get started.
 
 If you want to use `npm` to install your nodes, you can instead [follow these instructions](https://nodered.org/docs/user-guide/runtime/adding-nodes)
 
+### Hosting Node-RED
+
+If you're looking to host Node-RED, we recommend using [FlowFuse](https://flowfuse.com) to get started. FlowFuse can either be self-hosted on your own infrastructure, or to get up and running in 30 seconds, you can use FlowFuse Cloud, which comes with a collection of FlowFuse Dashboard Blueprints to help you get started.
+
 ## Dashboard Hierarchy
 
 Each Dashboard is a collection of widgets (e.g. charts, buttons, forms) that can be configured and arranged in our own User Interface. The hierarchy of a Dashboard is as follows: