starred/windmill
1
0
Fork 0
mirror of https://github.com/windmill-labs/windmill.git synced 2026-09-12 16:05:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(frontend): App landing page (#486)

Browse Source 
* feat(frontend): App landing page

* feat(frontend): Add link to documentation + adapt styles
This commit is contained in:
Faton Ramadani
2022-08-24 23:23:02 +02:00
committed by GitHub
parent 0e4f7fb332
commit 5954789abb
7 changed files with 520 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/landing/FlowGettingStarted.svelte
+95
View File
@@ -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="flex space-x-2">
<button
type="button"
on:click={() => goto('flows/add')}
class="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="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>
frontend/src/lib/components/landing/FlowLandingBox.svelte
+71
View File
@@ -0,0 +1,71 @@
<script lang="ts">
import { goto } from '$app/navigation'
import type { Flow } from '$lib/gen'
export let flow: Flow
</script>
<div
class="border p-4 rounded-sm shadow-sm space-y-2 hover:border-blue-600 flex flex-col justify-between"
>
<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={() => 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={() => 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>
frontend/src/lib/components/landing/RessourceGettingStarted.svelte
+51
View File
@@ -0,0 +1,51 @@
<script>
import { goto } from '$app/navigation'
</script>
<div class="p-4 border border-gray-300 rounded-md bg-gray-50 dark:border-gray-600 dark:bg-gray-700">
<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 dark:text-gray-300">
Connect to apps like Slack, Google Drive or Airtable using OAuth.
</div>
<div class="flex">
<button
on:click={() => goto('resources')}
type="button"
class="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 mr-2 text-center dark:bg-gray-600 dark:hover:bg-gray-500 dark:focus:ring-gray-600"
>
<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="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
/>
</svg>
Connect an API
</button>
</div>
</div>
frontend/src/lib/components/landing/ScriptBox.svelte
+84
View File
@@ -0,0 +1,84 @@
<script lang="ts">
import { goto } from '$app/navigation'
import type { Script } from '$lib/gen'
import { truncateHash } from '$lib/utils'
export let script: Script
</script>
<div
class="border p-4 rounded-sm shadow-sm space-y-2 hover:border-blue-600 flex flex-col justify-between"
>
<div class="font-bold">{script.summary}</div>
<div class="inline-flex justify-between w-full">
<div class="text-xs">{script.path}</div>
<span class="bg-gray-100 text-gray-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded ">
{truncateHash(script.hash)}
</span>
</div>
<div class="inline-flex space-x-1 w-full">
<span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded ">
{String(script.language).toUpperCase()}
</span>
{#if script.is_trigger}
<span class="bg-red-100 text-red-800 text-xs font-semibold px-2.5 py-0.5 rounded">
TRIGGER
</span>
{/if}
</div>
<div class="inline-flex space-x-2 space-x-reverse flex-row-reverse w-full">
<button
on:click={() => goto(`/scripts/edit/${script.hash}?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={() => goto(`/scripts/run/${script.hash}`)}
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>
frontend/src/lib/components/landing/ScriptGettingStarted.svelte
+93
View File
@@ -0,0 +1,93 @@
<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 ">
Create a new script or find inspiration on the Hub!
</div>
<div class="inline-flex space-x-2 flex-wrap">
<button
on:click={() => goto('scripts/add')}
type="button"
class="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 script
</button>
<button
on:click={() => goto('https://docs.windmill.dev/docs/getting_started/scripts')}
type="button"
class="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>
Script documentation
</button>
<button
on:click={() => goto('https://hub.windmill.dev/')}
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="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
/>
</svg>
Explore community scripts on WindmillHub
</button>
</div>
</div>
frontend/src/routes/__layout@root.svelte
+7
View File
@@ -14,6 +14,7 @@
faCrown,
faCubes,
faEye,
faHome,
faPlay,
faRobot,
faScroll,
@@ -213,6 +214,12 @@
</ul>
<div class="grow h-full" />
<ul class="flex flex-col {isCollapsed ? 'items-center' : 'px-6'} ">
<li>
<a href="/" class="menu-link text-sm font-medium items-center ">
<Icon class="text-white" data={faHome} scale={0.9} />
<span class=" pl-2 {isCollapsed ? 'hidden' : ''}">Home</span>
</a>
</li>
<li>
<a href="/scripts" class="menu-link text-sm font-medium items-center ">
<Icon class="text-white" data={faScroll} scale={0.9} />
frontend/src/routes/index.svelte
+119 -7
View File
@@ -1,17 +1,129 @@
<script lang="ts">
import { goto } from '$app/navigation'
import CenteredPage from '$lib/components/CenteredPage.svelte'
import { workspaceStore } from '$lib/stores'
import FlowGettingStarted from '$lib/components/landing/FlowGettingStarted.svelte'
import FlowLandingBox from '$lib/components/landing/FlowLandingBox.svelte'
import RessourceGettingStarted from '$lib/components/landing/RessourceGettingStarted.svelte'
import ScriptBox from '$lib/components/landing/ScriptBox.svelte'
import ScriptGettingStarted from '$lib/components/landing/ScriptGettingStarted.svelte'
import { FlowService, Script, ScriptService, type Flow } from '$lib/gen'
import { userStore, workspaceStore } from '$lib/stores'
$workspaceStore = localStorage.getItem('workspace') ?? undefined
let scripts: Script[] = []
if ($workspaceStore) {
goto('/scripts')
let flows: Flow[] = []
async function loadScripts() {
scripts = await ScriptService.listScripts({
workspace: $workspaceStore!,
perPage: 3
})
}
async function loadFlows() {
flows = await FlowService.listFlows({
workspace: $workspaceStore!,
perPage: 3
})
}
$: {
if ($userStore) {
loadScripts()
loadFlows()
}
}
const ressources = []
</script>
<CenteredPage>
<div class="py-6">
<h1>Welcome to windmill.dev !</h1>
<div class="space-y-12 mx-8 my-16">
<h1 class="text-xl font-extrabold tracking-tight leading-none text-gray-900 md:text-3xl">
Welcome to Windmill!
</h1>
<div>
<h2
class="mb-4 text-lg font-extrabold tracking-tight leading-none text-gray-900 md:text-2xl border-b py-2"
>
<span class="text-transparent bg-clip-text bg-gradient-to-r to-blue-500 from-blue-600">
Scripts
</span>
</h2>
<ScriptGettingStarted />
<div class="mt-6 mb-2 text-md font-bold text-gray-900 ">Latest scripts:</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 my-4">
{#each scripts as script}
<ScriptBox {script} />
{/each}
<a
href="/scripts"
class="text-sm font-extrabold text-gray-700 hover:underline inline-flex items-center"
>
All scripts
<svg
class="w-4 h-4 ml-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="M17 8l4 4m0 0l-4 4m4-4H3"
/>
</svg>
</a>
</div>
</div>
<div>
<h2
class="mb-4 text-lg font-extrabold tracking-tight leading-none text-gray-900 md:text-2xl border-b py-2 "
>
<span class="text-transparent bg-clip-text bg-gradient-to-r to-blue-500 from-blue-600">
Flows
</span>
</h2>
<FlowGettingStarted />
<div class="mt-6 mb-2 text-md font-bold text-gray-900 ">Latest flows:</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 my-4">
{#each flows as flow}
<FlowLandingBox {flow} />
{/each}
<a
href="/flows"
class="text-sm font-extrabold text-gray-700 hover:underline inline-flex items-center"
>
All flows
<svg
class="w-4 h-4 ml-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="M17 8l4 4m0 0l-4 4m4-4H3"
/>
</svg>
</a>
</div>
</div>
<div>
<h2
class="mb-4 text-lg font-extrabold tracking-tight leading-none text-gray-900 md:text-2xl border-b py-2 "
>
<span class="text-transparent bg-clip-text bg-gradient-to-r to-blue-500 from-blue-600">
Ressources
</span>
</h2>
{#if ressources.length === 0}
<RessourceGettingStarted />
{/if}
</div>
</div>
</CenteredPage>