@lowdefy/docs 4.0.0-alpha.7 → 4.0.0-alpha.8

package/tutorial/tutorial-add-blocks-config.yaml

@@ -1,109 +0,0 @@
-# Copyright 2020-2021 Lowdefy, Inc
-
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-
-#     http://www.apache.org/licenses/LICENSE-2.0
-
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-
-_ref:
-  path: templates/general.yaml.njk
-  vars:
-    pageId: tutorial-add-blocks-config
-    pageTitle: Making a booking form config
-    section: Tutorial
-    filePath: tutorial/tutorial-add-blocks-config.yaml
-    content:
-      - id: body_config
-        type: MarkdownWithCode
-        properties:
-          content: |
-            ##### `lowdefy.yaml`
-            ```yaml
-            name: lowdefy-project-template
-            lowdefy: CURRENT_LOWDEFY_VERSION # e.g. 3.4.0
-
-            menus:
-              - id: default
-                links:
-                  - id: new-ticket
-                    type: MenuLink
-                    properties:
-                      icon: AiOutlinedAlert
-                      title: New ticket
-                    pageId: new-ticket
-                  - id: welcome
-                    type: MenuLink
-                    properties:
-                      icon: AiOutlinedHome
-                      title: Home
-                    pageId: welcome
-
-            pages:
-              - _ref: new-ticket.yaml
-              - id: welcome
-                type: PageHeaderMenu
-                #...
-            ```
-
-            ##### `new-ticket.yaml`
-            ```yaml
-            id: new-ticket
-            type: PageHeaderMenu
-            properties:
-              title: New ticket # The title in the browser tab.
-            layout:
-              contentJustify: center # Center the contents of the page
-            blocks:
-              - id: content_card
-                type: Card
-                layout:
-                  size: 800 # Set the size of the card so it does not fill the full screen
-                  contentGutter: 16 # Make a 16px gap between all blocks in this card
-                blocks:
-                  - id: page_heading
-                    type: Title
-                    properties:
-                      content: Log a ticket # Change the title on the page.
-                      level: 3 # Make the title a little smaller (an html `<h3>`).
-                  - id: ticket_title
-                    type: TextInput
-                    properties:
-                      title: Title
-                  - id: ticket_type
-                    type: ButtonSelector
-                    properties:
-                      title: Ticket type
-                      options: # Set the allowed options
-                        - Feature request
-                        - Bug report
-                        - Question
-                  - id: ticket_description
-                    type: TextArea
-                    properties:
-                      title: Description
-                  - id: reset_button
-                    type: Button
-                    layout:
-                      span: 12 # Set the size of the button (span 12 of 24 columns)
-                    properties:
-                      title: Reset
-                      block: true # Make the button fill all the space available to it
-                      type: default # Make the button a plain button
-                      icon: AiOutlinedClear
-                  - id: submit_button
-                    type: Button
-                    layout:
-                      span: 12
-                    properties:
-                      title: Submit
-                      block: true
-                      type: primary # Make the button a primary button with color
-                      icon: AiOutlinedSave
-            ```

package/tutorial/tutorial-add-blocks.yaml

@@ -1,195 +0,0 @@
-# Copyright 2020-2021 Lowdefy, Inc
-
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-
-#     http://www.apache.org/licenses/LICENSE-2.0
-
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-
-_ref:
-  path: templates/general.yaml.njk
-  vars:
-    pageId: tutorial-add-blocks
-    pageTitle: 3. Adding blocks
-    section: Tutorial
-    filePath: tutorial/tutorial-add-blocks.yaml
-    prefetchPages:
-      - tutorial-actions-operators
-    content:
-      - id: tutorial_video
-        type: DangerousMarkdown
-        properties:
-          DOMPurifyOptions:
-            ADD_TAGS:
-              - iframe
-            ADD_ATTR:
-              - allowfullscreen
-              - allow
-              - frameborder
-          content: |
-            <iframe
-              width="800"
-              height="470"
-              src="https://www.youtube.com/embed/YHeMlW9y6V0" frameborder="0"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
-            </iframe>
-      - id: body_add_blocks
-        type: MarkdownWithCode
-        properties:
-          content: |
-            We would like to add an input form with the following fields:
-
-            - A title for the ticket.
-            - The type of ticket. This should be a selection from a list of types.
-            - A description of the ticket.
-
-            There should also be submit and reset buttons at the bottom of the page.
-
-            #### Step 3.1 - Add some input blocks
-
-            Copy the following blocks and add them in the card's blocks array.
-
-            ###### `new-ticket.yaml`
-            ```yaml
-            id: new-ticket
-                # ...
-            blocks:
-              - id: content_card
-                # ...
-                blocks:
-                  - id: page_heading
-                    type: Title
-                    properties:
-                      content: Log a ticket # Change the title on the page.
-                      level: 3 # Make the title a little smaller (an html `<h3>`).
-            ################ ------- Copy from here -------- ################
-                  - id: ticket_title
-                    type: TextInput
-                    properties:
-                      title: Title
-                  - id: ticket_type
-                    type: ButtonSelector
-                    properties:
-                      title: Ticket type
-                      options: # Set the allowed options
-                        - Feature request
-                        - Bug report
-                        - Question
-                  - id: ticket_description
-                    type: TextArea
-                    properties:
-                      title: Description
-                  - id: reset_button
-                    type: Button
-                    layout:
-                      span: 12 # Set the size of the button (span 12 of 24 columns)
-                    properties:
-                      title: Reset
-                      block: true # Make the button fill all the space available to it
-                      type: default # Make the button a plain button
-                      icon: AiOutlinedClear
-                  - id: submit_button
-                    type: Button
-                    layout:
-                      span: 12
-                    properties:
-                      title: Submit
-                      block: true
-                      type: primary # Make the button a primary button with color
-                      icon: AiOutlinedSave
-            ################ -------- Copy to here ---------- ################
-            ```
-
-            >  If you would like to see how your config should look at this point, you can find it [here](/tutorial-add-blocks-config).
-
-            Your booking page should something like this:
-      - id: example1
-        type: PageHeaderMenu
-        layout:
-          contentJustify: center
-        properties:
-          style:
-            minHeight: 300px
-          menu:
-            links: []
-        blocks:
-          - id: content_card
-            type: Card
-            layout:
-              contentGutter: 16
-              size: 600
-            blocks:
-              - id: page_heading
-                type: Title
-                properties:
-                  content: Log a ticket
-                  level: 3
-              - id: ticket_title
-                type: TextInput
-                properties:
-                  title: Title
-              - id: ticket_type
-                type: ButtonSelector
-                properties:
-                  title: Ticket type
-                  options:
-                    - Feature request
-                    - Bug report
-                    - Question
-              - id: ticket_description
-                type: TextArea
-                properties:
-                  title: Description
-              - id: reset_button
-                type: Button
-                layout:
-                  span: 12
-                properties:
-                  title: Reset
-                  block: true
-                  type: default
-                  icon: AiOutlinedClear
-              - id: submit_button
-                type: Button
-                layout:
-                  span: 12
-                properties:
-                  title: Submit
-                  block: true
-                  type: primary
-                  icon: AiOutlinedSave
-      - id: body_what_happened
-        type: MarkdownWithCode
-        properties:
-          content: |
-            ### What happened
-
-            We added 3 form input blocks to the page. For each of those blocks, we set the `title` property, and for the ticket type selector we set a list of ticket types to the `options` property.
-
-            We also added reset button and submit button. We set a few more properties on the buttons to set their layout and appearance.
-
-            ### How it works
-
-            Lowdefy apps are made from blocks. These blocks can be the page layout with header and menu, a piece of text, a chart or table, tabs or even a popup message or icon. You specify which block is rendered with the `type` field. There are 5 block categories, namely display, input, container, list, and context.
-
-            The first block on a page needs to be a [context](/context-and-state) block. For now, it is enough to understand that this context allows the Lowdefy magic to happen.
-
-            All blocks need to have an `id` that identifies the block. This id should be unique in that block's context.
-
-            ### Up next
-
-            Currently our form doesn't do very much. In the next section we will use [actions](/events-and-actions) and [operators](/operators) to make it more interactive.
-
-      - _ref:
-          path: templates/navigation_buttons.yaml
-          vars:
-            previous_page_title: Creating a page
-            previous_page_id: tutorial-create-page
-            next_page_title: Interactive pages
-            next_page_id: tutorial-actions-operators

package/tutorial/tutorial-create-page-config.yaml

@@ -1,77 +0,0 @@
-# Copyright 2020-2021 Lowdefy, Inc
-
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-
-#     http://www.apache.org/licenses/LICENSE-2.0
-
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-
-_ref:
-  path: templates/general.yaml.njk
-  vars:
-    pageId: tutorial-create-page-config
-    pageTitle: Creating a page config
-    section: Tutorial
-    filePath: tutorial/tutorial-create-page-config.yaml
-    content:
-      - id: body_config
-        type: MarkdownWithCode
-        properties:
-          content: |
-            ##### `lowdefy.yaml`
-
-            ```yaml
-            name: lowdefy-project-template
-            version: CURRENT_LOWDEFY_VERSION
-
-            menus:
-              - id: default
-                links:
-                  - id: new-ticket
-                    type: MenuLink
-                    properties:
-                      icon: AiOutlinedAlert
-                      title: New ticket
-                    pageId: new-ticket
-                  - id: welcome
-                    type: MenuLink
-                    properties:
-                      icon: AiOutlinedHome
-                      title: Home
-                    pageId: welcome
-
-            pages:
-              - _ref: new-ticket.yaml
-              - id: welcome
-                type: PageHeaderMenu
-                #...
-            ```
-
-            ##### `new-ticket.yaml`
-
-            ```yaml
-            id: new-ticket
-            type: PageHeaderMenu
-            properties:
-              title: New ticket # The title in the browser tab.
-            layout:
-              contentJustify: center # Center the contents of the page.
-            blocks:
-              - id: content_card
-                type: Card
-                layout:
-                  size: 800 # Set the size of the card so it does not fill the full screen.
-                  contentGutter: 16 # Make a 16px gap between all blocks in this card.
-                blocks:
-                  - id: page_heading
-                    type: Title
-                    properties:
-                      content: Log a ticket # The content text of the title block.
-                      level: 3 # Make the title a little smaller (an html `<h3>`).
-            ```

package/tutorial/tutorial-create-page.yaml

@@ -1,196 +0,0 @@
-# Copyright 2020-2021 Lowdefy, Inc
-
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-
-#     http://www.apache.org/licenses/LICENSE-2.0
-
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-
-_ref:
-  path: templates/general.yaml.njk
-  vars:
-    pageId: tutorial-create-page
-    pageTitle: 2. Creating a page
-    section: Tutorial
-    filePath: tutorial/tutorial-create-page.yaml
-    prefetchPages:
-      - tutorial-add-blocks
-    content:
-      - id: tutorial_video
-        type: DangerousMarkdown
-        properties:
-          DOMPurifyOptions:
-            ADD_TAGS:
-              - iframe
-            ADD_ATTR:
-              - allowfullscreen
-              - allow
-              - frameborder
-          content: |
-            <iframe
-              width="800"
-              height="470"
-              src="https://www.youtube.com/embed/U5TDhz3x7Tk" frameborder="0"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
-            </iframe>
-      - id: body_create_page
-        type: MarkdownWithCode
-        properties:
-          content: |
-            Let's create a page for a web form where users can log a new ticket.
-
-            #### Step 2.1 - Create `new-ticket.yaml`
-
-            Create a new YAML file in the project directory (the same directory as the `lowdefy.yaml` file) called `new-ticket.yaml`, with the following content:
-
-            ```yaml
-            id: new-ticket
-            type: PageHeaderMenu
-            properties:
-              title: New ticket # The title in the browser tab.
-            layout:
-              contentJustify: center # Center the contents of the page.
-            blocks:
-              - id: content_card
-                type: Card
-                layout:
-                  size: 800 # Set the size of the card so it does not fill the full screen.
-                  contentGutter: 16 # Make a 16px gap between all blocks in this card.
-                blocks:
-                  - id: page_heading
-                    type: Title
-                    properties:
-                      content: Log a ticket # Change the title on the page.
-                      level: 3 # Make the title a little smaller (an html `<h3>`).
-            ```
-
-            #### Step 2.2 - Update `lowdefy.yaml`
-
-            Change the `lowdefy.yaml` to look like this:
-
-            ```yaml
-            name: lowdefy-project-template
-            lowdefy: 3.23.2
-
-            pages:
-            ################ -------- Copy from here -------- ################
-              - _ref: new-ticket.yaml
-            ################ -------- Copy to here ---------- ################
-              - id: welcome
-                type: PageHeaderMenu
-                properties:
-                  title: Welcome
-                # ...
-            ```
-
-      - id: warning_indent
-        type: Alert
-        properties:
-          type: warning
-          icon: AiFilledWarning
-          message: Indentation is important
-          description: YAML files use indentation to determine the data structure represented. If you are having any problems, make sure the indentation is the same as in the instructions.
-
-      - id: body_view_in_browser
-        type: Markdown
-        properties:
-          content: |
-            #### Step 2.3 - Navigate to the new page
-
-            Your browser should reload, and you should see a link in the header menu to the booking page. If you click on that link it should take you to a page that looks like this:
-
-      - id: example1
-        type: PageHeaderMenu
-        layout:
-          contentJustify: center
-        properties:
-          style:
-            minHeight: 300px
-          menu:
-            links:
-              - id: new-ticket
-                properties:
-                  title: new-ticket
-                type: MenuLink
-              - id: welcome
-                type: MenuLink
-                properties:
-                  title: welcome
-
-        blocks:
-          - id: content_card
-            type: Card
-            layout:
-              size: 600
-            blocks:
-              - id: page_heading
-                type: Title
-                properties:
-                  content: Log a ticket
-                  level: 3
-
-      - id: body_menus
-        type: MarkdownWithCode
-        properties:
-          content: |
-            If you click on the link in the menu, you should see that your browser path (the part after `localhost:3000` or `example.com`) changes from `welcome` to `new-ticket`.
-
-            ### What happened
-
-            - We created a new page with id `new-ticket`.
-            - We used a `_ref` operator 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.
-
-            ## Menus
-
-            A menu is created by default from all the pages in your app, in the order that they appear in the pages array. Often more control is needed over the menu. You might want to group menu items into different groups, change the title, exclude a page or add an icon. To do this, we can define a menu in the `menus` section of the `lowdefy.yaml` file.
-
-            #### Step 2.4 - Add the menu configuration
-
-            Copy the following and add it to your `lowdefy.yaml` file just before the pages section:
-
-            ```yaml
-            ################ -------- Copy from here -------- ################
-            menus:
-              - id: default
-                links:
-                  - id: new-ticket
-                    type: MenuLink
-                    properties:
-                      icon: AiOutlinedAlert
-                      title: New ticket
-                    pageId: new-ticket
-                  - id: welcome
-                    type: MenuLink
-                    properties:
-                      icon: AiOutlinedHome
-                      title: Home
-                    pageId: welcome
-            ################ -------- Copy to here ---------- ################
-            pages:
-              - _ref: new-ticket.yaml
-                # ...
-            ```
-
-            The menu links will now have icons and titles.
-
-            > If you would like to see how your config should look at this point, you can find it [here](tutorial-create-page-config).
-
-            ### Up next
-
-            In the next section we will add some more blocks to our page to create a form to capture the ticket data.
-
-      - _ref:
-          path: templates/navigation_buttons.yaml
-          vars:
-            previous_page_title: Getting started
-            previous_page_id: tutorial-start
-            next_page_title: Adding blocks
-            next_page_id: tutorial-add-blocks