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
noodlapp · Jan 12, 2024 · 656e5fc · 656e5fc
1 parent 65b0cf0
commit 656e5fc
Show file tree

Hide file tree

Showing 156 changed files with 7,110 additions and 12,701 deletions.
diff --git a/.github/workflows/test-build.yml b/.github/workflows/test-build.yml
@@ -16,7 +16,7 @@ jobs:
       - name: Setup node env 🏗
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
 
       - name: Install dependencies 🏗
         run: npm install

diff --git a/docs/guides/cloud-logic/email-verification.md b/docs/guides/cloud-logic/email-verification.md
@@ -8,7 +8,9 @@ hide_title: true
 Cloud functions play an important role when creating different log in and sign up flows. Using the nodes [Sign Up](/nodes/data/user/sign-up), [Log In](/nodes/data/user/log-in) and [Log Out](/nodes/data/user/log-out) you can create the most basic flow that will have the user sign up with a username, optionally email, and password and log in with username and password.
 
 :::note
+
 It's common to use email for both **username** and **email** when signing up, so you only ask the user for email and password, one less thing to remeber right.
+
 :::
 
 Once logged in you can use the [Access Control](/docs/guides/cloud-data/access-control) functions of the cloud database to control what a user has access to and not. The built in role system will allow you to create features like teams/groups of users.
@@ -77,11 +79,11 @@ The **Format Email** action takes as input the verification token and the email
 
 As you can see it creates an email containing an HTML link, this link uses some fancy template syntax.
 
-- **$Domain** This will be replaced by the format email node to the domain where your application is deployed, so that the link will take you back to the app. More on this later.
-- **{Token}** This is the generated token from before.
-- **{Email}** This is the email for the user, it will be used to fetch the user and marked the email as verified in the next step.
+- `$Domain` This will be replaced by the format email node to the domain where your application is deployed, so that the link will take you back to the app. More on this later.
+- `{Token}` This is the generated token from before.
+- `{Email}` This is the email for the user, it will be used to fetch the user and marked the email as verified in the next step.
 
-The **Format Email** node outputs the final email with the correct values for the above placeholders insterted. This email content is then sent to the **Send Email** node that actually sends the email to the user. 
+The **Format Email** node outputs the final email with the correct values for the above placeholders insterted. This email content is then sent to the **Send Email** node that actually sends the email to the user.
 
 <div className="ndl-image-with-background l">
 
@@ -135,15 +137,14 @@ Resetting a user password when it's been lost follows the same pattern as sendin
 
 </div>
 
-There is a function called **Sign Up / Request Password Reset** that simply accepts an **Email** and it can be called without the user being logged in. 
+There is a function called **Sign Up / Request Password Reset** that simply accepts an **Email** and it can be called without the user being logged in.
 
 <div className="ndl-image-with-background xl">
 
 ![](/docs/guides/cloud-logic/email-verification/reset-password-2.png)
 
 </div>
 
-
 The cloud function follow pretty much the same pattern as when sending email verifications. It will send an email to the user with a link containing a secret token just like when veryfing the email address.
 
 <div className="ndl-image-with-background xl">
@@ -183,17 +184,3 @@ When the user hits the reset button we will call the **Sign Up / Reset Password*
 Provided that the secret token is correct and have not expired (tokens are valid for 24 hours) the password will be updated. You can then send the user back to the **Log In** page.
 
 That's it, this is how you use cloud functions to create an email verification and password reset flow. You will use cloud functions for a lot of user management tasks that need to be performed on the backend with full database access.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs/guides/data/variables.mdx b/docs/guides/data/variables.mdx
@@ -2,6 +2,7 @@
 title: Using Variables
 hide_title: true
 ---
+
 import ImportButton from '../../../src/components/importbutton'
 
 # Using Variables
@@ -47,7 +48,7 @@ Now we are going to do two things. 1. We want to store the value of the TextFiel
 
 Let's start with the capitalization. Add a [Function](/nodes/javascript/function) node. Edit the script and paste the following:
 
