windmill-components 1.28.6 → 1.35.0

package/components/icons/DiscordIcon.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        height?: string | undefined;
+        width?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type DiscordIconProps = typeof __propDef.props;
+export declare type DiscordIconEvents = typeof __propDef.events;
+export declare type DiscordIconSlots = typeof __propDef.slots;
+export default class DiscordIcon extends SvelteComponentTyped<DiscordIconProps, DiscordIconEvents, DiscordIconSlots> {
+}
+export {};

package/components/icons/HttpIcon.svelte

@@ -0,0 +1,21 @@
+<script>export let height = '24px';
+export let width = '24px';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	x="0px"
+	y="0px"
+	{width}
+	{height}
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	viewBox="0 0 1000 1000"
+	enable-background="new 0 0 1000 1000"
+	xml:space="preserve"
+>
+	<g
+		><path
+			d="M732.4,557.3c-4.2-0.8-12.5-1.2-25.2-1.2h-16.9v49.3h19.2c13.7,0,23-1,27.6-2.8c4.7-1.8,8.3-4.7,11-8.6c2.7-3.9,4-8.3,4-13.5c0-6.3-1.8-11.6-5.5-15.7C742.8,560.9,738.1,558.3,732.4,557.3z M845.2,483.1c-13.4,0-26.4,1.8-38.8,5.3c2.2-10,3.4-20.4,3.4-31c0-79.2-63.9-143.4-142.6-143.4c-32.5,0-62.6,11-86.5,29.5C541.2,274,467,227.2,381.7,227.2c-117.6,0-214.4,89.2-227.3,203.8C72.6,444,10,515.1,10,600.8c0,95,76.8,172,171.4,172h663.7l0,0c80,0,144.9-64.9,144.9-144.9C990.1,547.9,925.3,483.1,845.2,483.1z M342.1,700.5h-35v-76.1h-68.5v76.1h-35V526.7h35v68.5h68.5v-68.5h35V700.5z M497.3,556.1h-51.2v144.4h-35V556.1h-51.4v-29.4h137.5V556.1z M639,556.1h-51.2v144.4h-35V556.1h-51.4v-29.4H639V556.1z M782.3,607.1c-3.9,7.2-8.8,13-14.7,17.1c-5.9,4.1-11.9,6.9-18.1,8.2c-8.3,1.7-20.4,2.5-36.3,2.5h-22.8v65.6h-35l0-173.8h56.1c21.2,0,35.1,0.8,41.6,2.7c9.9,2.7,18.2,8.3,25,17c6.6,8.7,10,20,10,33.9C788.1,590.8,786,599.9,782.3,607.1z"
+		/></g
+	>
+</svg>

package/components/icons/HttpIcon.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        height?: string | undefined;
+        width?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type HttpIconProps = typeof __propDef.props;
+export declare type HttpIconEvents = typeof __propDef.events;
+export declare type HttpIconSlots = typeof __propDef.slots;
+export default class HttpIcon extends SvelteComponentTyped<HttpIconProps, HttpIconEvents, HttpIconSlots> {
+}
+export {};

package/components/icons/MastodonIcon.svelte

