@lowdefy/docs 3.22.0 → 3.23.2

package/CHANGELOG.md

@@ -3,6 +3,59 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.23.2](https://github.com/lowdefy/lowdefy/compare/v3.23.1...v3.23.2) (2021-11-29)
+
+**Note:** Version bump only for package @lowdefy/docs
+
+
+
+
+
+## [3.23.1](https://github.com/lowdefy/lowdefy/compare/v3.23.0...v3.23.1) (2021-11-20)
+
+**Note:** Version bump only for package @lowdefy/docs
+
+
+
+
+
+# [3.23.0](https://github.com/lowdefy/lowdefy/compare/v3.23.0-alpha.0...v3.23.0) (2021-11-19)
+
+
+### Bug Fixes
+
+* **docs:** Fix _ref resolver function example. ([0903094](https://github.com/lowdefy/lowdefy/commit/0903094ce531f4d8ab7849deb91ab3d6b7e5fd82))
+* **docs:** Included onSearch event example in MultipleSelector and Selector docs. ([0e53cb8](https://github.com/lowdefy/lowdefy/commit/0e53cb8f93ed49e0122ac038113d7378f67501f7))
+
+
+
+
+
+# [3.23.0-alpha.0](https://github.com/lowdefy/lowdefy/compare/v3.22.0...v3.23.0-alpha.0) (2021-11-09)
+
+
+### Bug Fixes
+
+* Add _switch operator to docs. ([c5c6f0c](https://github.com/lowdefy/lowdefy/commit/c5c6f0c9a5b0dfc89e09835d3ab940195a077504))
+* Support .yml in lowdefy.yaml file. ([0f7cc2a](https://github.com/lowdefy/lowdefy/commit/0f7cc2a7612a5ad9a8164d5a5437dde5c6d7da49)), closes [#902](https://github.com/lowdefy/lowdefy/issues/902)
+* **docs:** Add avatar and links to blog template. ([d855599](https://github.com/lowdefy/lowdefy/commit/d855599398cae041933dd8b11aaf77648f87d4c2))
+* **docs:** Add how to generate pdfs. ([7b35550](https://github.com/lowdefy/lowdefy/commit/7b35550fa944995be8f8a9d0e809971cabcf12af))
+* **docs:** Fix the iframe videos in the docs. ([c4a957a](https://github.com/lowdefy/lowdefy/commit/c4a957a12ea5adf018b373d8da8c5116e064205f))
+* improvements on blog template. ([30e2291](https://github.com/lowdefy/lowdefy/commit/30e22917fed9932e43cde942532654aa4a6aeac6))
+* **docs:** Add how to generate CSVs. ([2cc8e45](https://github.com/lowdefy/lowdefy/commit/2cc8e45b165aa755dceb9e40525f8a0511fb3485))
+
+
+### Features
+
+* **docs:** Add how to generate csv. ([3257f51](https://github.com/lowdefy/lowdefy/commit/3257f514b95f7cafb8ac30998194e7ae0a327862))
+* **docs:** Add videos to how tos. ([57c7779](https://github.com/lowdefy/lowdefy/commit/57c77798f0356c606cf90bfd36a4f63ab8d0ff36))
+* Add generate pdf how to. ([5bde460](https://github.com/lowdefy/lowdefy/commit/5bde460934e2dc94d677af5f287e3c85c0ff4c34))
+* **docs:** Added switch operator documentation. ([7c42c78](https://github.com/lowdefy/lowdefy/commit/7c42c7882422ea89332b32bcef985b5bc5059ec8))
+
+
+
+
+
 # [3.22.0](https://github.com/lowdefy/lowdefy/compare/v3.22.0-alpha.1...v3.22.0) (2021-09-27)
 
 

package/actions/JsAction.yaml

@@ -66,7 +66,7 @@ _ref:
       ```yaml
       # lowdefy.yaml
       name: intercom-example
-      lowdefy: '3.22.0'
+      lowdefy: '3.23.2'
       app:
         html:
           appendBody: |
@@ -137,7 +137,7 @@ _ref:
       ```yaml
       # file: lowdefy.yaml
       name: text-highlight-example
-      lowdefy: '3.22.0'
+      lowdefy: '3.23.2'
       app:
         html:
           # Load the custom modules into the index.html head tag.

package/blocks/display/DangerousHtml.yaml

@@ -22,10 +22,10 @@ _ref:
     init_property_values:
       html: <a href="https://lowdefy.com">Lowdefy Website</a>
     description_content: |
-      A block to render HTML with the ability to customize the [DOMPurify's options](https://github.com/cure53/DOMPurify#can-i-configure-dompurify). 
-      
-      > The DangerousHtml block sanitizes HTML using [DOMPurify's](https://github.com/cure53/DOMPurify) with the ability to customize the sanitization options. This comes with some security considerations, please consider [DOMPurify's Security Goals and Threat Model](https://github.com/cure53/DOMPurify/wiki/Security-Goals-&-Threat-Model) for more details regarding the security impact of using the DangerousHtml block. 
-      > 
+      A block to render HTML with the ability to customize the [DOMPurify's options](https://github.com/cure53/DOMPurify#can-i-configure-dompurify).
+
+      > The DangerousHtml block sanitizes HTML using [DOMPurify's](https://github.com/cure53/DOMPurify) with the ability to customize the sanitization options. This comes with some security considerations, please consider [DOMPurify's Security Goals and Threat Model](https://github.com/cure53/DOMPurify/wiki/Security-Goals-&-Threat-Model) for more details regarding the security impact of using the DangerousHtml block.
+      >
       > In short, it is strongly advised to never render any user input DangerousHtml content, only render hardcoded or trusted HTML content.
 
     examples:
@@ -33,31 +33,30 @@ _ref:
         block:
           id: basic_example
           type: DangerousHtml
-          properties: 
+          properties:
             html: |
               <div style="background: #123456; padding: 10px;"><h1 style="color: white;">A simple white title box</h1></div>
       - title: DangerousHtml with iframes sanitized
         block:
           id: sanitized_iframes_example
           type: DangerousHtml
-          properties: 
+          properties:
             html: |
-              The iframe was removed: <iframe style="max-width: 512px;" width="100%" src="https://www.youtube.com/embed/7N7GWdlQJlU" frameborder="0"  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>      - title: DangerousHtml with iframes enabled
+              The iframe was removed: <iframe width="560" height="315" src="https://www.youtube.com/embed/pkCJpDleMtI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>      - title: DangerousHtml with iframes enabled
       - title: DangerousHtml with iframes not sanitized
         block:
           id: iframes_example
           type: DangerousHtml
           properties:
-            DOMPurifyOptions: 
-              ADD_TAGS: 
+            DOMPurifyOptions:
+              ADD_TAGS:
                 - iframe
             html: |
-              The iframe was not removed: <iframe style="max-width: 512px;" width="100%" src="https://www.youtube.com/embed/7N7GWdlQJlU" frameborder="0"  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+              The iframe was not removed: <iframe width="560" height="315" src="https://www.youtube.com/embed/pkCJpDleMtI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
       - title: DangerousHtml basic sanitization
         block:
           id: sanitized_example
           type: DangerousHtml
-          properties: 
+          properties:
             html: |
               <div style="color: red; border: 2px dashed blue; padding: 10px;"><script>alert("hello world")</script><img src=x onerror=alert("img") />A little bit of bad html sanitized.</div>
-  

package/blocks/display/DangerousMarkdown.yaml

@@ -24,23 +24,23 @@ _ref:
         ## Some Html content:
 
         <div style="background: #123456; padding: 10px;"><h4 style="color: white;">A simple white title box</h4></div>
-        
+
     description_content: |
       Render markdown content which can include HTML elements. If the markdown content does not need to render HTML, use the [Markdown](/Markdown) or [MarkdownWithCode](/MarkdownWithCode) blocks instead. Specify what HTML element to allow or remove by changing the default modifying the [DOMPurify's options](https://github.com/cure53/DOMPurify#can-i-configure-dompurify).
-      
-      > The DangerousMarkdown block sanitizes the markdown content using [DOMPurify's](https://github.com/cure53/DOMPurify) before converting the markdown to HTML. DangerousMarkdown provides the ability to customize the sanitization options. This comes with some security considerations, please consider [DOMPurify's Security Goals and Threat Model](https://github.com/cure53/DOMPurify/wiki/Security-Goals-&-Threat-Model) for more details regarding the security impact of using the DangerousMarkdown block. 
-      > 
+
+      > The DangerousMarkdown block sanitizes the markdown content using [DOMPurify's](https://github.com/cure53/DOMPurify) before converting the markdown to HTML. DangerousMarkdown provides the ability to customize the sanitization options. This comes with some security considerations, please consider [DOMPurify's Security Goals and Threat Model](https://github.com/cure53/DOMPurify/wiki/Security-Goals-&-Threat-Model) for more details regarding the security impact of using the DangerousMarkdown block.
+      >
       > In short, it is strongly advised to never render any user input DangerousMarkdown content, only render hardcoded or trusted markdown and HTML content.
-    
+
     examples:
       - title: DangerousMarkdown headings
         block:
           id: iframes_example
           type: DangerousMarkdown
           properties:
-            DOMPurifyOptions": 
-              ADD_TAGS": 
+            DOMPurifyOptions":
+              ADD_TAGS":
                 - iframe
             content: |
               # Markdown with an iframe:
-              <iframe style="max-width: 512px;" width="100%" src="https://www.youtube.com/embed/7N7GWdlQJlU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+              <iframe width="560" height="315" src="https://www.youtube.com/embed/pkCJpDleMtI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

package/blocks/input/MultipleSelector.yaml

@@ -35,3 +35,83 @@ _ref:
 
       > Other selector blocks are `ButtonSelector`, `CheckboxSelector`, `RadioSelector` and `Selector`.
 
+    examples:
+      - title: Listing options from database search
+        block:
+          id: example_selector
+          type: MultipleSelector
+          requests:
+            - id: example_search
+              type: MongoDBAggregation
+              connectionId: companies
+              properties:
+                pipeline:
+                  - $search:
+                      compound:
+                        should:
+                          - wildcard:
+                              query:
+                                _string.concat:
+                                  - '*'
+                                  - _state: search_input
+                                  - '*'
+                              path: # field names to search in the companies collection
+                                - _id
+                                - company_name
+                              allowAnalyzedField: true
+                  - $addFields:
+                      score:
+                        $meta: searchScore
+                  - $sort:
+                      score: -1
+                  - $limit: 50
+                  - $project:
+                      _id: 0
+                      value: $_id
+                      label:
+                        $concat:
+                          - $_id
+                          - ' - '
+                          - $ifNull:
+                              - $company_name
+                              - ''
+          properties:
+            placeholder: Search
+            options: # search request results will be used as options
+              _array.concat:
+                - _if_none:
+                    - _state: example_options
+                    - []
+                - _if_none:
+                    - _request: example_search
+                    - []
+            label:
+              disabled: true
+          events:
+            onChange: # selector onChange actions - triggered when the value of the selector changes
+              - id: set_state
+                type: SetState
+                params:
+                  example_options:
+                    _mql.aggregate:
+                      on:
+                        _array.concat:
+                          - _state: example_options
+                          - _request: example_search
+                      pipeline:
+                        - $match:
+                            value:
+                              $in:
+                                _state: example_selector
+            onSearch: # selector onSearch actions - triggered when the user types in the search input
+              debounce:
+                ms: 500
+              try:
+                - id: set_state
+                  type: SetState
+                  params:
+                    search_input:
+                      _event: value
+                - id: perform_search
+                  type: Request
+                  params: example_search

package/blocks/input/Selector.yaml

@@ -34,3 +34,65 @@ _ref:
       The options for the selector can be provides as either an array of primitive values (Strings, numbers, booleans or dates), or as an array of label-value pairs, where the label is a string, and the value can be of any type, including objects like dates and arrays.
 
       > Other selector blocks are `ButtonSelector`, `CheckboxSelector`, `MultipleSelector` and `RadioSelector`.
+
+    examples:
+      - title: Listing options from database search
+        block:
+          id: example_selector
+          type: Selector
+          requests:
+            - id: example_search
+              type: MongoDBAggregation
+              connectionId: companies
+              properties:
+                pipeline:
+                  - $search:
+                      compound:
+                        should:
+                          - wildcard:
+                              query:
+                                _string.concat:
+                                  - '*'
+                                  - _state: search_input
+                                  - '*'
+                              path: # field names to search in the companies collection
+                                - _id
+                                - company_name
+                              allowAnalyzedField: true
+                  - $addFields:
+                      score:
+                        $meta: searchScore
+                  - $sort:
+                      score: -1
+                  - $limit: 50
+                  - $project: # selector options value, label pairs
+                      _id: 0
+                      value: $_id
+                      label:
+                        $concat:
+                          - $_id
+                          - ' - '
+                          - $ifNull:
+                              - $company_name
+                              - ''
+          properties:
+            placeholder: Search
+            options:
+              _if_none: # search request results will be used as options
+                - _request: example_search
+                - []
+            label:
+              disabled: true
+          events:
+            onSearch: # selector onSearch actions
+              debounce:
+                ms: 500
+              try:
+                - id: set_state
+                  type: SetState
+                  params:
+                    search_input:
+                      _event: value
+                - id: perform_search
+                  type: Request
+                  params: example_search

package/concepts/custom-blocks.yaml

@@ -45,7 +45,7 @@ _ref:
 
             ```yaml
             name: dashboard-app
-            lowdefy: 3.22.0
+            lowdefy: 3.23.2
             types:
               AmChartsXY:
                 url: https://blocks-cdn.lowdefy.com/v3.10.1/blocks-amcharts/meta/AmChartsXY.json
@@ -95,7 +95,7 @@ _ref:
 
             ```yaml
             name: dashboard-app
-            lowdefy: 3.22.0
+            lowdefy: 3.23.2
             types:
               MyCustomBlock:
                 url: http://localhost:3002/meta/MyCustomBlock.json

package/concepts/custom-code.yaml

@@ -53,7 +53,7 @@ _ref:
 
             ```yaml
             name: google-analytics-example
-            lowdefy: 3.22.0
+            lowdefy: 3.23.2
             # ...
             app:
               html:
@@ -98,7 +98,7 @@ _ref:
             ```yaml
             # /lowdefy.yaml
             name: json-todos
-            lowdefy: 3.22.0
+            lowdefy: 3.23.2
             app:
               html:
                 appendHead:
@@ -156,7 +156,7 @@ _ref:
             ```yaml
             # /lowdefy.yaml
             name: operator-example
-            lowdefy: 3.22.0
+            lowdefy: 3.23.2
             app:
               html:
                 appendHead:

package/concepts/lowdefy-schema.yaml

@@ -43,7 +43,19 @@ _ref:
             The config object has the following properties:
 
             - `homePageId: string`: The pageId of the page that should be loaded when a user loads the app without a pageId in the url route. This is the page that is loaded when you navigate to `yourdomain.com`.
+            - `experimental_initPageId: string`: The pageId of the page that should be loaded when app is initialized. User is then redirected to requeted page. You can use onInit/onInitAsync/onEnter/onEnterAsync events to fetch and prepare global variables for other parts of the app.
 
+      - id: alert1
+        type: Alert
+        properties:
+          type: warning
+          showIcon: false
+          message: Init page is an experimental feature, that may disappear in future releases as well as the flag itself can be changed. Use at your own risk.
+
+      - id: md2
+        type: MarkdownWithCode
+        properties:
+          content: |
             # Global
 
             Any data that you wish to use in your app can be stored in the __global__ object, and accessed using the [`_global`](/_global) operator. This is a good place to store data or configuration that is used throughout the app, for example the url of a logo or configuration of a page, since then these are only written once, and can be updated easily.
@@ -201,6 +213,10 @@ _ref:
 
             The `_ref` operator can also be extended with custom JavaScript functions. A `resolver` function can be specified, which can overwrite the default way configuration files are read from the filesystem. A `transformer` function can be used to transform the value returned by the `_ref` operator.
 
+            ## YAML file extensions
+
+            Both files with the `.yaml` and `.yml` file extensions are supported as YAML files.
+
             ## JSON instead of YAML
 
             Since you can reference JSON files, you can build your app using JSON instead of YAML files. The `lowdefy.yaml` file needs to be a YAML file, but all other configuration can be in referenced JSON files. It also makes sense to use JSON instead of YAML if you are generating configuration using code.

package/connections/AxiosHttp.yaml

@@ -88,7 +88,7 @@ _ref:
             ###### A basic full example requesting data from https://jsonplaceholder.typicode.com
 
             ```yaml
-            lowdefy: 3.22.0
+            lowdefy: 3.23.2
             name: Lowdefy starter
             connections:
               - id: my_api

package/deployment/aws-lambda.yaml

@@ -55,10 +55,10 @@ _ref:
             COPY  --chown=node:node  . .
 
             # Build the Lowdefy config using the Lowdefy CLI
-            RUN npx lowdefy@3.22.0 build
+            RUN npx lowdefy@3.23.2 build
 
             # Use the correct Lowdefy base image
-            FROM lowdefy/lowdefy-aws-lambda:3.22.0
+            FROM lowdefy/lowdefy-aws-lambda:3.23.2
 
             # Copy build output from build stage
             COPY --from=build /home/node/lowdefy/.lowdefy/build ./build

package/deployment/docker.yaml

@@ -65,10 +65,10 @@ _ref:
             COPY  --chown=node:node  . .
 
             # Build the Lowdefy config using the Lowdefy CLI
-            RUN npx lowdefy@3.22.0 build
+            RUN npx lowdefy@3.23.2 build
 
             # Use the correct Lowdefy base image
-            FROM lowdefy/lowdefy:3.22.0
+            FROM lowdefy/lowdefy:3.23.2
 
             # Copy build output from build stage
             COPY --from=build --chown=node:node /home/node/lowdefy/.lowdefy/build ./build

package/head.html

@@ -3,3 +3,5 @@
   rel="stylesheet"
   href="https://cdn.jsdelivr.net/npm/docsearch.js@2.6.3/dist/cdn/docsearch.min.css"
 />
+<script defer type="module" src="/public/modules/pdfMake.js"></script>
+<script defer type="module" src="/public/modules/csvMake.js"></script>