-```javascript
+```js
 if (Inputs.name !== undefined) {
     Outputs.capitalizedName =
         Inputs.name.substr(0, 1).toUpperCase() + Inputs.name.substr(1)
@@ -118,7 +119,7 @@ So, connect the **onEnter** output on the **TextField** to the **Do** input sign
 
 ### Reading a Variable
 
-Ok, now we want to use the value we just stored. We want to include the name in the `Hello World` greeting. So lets first add a [String Format](/nodes/string-manipulation/string-format/) node. Make sure the text in the node is "Hello World {name}".
+Ok, now we want to use the value we just stored. We want to include the name in the `Hello World` greeting. So lets first add a [String Format](/nodes/string-manipulation/string-format/) node. Make sure the text in the node is "Hello World `{name}`".
 
 <div className="ndl-image-with-background xl">
 
@@ -156,7 +157,9 @@ Now test your app. Start writing a name in the **Text Input**, press _Enter_ and
 Now let's change the structure a little. We will create a **Popup** and present the "Hello World" message in it only after the user have pressed _Enter_.
 
 :::note
+
 If you want to learn more about popups, take a look at the [Popups](/docs/guides/navigation/popups) guide.
+
 :::
 
 Start by creating a new visual component, call it "Hello Popup".
@@ -263,7 +266,7 @@ Connect the **value** output from the **Variable** `userName` to the a **String*
 
 Then create an **Expression** node. We want to check that the length of the name is 6 characters or more. So edit the expression and write
 
-```
+```js
 length >= 6
 ```
 

diff --git a/docs/guides/navigation/component-stack.mdx b/docs/guides/navigation/component-stack.mdx
@@ -4,6 +4,7 @@ hide_title: true
 ---
 
 import ImportButton from '/src/components/importbutton';
+import CopyToClipboardButton from '/src/components/copytoclipboardbutton';
 import ReactPlayer from 'react-player';
 
 # Component Stack Guide

diff --git a/javascript/reference/object/README.md b/javascript/reference/object/README.md
@@ -21,7 +21,7 @@ The properties of the object will be that of the supplied data. A special case i
 the id attribute that will become the id of the object and not part of the object properties.
 E.g. the code below will create an object with two properties and the id set to 'A'.
 
-```javascript
+```js
 Noodl.Object.create({
   id: "A",
   myProp1: 10,
@@ -50,7 +50,7 @@ Supported events:
 
 Example usage:
 
-```javascript
+```js
 myObject.on("change", function (args) {
   // property with name args.name was changed
   // new value in args.value
@@ -138,7 +138,7 @@ Noodl.Objects["unique"].fill(5);
 
 Returns the value of the property with the specified name.
 As in the set function the dot notation can be used if the object has another object as a property,
-if the options {resolve:true} is supplied.
+if the options `{resolve:true}` is supplied.
 
 `myObject.get('myProp3.anotherProp',{resolve:true})`
 

diff --git a/library/modules/chartjs/nodes/bar.md b/library/modules/chartjs/nodes/bar.md
@@ -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
 

diff --git a/library/modules/chartjs/nodes/bubble.md b/library/modules/chartjs/nodes/bubble.md
@@ -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
 

diff --git a/library/modules/chartjs/nodes/doughnut.md b/library/modules/chartjs/nodes/doughnut.md
@@ -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
 

diff --git a/library/modules/chartjs/nodes/line.md b/library/modules/chartjs/nodes/line.md
@@ -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
 

diff --git a/library/modules/chartjs/nodes/pie.md b/library/modules/chartjs/nodes/pie.md
@@ -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
 

diff --git a/library/modules/chartjs/nodes/polar-area.md b/library/modules/chartjs/nodes/polar-area.md
@@ -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
 

diff --git a/library/modules/chartjs/nodes/radar.md b/library/modules/chartjs/nodes/radar.md
@@ -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
 

diff --git a/library/modules/chartjs/nodes/scatter.md b/library/modules/chartjs/nodes/scatter.md
@@ -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
 

diff --git a/library/modules/custom-html/README.md b/library/modules/custom-html/README.md
@@ -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
 

diff --git a/library/modules/geospatial-analysis/nodes/v1/geospatial-api.md b/library/modules/geospatial-analysis/nodes/v1/geospatial-api.md
@@ -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
 

diff --git a/library/modules/geospatial-analysis/nodes/v1/geospatial-area.md b/library/modules/geospatial-analysis/nodes/v1/geospatial-area.md
@@ -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
 

diff --git a/library/modules/geospatial-analysis/nodes/v1/geospatial-center-of-mass.md b/library/modules/geospatial-analysis/nodes/v1/geospatial-center-of-mass.md
@@ -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
 

diff --git a/library/modules/geospatial-analysis/nodes/v1/geospatial-center.md b/library/modules/geospatial-analysis/nodes/v1/geospatial-center.md
@@ -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.
 

diff --git a/library/modules/google-analytics/nodes/google-analytics-root/README.md b/library/modules/google-analytics/nodes/google-analytics-root/README.md
@@ -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