Skip to content

Commit efbc0e3

Browse files
hcourdenthcourdent
authored
Work sidebar & landing Scripts and Flows (windmill-labs#284)
1 parent ec145b9 commit efbc0e3

16 files changed

+196
-71
lines changed

‎docs/code_editor/add_variables_resources.mdx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,14 @@ import DocCard from '@site/src/components/DocCard';
44

55
You can add directly access Variables and Resources from the Code Editor.
66

7+
<video
8+
className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
9+
controls
10+
src="/videos/add_resources_variables.mp4"
11+
/>
12+
13+
<br/>
14+
715
<div class="grid grid-cols-2 gap-6 mb-4">
816
<DocCard
917
title="Resources and Resource Types"

‎docs/code_editor/assistants.mdx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,17 @@ The code assistants in Windmill are integrated into the Monaco code editor. Wind
1010

1111
Here's an overview of how the code assistants work:
1212

13-
1. Language Server Protocol (LSP): Windmill utilizes the Language Server Protocol, a standardized protocol for communication between code editors and language servers.
13+
1. **Language Server Protocol (LSP)**: Windmill utilizes the Language Server Protocol, a standardized protocol for communication between code editors and language servers.
1414

15-
2. Language Servers: For each supported programming language, Windmill employs dedicated language servers responsible for providing code assistance and language-specific functionality. The following language servers are used by Windmill for each language:
15+
2. **Language Servers**: For each supported programming language, Windmill employs dedicated language servers responsible for providing code assistance and language-specific functionality. The following language servers are used by Windmill for each language:
1616

1717
- Deno: Deno LSP
1818
- Python: Ruff, Black, Pyright
1919
- Bash: shellcheck
2020
- Go: Go LSP
2121

22-
3. WebSocket Communication: The language servers communicate with the Windmill backend through websockets, enabling real-time exchange of information between the code editor and the language servers.
22+
3. **WebSocket Communication**: The language servers communicate with the Windmill backend through websockets, enabling real-time exchange of information between the code editor and the language servers.
2323

24-
4. Calculations and Suggestions: As developers write code in the Windmill editor, the language servers process the code, perform calculations, and provide relevant suggestions. These suggestions can include auto-completion, syntax highlighting, linting errors, formatting options, and more.
24+
4. **Calculations and Suggestions**: As developers write code in the Windmill editor, the language servers process the code, perform calculations, and provide relevant suggestions. These suggestions can include auto-completion, syntax highlighting, linting errors, formatting options, and more.
2525

2626
By integrating these code assistants, Windmill enhances the development workflow, enabling developers to write code more efficiently, identify and correct errors, and adhere to best practices specific to each programming language.

‎docs/code_editor/parameter_inference.mdx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,18 @@ import DocCard from '@site/src/components/DocCard';
22

33
# Parameter Inference
44

5-
Windmill ensures that the parameters passed to scripts, flows, and resources match the expected format and type. This mechanism relies heavily on JSON Schema, a standard used to define the structure and validation rules of JSON data.
5+
Windmill ensures that the parameters passed to scripts, flows, and resources match the expected format and type. This mechanism relies heavily on [JSON Schema](../core_concepts/13_json_schema_and_parsing/index.md), a standard used to define the structure and validation rules of JSON data.
66

77
As you write your scripts or define flows and resource types in Windmill code editor, JSON Schema is used behind the scenes to construct a comprehensive specification of the expected input parameters. This specification not only defines the types of each parameter but also provides descriptions and sets out any constraints that might apply, such as which parameters are mandatory.
88

9+
<video
10+
className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
11+
controls
12+
src="/videos/parameter_inference.mp4"
13+
/>
14+
15+
<br/>
16+
917
<div class="grid grid-cols-2 gap-6 mb-4">
1018
<DocCard
1119
title="JSON Schema and Parsing"

‎docs/core_concepts/22_ai_generation/index.md

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,32 @@ Code generation on Windmill from OpenAI only works on GPT-4 so far.
3030

3131
:::
3232

33-
Then from a code editor (Script, Flow, Apps), click on `AI Gen` and write with a prompt what the script should do. The script will use Windmill's main requirements and features (exposing a main function, importing libraries, using resource types, declaring required parameters with types, leveraging database schema).
33+
Then from a [code editor](../../code_editor/index.mdx) (Script, Flow, Apps), click on `AI Gen` and write with a prompt what the script should do. The script will use Windmill's main requirements and features (exposing a main function, importing libraries, using resource types, declaring required parameters with types, leveraging database schema).
3434

3535
![Prompt](../../assets/code_editor/ai_gen.png "Prompt")
3636

37+
### Code Edition
38+
39+
When in the [code editor](../../code_editor/index.mdx), select the code section you want to edit and the "AI Gen" button will turn into "AI Edit", letting you enter instructions for the AI Assistant.
40+
41+
You will then be offered to accept or decline the suggested code.
42+
43+
<video
44+
className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
45+
controls
46+
src="/videos/ai_edit.mp4"
47+
/>
48+
49+
### Code Fixing
50+
51+
Upon error when executing code, you will be offered to "AI Fix" it. The assistant will automatically read the code, explain what went wrong, and suggest a way to fix it.
52+
53+
<video
54+
className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
55+
controls
56+
src="/videos/ai_fix.mp4"
57+
/>
58+
3759
## Code Auto-Completion with Codium
3860

3961
[Codeium](https://codeium.com/) is a code acceleration toolkit built on AI technology. In particular, Codeium has a free [browser extension](https://codeium.com/download) that works as a code completion assistant.

‎docs/flows/8_error_handling.mdx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,8 @@ For each step can be defined a timeout. If the execution takes longer than the t
8383
src="/videos/custom_timeout.mp4"
8484
/>
8585

86+
<br/>
87+
8688
<div class="grid grid-cols-2 gap-6 mb-4">
8789
<DocCard
8890
color="teal"

‎docs/intro.mdx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import { Book, Pen } from 'lucide-react';
55

66
Windmill is an **<a href="https://github.com/windmill-labs/windmill" >open-source</a>**, blazing fast and scalable alternative to Retool, Airplane, Superblocks, n8n, Airflow, Temporal to **build all your internal tools (endpoints, workflows, UIs) through the combination of code** (in Typescript, Python, Go, Bash, SQL or any docker image) and low code builders. It embeds all-in-one:
77

8-
- an **execution runtime** to execute functions at scale with low-latency and no overhead on a fleet of workers
9-
- an **orchestrator** to compose functions into powerful flows at low-latency built with a low-code builder (or yaml if that's your thing)
10-
- an **app builder** to build application and data-intensive dashboards built with low-code or JS frameworks such a React.
8+
- an [execution runtime](./getting_started/0_scripts_quickstart/index.mdx) to execute functions at scale with low-latency and no overhead on a fleet of workers
9+
- an [orchestrator](./getting_started/6_flows_quickstart/index.mdx) to compose functions into powerful flows at low-latency built with a low-code builder (or yaml if that's your thing)
10+
- an [app builder](./getting_started/7_apps_quickstart/index.mdx) to build application and data-intensive dashboards built with low-code or JS frameworks such a React.
1111

1212
Windmill can be used solely from its UI through its [webIDE](./getting_started/0_scripts_quickstart/1_typescript_quickstart/index.mdx), and low-code builders but it is also possible to keep using your editor and deploy from a [git repo](./advanced/9_deploy_gh_gl/index.md) using a [CLI](./cli_local_dev/index.md).
1313

‎sidebars.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -179,24 +179,24 @@ const sidebars = {
179179
items: [
180180
'core_concepts/auto_generated_uis/index',
181181
'core_concepts/json_schema_and_parsing/index',
182-
'advanced/imports/index',
183182
'core_concepts/instant_preview/index',
183+
'advanced/imports/index',
184184
'core_concepts/roles_and_permissions/index',
185185
'core_concepts/authentification/index',
186186
'core_concepts/error_handling/index',
187187
'core_concepts/collaboration/index',
188-
'core_concepts/scheduling/index',
189188
'core_concepts/monitor_past_and_future_runs/index',
189+
'core_concepts/scheduling/index',
190190
'core_concepts/webhooks/index',
191191
'core_concepts/variables_and_secrets/index',
192192
'core_concepts/resources_and_types/index',
193193
'core_concepts/groups_and_folders/index',
194194
'core_concepts/worker_groups/index',
195-
'core_concepts/jobs/index',
196195
'core_concepts/concurrency_limits/index',
197196
'core_concepts/draft_and_deploy/index',
198197
'core_concepts/files_binary_data/index',
199198
'core_concepts/rich_display_rendering/index',
199+
'core_concepts/jobs/index',
200200
'core_concepts/persistent_storage/index',
201201
'core_concepts/ai_generation/index',
202202
],

‎src/landing/FlowSection.tsx

Lines changed: 96 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,15 @@ import {
1010
Terminal,
1111
RotateCcw,
1212
Webhook,
13+
OctagonIcon,
1314
CheckCircle2,
15+
ServerCrashIcon,
16+
TimerOffIcon,
17+
ToyBrickIcon,
18+
Database,
19+
InfinityIcon,
20+
Voicemail,
21+
BedIcon,
1422
Calendar
1523
} from 'lucide-react';
1624
import { GitBranch, Repeat, Verified } from 'lucide-react';
@@ -61,18 +69,6 @@ const tabs = [
6169
videoLength: '18'
6270
}
6371
},
64-
{
65-
title: 'Error Handler',
66-
description:
67-
'Easily recover from errors and continue your flow or log the error on Slack, Discord, etc.',
68-
icon: Bug,
69-
caption: <div>Easily <a href="/docs/flows/error_handling" target="_blank">recover from errors</a> and continue your flow or log the error on Slack, Discord, etc.</div>,
70-
video: {
71-
videoSrc: '/videos/error_handler.mp4',
72-
altText: 'Branching logic',
73-
videoLength: '33'
74-
}
75-
}
7672
]
7773
},
7874
{
@@ -100,72 +96,122 @@ const tabs = [
10096
caption: 'Resume Workflows with secret webhooks.',
10197
imageSrc: '/images/page_arguments.png.webp',
10298
altText: 'Resume with webhooks'
99+
},
100+
{
101+
title: 'Sleeps / Delays',
102+
description:
103+
'Executions within a flow can be suspended for a given time.',
104+
icon: BedIcon,
105+
caption: <div>Executions within a flow can be <a href="/docs/flows/sleep" target="_blank">suspended</a> for a given time.</div>,
106+
video: {
107+
videoSrc: '/videos/sleep_step.mp4',
108+
altText: 'Sleep / Delay',
109+
}
103110
}
104111
]
105112
},
106113
{
107-
label: 'Retries & Cache',
108-
icon: Repeat,
109-
id: 'retries',
114+
label: 'Error Handling',
115+
icon: ServerCrashIcon,
116+
id: 'error-handling',
110117
data: [
111118
{
112-
title: 'Customize number of retries for each individual step',
119+
title: 'Error Handler',
120+
description:
121+
'Easily recover from errors and continue your flow or log the error on Slack, Discord, etc.',
122+
icon: Bug,
123+
caption: <div>Easily <a href="/docs/flows/error_handling" target="_blank">recover from errors</a> and continue your flow or log the error on Slack, Discord, etc.</div>,
124+
video: {
125+
videoSrc: '/videos/error_handler.mp4',
126+
altText: 'Branching logic',
127+
}
128+
},
129+
{
130+
title: 'Retry',
113131
description:
114132
'Automatically retry failed steps. Customize the number of retries for each individual step.',
115133
icon: Repeat,
116134
caption: <div>Easily <a href="/docs/flows/retries" target="_blank">retry</a> failed steps.</div>,
117135
video: {
118136
videoSrc: '/videos/retries_example.mp4',
119-
videoLength: '29',
120137
altText: 'Customize number of retries.'
121138
}
122139
},
123140
{
124-
title: 'Cache results of steps',
141+
title: 'Early Stop / Break',
125142
description:
126-
'Cache the results of a step for a given time.',
127-
icon: Repeat,
128-
caption: <div><a href="/docs/flows/cache" target="_blank">Cache the results of a step</a> for a given time.</div>,
143+
'Define a predicate expression that determines whether the flow should stop early at the end of a step.',
144+
icon: OctagonIcon,
145+
caption: <div>Define a predicate expression that determines whether the flow should <a href="/docs/flows/early_stop" target="_blank">stop early</a> at the end of a step.</div>,
129146
video: {
130-
videoSrc: '/videos/cache_for_steps.mp4',
131-
videoLength: '15',
132-
altText: 'Customize number of retries'
147+
videoSrc: '/videos/early_stop.mp4',
148+
altText: 'Early Stop / Break.'
133149
}
134-
}
135-
]
136-
},
137-
/*
138-
{
139-
label: 'Hub scripts',
140-
icon: Globe,
141-
id: 'hub-scripts',
142-
data: [
150+
},
143151
{
144-
title: 'Short video of usig a script from the hub',
152+
title: 'Custom Timeout for Step',
145153
description:
146-
'Automatically retry failed steps. Customize the number of retries for each individual step.',
147-
icon: Code,
148-
caption: '',
149-
imageSrc: ''
150-
}
154+
'For each step can be defined a timeout. If the execution takes longer than the time limit, the execution of the step will be interrupted.',
155+
icon: TimerOffIcon,
156+
caption: <div>For each step can be defined a <a href="/docs/flows/custom_timeout" target="_blank">timeout</a>. If the execution takes longer than the time limit, the execution of the step will be interrupted.</div>,
157+
video: {
158+
videoSrc: '/videos/custom_timeout.mp4',
159+
altText: 'Custom Timeout for Step'
160+
}
161+
},
151162
]
152163
},
153164
{
154-
label: 'ETL/Data processing',
155-
icon: Database,
156-
id: 'etl-data-processing',
165+
label: 'Integrations',
166+
icon: ToyBrickIcon,
167+
id: 'retries',
157168
data: [
158169
{
159-
title: 'Shared folder between folders to write and read heavy data',
170+
title: 'Connect third-party services',
160171
description:
161-
'Automatically retry failed steps. Customize the number of retries for each individual step.',
172+
'Connect data providers & external APIs together.',
173+
icon: ToyBrickIcon,
174+
caption: <div>Connect data providers & <a href="/docs/integrations/integrations_on_windmill" target="_blank">external APIs</a> together.</div>,
175+
video: {
176+
videoSrc: '/videos/flow_integrations.mp4',
177+
videoLength: '29',
178+
altText: 'Connect third-party services.'
179+
}
180+
},
181+
{
182+
title: 'Cache results of steps',
183+
description:
184+
'Cache the results of a step for a given time to limit useless calls to external APIs.',
162185
icon: Database,
163-
caption: '',
164-
imageSrc: ''
165-
}
186+
caption: <div><a href="/docs/flows/cache" target="_blank">Cache the results of a step</a> for a given time.</div>,
187+
video: {
188+
videoSrc: '/videos/cache_for_steps.mp4',
189+
videoLength: '15',
190+
altText: 'Cache results of steps'
191+
}
192+
},
193+
{
194+
title: 'Step Mocking',
195+
description:
196+
'When a step is mocked, it will immediately return the mocked value without performing any computation.',
197+
icon: Voicemail,
198+
caption: <div>When a step is <a href="/docs/flows/step_mocking" target="_blank">mocked</a>, it will immediately return the mocked value without performing any computation.</div>,
199+
video: {
200+
videoSrc: '/videos/step_mocking.mp4',
201+
videoLength: '15',
202+
altText: 'Step Mocking'
203+
}
204+
},
205+
{
206+
title: 'Concurrency Limits',
207+
description:
208+
'Define concurrency limits for inline scripts to prevent exceeding the API Limit of the targeted API.',
209+
icon: InfinityIcon,
210+
caption: <div>Define <a href="/docs/flows/concurrency_limit" target="_blank">concurrency limits</a> for inline scripts to prevent exceeding the API Limit of the targeted API.</div>,
211+
imageSrc: '/images/concurrency_limit_flow.png',
212+
},
166213
]
167214
},
168-
*/
169215
{
170216
label: 'Multiple Triggers',
171217
icon: Play,
@@ -183,9 +229,9 @@ const tabs = [
183229

184230
{
185231
title: 'UI',
186-
description: 'You can directly trigger a script using the autogenerated UI.',
232+
description: 'You can directly trigger a flow using the autogenerated UI or Windmill Apps.',
187233
icon: FormInput,
188-
caption: <div>You can directly trigger a flow using the <a href="/docs/core_concepts/auto_generated_uis" target="_blank">autogenerated UI</a>.</div>,
234+
caption: <div>You can directly trigger a flow using the <a href="/docs/core_concepts/auto_generated_uis" target="_blank">autogenerated UI</a> or <a href="/docs/getting_started/apps_quickstart" target="_blank">Windmill Apps</a>.</div>,
189235
video: {
190236
videoSrc: '/videos/auto_g_ui_flow.mp4',
191237
altText: 'Trigger with autogenerated UI',

0 commit comments

Comments
 (0)