mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-11 14:52:54 +01:00
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
GitHub
@@ -4,7 +4,7 @@ hide_table_of_contents: true
|
||||
title: External Link node
|
||||
---
|
||||
|
||||
<##head##>
|
||||
{/*##head##*/}
|
||||
|
||||
# External Link
|
||||
|
||||
@@ -20,15 +20,15 @@ It also supports common URL schemes, like `mailto:` and `tel:`.
|
||||
|
||||
Note that **External Link** does not work in the Noodl Viewer. You need to run the app in a browser for it to work.
|
||||
|
||||
<##head##>
|
||||
{/*##head##*/}
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Link</span> | <##input:link##>The URL that should be opened when the **Do** signal is triggered. The URL should include the full scheme, e.g. `http://`, `mailto:`, etc. <##input##> |
|
||||
| <span className="ndl-data">Open in New Tab</span> | <##input:openInNewTab##>If this property is set to <span className="ndl-data">true</span> the link will be opened in a new browser tab. Otherwise it will open (and replace) the current Noodl app in the browser.<##input##> |
|
||||
| <span className="ndl-data">Link</span> | {/*##input:link##*/}The URL that should be opened when the **Do** signal is triggered. The URL should include the full scheme, e.g. `http://`, `mailto:`, etc. {/*##input##*/} |
|
||||
| <span className="ndl-data">Open in New Tab</span> | {/*##input:openInNewTab##*/}If this property is set to <span className="ndl-data">true</span> the link will be opened in a new browser tab. Otherwise it will open (and replace) the current Noodl app in the browser.{/*##input##*/} |
|
||||
|
||||
| Signal | Description |
|
||||
| -------------------------------------- | --------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Do</span> | <##input:do##>Recieving a signal to this input will navigate to the external link.<##input##> |
|
||||
| <span className="ndl-signal">Do</span> | {/*##input:do##*/}Recieving a signal to this input will navigate to the external link.{/*##input##*/} |
|
||||
|
||||
@@ -4,7 +4,7 @@ hide_table_of_contents: true
|
||||
title: Navigate To Path node
|
||||
---
|
||||
|
||||
<##head##>
|
||||
{/*##head##*/}
|
||||
|
||||
# Navigate To Path
|
||||
|
||||
@@ -18,7 +18,7 @@ This node lets you navigate to a specific <span className="ndl-node">[Page](/nod
|
||||
|
||||
In most cases you will want to use the <span className="ndl-node">[Navigate](/nodes/navigation/navigate)</span> or <span className="ndl-node">[External Link](/nodes/navigation/external-link)</span> nodes for your navigation. The <span className="ndl-node">Navigate To Path</span> node is a low level implementation suitable for more advanced and specific use cases.
|
||||
|
||||
<##head##>
|
||||
{/*##head##*/}
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -32,16 +32,16 @@ In a way, **Navigate To Path** is very much like writing a URL directly into the
|
||||
|
||||
| Data | Description |
|
||||
| -------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Path</span> | <##input:path##>Use this property to set the path to navigate to. Note that the **Path** should not include the domain but only the route within the Noodl project. The **Path** may include a **Path Parameter** as the final part, that will be forwarded to the receiving **Page**. You can also use `{}` to make part of the **Path** dynamic and expose the part as an input. For example the path `/{a}/{b}/` will expose two new inputs _a_ and _b_.<##input##> |
|
||||
| <span className="ndl-data">Path</span> | {/*##input:path##*/}Use this property to set the path to navigate to. Note that the **Path** should not include the domain but only the route within the Noodl project. The **Path** may include a **Path Parameter** as the final part, that will be forwarded to the receiving **Page**. You can also use `{}` to make part of the **Path** dynamic and expose the part as an input. For example the path `/{a}/{b}/` will expose two new inputs _a_ and _b_.{/*##input##*/} |
|
||||
| <span className="ndl-data">Query Parameters</span> | You can add any number of **Query Parameters** that will be forwarded to the receiving [Page](/nodes/navigation/page/) through their [Page](/nodes/navigation/page-inputs/) node. |
|
||||
| <span className="ndl-data">Open in new tab</span> | Open the new page in a new browser tab. |
|
||||
|
||||
| Signal | Description |
|
||||
| -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Navigate</span> | <##input:navigate##>Sending a signal to this input will perform the navigation according to the provided **Path**.<##input##> |
|
||||
| <span className="ndl-signal">Navigate</span> | {/*##input:navigate##*/}Sending a signal to this input will perform the navigation according to the provided **Path**.{/*##input##*/} |
|
||||
|
||||
<span className="hidden-props-for-editor"><##input:q-\*##>A **Query Parameter** that will be forwarded to the receiving **Page** node through their **Page Inputs** node.<##input##></span>
|
||||
<span className="hidden-props-for-editor">{/*##input:q-\*##*/}A **Query Parameter** that will be forwarded to the receiving **Page** node through their **Page Inputs** node.{/*##input##*/}</span>
|
||||
|
||||
<span className="hidden-props-for-editor"><##input:p-\*##>A **Path Parameter** that will be part of the **Path**.<##input##></span>
|
||||
<span className="hidden-props-for-editor">{/*##input:p-\*##*/}A **Path Parameter** that will be part of the **Path**.{/*##input##*/}</span>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,7 @@ hide_table_of_contents: true
|
||||
title: Navigate node
|
||||
---
|
||||
|
||||
<##head##>
|
||||
{/*##head##*/}
|
||||
|
||||
# Navigate
|
||||
|
||||
@@ -18,7 +18,7 @@ This node is used to navigate between <span className="ndl-node">[Page](/nodes/n
|
||||
|
||||
You can use a [Page Inputs](/nodes/navigation/page-inputs) node to pass parameters to the <span className="ndl-node">Page</span> you are navigating to. Any <span className="ndl-data">Path Parameters</span> or <span className="ndl-data">Query Parameters</span> you add will show up as inputs to the <span className="ndl-node">Navigate</span> node if you select that <span className="ndl-node">Page</span> as the <span className="ndl-data">Target Page</span>.
|
||||
|
||||
<##head##>
|
||||
{/*##head##*/}
|
||||
|
||||
## Inputs
|
||||
|
||||
@@ -32,13 +32,13 @@ You can use a [Page Inputs](/nodes/navigation/page-inputs) node to pass paramete
|
||||
|
||||
| Signal | Description |
|
||||
| -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Navigate</span> | <##input:navigate##>Sending a signal to this input will perform the navigation to the **Target Page**.<##input##> |
|
||||
| <span className="ndl-signal">Navigate</span> | {/*##input:navigate##*/}Sending a signal to this input will perform the navigation to the **Target Page**.{/*##input##*/} |
|
||||
|
||||
| Mixed | Description |
|
||||
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **Page Parameters** | Any page parameters set in the [Pages Inputs](/nodes/navigation/page-inputs) used by the **Page** will be available as inputs on the **Navigate** node. |
|
||||
|
||||
<span className="hidden-props-for-editor"><##input:pm-\*##> An input parameter originating from the **Page Inputs** node of the **Target Page**.<##input##></span>
|
||||
<span className="hidden-props-for-editor">{/*##input:pm-\*##*/} An input parameter originating from the **Page Inputs** node of the **Target Page**.{/*##input##*/}</span>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -48,6 +48,6 @@ You can use a [Page Inputs](/nodes/navigation/page-inputs) node to pass paramete
|
||||
|
||||
| Signal | Description |
|
||||
| --------------------------------------------- | ---------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Navigated</span> | <##output:navigated##>This event is triggered when a navigation as been performed.<##output##> |
|
||||
| <span className="ndl-signal">Navigated</span> | {/*##output:navigated##*/}This event is triggered when a navigation as been performed.{/*##output##*/} |
|
||||
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,7 @@ hide_table_of_contents: true
|
||||
title: Page Inputs node
|
||||
---
|
||||
|
||||
<##head##>
|
||||
{/*##head##*/}
|
||||
|
||||
# Page Inputs
|
||||
|
||||
@@ -18,8 +18,8 @@ This node is used to pass parameters in the URL when navigating between pages in
|
||||
|
||||
One common use for this is when you want certain input parameters to be available in sharable links.
|
||||
|
||||
<##head##>
|
||||
{/*##head##*/}
|
||||
|
||||
@include "../_common-navigation.md"
|
||||
|
||||
<span className="hidden-props-for-editor"><##output:pm-\*##>A page parameter that will be available as an input on any **Navigate** node that navigates to its associated **Page**.<##output##></span>
|
||||
<span className="hidden-props-for-editor">{/*##output:pm-\*##*/}A page parameter that will be available as an input on any **Navigate** node that navigates to its associated **Page**.{/*##output##*/}</span>
|
||||
|
||||
@@ -4,7 +4,7 @@ hide_table_of_contents: true
|
||||
title: Page Router node
|
||||
---
|
||||
|
||||
<##head##>
|
||||
{/*##head##*/}
|
||||
|
||||
# Page Router
|
||||
|
||||
@@ -20,7 +20,7 @@ Unlike the somewhat similar [Component Stack](/nodes/component-stack/component-s
|
||||
|
||||
Every <span className="ndl-node">Page Router</span> has a <span className="ndl-data">Start Page</span>. The pages are rendered inside of the <span className="ndl-node">Page Router</span>. You can use the <span className="ndl-data">Clip Behavior</span> option to decide how the <span className="ndl-node">Page Router</span> should wrap its content.
|
||||
|
||||
<##head##>
|
||||
{/*##head##*/}
|
||||
|
||||
## Implementation
|
||||
|
||||
@@ -86,15 +86,15 @@ The **Page Router** is a visual node. It will automatically expand to take all s
|
||||
|
||||
| Data | Description |
|
||||
| -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Name</span> | <##input:name##>The name of the **Page Router**. If you have multiple **Page Routers** the name will be used to identify them.<##input##> |
|
||||
| <span className="ndl-data">URL path</span> | <##input:urlPath##>An optional path of the **Page Router** when routing a URL towards it.<##input##> |
|
||||
| <span className="ndl-data">Clip Behavior</span> | <##input:clip##>This property controls the size and clipping behavior of the **Page Router**. It has three possible values: **Expand To Content Size**, **Scroll** or **Clip Content**.<##input##><br/><br/>`Expand To Content Size`: Changes the size of the **Page Router** to fit the size of the **Page** it's currently showing.<br/>`Scroll`: Makes the **Page Router** take as much space as it can. Any **Page** inside it will be scrollable if it cannot fit inside the **Page Router**. |
|
||||
| <span className="ndl-data">Background Color</span> | <##input:backgroundColor##>The color that will be shown when there is no **Page** covering the **Page Router** or when the **Page** is transparent.<##input##> |
|
||||
| <span className="ndl-data">Mounted</span> | <##input:mounted##>This property is used to completely remove the node from the DOM. If this property is set to false the node is removed from the DOM. It differs from the _Visible_ property where the node is still part of the DOM but invisible.<##input##> |
|
||||
| <span className="ndl-data">Name</span> | {/*##input:name##*/}The name of the **Page Router**. If you have multiple **Page Routers** the name will be used to identify them.{/*##input##*/} |
|
||||
| <span className="ndl-data">URL path</span> | {/*##input:urlPath##*/}An optional path of the **Page Router** when routing a URL towards it.{/*##input##*/} |
|
||||
| <span className="ndl-data">Clip Behavior</span> | {/*##input:clip##*/}This property controls the size and clipping behavior of the **Page Router**. It has three possible values: **Expand To Content Size**, **Scroll** or **Clip Content**.{/*##input##*/}<br/><br/>`Expand To Content Size`: Changes the size of the **Page Router** to fit the size of the **Page** it's currently showing.<br/>`Scroll`: Makes the **Page Router** take as much space as it can. Any **Page** inside it will be scrollable if it cannot fit inside the **Page Router**. |
|
||||
| <span className="ndl-data">Background Color</span> | {/*##input:backgroundColor##*/}The color that will be shown when there is no **Page** covering the **Page Router** or when the **Page** is transparent.{/*##input##*/} |
|
||||
| <span className="ndl-data">Mounted</span> | {/*##input:mounted##*/}This property is used to completely remove the node from the DOM. If this property is set to false the node is removed from the DOM. It differs from the _Visible_ property where the node is still part of the DOM but invisible.{/*##input##*/} |
|
||||
|
||||
| Signal | Description |
|
||||
| ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Reset</span> | <##input:reset##>Triggering this action will reset the **Page Router** making it show the start page.<##input##> |
|
||||
| <span className="ndl-signal">Reset</span> | {/*##input:reset##*/}Triggering this action will reset the **Page Router** making it show the start page.{/*##input##*/} |
|
||||
|
||||
### Visual
|
||||
|
||||
@@ -104,7 +104,7 @@ This node also supports the [Advanced HTML](/nodes/shared-props/inputs/visual-in
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Current Page Title</span> | <##output:current page title##>The title of the page that is currently showing in this **Page Router**.<##output##> |
|
||||
| <span className="ndl-data">Current Page Title</span> | {/*##output:current page title##*/}The title of the page that is currently showing in this **Page Router**.{/*##output##*/} |
|
||||
|
||||
### Visual
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ hide_table_of_contents: true
|
||||
title: Page node
|
||||
---
|
||||
|
||||
<##head##>
|
||||
{/*##head##*/}
|
||||
|
||||
# Page
|
||||
|
||||
@@ -24,14 +24,14 @@ The **Page** node is a basic building block when creating web type navigation us
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
{/*##head##*/}
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| <span className="ndl-data">Title</span> | <##input:title##>This property controls the title of the **Page** i.e. what the title of the browser window will be say when the **Page** is active.<##input##> |
|
||||
| <span className="ndl-data">URL path</span> | <##input:urlPath##>This property controls the URL route to this **Page** in relation to its [Page Router](/nodes/navigation/page-router).<##input##> See the documentation for [Page Router](/nodes/navigation/page-router) for more details on how routing works. |
|
||||
| <span className="ndl-data">Title</span> | {/*##input:title##*/}This property controls the title of the **Page** i.e. what the title of the browser window will be say when the **Page** is active.{/*##input##*/} |
|
||||
| <span className="ndl-data">URL path</span> | {/*##input:urlPath##*/}This property controls the URL route to this **Page** in relation to its [Page Router](/nodes/navigation/page-router).{/*##input##*/} See the documentation for [Page Router](/nodes/navigation/page-router) for more details on how routing works. |
|
||||
|
||||
This node supports the following [Visual Input Properties](/nodes/shared-props/inputs/visual-input-properties/):
|
||||
|
||||
|
||||
Reference in New Issue
Block a user