diff --git a/packages/docs/404.yaml b/packages/docs/404.yaml new file mode 100644 index 000000000..cdc955a7a --- /dev/null +++ b/packages/docs/404.yaml @@ -0,0 +1,11 @@ +id: '404' +type: Context +style: + minHeight: 100vh +blocks: + - id: result404 + type: Result + properties: + status: '404' + title: '404' + subTitle: Sorry, the page you are visiting does not exist. diff --git a/packages/docs/lowdefy.yaml b/packages/docs/lowdefy.yaml index 9bfb39955..34ab12278 100644 --- a/packages/docs/lowdefy.yaml +++ b/packages/docs/lowdefy.yaml @@ -210,12 +210,27 @@ menus: - id: _eq type: MenuLink pageId: _eq + - id: _gt + type: MenuLink + pageId: _gt + - id: _gte + type: MenuLink + pageId: _gte + - id: _if + type: MenuLink + pageId: _if - id: _if_none type: MenuLink pageId: _if_none - id: _log type: MenuLink pageId: _log + - id: _lt + type: MenuLink + pageId: _lt + - id: _lte + type: MenuLink + pageId: _lte - id: _not type: MenuLink pageId: _not @@ -225,9 +240,18 @@ menus: - id: _product type: MenuLink pageId: _product + - id: _random + type: MenuLink + pageId: _random + - id: _subtract + type: MenuLink + pageId: _subtract - id: _sum type: MenuLink pageId: _sum + - id: _uuid + type: MenuLink + pageId: _uuid pages: - _ref: introduction.yaml @@ -273,9 +297,19 @@ pages: - _ref: operators/_and.yaml - _ref: operators/_divide.yaml - _ref: operators/_eq.yaml + - _ref: operators/_gt.yaml + - _ref: operators/_gte.yaml + - _ref: operators/_if.yaml - _ref: operators/_if_none.yaml + - _ref: operators/_lt.yaml + - _ref: operators/_lte.yaml - _ref: operators/_log.yaml - _ref: operators/_not.yaml - _ref: operators/_or.yaml - _ref: operators/_product.yaml + - _ref: operators/_random.yaml + - _ref: operators/_subtract.yaml - _ref: operators/_sum.yaml + - _ref: operators/_uuid.yaml + + - _ref: 404.yaml diff --git a/packages/docs/operators/_and.yaml b/packages/docs/operators/_and.yaml index 3a5d375e5..6a530e4b5 100644 --- a/packages/docs/operators/_and.yaml +++ b/packages/docs/operators/_and.yaml @@ -17,8 +17,10 @@ _ref: vars: pageId: _and pageTitle: _and - argument_types: array[any] - return_types: boolean + types: | + ``` + (values: any[]): boolean + ``` description: | The `_and` operator performs a logical `and` over an array of inputs, using javascript [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) and [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) rules. diff --git a/packages/docs/operators/_divide.yaml b/packages/docs/operators/_divide.yaml index 5cf6920cf..38bcec93a 100644 --- a/packages/docs/operators/_divide.yaml +++ b/packages/docs/operators/_divide.yaml @@ -17,10 +17,12 @@ _ref: vars: pageId: _divide pageTitle: _divide - argument_types: array[number] - return_types: number + types: | + ``` + ([numerator: number, denominator: number]): number + ``` description: | - The `_divide` operator divides two numbers. It takes an array of two numbers as input and returns a number. Dividing by zero will throw an error. + The `_divide` operator divides two numbers. It takes an array of two numbers as input and returns the first number divided by the second. Dividing by zero will throw an error. arguments: | #### array An array of two numbers. diff --git a/packages/docs/operators/_eq.yaml b/packages/docs/operators/_eq.yaml index b348cb67b..3b4aadae9 100644 --- a/packages/docs/operators/_eq.yaml +++ b/packages/docs/operators/_eq.yaml @@ -17,8 +17,10 @@ _ref: vars: pageId: _eq pageTitle: _eq - argument_types: array[any] - return_types: boolean + types: | + ``` + ([value1: any, value2: any]): boolean + ``` description: | The `_eq` operator tests if two values are equal. It takes an array of two values to test. @@ -31,8 +33,8 @@ _ref: #### Two strings: ```yaml _eq: - - Hello - - Hello + - "Hello" + - "Hello" ``` Returns: `true` diff --git a/packages/docs/operators/_gt.yaml b/packages/docs/operators/_gt.yaml new file mode 100644 index 000000000..281d1aa89 --- /dev/null +++ b/packages/docs/operators/_gt.yaml @@ -0,0 +1,63 @@ +# 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/operators.yaml.njk + vars: + pageId: _gt + pageTitle: _gt + types: | + ``` + ([value1: any, value2: any]): boolean + ``` + description: | + The `_gt` operator tests if the first value is greater than the second equal. It takes an array of two values to test. + + > The `_gt` operator tests using the javascript greater than operator. You can find a description of the algorithm used to compare two values [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Less_than). + + arguments: | + #### array + An array of two values to compare. + examples: | + #### Two numbers: + ```yaml + _gt: + - 4 + - 3 + ``` + Returns: `true` + + ```yaml + _gt: + - 1 + - 1 + ``` + Returns: `false` + + ```yaml + _gt: + - _sum: + - 3 + - 4 + - 8 + ``` + Returns: `false` + + #### Two strings: + ```yaml + _gt: + - "a" + - "b" + ``` + Returns: `false` diff --git a/packages/docs/operators/_gte.yaml b/packages/docs/operators/_gte.yaml new file mode 100644 index 000000000..a8c7c89e4 --- /dev/null +++ b/packages/docs/operators/_gte.yaml @@ -0,0 +1,63 @@ +# 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/operators.yaml.njk + vars: + pageId: _gte + pageTitle: _gte + types: | + ``` + ([value1: any, value2: any]): boolean + ``` + description: | + The `_gte` operator tests if the first value is greater than or equal to the second equal. It takes an array of two values to test. + + > The `_gte` operator tests using the javascript greater than or equal operator. You can find a description of the algorithm used to compare two values [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Less_than). + + arguments: | + #### array + An array of two values to compare. + examples: | + #### Two numbers: + ```yaml + _gte: + - 4 + - 3 + ``` + Returns: `true` + + ```yaml + _gte: + - 1 + - 1 + ``` + Returns: `true` + + ```yaml + _gte: + - _sum: + - 3 + - 4 + - 8 + ``` + Returns: `false` + + #### Two strings: + ```yaml + _gte: + - "a" + - "b" + ``` + Returns: `false` diff --git a/packages/docs/operators/_if_none.yaml b/packages/docs/operators/_if_none.yaml index d01ba51e3..b9fd46fd6 100644 --- a/packages/docs/operators/_if_none.yaml +++ b/packages/docs/operators/_if_none.yaml @@ -17,8 +17,10 @@ _ref: vars: pageId: _if_none pageTitle: _if_none - argument_types: array[any] - return_types: boolean + types: | + ``` + ([value: any, replacement: any]): any + ``` description: | The `_if_none` operator replaces the input value with an alternative if the value is of a "none-type" like `null` or `undefined`. arguments: | @@ -38,16 +40,16 @@ _ref: ```yaml _if_none: - null - - Replacement + - "Replacement" ``` - Returns: `Replacement` + Returns: `"Replacement"` ```yaml _if_none: - _state: does_not_exist # Value in state that does not exist - - Replacement + - "Replacement" ``` - Returns: `Replacement` + Returns: `"Replacement"` ```yaml _if_none: diff --git a/packages/docs/operators/_log.yaml b/packages/docs/operators/_log.yaml index d7d7da05a..6fefb0298 100644 --- a/packages/docs/operators/_log.yaml +++ b/packages/docs/operators/_log.yaml @@ -17,8 +17,10 @@ _ref: vars: pageId: _log pageTitle: _log - argument_types: any - return_types: any + types: | + ``` + (value: any): any + ``` description: | The `_log` operator logs it input to the console, and returns the value it received. Since it returns the value it received, it can be used to debug without affecting the rest of the configuration. arguments: | diff --git a/packages/docs/operators/_lt.yaml b/packages/docs/operators/_lt.yaml new file mode 100644 index 000000000..5e152a10d --- /dev/null +++ b/packages/docs/operators/_lt.yaml @@ -0,0 +1,63 @@ +# 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/operators.yaml.njk + vars: + pageId: _lt + pageTitle: _lt + types: | + ``` + ([value1: any, value2: any]): boolean + ``` + description: | + The `_lt` operator tests if the first value is less than the second equal. It takes an array of two values to test. + + > The `_lt` operator tests using the javascript less than operator. You can find a description of the algorithm used to compare two values [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Less_than). + + arguments: | + #### array + An array of two values to compare. + examples: | + #### Two numbers: + ```yaml + _lt: + - 4 + - 3 + ``` + Returns: `false` + + ```yaml + _lt: + - 1 + - 1 + ``` + Returns: `false` + + ```yaml + _lt: + - _sum: + - 3 + - 4 + - 8 + ``` + Returns: `true` + + #### Two strings: + ```yaml + _lt: + - "a" + - "b" + ``` + Returns: `true` diff --git a/packages/docs/operators/_lte.yaml b/packages/docs/operators/_lte.yaml new file mode 100644 index 000000000..2c34eedc4 --- /dev/null +++ b/packages/docs/operators/_lte.yaml @@ -0,0 +1,63 @@ +# 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/operators.yaml.njk + vars: + pageId: _lte + pageTitle: _lte + types: | + ``` + ([value1: any, value2: any]): boolean + ``` + description: | + The `_lte` operator tests if the first value is less than or equal to the second equal. It takes an array of two values to test. + + > The `_lte` operator tests using the javascript less than or equal to operator. You can find a description of the algorithm used to compare two values [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Less_than). + + arguments: | + #### array + An array of two values to compare. + examples: | + #### Two numbers: + ```yaml + _lte: + - 4 + - 3 + ``` + Returns: `false` + + ```yaml + _lte: + - 1 + - 1 + ``` + Returns: `true` + + ```yaml + _lte: + - _sum: + - 3 + - 4 + - 8 + ``` + Returns: `true` + + #### Two strings: + ```yaml + _lte: + - "a" + - "b" + ``` + Returns: `true` diff --git a/packages/docs/operators/_not.yaml b/packages/docs/operators/_not.yaml index dbd3f5a41..7626043c6 100644 --- a/packages/docs/operators/_not.yaml +++ b/packages/docs/operators/_not.yaml @@ -17,8 +17,10 @@ _ref: vars: pageId: _not pageTitle: _not - argument_types: any - return_types: boolean + types: | + ``` + (value: any): boolean + ``` description: | The `_not` operator returns the logical negation of the input. If the value is not a boolean, it will be converted to a boolean using javascript [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) and [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) rules. arguments: | diff --git a/packages/docs/operators/_or.yaml b/packages/docs/operators/_or.yaml index 8e42b8499..8e1324fbc 100644 --- a/packages/docs/operators/_or.yaml +++ b/packages/docs/operators/_or.yaml @@ -17,8 +17,10 @@ _ref: vars: pageId: _or pageTitle: _or - argument_types: array[any] - return_types: boolean + types: | + ``` + (values: any[]): boolean + ``` description: | The `_or` operator performs a logical `or` over an array of inputs, using javascript [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) and [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) rules. diff --git a/packages/docs/operators/_product.yaml b/packages/docs/operators/_product.yaml index eac5ec632..29e66e8bf 100644 --- a/packages/docs/operators/_product.yaml +++ b/packages/docs/operators/_product.yaml @@ -17,8 +17,10 @@ _ref: vars: pageId: _sum pageTitle: _sum - argument_types: array[any] - return_types: number + types: | + ``` + (values: any[]): number + ``` description: | The `_sum` operator takes the sum of the values given as input. If a value is not a number, the value is skipped. arguments: | diff --git a/packages/docs/operators/_random.yaml b/packages/docs/operators/_random.yaml new file mode 100644 index 000000000..f291d047c --- /dev/null +++ b/packages/docs/operators/_random.yaml @@ -0,0 +1,97 @@ +# 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/operators.yaml.njk + vars: + pageId: _random + pageTitle: _random + types: | + ``` + (type: string): string | number + (arguments: {type: string, length?: number, max?: number, min?: number}): string | number + ``` + description: | + The `_random` operator returns a random string or number. The types it accepts are `string`, `integer`, or `float`. + arguments: | + #### string + The type to generate. One of `string`, `integer`, or `float`. + + #### object + - `type: string` - The type to generate. One of `string`, `integer`, or `float`. + - `length: string` - The length of the string to generate if type is `string`. Default is `8`. + - `max: number` - The maximum possible number if type is one of `integer` or `float`. Default is `100` if `integer` or `1` if `float`. + - `min: number` - The minimum possible number if type is one of `integer` or `float`. Default is `0`. + examples: | + #### Random string: + ```yaml + _random: string + ``` + Returns: Random string of length 8. + + ```yaml + _random: + type: string + ``` + Returns: Random string of length 8. + + #### Random integer: + ```yaml + _random: integer + ``` + Returns: Random integer between 0 and 100 inclusive. + + ```yaml + _random: + type: integer + ``` + Returns: Random integer between 0 and 100 inclusive. + + #### Random float: + ```yaml + _random: float + ``` + Returns: Random float between 0 and 1 inclusive. + + ```yaml + _random: + type: float + ``` + Returns: Random float between 0 and 1 inclusive. + + #### Random string of length 12: + ```yaml + _random: + type: string + length: 12 + ``` + Returns: Random string of length 12. + + #### Random integer between 1 and 6 (Dice roll): + ```yaml + _random: + type: integer + min: 1 + max: 6 + ``` + Returns: Random integer between 1 and 6 inclusive. + + #### Random float between 34.2 and 42.89: + ```yaml + _random: + type: float + min: 34.2 + max: 42.89 + ``` + Returns: Random float between 34.2 and 42.89 inclusive. diff --git a/packages/docs/operators/_subtract.yaml b/packages/docs/operators/_subtract.yaml new file mode 100644 index 000000000..5b9484829 --- /dev/null +++ b/packages/docs/operators/_subtract.yaml @@ -0,0 +1,36 @@ +# 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/operators.yaml.njk + vars: + pageId: _subtract + pageTitle: _subtract + types: | + ``` + ([minuend: number, subtrahend: number]): number + ``` + description: | + The `_subtract` operator takes an array of two numbers as input and returns the second number subtracted from the first. + arguments: | + #### array + An array of two numbers. + examples: | + #### Subtract a number: + ```yaml + _subtract: + - 12 + - 4 + ``` + Returns: `8` diff --git a/packages/docs/operators/_sum.yaml b/packages/docs/operators/_sum.yaml index 0332d4d41..37db00129 100644 --- a/packages/docs/operators/_sum.yaml +++ b/packages/docs/operators/_sum.yaml @@ -17,8 +17,10 @@ _ref: vars: pageId: _product pageTitle: _product - argument_types: array[any] - return_types: number + types: | + ``` + (values: any[]): number + ``` description: | The `_product` operator takes the product of the values given as input. If a value is not a number, the value is skipped. arguments: | diff --git a/packages/docs/operators/_uuid.yaml b/packages/docs/operators/_uuid.yaml new file mode 100644 index 000000000..36628134c --- /dev/null +++ b/packages/docs/operators/_uuid.yaml @@ -0,0 +1,38 @@ +# 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/operators.yaml.njk + vars: + pageId: _uuid + pageTitle: _uuid + types: | + ``` + (value: any): string + ``` + description: | + The `_uuid` operator a version 4 [UUID](https://en.wikipedia.org/wiki/Universally_unique_identifier). A UUID is a random identifier that can be used as an id that is, for practical purposes, unique. It looks like: + + ``` + 123e4567-e89b-12d3-a456-426614174000 + ``` + arguments: | + #### any + The `_uuid` operator generates a UUID regardless of input. + examples: | + #### Generate a uuid: + ```yaml + _uuid: true + ``` + Returns: A version 4 UUID. diff --git a/packages/docs/templates/operators.yaml.njk b/packages/docs/templates/operators.yaml.njk index 7d2f96ce4..785550362 100644 --- a/packages/docs/templates/operators.yaml.njk +++ b/packages/docs/templates/operators.yaml.njk @@ -27,7 +27,8 @@ _ref: '.markdown-body': fontSize: 14px properties: - content: "`[ {{ argument_types }} ] => [ {{ return_types }} ]`" + content: + _var: types - id: description type: MarkdownWithHtml style: diff --git a/packages/docs/tutorial/next-steps.yaml b/packages/docs/tutorial/next-steps.yaml index 9d50d2ce7..445c34879 100644 --- a/packages/docs/tutorial/next-steps.yaml +++ b/packages/docs/tutorial/next-steps.yaml @@ -21,7 +21,7 @@ _ref: # prefetchPages: [] content: - id: md1 - type: Markdown + type: MarkdownWithHtml style: '.markdown-body': fontSize: 14px @@ -31,26 +31,42 @@ _ref: To carry on from here, you have a couple of options - # Look at an example app + ### Join the community - One of the best ways to learn is by doing things for yourself. You can clone an example app that is similar to something you want to build, and start experimenting from there. + At our [Github Discussions](https://github.com/lowdefy/lowdefy/discussions) page you can get help with any problems you have, share you ideas, ask questions, and show off the apps you have built. - #### CRUD example - - This example is a simple app app that has everything needed to get started managing data in a database. - - #### Survey example - - A simple survey example. - - #### Movies example - - A example reporting dashboard app based on a movies database. - - # Understand the concepts + ### Understand the concepts To get a more in-depth understanding of how everything works, you can start [here](/context). - # Play with blocks + ### Play with blocks The docs have an interactive playground where you can adjust a block's properties and see how that affects the block in real time. Go look at what you can do with a [`Button`](/Button). + + ### Look at an example app + + One of the best ways to learn is by doing things for yourself. You can clone an example app that is similar to something you want to build, and start experimenting from there. + + ###### CRUD example + + This example is a simple app that has everything needed to get started managing data in a database. + + ###### Survey example + + A simple survey example. + + ###### Ticketing system example + + An ticketing system with action history. + + ###### Movies example + + An example reporting dashboard app based on a movies database. + + - _ref: + path: templates/navigation_buttons.yaml + vars: + previous_page_title: Requests + previous_page_id: tutorial-requests + next_page_title: How it works + next_page_id: how-it-works diff --git a/packages/docs/tutorial/tutorial-actions-operators-config.yaml b/packages/docs/tutorial/tutorial-actions-operators-config.yaml index 25cb900d0..cf72e63c1 100644 --- a/packages/docs/tutorial/tutorial-actions-operators-config.yaml +++ b/packages/docs/tutorial/tutorial-actions-operators-config.yaml @@ -20,7 +20,7 @@ _ref: section: Tutorial content: - id: md1 - type: Markdown + type: MarkdownWithHtml style: '.markdown-body': fontSize: 14px diff --git a/packages/docs/tutorial/tutorial-actions-operators.yaml b/packages/docs/tutorial/tutorial-actions-operators.yaml index 6ac8c988a..6c529289c 100644 --- a/packages/docs/tutorial/tutorial-actions-operators.yaml +++ b/packages/docs/tutorial/tutorial-actions-operators.yaml @@ -22,7 +22,7 @@ _ref: # - tutorial-requests content: - id: md1 - type: Markdown + type: MarkdownWithHtml style: '.markdown-body': fontSize: 14px @@ -99,7 +99,7 @@ _ref: properties: title: Title - id: md2 - type: Markdown + type: MarkdownWithHtml style: '.markdown-body': fontSize: 14px @@ -205,7 +205,7 @@ _ref: - id: validate type: Validate - id: md3 - type: Markdown + type: MarkdownWithHtml style: '.markdown-body': fontSize: 14px @@ -315,7 +315,6 @@ _ref: Your final new ticket page should look and work like this: - - id: example3 type: PageHeaderMenu properties: @@ -407,7 +406,7 @@ _ref: - id: validate type: Validate - id: md4 - type: Markdown + type: MarkdownWithHtml style: '.markdown-body': fontSize: 14px diff --git a/packages/docs/tutorial/tutorial-add-blocks-config.yaml b/packages/docs/tutorial/tutorial-add-blocks-config.yaml index 9df756572..f8a756c2a 100644 --- a/packages/docs/tutorial/tutorial-add-blocks-config.yaml +++ b/packages/docs/tutorial/tutorial-add-blocks-config.yaml @@ -22,7 +22,7 @@ _ref: # - tutorial-editing-page content: - id: md1 - type: Markdown + type: MarkdownWithHtml style: '.markdown-body': fontSize: 14px diff --git a/packages/docs/tutorial/tutorial-add-blocks.yaml b/packages/docs/tutorial/tutorial-add-blocks.yaml index 282abb0f8..023cd8d33 100644 --- a/packages/docs/tutorial/tutorial-add-blocks.yaml +++ b/packages/docs/tutorial/tutorial-add-blocks.yaml @@ -22,7 +22,7 @@ _ref: # - tutorial-actions-operators content: - id: md1 - type: Markdown + type: MarkdownWithHtml style: '.markdown-body': fontSize: 14px @@ -152,7 +152,7 @@ _ref: type: primary icon: SaveOutlined - id: md2 - type: Markdown + type: MarkdownWithHtml style: '.markdown-body': fontSize: 14px diff --git a/packages/docs/tutorial/tutorial-create-page-config.yaml b/packages/docs/tutorial/tutorial-create-page-config.yaml index cb55cc230..1101bf265 100644 --- a/packages/docs/tutorial/tutorial-create-page-config.yaml +++ b/packages/docs/tutorial/tutorial-create-page-config.yaml @@ -22,7 +22,7 @@ _ref: # - tutorial-editing-page content: - id: md1 - type: Markdown + type: MarkdownWithHtml style: '.markdown-body': fontSize: 14px diff --git a/packages/docs/tutorial/tutorial-create-page.yaml b/packages/docs/tutorial/tutorial-create-page.yaml index 6fd38c0fd..82f86aefd 100644 --- a/packages/docs/tutorial/tutorial-create-page.yaml +++ b/packages/docs/tutorial/tutorial-create-page.yaml @@ -22,7 +22,7 @@ _ref: # - tutorial-add-blocks content: - id: md1 - type: Markdown + type: MarkdownWithHtml style: '.markdown-body': fontSize: 14px @@ -112,7 +112,7 @@ _ref: content: Log a ticket level: 3 - id: md3 - type: Markdown + type: MarkdownWithHtml style: '.markdown-body': fontSize: 14px diff --git a/packages/docs/tutorial/tutorial-development-server.yaml b/packages/docs/tutorial/tutorial-development-server.yaml index fa3d2fd1a..79fe4d710 100644 --- a/packages/docs/tutorial/tutorial-development-server.yaml +++ b/packages/docs/tutorial/tutorial-development-server.yaml @@ -22,7 +22,7 @@ _ref: # - tutorial-create-page content: - id: md1 - type: Markdown + type: MarkdownWithHtml style: '.markdown-body': fontSize: 14px diff --git a/packages/docs/tutorial/tutorial-editing-page.yaml b/packages/docs/tutorial/tutorial-editing-page.yaml index 8cbef35aa..7be668d92 100644 --- a/packages/docs/tutorial/tutorial-editing-page.yaml +++ b/packages/docs/tutorial/tutorial-editing-page.yaml @@ -22,7 +22,7 @@ _ref: # - tutorial-development-server content: - id: md1 - type: Markdown + type: MarkdownWithHtml style: '.markdown-body': fontSize: 14px @@ -53,7 +53,7 @@ _ref: To save these changes, we are going to make a commit in the project repository. - id: md2 - type: Markdown + type: MarkdownWithHtml style: '.markdown-body': fontSize: 14px @@ -89,7 +89,7 @@ _ref: properties: content: Hello World - id: md3 - type: Markdown + type: MarkdownWithHtml style: '.markdown-body': fontSize: 14px diff --git a/packages/docs/tutorial/tutorial-requests.yaml b/packages/docs/tutorial/tutorial-requests.yaml index 30f0b2caf..ecac50bb8 100644 --- a/packages/docs/tutorial/tutorial-requests.yaml +++ b/packages/docs/tutorial/tutorial-requests.yaml @@ -21,17 +21,19 @@ _ref: # prefetchPages: [] content: - id: md1 - type: Markdown + type: MarkdownWithHtml style: '.markdown-body': fontSize: 14px properties: content: | + We will be saving the data from our form in a Google Sheet, using the [`GoogleSheet`](\GoogleSheet). 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 1 - Go to [Google Sheets](https://docs.google.com/spreadsheets) and create a new Google sheet. + Go to [Google Sheets](https://docs.google.com/spreadsheets) and create a new Google Sheet. #### Step 2 @@ -78,27 +80,50 @@ _ref: #### Step 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. + 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 11 - Create a file called `.env` in your project directory with the following: + To use the private on Netlify, we need to base64 encode it, so it can be used in an environment variable. The easiest way to do this is to use the `btoa` function in a web browser console. On any webpage, right-click and choose "Inspect/Inspect Element". Then select the console tab. Enter the the following, using the `private_key` from your credentials file: - ##### `.env` - ``` - LOWDEFY_SECRET_SHEETS_CLIENT_EMAIL="__YOUR_CLIENT_EMAIL__" - LOWDEFY_SECRET_SHEETS_PRIVATE_KEY="__YOUR_PRIVATE_KEY__" + ```js + btoa("-----BEGIN PRIVATE KEY-----\cmHM04djsk...kpO7EXuQ=\n-----END PRIVATE KEY-----\n") ``` - Fill in the `client_email` and `private_key` values from your credentials JSON file (with the quotes). This will give the development server access to these secrets. + This will output a long stream of characters that are your key. - id: alert1 type: Alert properties: type: warning showIcon: false - message: The .env file contains your credentials. Do not commit this file to git. It should be listed in your .gitignore file if you started from the project template. + message: By base64 encoding your credentials you have not encrypted them. They are still just as sensitive as before. + - id: md2 - type: Markdown + type: MarkdownWithHtml + style: + '.markdown-body': + fontSize: 14px + properties: + content: | + #### Step 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 and your encoded private key values (without the quotes). This will give the development server access to these secrets. + - id: alert2 + type: Alert + properties: + type: warning + showIcon: false + message: The .env file contains your credentials. Do not commit this file to git. It should be listed in your .gitignore file if you started from the project template. + - id: md3 + type: MarkdownWithHtml style: '.markdown-body': fontSize: 14px @@ -134,12 +159,11 @@ _ref: In the first row of your sheet, add the following column headers: - - meeting_name - - number_of_attendees - - meeting_room - - date - - start_time - - end_time + - ticket_title + - ticket_type + - ticket_description + - confirm_restart + - created_date #### Step 2 @@ -147,7 +171,7 @@ _ref: ##### `lowdefy.yaml` - ``` + ```yaml name: lowdefy-project-template version: CURRENT_LOWDEFY_VERSION @@ -159,7 +183,8 @@ _ref: client_email: _secret: SHEETS_CLIENT_EMAIL private_key: - _secret: SHEETS_PRIVATE_KEY + _base64.decode: + _secret: SHEETS_PRIVATE_KEY sheetIndex: 0 spreadsheetId: __YOUR_SPREADSHEET_ID__ write: true @@ -197,7 +222,18 @@ _ref: connectionId: google_sheet properties: row: - _state: true + # 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 ----------- ################ blocks: # ... @@ -250,7 +286,9 @@ _ref: ### Up next - We would like to be able to see what data has been saved. In the next section we will create a page where we can see all the meetings that have been booked. + 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: diff --git a/packages/docs/tutorial/tutorial-setup.yaml b/packages/docs/tutorial/tutorial-setup.yaml index c8968bcdd..570c09ccb 100644 --- a/packages/docs/tutorial/tutorial-setup.yaml +++ b/packages/docs/tutorial/tutorial-setup.yaml @@ -22,7 +22,7 @@ _ref: # - tutorial-editing-page content: - id: md1 - type: Markdown + type: MarkdownWithHtml style: '.markdown-body': fontSize: 14px @@ -60,7 +60,7 @@ _ref: showIcon: false message: If your repository isn't found, click "Configure Netlify on Github", and give Netlify access to your repository. - id: md2 - type: Markdown + type: MarkdownWithHtml style: '.markdown-body': fontSize: 14px @@ -80,7 +80,7 @@ _ref: showIcon: false message: Your site won't work yet. You first need to configure the Lowdefy backend server in the next step. - id: md3 - type: Markdown + type: MarkdownWithHtml style: '.markdown-body': fontSize: 14px