From ff56873cdd07f775a922bb371dc9177c4490f4e5 Mon Sep 17 00:00:00 2001 From: Stephanie Date: Wed, 6 May 2026 16:14:57 +0200 Subject: [PATCH] chore: Upgrade tutorial to lowdefy v5.2.0 Request: "upgrade the tutorial to lowdefy v5.2.0" Motivation: Tutorial YAML files were on 4.0.0-alpha.37 and used pre-v5 schema (areas, contentJustify, contentGutter, button type, sqlite client, untyped KnexRaw payload). Bring all steps in sync with the v5.2.0 block API and connection config so the tutorial runs cleanly on the latest release. Decisions: - areas -> slots: v5 renames PageHeaderMenu/Card child-region key from areas to slots - contentJustify -> justify, contentGutter -> gap: v5 layout property renames - Button type -> color + variant: replace "type: primary" with "color: primary, variant: solid"; drop redundant "type: default" on Reset since it's the default - Knex client sqlite -> better-sqlite3 + useNullAsDefault: v5 Knex connection now uses the better-sqlite3 driver and requires useNullAsDefault for inserts with omitted columns - KnexRaw payload: replace "_state: true" shortcut with explicit named bindings so the parameterized query receives the expected fields - AxiosHttp request: add explicit "url: /products" properties so the request resolves to the right endpoint - Excluded .claude folder: local tooling config, not part of the tutorial Changes: - 01-getting-started/lowdefy.yaml: bump version, areas -> slots - 02-creating-a-page/{lowdefy,new-ticket}.yaml: version bump + slots/justify/gap renames - 03-adding-blocks/{lowdefy,new-ticket}.yaml: same renames + button color/variant migration - 04-interactive-pages/{lowdefy,new-ticket}.yaml: same renames + button color/variant migration - 05-requests-api/{lowdefy,new-ticket}.yaml: same renames + button color/variant migration - 06-requests-sql/{lowdefy,new-ticket}.yaml: Knex driver swap to better-sqlite3, KnexRaw named bindings, layout/button updates - 07-display-data/{lowdefy,new-ticket,view-tickets}.yaml: Knex driver swap, named bindings, AxiosHttp url added, layout/button updates - 08-final/{lowdefy,new-ticket,view-tickets}.yaml: Knex driver swap, named bindings, AxiosHttp url added, layout/button updates - 08-final/readme.md: new readme for the final tutorial step Tags: lowdefy-v5, lowdefy-upgrade, tutorial-upgrade, areas-to-slots, contentgutter-to-gap, button-color-variant, knex-better-sqlite3, knexraw-named-bindings, axioshttp-url --- 01-getting-started/lowdefy.yaml | 6 ++--- 02-creating-a-page/lowdefy.yaml | 6 ++--- 02-creating-a-page/new-ticket.yaml | 4 ++-- 03-adding-blocks/lowdefy.yaml | 6 ++--- 03-adding-blocks/new-ticket.yaml | 8 +++---- 04-interactive-pages/lowdefy.yaml | 6 ++--- 04-interactive-pages/new-ticket.yaml | 8 +++---- 05-requests-api/lowdefy.yaml | 6 ++--- 05-requests-api/new-ticket.yaml | 8 +++---- 06-requests-sql/lowdefy.yaml | 9 ++++---- 06-requests-sql/new-ticket.yaml | 19 +++++++++++----- 07-display-data/lowdefy.yaml | 9 ++++---- 07-display-data/new-ticket.yaml | 21 +++++++++++++----- 07-display-data/view-tickets.yaml | 4 ++-- 08-final/lowdefy.yaml | 9 ++++---- 08-final/new-ticket.yaml | 33 ++++++++++++++++++++-------- 08-final/readme.md | 5 +++++ 08-final/view-tickets.yaml | 4 ++-- 18 files changed, 107 insertions(+), 64 deletions(-) create mode 100644 08-final/readme.md diff --git a/01-getting-started/lowdefy.yaml b/01-getting-started/lowdefy.yaml index 7b1fa80..3dd42bf 100644 --- a/01-getting-started/lowdefy.yaml +++ b/01-getting-started/lowdefy.yaml @@ -1,4 +1,4 @@ -lowdefy: 4.0.0-alpha.37 +lowdefy: 5.2.0 name: Lowdefy starter pages: @@ -6,7 +6,7 @@ pages: type: PageHeaderMenu properties: title: Welcome - areas: + slots: content: justify: center blocks: @@ -23,7 +23,7 @@ pages: icon: name: AiOutlineHeart color: '#f00' - areas: + slots: extra: blocks: - id: docs_button diff --git a/02-creating-a-page/lowdefy.yaml b/02-creating-a-page/lowdefy.yaml index 16129b5..9323926 100644 --- a/02-creating-a-page/lowdefy.yaml +++ b/02-creating-a-page/lowdefy.yaml @@ -1,4 +1,4 @@ -lowdefy: 4.0.0-alpha.37 +lowdefy: 5.2.0 name: Lowdefy starter menus: @@ -24,7 +24,7 @@ pages: type: PageHeaderMenu properties: title: Welcome - areas: + slots: content: justify: center blocks: @@ -41,7 +41,7 @@ pages: icon: name: AiOutlineHeart color: '#f00' - areas: + slots: extra: blocks: - id: docs_button diff --git a/02-creating-a-page/new-ticket.yaml b/02-creating-a-page/new-ticket.yaml index 70c5616..f049a58 100644 --- a/02-creating-a-page/new-ticket.yaml +++ b/02-creating-a-page/new-ticket.yaml @@ -4,14 +4,14 @@ type: PageHeaderMenu properties: title: New Ticket # The title in the browser tab. layout: - contentJustify: center # Center the contents of the page. + justify: 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. + gap: 16 # Make a 16px gap between all blocks in this card. blocks: - id: page_heading type: Title diff --git a/03-adding-blocks/lowdefy.yaml b/03-adding-blocks/lowdefy.yaml index 16129b5..9323926 100644 --- a/03-adding-blocks/lowdefy.yaml +++ b/03-adding-blocks/lowdefy.yaml @@ -1,4 +1,4 @@ -lowdefy: 4.0.0-alpha.37 +lowdefy: 5.2.0 name: Lowdefy starter menus: @@ -24,7 +24,7 @@ pages: type: PageHeaderMenu properties: title: Welcome - areas: + slots: content: justify: center blocks: @@ -41,7 +41,7 @@ pages: icon: name: AiOutlineHeart color: '#f00' - areas: + slots: extra: blocks: - id: docs_button diff --git a/03-adding-blocks/new-ticket.yaml b/03-adding-blocks/new-ticket.yaml index 04b46dd..433aa73 100644 --- a/03-adding-blocks/new-ticket.yaml +++ b/03-adding-blocks/new-ticket.yaml @@ -4,13 +4,13 @@ type: PageHeaderMenu properties: title: New Ticket # The title in the browser tab. layout: - contentJustify: center # Center the contents of the page. + justify: 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. + gap: 16 # Make a 16px gap between all blocks in this card. blocks: - id: page_heading type: Title @@ -46,7 +46,6 @@ blocks: properties: title: Reset block: true # Make the button fill all the space available to it - type: default # Make the button a plain button icon: AiOutlineClear - id: submit_button @@ -56,5 +55,6 @@ blocks: properties: title: Submit block: true - type: primary # Make the button a primary button with color + color: primary + variant: solid icon: AiOutlineSave diff --git a/04-interactive-pages/lowdefy.yaml b/04-interactive-pages/lowdefy.yaml index 16129b5..9323926 100644 --- a/04-interactive-pages/lowdefy.yaml +++ b/04-interactive-pages/lowdefy.yaml @@ -1,4 +1,4 @@ -lowdefy: 4.0.0-alpha.37 +lowdefy: 5.2.0 name: Lowdefy starter menus: @@ -24,7 +24,7 @@ pages: type: PageHeaderMenu properties: title: Welcome - areas: + slots: content: justify: center blocks: @@ -41,7 +41,7 @@ pages: icon: name: AiOutlineHeart color: '#f00' - areas: + slots: extra: blocks: - id: docs_button diff --git a/04-interactive-pages/new-ticket.yaml b/04-interactive-pages/new-ticket.yaml index 994bdaa..9ae426a 100644 --- a/04-interactive-pages/new-ticket.yaml +++ b/04-interactive-pages/new-ticket.yaml @@ -4,13 +4,13 @@ type: PageHeaderMenu properties: title: New Ticket # The title in the browser tab. layout: - contentJustify: center # Center the contents of the page. + justify: 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. + gap: 16 # Make a 16px gap between all blocks in this card. blocks: - id: page_heading type: Title @@ -69,7 +69,6 @@ blocks: properties: title: Reset block: true # Make the button fill all the space available to it - type: default # Make the button a plain button icon: AiOutlineClear events: onClick: @@ -83,7 +82,8 @@ blocks: properties: title: Submit block: true - type: primary # Make the button a primary button with color + color: primary + variant: solid icon: AiOutlineSave events: onClick: diff --git a/05-requests-api/lowdefy.yaml b/05-requests-api/lowdefy.yaml index 72c7381..a731cc7 100644 --- a/05-requests-api/lowdefy.yaml +++ b/05-requests-api/lowdefy.yaml @@ -1,4 +1,4 @@ -lowdefy: 4.0.0-alpha.37 +lowdefy: 5.2.0 name: Lowdefy starter connections: @@ -30,7 +30,7 @@ pages: type: PageHeaderMenu properties: title: Welcome - areas: + slots: content: justify: center blocks: @@ -47,7 +47,7 @@ pages: icon: name: AiOutlineHeart color: '#f00' - areas: + slots: extra: blocks: - id: docs_button diff --git a/05-requests-api/new-ticket.yaml b/05-requests-api/new-ticket.yaml index e3fb2ef..efc4d87 100644 --- a/05-requests-api/new-ticket.yaml +++ b/05-requests-api/new-ticket.yaml @@ -17,13 +17,13 @@ events: properties: title: New Ticket # The title in the browser tab. layout: - contentJustify: center # Center the contents of the page. + justify: 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. + gap: 16 # Make a 16px gap between all blocks in this card. blocks: - id: page_heading type: Title @@ -92,7 +92,6 @@ blocks: properties: title: Reset block: true # Make the button fill all the space available to it - type: default # Make the button a plain button icon: AiOutlineClear events: onClick: @@ -106,7 +105,8 @@ blocks: properties: title: Submit block: true - type: primary # Make the button a primary button with color + color: primary + variant: solid icon: AiOutlineSave events: onClick: diff --git a/06-requests-sql/lowdefy.yaml b/06-requests-sql/lowdefy.yaml index df9f8d5..4884e1a 100644 --- a/06-requests-sql/lowdefy.yaml +++ b/06-requests-sql/lowdefy.yaml @@ -1,11 +1,12 @@ -lowdefy: 4.0.0-alpha.37 +lowdefy: 5.2.0 name: Lowdefy starter connections: - id: knex type: Knex properties: - client: sqlite + client: better-sqlite3 + useNullAsDefault: true connection: filename: _secret: SQLITE_FILENAME @@ -38,7 +39,7 @@ pages: type: PageHeaderMenu properties: title: Welcome - areas: + slots: content: justify: center blocks: @@ -55,7 +56,7 @@ pages: icon: name: AiOutlineHeart color: '#f00' - areas: + slots: extra: blocks: - id: docs_button diff --git a/06-requests-sql/new-ticket.yaml b/06-requests-sql/new-ticket.yaml index 0fcd7f4..e337cba 100644 --- a/06-requests-sql/new-ticket.yaml +++ b/06-requests-sql/new-ticket.yaml @@ -6,7 +6,16 @@ requests: type: KnexRaw connectionId: knex payload: - _state: true + ticket_title: + _state: ticket_title + ticket_type: + _state: ticket_type + ticket_description: + _state: ticket_description + product: + _state: product + purchase_in_last_month: + _state: purchase_in_last_month properties: query: | INSERT INTO tickets ( @@ -52,13 +61,13 @@ events: properties: title: New Ticket # The title in the browser tab. layout: - contentJustify: center # Center the contents of the page. + justify: 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. + gap: 16 # Make a 16px gap between all blocks in this card. blocks: - id: page_heading type: Title @@ -127,7 +136,6 @@ blocks: properties: title: Reset block: true # Make the button fill all the space available to it - type: default # Make the button a plain button icon: AiOutlineClear events: onClick: @@ -141,7 +149,8 @@ blocks: properties: title: Submit block: true - type: primary # Make the button a primary button with color + color: primary + variant: solid icon: AiOutlineSave events: onClick: diff --git a/07-display-data/lowdefy.yaml b/07-display-data/lowdefy.yaml index b12f7df..aad2c9e 100644 --- a/07-display-data/lowdefy.yaml +++ b/07-display-data/lowdefy.yaml @@ -1,11 +1,12 @@ -lowdefy: 4.0.0-alpha.37 +lowdefy: 5.2.0 name: Lowdefy starter connections: - id: knex type: Knex properties: - client: sqlite + client: better-sqlite3 + useNullAsDefault: true connection: filename: _secret: SQLITE_FILENAME @@ -45,7 +46,7 @@ pages: type: PageHeaderMenu properties: title: Welcome - areas: + slots: content: justify: center blocks: @@ -62,7 +63,7 @@ pages: icon: name: AiOutlineHeart color: '#f00' - areas: + slots: extra: blocks: - id: docs_button diff --git a/07-display-data/new-ticket.yaml b/07-display-data/new-ticket.yaml index 4f257d1..d1b90ee 100644 --- a/07-display-data/new-ticket.yaml +++ b/07-display-data/new-ticket.yaml @@ -6,7 +6,16 @@ requests: type: KnexRaw connectionId: knex payload: - _state: true + ticket_title: + _state: ticket_title + ticket_type: + _state: ticket_type + ticket_description: + _state: ticket_description + product: + _state: product + purchase_in_last_month: + _state: purchase_in_last_month properties: query: | INSERT INTO tickets ( @@ -40,6 +49,8 @@ requests: - id: get_products type: AxiosHttp connectionId: dummy_api + properties: + url: /products events: onMount: @@ -50,13 +61,13 @@ events: properties: title: New Ticket # The title in the browser tab. layout: - contentJustify: center # Center the contents of the page. + justify: 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. + gap: 16 # Make a 16px gap between all blocks in this card. blocks: - id: page_heading type: Title @@ -125,7 +136,6 @@ blocks: properties: title: Reset block: true # Make the button fill all the space available to it - type: default # Make the button a plain button icon: AiOutlineClear events: onClick: @@ -139,7 +149,8 @@ blocks: properties: title: Submit block: true - type: primary # Make the button a primary button with color + color: primary + variant: solid icon: AiOutlineSave events: onClick: diff --git a/07-display-data/view-tickets.yaml b/07-display-data/view-tickets.yaml index 1d575e8..9572f90 100644 --- a/07-display-data/view-tickets.yaml +++ b/07-display-data/view-tickets.yaml @@ -17,13 +17,13 @@ events: properties: title: View tickets # The title in the browser tab. layout: - contentJustify: center # Center the contents of the page. + justify: center # Center the contents of the page. blocks: - id: content_card type: Card layout: size: 1000 # Set the size of the card so it does not fill the full screen. - contentGutter: 28 # Make a 28px gap between all blocks in this card. + gap: 28 # Make a 28px gap between all blocks in this card. blocks: - id: page_heading type: Title diff --git a/08-final/lowdefy.yaml b/08-final/lowdefy.yaml index b12f7df..aad2c9e 100644 --- a/08-final/lowdefy.yaml +++ b/08-final/lowdefy.yaml @@ -1,11 +1,12 @@ -lowdefy: 4.0.0-alpha.37 +lowdefy: 5.2.0 name: Lowdefy starter connections: - id: knex type: Knex properties: - client: sqlite + client: better-sqlite3 + useNullAsDefault: true connection: filename: _secret: SQLITE_FILENAME @@ -45,7 +46,7 @@ pages: type: PageHeaderMenu properties: title: Welcome - areas: + slots: content: justify: center blocks: @@ -62,7 +63,7 @@ pages: icon: name: AiOutlineHeart color: '#f00' - areas: + slots: extra: blocks: - id: docs_button diff --git a/08-final/new-ticket.yaml b/08-final/new-ticket.yaml index 4f257d1..e9dcb80 100644 --- a/08-final/new-ticket.yaml +++ b/08-final/new-ticket.yaml @@ -6,7 +6,16 @@ requests: type: KnexRaw connectionId: knex payload: - _state: true + ticket_title: + _state: ticket_title + ticket_type: + _state: ticket_type + ticket_description: + _state: ticket_description + product: + _state: product + purchase_in_last_month: + _state: purchase_in_last_month properties: query: | INSERT INTO tickets ( @@ -40,6 +49,8 @@ requests: - id: get_products type: AxiosHttp connectionId: dummy_api + properties: + url: /products events: onMount: @@ -50,13 +61,13 @@ events: properties: title: New Ticket # The title in the browser tab. layout: - contentJustify: center # Center the contents of the page. + justify: 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. + gap: 16 # Make a 16px gap between all blocks in this card. blocks: - id: page_heading type: Title @@ -75,7 +86,8 @@ blocks: required: true properties: title: Ticket type - options: # Set the allowed options + options: + # Set the allowed options - Suggestion - Complaint - Question @@ -84,7 +96,8 @@ blocks: type: Selector properties: title: Product - options: # Set the allowed options QUERY FROM API + options: + # Set the allowed options QUERY FROM API _array.map: - _request: get_products.data.products - _function: @@ -97,8 +110,10 @@ blocks: - id: purchase_in_last_month type: ButtonSelector - visible: # Test if block should be visible to the user - _eq: # Equals operator + visible: + # Test if block should be visible to the user + _eq: + # Equals operator - _state: ticket_type # Get the ticket_type value from state. - Complaint validate: @@ -125,7 +140,6 @@ blocks: properties: title: Reset block: true # Make the button fill all the space available to it - type: default # Make the button a plain button icon: AiOutlineClear events: onClick: @@ -139,7 +153,8 @@ blocks: properties: title: Submit block: true - type: primary # Make the button a primary button with color + color: primary + variant: solid icon: AiOutlineSave events: onClick: diff --git a/08-final/readme.md b/08-final/readme.md new file mode 100644 index 0000000..07cec1e --- /dev/null +++ b/08-final/readme.md @@ -0,0 +1,5 @@ +Add a `.env` file with the following: + +``` +LOWDEFY_SECRET_FILENAME= __ABSOLUTE_PATH_TO_SQLITE_DB_FILE__ +``` diff --git a/08-final/view-tickets.yaml b/08-final/view-tickets.yaml index 1d575e8..9572f90 100644 --- a/08-final/view-tickets.yaml +++ b/08-final/view-tickets.yaml @@ -17,13 +17,13 @@ events: properties: title: View tickets # The title in the browser tab. layout: - contentJustify: center # Center the contents of the page. + justify: center # Center the contents of the page. blocks: - id: content_card type: Card layout: size: 1000 # Set the size of the card so it does not fill the full screen. - contentGutter: 28 # Make a 28px gap between all blocks in this card. + gap: 28 # Make a 28px gap between all blocks in this card. blocks: - id: page_heading type: Title