alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: update home page styles

Browse Source
This commit is contained in:
braks
2023-10-06 23:39:02 +02:00
committed by Braks
parent 28fd4955f4
commit 750c01df9d
6 changed files with 60 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/home/Acknowledgement.vue
+21 -25
View File
@@ -3,35 +3,31 @@ import Heart from '~icons/mdi/heart'
</script> </script>
<template> <template>
<div id="acknowledgement"> <div id="acknowledgement mt-12">
<div class="bg-black text-white dark:(bg-gray-100 text-black)"> <div class="max-w-3/4 md:max-w-4xl mx-auto py-4 md:py-12 lg:py-12 text-center">
<div class="max-w-3/4 md:max-w-4xl mx-auto py-4 md:py-12 lg:py-12 text-center"> <h1 class="md:(!mb-8) flex justify-center items-center gap-2"><Heart class="text-red-500 min-w-8" /> Acknowledgement</h1>
<h1 class="md:(!mb-8) flex justify-center items-center gap-2"><Heart class="text-red-500" /> Acknowledgement</h1>
<p> <p>
<span class="underline">First and foremost</span>: A huge <span class="font-semibold text-red-400">Thank you</span> to <span class="underline">First and foremost</span>: A huge <span class="font-semibold text-red-400">Thank you</span> to the
the developers of <a href="https://webkid.io" target="_blank" class="text-green-500">Webkid</a>. developers of <a href="https://webkid.io" target="_blank" class="text-primary">Webkid</a>.
<span class="inline-block"> <span class="inline-block">
Without their continuous, amazing, open-source work, this project would not have been possible. Without their continuous, amazing, open-source work, this project would not have been possible.
</span> </span>
</p> </p>
<p> <p>
<span class="font-semibold text-secondary">Vue Flow</span> is built on top of existing features and code taken from <span class="font-semibold text-accent">Vue Flow</span> is built on top of existing features and code taken from
<a href="https://reactflow.dev" target="_blank" class="text-green-500">React Flow</a>. It replicates the features found <a href="https://reactflow.dev" target="_blank" class="text-primary">React Flow</a>. It replicates the features found in
in React Flow and brings them to the Vue 3 experience, with all the fun reactivity and features like template slots etc. React Flow and brings them to the Vue 3 experience, with all the fun reactivity and features like template slots etc. you
you know and love from Vue. If you're happy with Vue Flow, know and love from Vue. If you're happy with Vue Flow,
<span class="inline-block text-xl font-medium"> <span class="inline-block text-xl font-medium">
please consider supporting <a href="https://webkid.io" target="_blank" class="text-green-500">Webkid</a> by please consider supporting <a href="https://webkid.io" target="_blank" class="text-primary">Webkid</a> by
<a href="https://github.com/sponsors/wbkd" target="_blank" class="font-bold text-green-500"> donating </a> or <a href="https://github.com/sponsors/wbkd" target="_blank" class="font-bold text-primary"> donating </a> or
<a href="https://pro.reactflow.dev/" target="_blank" class="font-bold text-green-500"> <a href="https://pro.reactflow.dev/" target="_blank" class="font-bold text-primary"> subscribing to React Flow Pro. </a>
subscribing to React Flow Pro. </span>
</a> </p>
</span>
</p>
</div>
</div> </div>
</div> </div>
</template> </template>
docs/components/home/Features.vue
+1 -1
View File
@@ -27,7 +27,7 @@ onBeforeUnmount(stop)
<template> <template>
<div ref="el" class="w-full"> <div ref="el" class="w-full">
<div <div
class="flex flex-col divide-y divide-gray-500 md:divide-y-0 gap-12 md:gap-24 lg:gap-36 max-w-5/6 xl:max-w-7xl m-auto py-12 md:py-24 text-center md:text-left" class="flex flex-col divide-y divide-gray-500 md:divide-y-0 gap-12 md:gap-24 lg:gap-36 max-w-5/6 2xl:max-w-7xl m-auto py-12 md:py-24 text-center md:text-left"
> >
<div class="flex flex-col md:flex-row gap-12 md:gap-24"> <div class="flex flex-col md:flex-row gap-12 md:gap-24">
<Basic @pane="onLoad" /> <Basic @pane="onLoad" />
docs/components/home/Home.vue
+1 -1
View File
@@ -25,7 +25,7 @@ onMounted(() => {
<style lang="scss"> <style lang="scss">
.is-home { .is-home {
h1 { h1 {
@apply text-xl lg:text-4xl mb-4 font-bold; @apply text-2xl md:text-3xl xl:text-4xl mb-4 font-bold;
} }
h2 { h2 {
docs/components/home/Showcase.vue
+23 -14
View File
@@ -1,26 +1,33 @@
<script lang="ts" setup></script> <script lang="ts" setup></script>
<template> <template>
<div class="w-full"> <div class="w-full text-white bg-gradient-to-br from-secondary-500 to-secondary-100">
<div class="max-w-5/6 lg:max-w-7xl mx-auto py-4 md:py-12 lg:py-12 text-center"> <div class="max-w-5/6 2xl:max-w-7xl mx-auto py-4 md:py-12 lg:py-12">
<div class="flex flex-col items-center justify-center gap-2"> <div class="flex flex-col items-center justify-center gap-2">
<h1>Showcase</h1> <h1>Putting Ideas into Action: The Showcase</h1>
<p class="text-lg">Vue Flow is used in a variety of projects and applications. Here are some of them:</p> <p class="font-medium max-w-3/4 xl:max-w-1/2">
Whether you're a seasoned developer or just starting your journey with Vue Flow, this showcase offers inspiration and
insights into what's possible. Dive in and discover the potential of Vue Flow for your next project.
</p>
<div class="flex flex-col md:flex-row justify-between items-center gap-12 mt-8"> <div class="flex flex-col md:flex-row justify-between items-center gap-12 mt-8 text-center md:text-left">
<div class="flex-1 flex flex-col justify-center"> <div class="flex-1 flex flex-col items-center md:items-start">
<div <div
class="h-[200px] md:min-h-[300px] w-full shadow-xl rounded-xl font-mono uppercase border-1 border-gray overflow-hidden" class="h-[200px] md:min-h-[300px] w-full shadow-xl rounded-xl font-mono uppercase border-1 border-gray overflow-hidden"
> >
<img class="object-cover h-full w-full" src="/assets/octai.png" alt="Octai" /> <img class="object-cover h-full w-full" src="/assets/octai.png" alt="Octai" />
</div> </div>
<a href="https://octai.com" target="_blank"> <div class="px-1">
<h2 class="text-3xl mt-6 font-semibold text-[#2196f3]">Octai</h2> <a href="https://octai.com" target="_blank">
</a> <h2 class="text-3xl mt-6 font-semibold inline-block">Octai</h2>
</a>
<h3 class="text-lg">A Machine-Learning NoCode platform using a node-based UI for Data Scientists and Developers.</h3> <h3 class="text-lg">
A Machine-Learning NoCode platform using a node-based UI for Data Scientists and Developers.
</h3>
</div>
</div> </div>
<div class="flex-1 flex flex-col justify-center"> <div class="flex-1 flex flex-col justify-center">
@@ -30,11 +37,13 @@
<img class="object-cover h-full w-full" src="/assets/kestra.webp" alt="Kestra" /> <img class="object-cover h-full w-full" src="/assets/kestra.webp" alt="Kestra" />
</div> </div>
<a href="https://octai.com" target="_blank"> <div class="px-1">
<h2 class="text-3xl mt-6 font-semibold text-[#4b0aaa]">Kestra</h2> <a href="https://octai.com" target="_blank">
</a> <h2 class="text-3xl mt-6 font-semibold inline-block">Kestra</h2>
</a>
<h3 class="text-lg">An open-source orchestrator that makes both scheduled and event-driven workflows easy.</h3> <h3 class="text-lg">An open-source orchestrator that makes both scheduled and event-driven workflows easy.</h3>
</div>
</div> </div>
</div> </div>
</div> </div>
docs/components/home/flows/Basic.vue
+11 -2
View File
@@ -11,7 +11,15 @@ const emit = defineEmits(['pane'])
const getNodeClass: ClassFunc<GraphNode> = (el) => { const getNodeClass: ClassFunc<GraphNode> = (el) => {
const classes = ['font-semibold', '!border-2', 'transition-colors', 'duration-300', 'ease-in-out'] const classes = ['font-semibold', '!border-2', 'transition-colors', 'duration-300', 'ease-in-out']
if (el.selected) { if (el.selected) {
classes.push(...['!border-primary/80', '!shadow-md', '!shadow-primary/50', '!bg-primary-100/50', '!text-gray-700']) classes.push(
...[
'!border-primary/80',
'!shadow-lg',
'shadow-secondary dark:(!shadow-primary/50)',
'!bg-primary-100/50 dark:(!bg-primary-300/80)',
'!text-gray-700 dark:(!text-white)',
],
)
} }
return classes.join(' ') return classes.join(' ')
@@ -26,7 +34,8 @@ const getEdgeStyle: StyleFunc<GraphEdge> = (el) => {
const sourceNodeSelected = el.sourceNode.selected const sourceNodeSelected = el.sourceNode.selected
return { return {
transition: 'stroke ease-in-out 300ms', transition: 'stroke ease-in-out 300ms',
stroke: el.selected || sourceNodeSelected ? 'var(--secondary)' : '', stroke: el.selected || sourceNodeSelected ? 'var(--primary)' : '',
strokeWidth: 2,
} }
} }
docs/components/home/flows/RGB.vue
+3
View File
@@ -95,15 +95,18 @@ const nodeColor: MiniMapNodeFunc = (node) => {
<RGBOutputNode v-bind="rgbOutputProps" :rgb="`rgb(${color.red}, ${color.green}, ${color.blue})`" /> <RGBOutputNode v-bind="rgbOutputProps" :rgb="`rgb(${color.red}, ${color.green}, ${color.blue})`" />
</template> </template>
<Controls class="hidden md:block" /> <Controls class="hidden md:block" />
<Background <Background
:variant="BackgroundVariant.Lines" :variant="BackgroundVariant.Lines"
:pattern-color="`rgb(${color.red}, ${color.green}, ${color.blue})`" :pattern-color="`rgb(${color.red}, ${color.green}, ${color.blue})`"
:gap="48" :gap="48"
:size="1" :size="1"
/> />
<MiniMap class="hidden sm:block transform scale-25 md:scale-50 lg:scale-75 origin-bottom-right" :node-color="nodeColor" /> <MiniMap class="hidden sm:block transform scale-25 md:scale-50 lg:scale-75 origin-bottom-right" :node-color="nodeColor" />
</VueFlow> </VueFlow>
</div> </div>
<div class="md:max-w-1/3 flex flex-col gap-12 justify-center <md:pt-12"> <div class="md:max-w-1/3 flex flex-col gap-12 justify-center <md:pt-12">
<div class="flex flex-col gap-2 items-center md:items-start"> <div class="flex flex-col gap-2 items-center md:items-start">
<h1>Customizable</h1> <h1>Customizable</h1>