@@ -0,0 +1,16 @@
+<script>export let height = '24px';
+export let width = '24px';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	x="0px"
+	y="0px"
+	{width}
+	{height}
+	viewBox="0 0 32 32"
+	style=" fill:#000000;"
+	><path
+		d="M 15.9375 4.03125 C 12.917 4.0435 9.9179219 4.4269844 8.3574219 5.1464844 C 8.3574219 5.1464844 5 6.6748594 5 11.880859 C 5 18.077859 4.9955 25.860234 10.5625 27.365234 C 12.6945 27.938234 14.527953 28.061562 16.001953 27.976562 C 18.676953 27.825562 20 27.005859 20 27.005859 L 19.910156 25.029297 C 19.910156 25.029297 18.176297 25.640313 16.029297 25.570312 C 13.902297 25.495313 11.6615 25.335688 11.3125 22.679688 C 11.2805 22.432688 11.264625 22.182594 11.265625 21.933594 C 15.772625 23.052594 19.615828 22.420969 20.673828 22.292969 C 23.627828 21.933969 26.199344 20.081672 26.527344 18.388672 C 27.041344 15.720672 26.998047 11.880859 26.998047 11.880859 C 26.998047 6.6748594 23.646484 5.1464844 23.646484 5.1464844 C 22.000984 4.3779844 18.958 4.019 15.9375 4.03125 z M 12.705078 8.0019531 C 13.739953 8.0297031 14.762578 8.4927031 15.392578 9.4707031 L 16.001953 10.505859 L 16.609375 9.4707031 C 17.874375 7.5037031 20.709594 7.6264375 22.058594 9.1484375 C 23.302594 10.596438 23.025391 11.531 23.025391 18 L 23.025391 18.001953 L 20.578125 18.001953 L 20.578125 12.373047 C 20.578125 9.7380469 17.21875 9.6362812 17.21875 12.738281 L 17.21875 16 L 14.787109 16 L 14.787109 12.738281 C 14.787109 9.6362812 11.429688 9.7360938 11.429688 12.371094 L 11.429688 18 L 8.9765625 18 C 8.9765625 11.526 8.7043594 10.585438 9.9433594 9.1484375 C 10.622859 8.3824375 11.670203 7.9742031 12.705078 8.0019531 z"
+	/></svg
+>

package/components/icons/MastodonIcon.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        height?: string | undefined;
+        width?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type MastodonIconProps = typeof __propDef.props;
+export declare type MastodonIconEvents = typeof __propDef.events;
+export declare type MastodonIconSlots = typeof __propDef.slots;
+export default class MastodonIcon extends SvelteComponentTyped<MastodonIconProps, MastodonIconEvents, MastodonIconSlots> {
+}
+export {};

package/components/icons/MatrixIcon.svelte

@@ -0,0 +1,16 @@
+<script>export let height = '24px';
+export let width = '24px';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	x="0px"
+	y="0px"
+	{width}
+	{height}
+	viewBox="0 0 50 50"
+	style=" fill:#000000;"
+	><path
+		d="M 5 5 A 1.0001 1.0001 0 0 0 4 6 L 4 44 A 1.0001 1.0001 0 0 0 5 45 L 8 45 A 1.0001 1.0001 0 1 0 8 43 L 6 43 L 6 7 L 8 7 A 1.0001 1.0001 0 1 0 8 5 L 5 5 z M 42 5 A 1.0001 1.0001 0 1 0 42 7 L 44 7 L 44 43 L 42 43 A 1.0001 1.0001 0 1 0 42 45 L 45 45 A 1.0001 1.0001 0 0 0 46 44 L 46 6 A 1.0001 1.0001 0 0 0 45 5 L 42 5 z M 31.074219 17.509766 C 29.975744 17.487506 28.868391 17.760297 27.978516 18.373047 C 27.407516 18.767047 26.915609 19.272813 26.349609 19.757812 C 25.488609 18.039813 23.929344 17.580781 22.152344 17.550781 C 20.351344 17.519781 18.920922 18.341797 17.669922 19.841797 L 17.669922 18 L 14 18 L 14 32 L 17.664062 32 C 17.664062 32 17.657969 26.766016 17.667969 24.166016 C 17.669969 23.704016 17.689203 23.23225 17.783203 22.78125 C 18.073203 21.39225 19.538031 20.534437 20.957031 20.648438 C 22.309031 20.757437 23.100016 21.495656 23.166016 23.097656 C 23.177016 23.376656 23.166016 32 23.166016 32 L 26.832031 32 L 26.832031 24.228516 C 26.838031 23.629516 26.901875 23.0175 27.046875 22.4375 C 27.372875 21.1375 28.590531 20.49825 30.019531 20.65625 C 31.279531 20.79525 32.239031 21.474609 32.332031 22.849609 L 32.332031 32 L 36 32 L 36 22 C 36 21 35.746359 20.490859 35.443359 19.880859 C 34.710859 18.405234 32.90501 17.546865 31.074219 17.509766 z"
+	/></svg
+>

package/components/icons/MatrixIcon.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        height?: string | undefined;
+        width?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type MatrixIconProps = typeof __propDef.props;
+export declare type MatrixIconEvents = typeof __propDef.events;
+export declare type MatrixIconSlots = typeof __propDef.slots;
+export default class MatrixIcon extends SvelteComponentTyped<MatrixIconProps, MatrixIconEvents, MatrixIconSlots> {
+}
+export {};

package/components/icons/S3Icon.svelte

@@ -0,0 +1,16 @@
+<script>export let height = '24px';
+export let width = '24px';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	x="0px"
+	y="0px"
+	{width}
+	{height}
+	viewBox="0 0 50 50"
+	style=" fill:#000000;"
+	><path
+		d="M 28 7.9453125 L 21 10.279297 L 21 18.279297 L 16 19.945312 L 10 17.945312 L 3 20.279297 L 3 29.720703 L 3.6835938 29.949219 L 9 31.720703 L 9 39.720703 L 9.6835938 39.949219 L 16 42.054688 L 23 39.720703 L 23 31.720703 L 29 29.720703 L 29 21.720703 L 34 20.054688 L 40 22.054688 L 47 19.720703 L 47 10.279297 L 40 7.9453125 L 34 9.9453125 L 28 7.9453125 z M 28 10.054688 L 32.335938 11.5 L 28 12.945312 L 23.664062 11.5 L 28 10.054688 z M 40 10.054688 L 44.335938 11.5 L 40 12.945312 L 35.664062 11.5 L 40 10.054688 z M 23 13.388672 L 27 14.720703 L 27 19.611328 L 23 18.279297 L 23 13.388672 z M 33 13.388672 L 33 18.279297 L 29 19.611328 L 29 14.720703 L 33 13.388672 z M 35 13.388672 L 39 14.720703 L 39 19.611328 L 35 18.279297 L 35 13.388672 z M 45 13.388672 L 45 18.279297 L 41 19.611328 L 41 14.720703 L 45 13.388672 z M 10 20.054688 L 14.335938 21.5 L 10 22.945312 L 5.6640625 21.5 L 10 20.054688 z M 22 20.054688 L 26.335938 21.5 L 22 22.945312 L 17.664062 21.5 L 22 20.054688 z M 5 23.388672 L 9 24.720703 L 9 29.611328 L 5 28.279297 L 5 23.388672 z M 15 23.388672 L 15 28.279297 L 11 29.611328 L 11 24.720703 L 15 23.388672 z M 17 23.388672 L 21 24.720703 L 21 29.611328 L 17 28.279297 L 17 23.388672 z M 27 23.388672 L 27 28.279297 L 23 29.611328 L 23 24.720703 L 27 23.388672 z M 16 30.054688 L 20.335938 31.5 L 16 32.945312 L 11.664062 31.5 L 16 30.054688 z M 11 33.388672 L 15 34.720703 L 15 39.611328 L 11 38.279297 L 11 33.388672 z M 21 33.388672 L 21 38.279297 L 17 39.611328 L 17 34.720703 L 21 33.388672 z"
+	/></svg
+>

package/components/icons/S3Icon.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        height?: string | undefined;
+        width?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type S3IconProps = typeof __propDef.props;
+export declare type S3IconEvents = typeof __propDef.events;
+export declare type S3IconSlots = typeof __propDef.slots;
+export default class S3Icon extends SvelteComponentTyped<S3IconProps, S3IconEvents, S3IconSlots> {
+}
+export {};

package/components/icons/WindmillIcon.svelte

@@ -0,0 +1,68 @@
+<script>export let height = '24px';
+export let width = '24px';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	x="0px"
+	y="0px"
+	{width}
+	{height}
+	viewBox="0 0 188.8 258.10001"
+	preserveAspectRatio="xMidYMid meet"
+	id="svg12"
+	inkscape:export-filename="/home/rfiszel/Downloads/windmill.png"
+	inkscape:export-xdpi="31.02663"
+	inkscape:export-ydpi="31.02663"
+>
+	<defs id="defs16" />
+	<sodipodi:namedview
+		id="namedview14"
+		borderopacity="1.0"
+		inkscape:pageshadow="2"
+		inkscape:pageopacity="0.0"
+		inkscape:pagecheckerboard="0"
+		inkscape:document-units="pt"
+		showgrid="false"
+		inkscape:zoom="0.50043491"
+		inkscape:cx="57.949594"
+		inkscape:cy="197.82793"
+		inkscape:window-width="1276"
+		inkscape:window-height="1436"
+		inkscape:window-x="0"
+		inkscape:window-y="0"
+		inkscape:window-maximized="1"
+		inkscape:current-layer="svg12"
+		fit-margin-top="0"
+		fit-margin-left="0"
+		fit-margin-right="0"
+		fit-margin-bottom="0"
+	/>
+	<metadata id="metadata2"> Created by potrace 1.16, written by Peter Selinger 2001-2019 </metadata>
+	<g
+		transform="matrix(0.1,0,0,-0.1,-273.6,405.1)"
+		fill="#000000"
+		stroke="none"
+		id="g10"
+		inkscape:export-filename="/home/rfiszel/Downloads/g10.png"
+		inkscape:export-xdpi="31.02663"
+		inkscape:export-ydpi="31.02663"
+		style="fill:#000000;fill-opacity:1"
+	>
+		<path
+			d="m 2760,4025 -24,-26 447,-447 447,-447 -447,-447 -447,-447 24,-26 24,-26 448,448 448,448 448,-448 448,-448 24,26 24,26 -447,447 -447,447 447,447 447,447 -24,26 -24,26 -448,-448 -448,-448 -448,448 -448,448 z"
+			id="path4"
+			style="fill:#000000;fill-opacity:1"
+		/>
+		<path
+			d="m 3569,2823 -107,-108 -66,-539 c -39,-315 -63,-543 -58,-548 5,-5 67,-7 138,-6 l 129,3 2,155 c 1,146 2,155 23,172 29,23 91,23 119,1 19,-17 21,-29 23,-173 l 3,-155 138,-3 137,-3 v 28 c 0,15 -20,186 -45,378 -25,193 -53,421 -64,509 l -19,159 -118,118 c -65,66 -121,119 -124,119 -3,0 -53,-48 -111,-107 z"
+			id="path6"
+			style="fill:#000000;fill-opacity:1"
+		/>
+		<path
+			d="m 3317,1543 c -4,-3 -7,-21 -7,-40 v -33 h 380 380 v 24 c 0,59 21,56 -379,56 -202,0 -371,-3 -374,-7 z"
+			id="path8"
+			style="fill:#000000;fill-opacity:1"
+		/>
+	</g>
+</svg>

package/components/icons/WindmillIcon.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        height?: string | undefined;
+        width?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type WindmillIconProps = typeof __propDef.props;
+export declare type WindmillIconEvents = typeof __propDef.events;
+export declare type WindmillIconSlots = typeof __propDef.slots;
+export default class WindmillIcon extends SvelteComponentTyped<WindmillIconProps, WindmillIconEvents, WindmillIconSlots> {
+}
+export {};

package/components/jobs/JobDetail.svelte

