fix(docs): Tutorial fixes and polish

lowdefy · Feb 28, 2023 · 69e8c07 · 69e8c07
1 parent 6a4d3fe
commit 69e8c07
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 26 deletions.
diff --git a/packages/docs/tutorial/tutorial-actions-operators.yaml b/packages/docs/tutorial/tutorial-actions-operators.yaml
@@ -89,7 +89,7 @@ _ref:
             ```
 
             A red asterisk should appear next to each input field, looking like this:
-      - id: example1
+      - id: example_1
         type: TextInput
         required: true
         properties:
@@ -136,7 +136,7 @@ _ref:
             Now if we click the submit button and all our inputs aren't complete, a message pops up saying we have validation errors on the page. All the fields that have not been completed are highlighted in red.
 
             The result should look and work like this. The examples in this tutorial are live versions of the tutorial app, so you can verify that they work like your own app.
-      - id: example2
+      - id: example_2
         type: PageHeaderMenu
         properties:
           style:
@@ -154,12 +154,12 @@ _ref:
                 properties:
                   content: Log a ticket
                   level: 3
-              - id: ticket_title
+              - id: example_2.ticket_title
                 type: TextInput
                 required: true
                 properties:
                   title: Title
-              - id: ticket_type
+              - id: example_2.ticket_type
                 type: ButtonSelector
                 required: true
                 properties:
@@ -168,7 +168,7 @@ _ref:
                     - Suggestion
                     - Complaint
                     - Question
-              - id: ticket_description
+              - id: example_2.ticket_description
                 type: TextArea
                 properties:
                   title: Description
@@ -198,6 +198,8 @@ _ref:
                   onClick:
                     - id: validate
                       type: Validate
+                      params:
+                        regex: ^example_2\.
       - id: body_visible
         type: MarkdownWithCode
         properties:
@@ -309,22 +311,15 @@ _ref:
 
             Your final new ticket page should look and work like this:
 
-      - id: example3
+      - id: example_3
         type: PageHeaderMenu
         properties:
           style:
             minHeight: 300px
           menu:
             links: []
-        events:
-          onInit:
-            - id: init
-              type: SetState
-              params:
-                example3_number_of_attendees: 2 - 3
-                example3_ticket_type: Bug report
         blocks:
-          - id: example3_content_card
+          - id: example_3_content_card
             type: Card
             layout:
               contentGutter: 16
@@ -340,7 +335,7 @@ _ref:
                 required: true
                 properties:
                   title: Title
-              - id: ticket_type
+              - id: example_3.ticket_type
                 type: ButtonSelector
                 required: true
                 properties:
@@ -349,15 +344,15 @@ _ref:
                     - Suggestion
                     - Complaint
                     - Question
-              - id: ticket_description
+              - id: example_3.ticket_description
                 type: TextArea
                 properties:
                   title: Description
-              - id: purchase_in_last_month
+              - id: example_3.purchase_in_last_month
                 type: ButtonSelector
                 visible: # Test if block should be visible to the user
                   _eq: # Equals operator
-                    - _state: ticket_type # Get the ticket_type value from state.
+                    - _state: example_3.ticket_type # Get the ticket_type value from state.
                     - Complaint
                 validate:
                   # Show a warning that shows before validate is called
@@ -366,7 +361,7 @@ _ref:
                     message: If you have had the product for over a month, we may not be able to replace it.
                     pass:
                       _eq:
-                        - _state: confirm_restart
+                        - _state: example_3.purchase_in_last_month
                         - Yes
                 properties:
                   title: Did you purchase this product within the last month?
@@ -401,6 +396,8 @@ _ref:
                   onClick:
                     - id: validate
                       type: Validate
+                      params:
+                        regex: ^example_3\.
       - id: body_up_next
         type: MarkdownWithCode
         properties:

diff --git a/packages/docs/tutorial/tutorial-create-page.yaml b/packages/docs/tutorial/tutorial-create-page.yaml
@@ -130,7 +130,7 @@ _ref:
             ### What happened
 
             - We created a new page with id `new-ticket`.
-            - We used a [`_ref` operator](/_ref) to reference configuration in another file.
+            - We used the [`_ref` operator](/_ref) to reference configuration in another file.
             - That page can now be found at the `/new-ticket` route.
             - A link to that page was created in the menu. These links are in the order of the pages.
 

diff --git a/packages/docs/tutorial/tutorial-requests-api.yaml b/packages/docs/tutorial/tutorial-requests-api.yaml
@@ -154,9 +154,11 @@ _ref:
                         required: true
                         properties:
                           title: Product
-                          options: # Set the allowed options QUERY FROM API
+                          options:
+                            # Map over API response to create an array of product titles
                             _array.map:
-                              - _request: get_products.data.products # use dot notation to access value in response object properties
+                              # use dot notation to access value in response object properties
+                              - _request: get_products.data.products
                               - _function:
                                   __args: 0.title
                 ################ ------- Copy to here -------- ################

diff --git a/packages/docs/tutorial/tutorial-requests-sql.yaml b/packages/docs/tutorial/tutorial-requests-sql.yaml
@@ -30,7 +30,7 @@ _ref:
 
             ## Configuring the SQLite Connection and Request
 
-            We will be saving the data from our form in a SQLite database, using the [`SQLite`](/SQLite) connection. To do this, we will first need to set up an SQLite database as described in the following steps:
+            We will be saving the data from our form in a SQLite database, using the [`Knex`](/SQLite) connection. To do this, we will first need to set up an SQLite database as described in the following steps:
 
             #### 6.1. Setting up the SQLite database
 
@@ -46,7 +46,7 @@ _ref:
       - id: table_download
         type: DangerousMarkdown
         properties:
-          html: |
+          content: |
             The database used in this tutorial can be downloaded <a href="/tutorial/tutorial_db.sqlite" download>here</a>.
 
       - id: body_sqlite_steps

diff --git a/packages/docs/tutorial/tutorial-start.yaml b/packages/docs/tutorial/tutorial-start.yaml
@@ -49,8 +49,18 @@ _ref:
 
             The Lowdefy CLI (Command Line Interface) is needed to run the development server. To run the Lowdefy CLI you need to install Node.js at version 16 or greater. If you don't have it installed, download Node.js from https://nodejs.org/en/download/, and follow the installation steps for your computer. All of the default settings given by the installer are fine for what we need. You will also need a text editor to modify the Lowdefy configuration files.
 
-            Lowdefy also requires [`pnpm`](https://pnpm.io/) to be installed. We recommend making use of [Corepack](https://nodejs.org/api/corepack.html) for this installation. The installation steps for using Corepack can be found [here](https://pnpm.io/installation#using-corepack). Alternative methods to install `pnpm` can also be found [here](https://pnpm.io/installation).
+            Lowdefy also requires [`pnpm`](https://pnpm.io/) to be installed. We recommend making activating [Corepack](https://nodejs.org/api/corepack.html), even though it is an experimental feature, as this is the simplest way to install `pnpm`. Alternative methods to install `pnpm` can also be found [here](https://pnpm.io/installation). To activate Corepack, run the following in your computer's command line interface (Windows CMD, Terminal on MacOS).
 
+      - _ref:
+          path: templates/cli_command.yaml.njk
+          vars:
+            id: corepack_enable
+            command: 'corepack enable'
+
+      - id: body_yaml_files
+        type: MarkdownWithCode
+        properties:
+          content: |
             ##### YAML files
 
             If you don't have any experience using YAML, please familiarize yourself YAML before continuing.
@@ -67,7 +77,7 @@ _ref:
 
             #### 1.2. Open a command line interface
 
-            Open your computer's command line interface (Windows CMD, Terminal on MacOS), and change directory (`cd`) to the project directory.
+            Open your computer's command line interface and change directory (`cd`) to the project directory.
 
             #### 1.3. Initialize an app