chore: Upgrade Docusaurus from v2 to v3 (#52)

* chore: Upgrade Docusaurus from v2 to v3

* chore: Update "Test build" GH workflow

* fix: build

All markdown is processed as MDX

* fix: Broken links
This commit is contained in:
Eric Tuvesson
2024-01-12 16:53:22 +01:00
committed by GitHub
parent 65b0cf0417
commit 656e5fc8d2
156 changed files with 4854 additions and 10445 deletions

View File

@@ -3,7 +3,7 @@ title: Bar Chart
hide_title: true
---
<##head##>
{/*##head##*/}
# Bar Chart
@@ -17,7 +17,7 @@ This visual node adds a bar chart to the visual tree.
[Here](../charts/bar) is an example how to use used the node.
<##head##>
{/*##head##*/}
## Inputs

View File

@@ -3,7 +3,7 @@ title: Bubble Chart
hide_title: true
---
<##head##>
{/*##head##*/}
# Bubble Chart
@@ -17,7 +17,7 @@ This visual node adds a bubble chart to the visual tree.
[Here](../charts/bubble) is an example how to use used the node.
<##head##>
{/*##head##*/}
## Inputs

View File

@@ -3,7 +3,7 @@ title: Doughnut Chart
hide_title: true
---
<##head##>
{/*##head##*/}
# Doughnut Chart
@@ -17,7 +17,7 @@ This visual node adds a doughnut chart to the visual tree.
[Here](../charts/doughnut) is an example how to use used the node.
<##head##>
{/*##head##*/}
## Inputs

View File

@@ -3,7 +3,7 @@ title: Line Chart
hide_title: true
---
<##head##>
{/*##head##*/}
# Line Chart
@@ -17,7 +17,7 @@ This visual node adds a line chart to the visual tree.
[Here](../charts/line) is an example how to use used the node.
<##head##>
{/*##head##*/}
## Inputs

View File

@@ -3,7 +3,7 @@ title: Pie Chart
hide_title: true
---
<##head##>
{/*##head##*/}
# Pie Chart
@@ -17,7 +17,7 @@ This visual node adds a pie chart to the visual tree.
[Here](../charts/pie) is an example how to use used the node.
<##head##>
{/*##head##*/}
## Inputs

View File

@@ -3,7 +3,7 @@ title: Polar Area Chart
hide_title: true
---
<##head##>
{/*##head##*/}
# Polar Area Chart
@@ -17,7 +17,7 @@ This visual node adds a polar area chart to the visual tree.
[Here](../charts/polar-area) is an example how to use used the node.
<##head##>
{/*##head##*/}
## Inputs

View File

@@ -3,7 +3,7 @@ title: Radar Chart
hide_title: true
---
<##head##>
{/*##head##*/}
# Radar Chart
@@ -17,7 +17,7 @@ This visual node adds a radar chart to the visual tree.
[Here](../charts/radar) is an example how to use used the node.
<##head##>
{/*##head##*/}
## Inputs

View File

@@ -3,7 +3,7 @@ title: Scatter Chart
hide_title: true
---
<##head##>
{/*##head##*/}
# Scatter Chart
@@ -17,7 +17,7 @@ This visual node adds a scatter chart to the visual tree.
[Here](../charts/scatter) is an example how to use used the node.
<##head##>
{/*##head##*/}
## Inputs

View File

@@ -3,7 +3,7 @@ title: Custom HTML
hide_title: true
---
<##head##>
{/*##head##*/}
# Custom HTML
@@ -27,7 +27,7 @@ You can pass dynamic values to your markup by using template strings. `{{ FillCo
This node also allows you to add script tags to your app. For security reasons all script tags are deactivated, but if you need to run a script (required for some embeds) you can turn off that fail safe. <strong>Please note that passing user input to your template string variables can be a security risk for you and your users, leaving you vulnerable to [XSS Attacks](https://en.wikipedia.org/wiki/Cross-site_scripting).</strong>
<##head##>
{/*##head##*/}
## Inputs

View File

@@ -3,13 +3,13 @@ title: Geospatial Turf API
hide_title: true
---
<##head##>
{/*##head##*/}
# Turf.js API
Returns the Turf.js API object, allowing to use other Turf.js functions that doesn't have nodes yet.
<##head##>
{/*##head##*/}
## Outputs

View File

@@ -3,13 +3,13 @@ title: Geospatial Area
hide_title: true
---
<##head##>
{/*##head##*/}
# Geospatial Area
Takes an array of coordinates and returns their area in different formats.
<##head##>
{/*##head##*/}
## Inputs

View File

@@ -3,13 +3,13 @@ title: Geospatial Center Of Mass
hide_title: true
---
<##head##>
{/*##head##*/}
# Geospatial Center Of Mass
Takes an array of coordinates and returns its center of mass using this formula: Centroid of Polygon.
<##head##>
{/*##head##*/}
## Inputs

View File

@@ -3,13 +3,13 @@ title: Geospatial Center
hide_title: true
---
<##head##>
{/*##head##*/}
# Geospatial Center
Takes a GeoJSON feature and returns the absolute center point.
<##head##>
{/*##head##*/}
Here is an example of how to use it.

View File

@@ -3,7 +3,7 @@ title: Google Analytics Root
hide_title: true
---
<##head##>
{/*##head##*/}
# Google Analytics Root
@@ -17,7 +17,7 @@ This node loads Google Analytics in your Noodl app. It _must_ be placed in your
This node uses [Google Analytics 4](https://developers.google.com/analytics/devguides/collection/ga4) and requires a [Google Analytics Measurement ID](https://support.google.com/analytics/answer/9539598#find-G-ID).
<##head##>
{/*##head##*/}
## Inputs

View File

@@ -3,7 +3,7 @@ title: Send Google Analytics Data
hide_title: true
---
<##head##>
{/*##head##*/}
# Send Google Analytics Data
@@ -15,7 +15,7 @@ This node is used to send custom data to Google Analytics. It works similarily t
</div>
<##head##>
{/*##head##*/}
## Inputs

View File

@@ -3,14 +3,14 @@ title: GraphQL Query
hide_title: true
---
<##head##>
{/*##head##*/}
# GraphQL Query
This node enables you to connect to GraphQL based API:s in a quick and easy way.
![](/library/modules/graphql/graphql-guide-img/graphql-query-node.png)
<##head##>
{/*##head##*/}
## Inputs

View File

@@ -10,7 +10,10 @@ This guide will look at how we can apply filters to our Google Sheets data and u
## Overview
If you haven't already followed the previous guides for the Google Sheets Module, it's recommended to do that before starting this guide. You can find them [part 1 here](library/modules/gsheets/guides/setting-up/) and [part 2 here](/library/modules/gsheets/guides/park-details).
If you haven't already followed the previous guides for the Google Sheets Module,
it's recommended to do that before starting this guide.
You can find them [part 1 here](/library/modules/gsheets/guides/setting-up/)
and [part 2 here](/library/modules/gsheets/guides/park-details).
<div className="ndl-image-with-background l">

View File

@@ -3,7 +3,7 @@ title: Query Sheet Aggregate
hide_title: true
---
<##head##>
{/*##head##*/}
# Query Sheet Aggregate
@@ -21,7 +21,7 @@ This node is used do aggregate data queries on a column from a public Google She
> Note that the Google Sheet need to be made public for Noodl to be able to access it.
<##head##>
{/*##head##*/}
## Results from the Aggregate Query

View File

@@ -3,7 +3,7 @@ title: Query Sheet
hide_title: true
---
<##head##>
{/*##head##*/}
# Query Sheet
@@ -25,7 +25,7 @@ The node works in a similar way as the [Query Records](/nodes/data/cloud-data/qu
> Note that the Google Sheet need to be made public for Noodl to be able to access it.
<##head##>
{/*##head##*/}
## Document Id and Sheet Name

View File

@@ -3,7 +3,7 @@ title: Sheet Row
hide_title: true
---
<##head##>
{/*##head##*/}
# Sheet Row
@@ -25,7 +25,7 @@ By setting the `Row Id` of the **Sheet Row**, and selecting the **Sheet** (if yo
> Note that the Google Sheet need to be made public for Noodl to be able to access it.
<##head##>
{/*##head##*/}
## Inputs

View File

@@ -3,11 +3,11 @@ title: i18next
hide_title: true
---
<##head##>
{/*##head##*/}
# i18next
This is used to register bundles and to set and get the current language.
<##head##>
{/*##head##*/}
## Inputs

View File

@@ -3,7 +3,7 @@ title: LanguageBundle
hide_title: true
---
<##head##>
{/*##head##*/}
# LanguageBundle
The language bundle contains the translations for a language. If you have multiple languages you will have one LanguageBundle for each language and they generally should contain the same strings, translated to the respective language.
@@ -27,7 +27,7 @@ In this example the key `loginpage.confirm_button.hover_text` would identify the
Note that i18next supports various dynamic features in the texts, e.g. plurals, date formats, etc. These are generally supported when used in Noodl.
There are typically two ways to use Language Bundles. For static texts, for example UI texts, you edit the bundle object directly in Noodl (pressing the "Edit" button on the property panel). As you build the UI you add new texts to the bundle. You have one bundle per language. For dynamic texts, for example loaded during execution from a database, you programatically create bundle objects and load them into the **LanguageBundle** when available and using the AddBundleObject input.
<##head##>
{/*##head##*/}
## Inputs

View File

@@ -3,7 +3,7 @@ title: Translation
hide_title: true
---
<##head##>
{/*##head##*/}
# Translation
This is the node where the translation happens. You typically connect these to your **Text** nodes and **Text Input** nodes. Translation nodes automatically change their output if language changes, if the bundle is changing, and when it becomes available.
@@ -13,7 +13,7 @@ There are two dynamic features in the Translation node:
- If your translation includes some of i18next dynamic features, for example having a `{{count}}` variable deciding between a plural string or not, or by inserting variables in the middle of the string, any variables used can be added as inputs on the Translation node, and be connected to other nodes in Noodl. For example if a translation uses the variable `{{count}}` adding an input named "count" and connecting it to a Number node, the translation will change when the Number node is updated.
- The name of the key can be dynamic. In most cases the key of a translation is known when building the app, but there are cases when the name of the key is only known during runtime. For example, in a database with thousands of products and related texts translated to multiple languages, the translations are generated when needed. The name of the keys are also generated dynamically. A product with an id `xyz123abc` may have its translations stored in an object named `xyz123abc`, `{"xyz123abc":{"label":"Product A", "desc":"A great product"}}`. By using dynamic naming of the key in a Translation node, using the {}-pattern, the actual key can be resolved at runtime. In this scenario naming the Key in the translation node `{product_id}.label`, will expose a new input to the Translation node called "product_id" that can be connected to a Model node in Noodl.
<##head##>
{/*##head##*/}
## Inputs

View File

@@ -3,11 +3,11 @@ title: Lottie
hide_title: true
---
<##head##>
{/*##head##*/}
# Lottie
The documentation for this node will be coming soon.
<##head##>
{/*##head##*/}
## Inputs

View File

@@ -27,7 +27,7 @@ When in the project, open the "Module" tab in the Node Picker. Find the "Mapbox"
</div>
After the module is imported, you should now be able to find the [Mapbox Map](library/modules/mapbox/nodes/v2/mapbox-map) node in the node picker. Right click in the node editor area to bring up the node picker. Look under "External libraries" to find the **Mapbox Map** node.
After the module is imported, you should now be able to find the [Mapbox Map](/library/modules/mapbox/nodes/v2/mapbox-map) node in the node picker. Right click in the node editor area to bring up the node picker. Look under "External libraries" to find the **Mapbox Map** node.
<div className="ndl-image-with-background s">

View File

@@ -3,7 +3,7 @@ title: Mapbox Map
hide_title: true
---
<##head##>
{/*##head##*/}
# Mapbox Map
@@ -23,7 +23,7 @@ Markers can be placed on the map by sending an <span className="ndl-data">array<
</div>
<##head##>
{/*##head##*/}
## Inputs

View File

@@ -3,7 +3,7 @@ title: Mapbox Map
hide_title: true
---
<##head##>
{/*##head##*/}
# Mapbox Map
@@ -15,7 +15,7 @@ This node adds a map to the visual tree, using [Mapbox](https://www.mapbox.com/)
</div>
<##head##>
{/*##head##*/}
## Inputs

View File

@@ -3,7 +3,7 @@ title: Mapbox Marker
hide_title: true
---
<##head##>
{/*##head##*/}
# Mapbox Marker
@@ -15,7 +15,7 @@ This node should be placed as a child in the Mapbox Map node, it can be used in
</div>
<##head##>
{/*##head##*/}
## Inputs

View File

@@ -3,7 +3,7 @@ title: Mapbox Polygon
hide_title: true
---
<##head##>
{/*##head##*/}
# Mapbox Polygon
@@ -29,7 +29,7 @@ Outputs.Coordinates = [
];
```
<##head##>
{/*##head##*/}
## Inputs

View File

@@ -3,13 +3,13 @@ title: Markdown
hide_title: true
---
<##head##>
{/*##head##*/}
# Markdown
This node enables you to use Markdown in Noodl.
![](/library/modules/markdown/markdown-nodes.png)
<##head##>
{/*##head##*/}
## Inputs

View File

@@ -3,7 +3,7 @@ title: Marquee
hide_title: true
---
<##head##>
{/*##head##*/}
# Marquee
@@ -15,7 +15,7 @@ This visual node adds a marquee container to the visual tree.
</div>
<##head##>
{/*##head##*/}
## Inputs

View File

@@ -3,7 +3,7 @@ title: Receive Message
hide_title: true
---
<##head##>
{/*##head##*/}
# Receive Message
@@ -11,7 +11,8 @@ hide_title: true
be used for inter-device communication and IoT. The **Receive Message** node subscribes to an MQTT topic and receives any message and payload published to that topic.
![](/library/modules/mqtt/receive-message.png)
<##head##>
{/*##head##*/}
<div class = "node-inputs">
@@ -20,9 +21,9 @@ be used for inter-device communication and IoT. The **Receive Message** node sub
### Other
**Topic**
The topic name can be any identifier and is used by the **Receive Message** nodes to connect sender and receiver nodes, or publishers and subscribers in MQTT. Most commonly the topics are specified as a hierarchy with **/** as delimiters, e.g. _/Foo/Bar/1_. Sometimes the topics need to be dynamic, this can be achieved by encapsulating a topic component with curly brackets, e.g. _/Foo/{Bar}/1_. In this case a port called _Bar_ will show up.
Topics on _Receive Message_ can also be specified with wildcards, so for instance _/Foo/+/Bar_ will subscribe to both _/Foo/Hello/Bar_ and _/Foo/Goodbye/Bar_.
The exact topic component used when sending the message can be retrieved in a similar way to dynamic topics, by specifying _/Foo/+X+/Bar_ an output port called _X_ will
The topic name can be any identifier and is used by the **Receive Message** nodes to connect sender and receiver nodes, or publishers and subscribers in MQTT. Most commonly the topics are specified as a hierarchy with **/** as delimiters, e.g. `/Foo/Bar/1`. Sometimes the topics need to be dynamic, this can be achieved by encapsulating a topic component with curly brackets, e.g. `/Foo/{Bar}/1`. In this case a port called _Bar_ will show up.
Topics on _Receive Message_ can also be specified with wildcards, so for instance `/Foo/+/Bar` will subscribe to both `/Foo/Hello/Bar` and `/Foo/Goodbye/Bar`.
The exact topic component used when sending the message can be retrieved in a similar way to dynamic topics, by specifying `/Foo/+X+/Bar` an output port called _X_ will
be created that will hold the value of the topic component when the message is received.
**Enabled**

View File

@@ -3,16 +3,16 @@ title: Send Message
hide_title: true
---
<##head##>
# Send Message
{/*##head##*/}
# Send Message
**Send Message** nodes are used to send a message over MQTT, to another device for example. All devices that connect to the editor will
use the same MQTT broker and thus messages can be sent across devices. The **Send Message** node uses topics to specify which receivers should get the messages.
![](/library/modules/mqtt/send-message.gif)
<##head##>
{/*##head##*/}
<div class = "node-inputs">
@@ -20,8 +20,8 @@ use the same MQTT broker and thus messages can be sent across devices. The **Sen
### General
**Topic**
The MQTT topic this **Send Message** will publish messages to. Most commonly the topics are specified as a hierarchy with **/** as delimiters, e.g. _/Foo/Bar/1_. Sometimes the topic needs to be dynamic, this can be achieved by encapsulating a topic component with curly brackets, e.g. _/Foo/{Bar}/1_. In this case a port called _Bar_ will show up.
**Topic**
The MQTT topic this **Send Message** will publish messages to. Most commonly the topics are specified as a hierarchy with **/** as delimiters, e.g. `/Foo/Bar/1`. Sometimes the topic needs to be dynamic, this can be achieved by encapsulating a topic component with curly brackets, e.g. `/Foo/{Bar}/1`. In this case a port called _Bar_ will show up.
**Format**
This input sets the format the payload will be sent in, either as JSON or as a CSV.

View File

@@ -3,7 +3,7 @@ title: Parse Cloud Function
hide_title: true
---
<##head##>
{/*##head##*/}
# Parse Cloud Function
@@ -33,26 +33,26 @@ You can also provide parameters that you want to be passed to the cloud function
The cloud function returns the result of the cloud function on the **Result** output.
<##head##>
{/*##head##*/}
## Inputs
| Data | Description |
| --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| <span className="ndl-data">Function Name</span> | <##input:functionName##>The name of the cloud function to call.<##input##> |
| <span className="ndl-data">Custom Parameters</span> | <##input:pm-*##>A parameter that will be passed to the function. Any parameters you add will become available as inputs on the node.<##input##> |
| <span className="ndl-data">Function Name</span> | {/*##input:functionName##*/}The name of the cloud function to call.{/*##input##*/} |
| <span className="ndl-data">Custom Parameters</span> | {/*##input:pm-*##*/}A parameter that will be passed to the function. Any parameters you add will become available as inputs on the node.{/*##input##*/} |
| Signal | Description |
| ---------------------------------------- | ------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Call</span> | <##input:call##>Send a signal on this input to issue the request to the backend.<##input##> |
| <span className="ndl-signal">Call</span> | {/*##input:call##*/}Send a signal on this input to issue the request to the backend.{/*##input##*/} |
## Outputs
| Data | Description |
| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| <span className="ndl-data">Result</span> | <##output:result##>This output will contain the result that the **Cloud Function** returns upon completion. <##output##> |
| <span className="ndl-data">Result</span> | {/*##output:result##*/}This output will contain the result that the **Cloud Function** returns upon completion. {/*##output##*/} |
| Signal | Description |
| ------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Success</span> | <##output:success##>This is sent if the function returns a success code and a result object.<##output##> |
| <span className="ndl-signal">Failure</span> | <##output:failure##>This is sent if the function returns a failure code.<##output##> |
| <span className="ndl-signal">Success</span> | {/*##output:success##*/}This is sent if the function returns a success code and a result object.{/*##output##*/} |
| <span className="ndl-signal">Failure</span> | {/*##output:failure##*/}This is sent if the function returns a failure code.{/*##output##*/} |

View File

@@ -3,7 +3,7 @@ title: Camera QR Scanner
hide_title: true
---
<##head##>
{/*##head##*/}
# Camera QR Scanner
@@ -16,7 +16,7 @@ The **Camera QR Scanner** node is used to open the camera view finder and scan f
</div>
When a QR code has been successfully identified, the node will send a <span className="ndl-signal">Scan Successful</span> event and the decoded string, otherwise <span className="ndl-signal">Scan Failed</span>.
In this node, the decoding happens in real time, meaning if the QR code is not visible anymore the node will send an event to indicate that the scanning failed.
<##head##>
{/*##head##*/}
## Inputs

View File

@@ -3,7 +3,7 @@ title: Image QR Scanner
hide_title: true
---
<##head##>
{/*##head##*/}
# Image QR Scanner
@@ -16,7 +16,7 @@ The **Image QR Scanner** node is used to scane an image for a QR code. It's typi
</div>
When a QR code has been successfully identified, the node will send a <span className="ndl-signal">Scan Successful</span> event and the decoded string, otherwise <span className="ndl-signal">Scan Failed</span>.
<##head##>
{/*##head##*/}
## Inputs

View File

@@ -3,7 +3,7 @@ title: Show Tooltip
hide_title: true
---
<##head##>
{/*##head##*/}
# Show Tooltip
@@ -15,7 +15,7 @@ This logic node adds a tooltip to the visual tree.
</div>
<##head##>
{/*##head##*/}
## Inputs

View File

@@ -3,7 +3,7 @@ title: Tooltip
hide_title: true
---
<##head##>
{/*##head##*/}
# Tooltip
@@ -15,7 +15,7 @@ This visual node adds a tooltip to the visual tree.
</div>
<##head##>
{/*##head##*/}
## Inputs

View File

@@ -3,14 +3,14 @@ title: Validate
hide_title: true
---
<##head##>
{/*##head##*/}
# Validate
The **Validate** node is used to validate data provided as inputs to the node based on a specified _schema_. This is most commonly used to validate input forms, learn more in the [guide](/library/modules/validation).
![](/library/modules/validation/simple-validate.png ':class=img-size-l')
<##head##>
{/*##head##*/}
## Inputs

View File

@@ -2,7 +2,7 @@
hide_title: true
---
<##head##>
{/*##head##*/}
# Webcamera
!> The documentation for this node will be coming soon.
@@ -14,4 +14,4 @@ The **Web Camera** node gets the video stream of a target devices camera (mob
It will work inside of Noodl without problems, but to make it work on a phone, or on a website, the project needs to be hosted on a secure server (https). If you use the Noodl Cloud Deploy functionality your project will be hosted on a secure server so this is a great way to test the Web Camera on a phone.
Note that iOS sometimes can be tricky, but try setting the Video node to mute and autoplay to get the Web Camera stream.
<##head##>
{/*##head##*/}

View File

@@ -12,7 +12,7 @@ This prefab only works on Noodl hosted cloud services.
It's recommended that you have a grasp of the following concepts before diving into this prefab:
* [Page Navigation](/docs/guides/navigation/basic-navigation) - How to create pages and navigate between them.
* [Cloud Functions](/docs/guides//cloud-logic/introduction) - How to create cloud functions and run logic on the backend.
* [Cloud Functions](/docs/guides/cloud-logic/introduction) - How to create cloud functions and run logic on the backend.
Here is a nifty prefab for exporting / generating PDFs. Exporting a PDF involves two components: