Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/actions/working-with-actions/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ Custom actions can be used just like built-in workflow actions. When [creating a
Here is an example of a custom action in Norcraft. It demonstrates how the [canvas-confetti](https://github.com/catdad/canvas-confetti) library can be integrated to create a celebratory effect when triggered.

@@@ example
componentUrl: https://docs_examples.toddle.site/.toddle/custom-element/example-action.js
componentUrl: https://docs_examples.nordcraft.site/.toddle/custom-element/example-action.js
editorUrl: https://editor.nordcraft.com/projects/docs_examples/branches/main/components/example-action?canvas-width=800&rightpanel=events&selection=nodes.RVOI8hoh4CAD8XqcLfA4o.events.onClick&canvas-height=800
height: 4rem

Expand Down
2 changes: 1 addition & 1 deletion docs/components/compositions/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ The primary composition patterns in Nordcraft include:
- [Slots](#slots): Creating placeholders that can be filled with external content

@@@ example
componentUrl: https://docs_examples.toddle.site/.toddle/custom-element/example-component-compositions.js
componentUrl: https://docs_examples.nordcraft.site/.toddle/custom-element/example-component-compositions.js
editorUrl: https://editor.nordcraft.com/projects/docs_examples/branches/main/components/example-component-compositions?canvas-width=800&rightpanel=style&canvas-height=800
height: 26rem

Expand Down
4 changes: 2 additions & 2 deletions docs/connecting-data/call-an-api/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ To call an API from a [workflow](/workflows/working-with-workflows):
The following example demonstrates how to implement a weather card that combines both API calling methods. The example uses auto fetch to load weather data when the component mounts, and provides an update button that manually triggers the API through a workflow action.

@@@ example
componentUrl: https://docs_examples.toddle.site/.toddle/custom-element/example-call-an-api.js
componentUrl: https://docs_examples.nordcraft.site/.toddle/custom-element/example-call-an-api.js
editorUrl: https://editor.nordcraft.com/projects/docs_examples/branches/main/components/example-call-an-api?rightpanel=style&canvas-width=800&selection=apis.Weather%2520API&canvas-height=800
height: 21rem

Expand Down Expand Up @@ -88,7 +88,7 @@ Callback events on the API are executed just before the action-specific events.
The following example demonstrates how to configure and react to an API callback event.

@@@ example
componentUrl: https://docs_examples.toddle.site/.toddle/custom-element/example-handle-api-callback.js
componentUrl: https://docs_examples.nordcraft.site/.toddle/custom-element/example-handle-api-callback.js
editorUrl: https://editor.nordcraft.com/projects/docs_examples/branches/main/components/example-handle-api-callback?canvas-width=800&rightpanel=events&selection=workflows.AMb8F4.actions.0.onSuccess&canvas-height=800
height: 21rem

Expand Down
2 changes: 1 addition & 1 deletion docs/connecting-data/services/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ To connect to Supabase:
You can find these credentials in your Supabase project settings. Once the Supabase service is added, Nordcraft will validate the connection to ensure it can access the API documentation.

:::tip
To get up and running quickly with Supabase, including auth, realtime, and file uploads, install the [Supabase Connect](https://supabase_connect.toddle.site/) package in your project, or create a new app using the [Nordbase](https://nordbase.toddle.site) template, which is a pre-configured template that demonstrates all functionality of the Supabase Connect package.
To get up and running quickly with Supabase, including auth, realtime, and file uploads, install the [Supabase Connect](https://supabase_connect.nordcraft.site/) package in your project, or create a new app using the [Nordbase](https://nordbase.nordcraft.site) template, which is a pre-configured template that demonstrates all functionality of the Supabase Connect package.
:::

![The create a new app screen in Nordcraft, highlighting the Nordbase template, which is third in the basic list at the top of the template lists.|16/9](nordbase-template.webp 'Nordbase template')
Expand Down
2 changes: 1 addition & 1 deletion docs/contexts/working-with-contexts/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ When multiple ancestor components provide the same context, the closest ancestor
The following example shows how to set up and use contexts with a simple counter implementation. One counter demonstrates a provider that exposes count and increments through context, while the other shows the same counter built with attribute passing for comparison.

@@@ example
componentUrl: https://docs_examples.toddle.site/.toddle/custom-element/example-contexts.js
componentUrl: https://docs_examples.nordcraft.site/.toddle/custom-element/example-contexts.js
editorUrl: https://editor.nordcraft.com/projects/docs_examples/branches/main/components/example-contexts?mode=design&canvas-width=808&rightpanel=attributes&canvas-height=800
height: 11rem

Expand Down
6 changes: 3 additions & 3 deletions docs/custom-domains/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ description: Learn how to add custom domains to your Nordcraft project to serve

You can add custom domains in Nordcraft to allow you to serve your Nordcraft project from different domains, or URLs. Each project will be created with two default domains; these domains are permanent and cannot be deleted:

- `{project-name}.toddle.site`: default production domain
- `main-{project-name}.toddle.site`: each branch has a unique domain in the format `{branch-name}-{project-name}.toddle.site`. This is a publicly accessibly URL that you can use to view work in progress in a browser, and share it with people for sign off and approval of new features and functionality.
- `{project-name}.nordcraft.site`: default production domain
- `start-{project-name}.nordcraft.site`: each branch has a unique domain in the format `{branch-name}-{project-name}.nordcraft.site`. This is a publicly accessibly URL that you can use to view work in progress in a browser, and share it with people for sign off and approval of new features and functionality.

To see the list of domains registered on your project, go to the Project Overview page and click on the **Edit domain** button to the left of the Project URL.

Expand Down Expand Up @@ -39,7 +39,7 @@ After adding a new domain, you'll see the domain added to the list of domains wi
- You can chose to add either an **A** or **CNAME** record depending on your DNS provider's capabilities; the record name and value you need to set in your DNS provider is provided for you by Nordcraft

::: info
Custom domains are only available on paid plans. Projects in organizations on the free plan will be served on `{project-name}.toddle.site`.
Custom domains are only available on paid plans. Projects in organizations on the free plan will be served on `{project-name}.nordcraft.site`.
:::

## Wildcard domains
Expand Down
4 changes: 2 additions & 2 deletions docs/formulas/repeat-formula/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ description: Generate dynamic lists, grids and repeating elements from array dat
The repeat formula allows you to create multiple instances of an element based on a set of data. This enables dynamic lists, grids and other repeating UI structures.

@@@ example
componentUrl: https://docs_examples.toddle.site/.toddle/custom-element/example-repeat-formula.js
componentUrl: https://docs_examples.nordcraft.site/.toddle/custom-element/example-repeat-formula.js
editorUrl: https://editor.nordcraft.com/projects/docs_examples/branches/main/components/example-repeat-formula?canvas-width=800&rightpanel=attributes&selection=nodes.nQgi8KJ7OPxn9l5H0mML-.repeat&canvas-height=800
height: 19rem

Expand Down Expand Up @@ -51,7 +51,7 @@ These repeat item variables allow you to customize each instance based on its da
If you want to repeat an element a specific number of times without dynamic data, you can use the `Range` formula. This is useful for pagination, grid layouts or any situation where you need a specific number of repeated elements.

@@@ example
componentUrl: https://docs_examples.toddle.site/.toddle/custom-element/example-repeat-range-formula.js
componentUrl: https://docs_examples.nordcraft.site/.toddle/custom-element/example-repeat-range-formula.js
editorUrl: https://editor.nordcraft.com/projects/docs_examples/branches/main/components/example-repeat-range-formula?canvas-width=800&rightpanel=attributes&selection=nodes.nQgi8KJ7OPxn9l5H0mML-.repeat&canvas-height=800
height: 19rem

Expand Down
2 changes: 1 addition & 1 deletion docs/formulas/show-hide-formula/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ description: Control element visibility with conditional formulas that add or re
The show/hide formula allows you to conditionally render elements based on specific conditions. This enables you to create dynamic interfaces that respond to user interactions, application state and other factors.

@@@ example
componentUrl: https://docs_examples.toddle.site/.toddle/custom-element/example-show-hide-formula.js
componentUrl: https://docs_examples.nordcraft.site/.toddle/custom-element/example-show-hide-formula.js
editorUrl: https://editor.nordcraft.com/projects/docs_examples/branches/main/components/example-show-hide-formula?canvas-width=800&rightpanel=attributes&selection=nodes.nQgi8KJ7OPxn9l5H0mML-.condition&canvas-height=800
height: 21rem

Expand Down
16 changes: 8 additions & 8 deletions docs/formulas/working-with-formulas/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ Reusable formulas provide these benefits:
- Enhance performance through result caching (due to their pure function nature)

@@@ example
componentUrl: https://docs_examples.toddle.site/.toddle/custom-element/example-reusable-formula.js
componentUrl: https://docs_examples.nordcraft.site/.toddle/custom-element/example-reusable-formula.js
editorUrl: https://editor.nordcraft.com/projects/docs_examples/branches/main/components/example-reusable-formula?rightpanel=attributes&canvas-width=829&selection=formulas.p1pYpC&canvas-height=800
height: 26rem

Expand All @@ -73,7 +73,7 @@ By breaking down complex operations into smaller, reusable pieces, you can build
:::

@@@ example
componentUrl: https://docs_examples.toddle.site/.toddle/custom-element/example-nested-formulas.js
componentUrl: https://docs_examples.nordcraft.site/.toddle/custom-element/example-nested-formulas.js
editorUrl: https://editor.nordcraft.com/projects/docs_examples/branches/main/components/example-nested-formulas?canvas-width=800&rightpanel=style&selection=formulas.lJzgnD&canvas-height=800
height: 26rem

Expand All @@ -89,7 +89,7 @@ The formula editor supports many JavaScript-like operations. Below are some comm
The `Map` method returns a new array by applying a function to each element in the original array.

@@@ example
componentUrl: https://docs_examples.toddle.site/.toddle/custom-element/example-map-formula.js
componentUrl: https://docs_examples.nordcraft.site/.toddle/custom-element/example-map-formula.js
editorUrl: https://editor.nordcraft.com/projects/docs_examples/branches/main/components/example-map-formula?leftpanel=design&canvas-width=800&canvas-height=800&rightpanel=style&selection=formulas.2q0_dN
height: 19rem

Expand All @@ -101,7 +101,7 @@ Check out how the `Map` formula transforms each item in an array using the `Set`
The `Filter` method returns a new array with elements that pass a specific condition.

@@@ example
componentUrl: https://docs_examples.toddle.site/.toddle/custom-element/example-filter-formula.js
componentUrl: https://docs_examples.nordcraft.site/.toddle/custom-element/example-filter-formula.js
editorUrl: https://editor.nordcraft.com/projects/docs_examples/branches/main/components/example-filter-formula?rightpanel=attributes&canvas-width=800&selection=formulas.2q0_dN.formula&canvas-height=800
height: 19rem

Expand All @@ -113,7 +113,7 @@ See how the `Filter` formula selects specific items from an array based on a con
The `Sort by` method arranges array elements in a specific order.

@@@ example
componentUrl: https://docs_examples.toddle.site/.toddle/custom-element/example-sort-formula.js
componentUrl: https://docs_examples.nordcraft.site/.toddle/custom-element/example-sort-formula.js
editorUrl: https://editor.nordcraft.com/projects/docs_examples/branches/main/components/example-sort-formula?canvas-width=800&rightpanel=style&selection=formulas.2q0_dN.formula&canvas-height=800
height: 19rem

Expand All @@ -125,7 +125,7 @@ Discover how the `Sort by` formula arranges items in an array based on a specifi
The `Reduce` method applies a function to reduce an array to a single value.

@@@ example
componentUrl: https://docs_examples.toddle.site/.toddle/custom-element/example-reduce-formula.js
componentUrl: https://docs_examples.nordcraft.site/.toddle/custom-element/example-reduce-formula.js
editorUrl: https://editor.nordcraft.com/projects/docs_examples/branches/main/components/example-reduce-formula?rightpanel=attributes&canvas-width=800&selection=formulas.2q0_dN&canvas-height=800
height: 19rem

Expand All @@ -137,7 +137,7 @@ See how the `Reduce` formula transforms an array into a single value by applying
The `Find` formula searches through an array of items, applying a callback formula to each item, and returning the first item where the callback formula returns `true`.

@@@ example
componentUrl: https://docs_examples.toddle.site/.toddle/custom-element/example-find-formula.js
componentUrl: https://docs_examples.nordcraft.site/.toddle/custom-element/example-find-formula.js
editorUrl: https://editor.nordcraft.com/projects/docs_examples/branches/main/components/example-find-formula?rightpanel=style&canvas-width=800&selection=formulas.2q0_dN.formula&canvas-height=800
height: 19rem

Expand All @@ -149,7 +149,7 @@ The `Find` formula searches an array for the first matching element and returns
The `Get` formula extracts a value from an object, array or string at a specified path, returning `null` if no value is found.

@@@ example
componentUrl: https://docs_examples.toddle.site/.toddle/custom-element/example-get-formula.js
componentUrl: https://docs_examples.nordcraft.site/.toddle/custom-element/example-get-formula.js
editorUrl: https://editor.nordcraft.com/projects/docs_examples/branches/main/components/example-get-formula?canvas-width=800&rightpanel=attributes&selection=formulas.2q0_dN&canvas-height=800
height: 19rem

Expand Down
2 changes: 1 addition & 1 deletion docs/guides/contribution/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ imageAltText: Descriptive text to describe the image
For component examples, use the following format:

@@@ example
componentUrl: https://docs_examples.toddle.site/.toddle/custom-element/example-class-based-style.js
componentUrl: https://docs_examples.nordcraft.site/.toddle/custom-element/example-class-based-style.js
editorUrl: https://editor.nordcraft.com/projects/docs_examples/branches/main/components/example-class-based-style?mode=design&selection=nodes.RXXxhmSNTU21VntB7mKuh&canvas-width=800&rightpanel=attributes&canvas-height=800
height: 18rem

Expand Down
4 changes: 2 additions & 2 deletions docs/styling/animation-editor/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,15 +58,15 @@ Transforms are one of the most powerful tools in CSS animations, allowing you to
:::

@@@ example
componentUrl: https://docs_examples.toddle.site/.toddle/custom-element/example-duck.js
componentUrl: https://docs_examples.nordcraft.site/.toddle/custom-element/example-duck.js
editorUrl: https://editor.nordcraft.com/projects/docs_examples/branches/main/components/example-duck?canvas-width=800&canvas-height=290.5&rightpanel=style
height: 18rem

To make this duck move naturally, each section is animated separately, and the logical hierarchy of the elements is used to make sure that the eyes move together with the head, and the head moves together with the body, etc.
@@@

@@@ example
componentUrl: https://docs_examples.toddle.site/.toddle/custom-element/example-like-button.js
componentUrl: https://docs_examples.nordcraft.site/.toddle/custom-element/example-like-button.js
editorUrl: https://editor.nordcraft.com/projects/docs_examples/branches/main/components/example-like-button?canvas-width=800&rightpanel=style&canvas-height=290
height: 23rem

Expand Down
10 changes: 5 additions & 5 deletions docs/styling/conditional-styles/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ There are several methods to apply conditional styles in Nordcraft:
## Style variants

@@@ example
componentUrl: https://docs_examples.toddle.site/.toddle/custom-element/example-style-variants.js
componentUrl: https://docs_examples.nordcraft.site/.toddle/custom-element/example-style-variants.js
editorUrl: https://editor.nordcraft.com/projects/docs_examples/branches/main/components/example-style-variants?canvas-width=800&rightpanel=style&selection=nodes.RXXxhmSNTU21VntB7mKuh&canvas-height=800
height: 18rem

Expand Down Expand Up @@ -56,7 +56,7 @@ For more information on pseudo-elements, see the [MDN documentation on pseudo-el
You can add classes to elements using the attributes panel, and then create conditional styles for those classes.

@@@ example
componentUrl: https://docs_examples.toddle.site/.toddle/custom-element/example-class-based-style.js
componentUrl: https://docs_examples.nordcraft.site/.toddle/custom-element/example-class-based-style.js
editorUrl: https://editor.nordcraft.com/projects/docs_examples/branches/main/components/example-class-based-style?mode=design&selection=nodes.RXXxhmSNTU21VntB7mKuh&canvas-width=800&rightpanel=attributes&canvas-height=800
height: 18rem

Expand Down Expand Up @@ -86,7 +86,7 @@ This approach maintains clean separation and prevents unintended style conflicts
## CSS variables

@@@ example
componentUrl: https://docs_examples.toddle.site/.toddle/custom-element/example-style-variables.js
componentUrl: https://docs_examples.nordcraft.site/.toddle/custom-element/example-style-variables.js
editorUrl: https://editor.nordcraft.com/projects/docs_examples/branches/main/components/example-style-variables?rightpanel=style&canvas-width=800&selection=nodes.RXXxhmSNTU21VntB7mKuh.style-variables.0.formula&canvas-height=800
height: 18rem

Expand All @@ -104,7 +104,7 @@ This approach is particularly useful for complex conditional styling that depend
## Cascade and precedence

@@@ example
componentUrl: https://docs_examples.toddle.site/.toddle/custom-element/example-style-cascade.js
componentUrl: https://docs_examples.nordcraft.site/.toddle/custom-element/example-style-cascade.js
editorUrl: https://editor.nordcraft.com/projects/docs_examples/branches/main/components/example-style-cascade?rightpanel=style&canvas-width=800&selection=nodes.725KDMmepSbJecZCQqInN&canvas-height=800
height: 19rem

Expand Down Expand Up @@ -139,7 +139,7 @@ When adding a new style variant, you can set media query conditions:
Components can be styled from the outside, allowing for customization of specific instances without affecting others.

@@@ example
componentUrl: https://docs_examples.toddle.site/.toddle/custom-element/example-component-styling.js
componentUrl: https://docs_examples.nordcraft.site/.toddle/custom-element/example-component-styling.js
editorUrl: https://editor.nordcraft.com/projects/docs_examples/branches/main/components/example-component-styling?rightpanel=style&canvas-width=800&selection=nodes.mkJ0CrlLDvzUaWYSW_B8Q&canvas-height=800
height: 23rem

Expand Down
6 changes: 3 additions & 3 deletions docs/variables/working-with-variables/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ You can update variables using workflows or events:
3. Specify the new value (static value or via a formula)

@@@ example
componentUrl: https://docs_examples.toddle.site/.toddle/custom-element/example-variable-updating.js
componentUrl: https://docs_examples.nordcraft.site/.toddle/custom-element/example-variable-updating.js
editorUrl: https://editor.nordcraft.com/projects/docs_examples/branches/main/components/example-variable-updating?rightpanel=events&canvas-width=800&selection=nodes.RXXxhmSNTU21VntB7mKuh.events.click.actions.0.data&canvas-height=800
height: 18rem

Expand All @@ -81,7 +81,7 @@ To bind a variable:
5. Add any additional logic if needed (transformations, conditions, etc.)

@@@ example
componentUrl: https://docs_examples.toddle.site/.toddle/custom-element/example-variable-updating.js
componentUrl: https://docs_examples.nordcraft.site/.toddle/custom-element/example-variable-updating.js
editorUrl: https://editor.nordcraft.com/projects/docs_examples/branches/main/components/example-variable-updating?canvas-width=800&rightpanel=attributes&selection=nodes.RXXxhmSNTU21VntB7mKuh.classes.selected.formula&canvas-height=800
height: 18rem

Expand Down Expand Up @@ -121,7 +121,7 @@ Additionally, in the attributes panel you can configure `checked` or `selected`
:::

@@@ example
componentUrl: https://docs_examples.toddle.site/.toddle/custom-element/example-variable-input-binding.js
componentUrl: https://docs_examples.nordcraft.site/.toddle/custom-element/example-variable-input-binding.js
editorUrl: https://editor.nordcraft.com/projects/docs_examples/branches/main/components/example-variable-input-binding?canvas-width=800&mode=design&selection=nodes.Aw-ypNWnj8VwAKTg5h6vf&rightpanel=attributes&canvas-height=800
height: 5rem

Expand Down
Loading
Loading