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

package/tutorial/tutorial-deploy.yaml

@@ -1,146 +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-deploy
-    pageTitle: 6. Deploy to Netlify
-    section: Tutorial
-    filePath: tutorial/tutorial-deploy.yaml
-    prefetchPages:
-      - next-steps
-    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/VPUYzywryuQ" frameborder="0"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
-            </iframe>
-      - id: body_requirements
-        type: MarkdownWithCode
-        properties:
-          content: |
-            [Netlify](https://www.netlify.com) is a web app hosting service that is a great match for Lowdefy. They have great integrations with GitHub, GitLab, and Bitbucket, which make it easy to set up a continuous deployment process to deploy your apps.
-
-            ### Requirements
-
-            You will need to have the following:
-
-            - A Github account. You can create one [here](https://github.com/join).
-            - A Netlify account. You can create one [here](https://app.netlify.com/signup). It is easiest if you sign up with your Github account.
-            - [`git`](https://git-scm.com/downloads) version control installed on your computer.
-
-            #### Step 6.1 - Create a Github repository
-
-            Create a new Github repository. You can do that [here](https://github.com/new). Do not initialize the repository with a `.gitignore`, `README`, or licence file.
-
-            #### Step 6.2 - Add your files to the repository
-
-            Run the `git` commands to create a new repository on the command line:
-
-            ```bash
-            git init
-            git add .
-            git commit -m "Initial commit"
-            git branch -M main
-            git remote add origin https://github.com/__GITHUB_USERNAME__/__REPO_NAME__.git
-            git push -u origin main
-            ```
-
-            If you refresh your browser, you should see the `lowdefy.yaml` and `.gitignore` files in the repository.
-
-            #### Step 6.3 - Link your Github project to Netlify.
-
-            - Once logged in to Netlify, click the "New site from git" button.
-            - Choose Github, and authorize Netlify to access your repositories.
-            - Select your repository.
-
-      - id: info_configure_repo
-        type: Alert
-        properties:
-          type: info
-          icon: AiFilledInfoCircle
-          description: If your repository isn't found, click "Configure Netlify on Github", and give Netlify access to your repository.
-
-      - id: body_configure_netlify
-        type: MarkdownWithCode
-        properties:
-          content: |
-            #### Step 6.4 - Configure your Netlify deployment.
-
-            - Set your build command to `npx lowdefy@latest build-netlify`.
-            - Set your publish directory to `.lowdefy/publish`.
-            - Review the other settings, and deploy your site
-
-      - id: warning_configure_functions
-        type: Alert
-        properties:
-          type: warning
-          icon: AiFilledWarning
-          description: Your site won't work yet. You first need to configure the Lowdefy server in the next step.
-
-      - id: body_configure_functions
-        type: MarkdownWithCode
-        properties:
-          content: |
-            #### Step 6.5 - Configure the Lowdefy server.
-
-            - Click the "Site settings" button.
-            - Choose the "Functions" section in the left menu.
-            - Edit the settings and set your functions directory to `.lowdefy/functions`.
-
-            #### Step 6.6 - Add your Google Sheets credentials
-
-            Go to "Site settings", then "Build and deploy" in the left menu. Scroll down and select "Edit variables" in the "Environment" section.
-
-            Set the variables `LOWDEFY_SECRET_SHEETS_CLIENT_EMAIL` and `LOWDEFY_SECRET_SHEETS_PRIVATE_KEY` to the same values as in your `.env` file.
-
-            #### Step 6.7 - Redeploy your site
-
-            - Go to the "Deploys" tab.
-            - Click the "Trigger deploy" button and deploy your site.
-            - Wait for you site to finish deploying.
-
-            #### Step 6.8 - Enjoy your app
-
-            Go to your shiny new app. On the "Site overview" tab you will find your site url. Go to this url and you should see your app.
-
-            #### Step 6.9 - Try out Netlify's deploy preview.
-
-            Edit the `lowdefy.yaml` file on Github. Commit the changes on a new branch, and create a pull request. Netlify will run checks on your pull request, and generate a deploy preview. Once the deploy preview has finished building, you can click on the "details" link and this will take you to preview of your changes.
-
-            ### Up next
-
-            This is the end of the tutorial. If you have any feedback or suggestions, we would greatly appreciate that. You can start a new discussion [here](https://github.com/lowdefy/lowdefy/discussions).
-
-            Our next steps will show you some of the things you could do next.
-      - _ref:
-          path: templates/navigation_buttons.yaml
-          vars:
-            previous_page_title: Requests
-            previous_page_id: tutorial-requests
-            next_page_title: Next steps
-            next_page_id: next-steps

package/tutorial/tutorial-requests-config.yaml

@@ -1,186 +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-requests-config
-    pageTitle: Requests config
-    section: Tutorial
-    filePath: tutorial/tutorial-requests-config.yaml
-    content:
-      - id: body_config
-        type: MarkdownWithCode
-        properties:
-          content: |
-            ##### `.env`
-            ```
-            LOWDEFY_SECRET_SHEETS_CLIENT_EMAIL=__YOUR_CLIENT_EMAIL__
-            LOWDEFY_SECRET_SHEETS_PRIVATE_KEY=__YOUR_ENCODED_PRIVATE_KEY__
-            ```
-
-            ##### `lowdefy.yaml`
-            ```yaml
-            name: lowdefy-project-template
-            version: CURRENT_LOWDEFY_VERSION
-
-            connections:
-              - id: google_sheet
-                type: GoogleSheet
-                properties:
-                  client_email:
-                    _secret: SHEETS_CLIENT_EMAIL
-                  private_key:
-                    _base64.decode:
-                      _secret: SHEETS_PRIVATE_KEY
-                  sheetIndex: 0
-                  spreadsheetId: __YOUR_SPREADSHEET_ID__
-                  write: true
-
-            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
-
-            requests:
-              - id: save_data
-                type: GoogleSheetAppendOne
-                connectionId: google_sheet
-                properties:
-                  row:
-                    # Get all the values to save from state
-                    ticket_title:
-                      _state: ticket_title
-                    ticket_type:
-                      _state: ticket_type
-                    ticket_description:
-                      _state: ticket_description
-                    confirm_restart:
-                      _state: confirm_restart
-                    # Add the date the row was created using the `_date.now` operator.
-                    created_date:
-                      _date: now
-
-            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
-                    required: true
-                    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
-                    required: true
-                    properties:
-                      title: Title
-                  - id: ticket_type
-                    type: ButtonSelector
-                    required: true
-                    properties:
-                      title: Ticket type
-                      options: # Set the allowed options
-                        - Feature request
-                        - Bug report
-                        - Question
-                  - id: ticket_description
-                    type: TextArea
-                    properties:
-                      title: Description
-                  - id: confirm_restart
-                    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.
-                        - Bug report
-                    validate:
-                      # Show a warning that shows before validate is called
-                      # and does not block Validate action.
-                      - status: warning
-                        message: If you did not restart your device, we will ask you to restart it.
-                        pass:
-                          _eq:
-                            - _state: confirm_restart
-                            - Yes
-                    properties:
-                      title: Did you restart your device?
-                      label:
-                        colon: false # Hide the label colon
-                      options:
-                        - Yes
-                        - No
-                  - 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
-                    events:
-                      onClick:
-                        - id: reset
-                          type: Reset
-                  - 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
-                    events:
-                      onClick:
-                        - id: validate
-                          type: Validate
-                        - id: save_data # Make a request to Google Sheets
-                          type: Request
-                          params: save_data
-                        - id: reset # Reset the form once data has been submitted
-                          type: Reset
-            ```

package/tutorial/tutorial-requests.yaml

@@ -1,338 +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-requests
-    pageTitle: 5. Requests
-    section: Tutorial
-    filePath: tutorial/tutorial-requests.yaml
-    prefetchPages:
-      - tutorial-deploy
-    content:
-      - id: body_google_cloud
-        type: MarkdownWithCode
-        properties:
-          content: |
-            We will be saving the data from our form in a Google Sheet, using the [`GoogleSheet`](/GoogleSheet) connection. To do this, we will first need to set up a Google Cloud Platform project to get credentials to access the API.
-
-            ### Creating a Google Sheet and getting credentials
-
-            #### Step 5.1
-
-            Go to [Google Sheets](https://docs.google.com/spreadsheets) and create a new Google Sheet.
-
-            #### Step 5.2
-
-            Go to [console.cloud.google.com](https://console.cloud.google.com) and sign in.
-
-            #### Step 5.3
-
-            Click on the "Select a project" dropdown at the top left, and then choose "NEW PROJECT". Give your project a name and click "Create".
-
-            #### Step 5.4
-
-            Go to the "APIs and Services" section, and the click "ENABLE APIS AND SERVICES" button.
-
-            #### Step 5.5
-
-            Search for "Sheets" and select the Google Sheets API.
-
-            #### Step 5.6
-
-            Click "Enable".
-
-            #### Step 5.7
-
-            Click "CREATE CREDENTIALS".
-
-            #### Step 5.8
-
-            Choose the following:
-            - **Which API are you using?**: Google Sheets API
-            - **Where will you be calling the API from?** : Web server (e.g. node.js, Tomcat)
-            - **What data will you be accessing?**: Application data
-            - **Are you planning to use this API with App Engine or Compute Engine?**: No, I'm not using them
-
-            Then click "What credentials do I need?"
-
-            #### Step 5.9
-
-            Choose the following:
-            - Give the account a name.
-            - Chose "Project > Editor" as the role.
-            - Choose JSON as the key type.
-
-            Click continue.
-
-            #### Step 5.10
-
-            You will be asked to save a file. This file contains the credentials to access your sheet, so make sure to handle it securely. Download the file. Do not commit it to source control.
-
-            #### Step 5.11
-
-            In the next section we will be deploying our app using Netlify. To use the private key on Netlify, we need to base64 encode it, since the new-line characters cause problems when used in an environment variable.
-
-            You can use the converter below to convert your key. This will output a long stream of characters that are your encoded key.
-
-            > The base64 conversion happens on the web client. We won't store your key. You can look at how the key is encoded [here](https://github.com/lowdefy/lowdefy/blob/main/packages/docs/tutorial/tutorial-requests.yaml) or convert your key in the browser console using [btoa()](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/btoa).
-
-      # Because of weird layout with flex
-      - id: base_64_box
-        type: Box
-        layout:
-          contentGutter: 16
-        blocks:
-          - id: base64_input
-            type: TextInput
-            layout:
-              flex: 1 1 auto
-            properties:
-              label:
-                disabled: true
-              placeholder: Paste your key here (without quotes)
-
-          - id: base64_encode_button
-            type: Button
-            layout:
-              flex: 0 1 auto
-            properties:
-              title: Encode
-            events:
-              onClick:
-                - id: convert_key
-                  type: SetState
-                  params:
-                    base64_ouput:
-                      _base64.encode:
-                        _string.replace:
-                          on:
-                            _state: base64_input
-                          regex: "\\\\n"
-                          newSubstr: "\n"
-                          regexFlags: g
-
-      - id: base64_output
-        type: Paragraph
-        style:
-          maxWidth: 600px
-        visible:
-          _not:
-            _eq:
-              - _state: base64_ouput
-              - null
-        properties:
-          code: true
-          copyable: true
-          content:
-            _state: base64_ouput
-
-      - id: warning_base64
-        type: Alert
-        properties:
-          type: warning
-          icon: AiFilledWarning
-          description: By base64 encoding your credentials you have not encrypted them. They are still just as sensitive as before.
-
-      - id: body_env
-        type: MarkdownWithCode
-        properties:
-          content: |
-            #### Step 5.12
-
-            Create a file called `.env` in your project directory with the following:
-
-            ##### `.env`
-            ```
-            LOWDEFY_SECRET_SHEETS_CLIENT_EMAIL=__YOUR_CLIENT_EMAIL__
-            LOWDEFY_SECRET_SHEETS_PRIVATE_KEY=__YOUR_ENCODED_PRIVATE_KEY__
-            ```
-
-            Fill in the client email from the credentials file and your encoded private key values (without quotes). This will give the development server access to these secrets.
-
-      - id: warning_dont_commit
-        type: Alert
-        properties:
-          type: warning
-          icon: AiFilledWarning
-          description: The .env file contains your credentials. Do not commit this file to git. It should be listed in your .gitignore file if you used the CLI init command.
-
-      - id: body_use_connection
-        type: MarkdownWithCode
-        properties:
-          content: |
-            #### Step 5.13
-
-            Because we changed the environment variables, we need to restart the dev server. Run `npx lowdefy@latest dev` again to restart the server.
-
-            #### Step 5.14
-
-            We need to give our service account access to our Google Sheet. Go to your Google Sheet and click the "Share" button. Share the sheet with the client email of the service account we just created, with the "Editor" role.
-
-            ### What happened
-
-            We created a Google Cloud Platform (GCP) project, and created a service account in that project that we can use to access Google sheets. This gave us the credentials we need for the [`GoogleSheet`](/GoogleSheet) connection.
-
-            We set up these credentials for our local dev environment using a `.env` file. The `.env` file sets [environment variables](https://en.wikipedia.org/wiki/Environment_variable) in the process the server is running in.
-
-            Because we set environment variables that start with `LOWDEFY_SECRET_`, these values become part of the [`secrets`](/Secrets) object, and can be accessed using the [`_secret`](/_secret) operator.
-
-            ### Using the Google Sheets connection
-
-            #### Step 5.15
-
-            To use a Google Sheet with the Lowdefy connection, we first need to define the columns in the sheet. This will be the same fields as the data we will be saving later.
-
-            In the first row of your sheet, add the following column headers:
-
-            - ticket_title
-            - ticket_type
-            - ticket_description
-            - confirm_restart
-            - created_date
-
-            #### Step 5.16
-
-            In your `lowdefy.yaml` file, add the following:
-
-            ##### `lowdefy.yaml`
-
-            ```yaml
-            name: lowdefy-project-template
-            version: CURRENT_LOWDEFY_VERSION
-
-            ################ -------- Copy from here -------- ################
-            connections:
-              - id: google_sheet
-                type: GoogleSheet
-                properties:
-                  client_email:
-                    _secret: SHEETS_CLIENT_EMAIL
-                  private_key:
-                    _base64.decode:
-                      _secret: SHEETS_PRIVATE_KEY
-                  sheetIndex: 0
-                  spreadsheetId: __YOUR_SPREADSHEET_ID__
-                  write: true
-            ################ ------- Copy to here ----------- ################
-
-            menus:
-              # ...
-            ```
-
-            #### Step 5.17
-
-            Note down your spreadsheetId. You can find this by looking at the url in your browser when you are looking at your sheet. It should look something like:
-
-            `https://docs.google.com/spreadsheets/d/{spreadsheetId}/edit#gid=0`
-
-            where the spreadsheetId is a 44 character random string. Fill in your spreadsheetId in the spreadsheet connection.
-
-            #### Step 5.18
-
-            In your `new-ticket.yaml` file, add the following request:
-
-            ##### `pages/new-ticket.yaml`
-
-            ```yaml
-            id: new-ticket
-            type: PageHeaderMenu
-            ################ -------- Copy from here -------- ################
-            requests:
-              - id: save_data
-                type: GoogleSheetAppendOne
-                connectionId: google_sheet
-                properties:
-                  row:
-                    # Get all the values to save from state
-                    ticket_title:
-                      _state: ticket_title
-                    ticket_type:
-                      _state: ticket_type
-                    ticket_description:
-                      _state: ticket_description
-                    confirm_restart:
-                      _state: confirm_restart
-                    # Add the date the row was created using the `_date.now` operator.
-                    created_date:
-                      _date: now
-            ################ ------- Copy to here ----------- ################
-
-            properties:
-              title: New ticket # The title in the browser tab.
-            layout:
-              contentJustify: center # Center the contents of the page
-            blocks:
-              # ...
-            ```
-
-            #### Step 5.19
-
-            In your `new-ticket.yaml` file, add the following action to the submit button:
-
-            ##### `pages/new-ticket.yaml`
-
-            ```yaml
-            id: new-ticket
-            # ...
-            blocks:
-              - id: content_card
-                # ...
-                blocks:
-                  - id: page_heading
-                    # ...
-                    # ...
-                    # ...
-                  - id: submit_button
-                    type: Button
-                    #...
-                    events:
-                      onClick:
-                        - id: validate
-                          type: Validate
-                        ################ -------- Copy from here -------- ################
-                        - id: save_data # Make a request to Google Sheets
-                          type: Request
-                          params: save_data
-                        - id: reset # Reset the form once data has been submitted
-                          type: Reset
-                        ################ ------- Copy to here ----------- ################
-            ```
-
-            #### Step 5.20
-
-            If you click the submit button, you should see your data submitted to your Google Sheet.
-
-            ### What happened
-
-            We set up the column names we will be using in our Google Sheet. We need to do this to use the `GoogleSheet` connection.
-
-            We defined the `GoogleSheet` connection we will be using in our app, using the credentials we obtained earlier.
-
-            We also defined a `GoogleSheetAppendOne` request, to save the data to our sheet, and called that request when clicking the submit button.
-
-            > You can find the final configuration files for this section [here](tutorial-requests-config).
-
-            ### Up next
-
-            Up next we will be deploying our app using Netlify. Then it will be live, on the internet, for anyone to see 🚀.
-
-      - _ref:
-          path: templates/navigation_buttons.yaml
-          vars:
-            previous_page_title: Interactive pages
-            previous_page_id: tutorial-actions-operators
-            next_page_title: Deploy to Netlify
-            next_page_id: tutorial-deploy