@@ -0,0 +1,176 @@
+<script>import { displayDate, displayDaysAgo, forLater, msToSec, truncateHash, truncateRev } from '../../utils';
+import { faCalendar, faCircle, faClock, faFastForward, faHourglassHalf, faRobot, faTimes, faUser, faWind } from '@fortawesome/free-solid-svg-icons';
+import Icon from 'svelte-awesome';
+import { check } from 'svelte-awesome/icons';
+const SMALL_ICON_SCALE = 0.7;
+export let job;
+</script>
+
+<div class="border rounded py-4">
+	<div class="grid grid-cols-1 lg:grid-cols-3 w-full gap-4">
+		<div class="flex-col">
+			<div class="flex flex-row text-sm">
+				{#if job === undefined}
+					No job found
+				{:else}
+					<div class="block text-center align-middle pb-3 pt-2 px-6">
+						{#if 'success' in job && job.success}
+							{#if job.is_skipped}
+								<Icon
+									class="text-green-600"
+									data={faFastForward}
+									scale={SMALL_ICON_SCALE}
+									label="Job completed successfully but was skipped"
+								/>
+							{:else}
+								<Icon
+									class="text-green-600"
+									data={check}
+									scale={SMALL_ICON_SCALE}
+									label="Job completed successfully"
+								/>
+							{/if}
+						{:else if 'success' in job}
+							<Icon
+								class="text-red-700"
+								data={faTimes}
+								scale={SMALL_ICON_SCALE}
+								label="Job completed with an error"
+							/>
+						{:else if 'running' in job && job.running}
+							<Icon
+								class="text-yellow-500"
+								data={faCircle}
+								scale={SMALL_ICON_SCALE}
+								label="Job is running"
+							/>
+						{:else if job && 'running' in job && job.scheduled_for && forLater(job.scheduled_for)}
+							<Icon
+								class="text-gray-700"
+								data={faCalendar}
+								scale={SMALL_ICON_SCALE}
+								label="Job is scheduled to run at a later time"
+							/>
+						{:else}
+							<Icon
+								class="text-gray-500"
+								data={faHourglassHalf}
+								scale={SMALL_ICON_SCALE}
+								label="Job is waiting for an executor"
+							/>
+						{/if}
+					</div>
+
+					<h3 class="break-all  py-2">
+						{#if job.script_path}
+							<a class="pr-3" href="/run/{job.id}">{job.script_path} </a>
+						{:else if 'job_kind' in job && job.job_kind == 'preview'}
+							<a class="pr-3" href="/run/{job.id}">Preview without path </a>
+						{:else if 'job_kind' in job && job.job_kind != 'script'}
+							<a class="pr-3" href="/run/{job.id}">lock dependencies</a>
+						{/if}
+						{#if job.script_hash}
+							<a href="/scripts/get/{job.script_hash}" class="commit-hash"
+								>{truncateHash(job.script_hash ?? '')}</a
+							>
+						{/if}
+						{#if 'job_kind' in job && job.job_kind != 'script'}<span
+								class="bg-blue-200 text-gray-700 text-xs rounded px-1 mx-3 whitespace-nowrap"
+								><a href="/run/{job.id}">{job.job_kind}</a></span
+							>
+						{:else if job.is_flow_step}
+							<span class="bg-blue-200 text-gray-700 text-xs rounded px-1 mx-3"
+								><a href="/run/{job.parent_job}">step of flow</a></span
+							>
+						{/if}
+					</h3>
+				{/if}
+			</div>
+			<div>
+				<span class="pl-14 italic text-gray-500 text-2xs  whitespace-nowrap overflow-hidden"
+					>Run {job.id}</span
+				>
+			</div>
+		</div>
+		<div class="bg-white grid grid-cols-2 gap-x-2 col-span-2">
+			<div class="w-full text-gray-500 text-xs text-left flex flex-col gap-1 mx-4">
+				<div>
+					<Icon class="text-gray-700" data={faUser} scale={SMALL_ICON_SCALE} /><span class="mx-2">
+						By {job.created_by}</span
+					>
+				</div>
+				{#if job && 'duration_ms' in job && job.duration_ms != undefined}
+					<div>
+						<Icon class="text-gray-700" data={faHourglassHalf} scale={SMALL_ICON_SCALE} /><span
+							class="mx-2"
+						>
+							Ran in {msToSec(job.duration_ms)}s</span
+						>
+					</div>
+				{/if}
+				<div>
+					{#if job && job.parent_job}
+						{#if job.is_flow_step}
+							<Icon class="text-gray-700" data={faWind} scale={SMALL_ICON_SCALE} /><span
+								class="mx-2"
+							>
+								Step of flow <a href={`/run/${job.parent_job}`}>{truncateRev(job.parent_job, 6)}</a
+								></span
+							>
+						{:else}
+							<Icon class="text-gray-700" data={faRobot} scale={SMALL_ICON_SCALE} /><span
+								class="mx-2"
+							>
+								Triggered by parent <a href={`/run/${job.parent_job}`}>{job.parent_job}</a></span
+							>
+						{/if}
+					{:else if job && job.schedule_path}
+						<Icon class="text-gray-700" data={faCalendar} scale={SMALL_ICON_SCALE} />
+						<span class="mx-2"
+							>Triggered by the schedule: <a
+								href={`/schedule/add?edit=${job.schedule_path}&isFlow=${job.job_kind == 'flow'}`}
+								>{job.schedule_path}</a
+							></span
+						>
+					{/if}
+				</div>
+			</div>
+			<div class="text-gray-500 text-xs text-left place-self-start flex flex-col gap-1">
+				<div>
+					<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span class="mx-2">
+						Created {displayDaysAgo(job.created_at ?? '')}</span
+					>
+				</div>
+				{#if 'started_at' in job && job.started_at}
+					<div>
+						<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
+							class="mx-2"
+						>
+							Started {displayDaysAgo(job.started_at ?? '')}</span
+						>
+					</div>
+				{/if}
+				{#if 'scheduled_for' in job && !job.running && job.scheduled_for && forLater(job.scheduled_for)}
+					<div>
+						<Icon class="text-gray-700" data={faCalendar} scale={SMALL_ICON_SCALE} /><span
+							class="mx-2"
+						>
+							<span class="bg-blue-200 text-gray-700 text-xs rounded px-1 ">Scheduled</span>
+							for {displayDate(job.scheduled_for ?? '')}
+						</span>
+					</div>
+				{:else if 'scheduled_for' in job && !job.running}
+					<div>
+						<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
+							class="mx-2"
+						>
+							<span class="bg-blue-200 text-gray-700 text-xs rounded px-1 "
+								>Waiting for an executor</span
+							>
+						</span>
+					</div>
+				{/if}
+			</div>
+		</div>
+	</div>
+</div>

package/components/jobs/JobDetail.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Job } from '../../gen';
+declare const __propDef: {
+    props: {
+        job: Job;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type JobDetailProps = typeof __propDef.props;
+export declare type JobDetailEvents = typeof __propDef.events;
+export declare type JobDetailSlots = typeof __propDef.slots;
+export default class JobDetail extends SvelteComponentTyped<JobDetailProps, JobDetailEvents, JobDetailSlots> {
+}
+export {};

package/components/landing/FlowGettingStarted.svelte

@@ -0,0 +1,95 @@
+<script>
+	import { goto } from '$app/navigation'
+</script>
+
+<div class="p-4 border border-gray-300 rounded-md bg-gray-50 ">
+	<div class="flex items-center">
+		<h3 class="inline-flex items-center text-lg font-medium text-gray-700 ">
+			<svg
+				class="w-6 h-6 mr-2"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+				><path d="M12 14l9-5-9-5-9 5 9 5z" /><path
+					d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
+				/><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
+				/>
+			</svg>
+			Getting started
+		</h3>
+	</div>
+	<div class="mt-2 mb-4 text-sm text-gray-700 ">
+		Flows allow you to streamline complex processes and operations by chaining simple steps
+		together. Each Flow is composed of one or more steps. Create a new flow or find inspiration on
+		the Hub!
+	</div>
+	<div class="inline-flex flex-wrap gap-y-2">
+		<button
+			type="button"
+			on:click={() => goto('flows/add')}
+			class="mr-2 inline-flex items-center text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
+		>
+			<svg
+				class="w-4 h-4 mr-2"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+				/></svg
+			>
+			Create flow
+		</button>
+		<button
+			on:click={() => goto('https://docs.windmill.dev/docs/getting_started/flows')}
+			type="button"
+			class="mr-2 inline-flex items-center text-white bg-blue-600 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
+		>
+			<svg
+				class="w-4 h-4 mr-2"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+				/>
+			</svg>
+			Flow documentation
+		</button>
+		<button
+			type="button"
+			class="inline-flex items-center text-gray-700 bg-transparent border border-gray-700 hover:bg-gray-800 hover:text-white focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center "
+			data-dismiss-target="#alert-additional-content-5"
+			aria-label="Close"
+			on:click={() => goto('https://hub.windmill.dev/')}
+		>
+			<svg
+				class="w-4 h-4 mr-2"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+				/>
+			</svg>
+			Explore community flows on WindmillHub
+		</button>
+	</div>
+</div>

package/components/landing/FlowGettingStarted.svelte.d.ts

@@ -0,0 +1,19 @@
+/** @typedef {typeof __propDef.props}  FlowGettingStartedProps */
+/** @typedef {typeof __propDef.events}  FlowGettingStartedEvents */
+/** @typedef {typeof __propDef.slots}  FlowGettingStartedSlots */
+export default class FlowGettingStarted extends SvelteComponentTyped<{}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type FlowGettingStartedProps = typeof __propDef.props;
+export type FlowGettingStartedEvents = typeof __propDef.events;
+export type FlowGettingStartedSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/landing/FlowLandingBox.svelte

@@ -0,0 +1,69 @@
+<script>import { goto } from '$app/navigation';
+export let flow;
+</script>
+
+<div
+	class="border p-4 rounded-sm shadow-sm space-y-2 hover:border-blue-600 flex flex-col justify-between cursor-pointer"
+	on:click={() => goto(`/flows/get/${flow.path}`)}
+>
+	<div class="font-bold">{flow.summary}</div>
+
+	<div class="inline-flex justify-between w-full h-16">
+		<div class="text-xs">{flow.path}</div>
+	</div>
+
+	<div
+		class="inline-flex space-x-2 space-x-reverse flex-row-reverse w-full bottom-4 right-4 flex-wrap"
+	>
+		<button
+			on:click|stopPropagation={() => goto(`/flows/edit/${flow.path}?step=2`)}
+			type="button"
+			class="inline-flex items-center text-gray-700 bg-transparent border border-gray-700 hover:bg-gray-800 hover:text-white focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
+			data-dismiss-target="#alert-additional-content-5"
+			aria-label="Close"
+		>
+			<svg
+				class="w-4 h-4 mr-2"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
+				/>
+			</svg>
+			Edit
+		</button>
+
+		<button
+			on:click|stopPropagation={() => goto(`/flows/run/${flow.path}`)}
+			type="button"
+			class="inline-flex items-center text-gray-700 bg-transparent border border-gray-700 hover:bg-gray-800 hover:text-white focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
+			data-dismiss-target="#alert-additional-content-5"
+			aria-label="Close"
+		>
+			<svg
+				class="w-4 h-4 mr-2"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
+				/><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+				/>
+			</svg>
+			Run
+		</button>
+	</div>
+</div>

package/components/landing/FlowLandingBox.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Flow } from '../../gen';
+declare const __propDef: {
+    props: {
+        flow: Flow;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowLandingBoxProps = typeof __propDef.props;
+export declare type FlowLandingBoxEvents = typeof __propDef.events;
+export declare type FlowLandingBoxSlots = typeof __propDef.slots;
+export default class FlowLandingBox extends SvelteComponentTyped<FlowLandingBoxProps, FlowLandingBoxEvents, FlowLandingBoxSlots> {
+}
+export {};