docs: update theme
This commit is contained in:
braks
@@ -27,7 +27,7 @@ onBeforeUnmount(stop)
|
||||
<template>
|
||||
<div ref="el" class="w-full">
|
||||
<div
|
||||
class="flex flex-col divide-y divide-gray-500 md:divide-y-0 gap-12 md:gap-24 lg:gap-36 max-w-9/12 md:max-w-11/12 lg:max-w-9/12 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 xl: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">
|
||||
<Basic @pane="onLoad" />
|
||||
|
||||
@@ -2,13 +2,13 @@
|
||||
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<div class="max-w-3/4 md:max-w-5xl mx-auto py-4 md:py-12 lg:py-12 text-center">
|
||||
<div class="max-w-5/6 lg:max-w-7xl mx-auto py-4 md:py-12 lg:py-12 text-center">
|
||||
<div class="flex flex-col items-center justify-center gap-2">
|
||||
<h1>Showcase</h1>
|
||||
|
||||
<p class="text-lg">Vue Flow is used in a variety of projects and applications. Here are some of them:</p>
|
||||
|
||||
<div class="flex flex-col md:flex-row justify-between gap-12 mt-8">
|
||||
<div class="flex flex-col md:flex-row justify-between items-center gap-12 mt-8">
|
||||
<div class="flex-1 flex flex-col justify-center">
|
||||
<div
|
||||
class="h-[200px] md:min-h-[300px] w-full shadow-xl rounded-xl font-mono uppercase border-1 border-gray overflow-hidden"
|
||||
@@ -20,7 +20,7 @@
|
||||
<h2 class="text-3xl mt-6 font-semibold text-[#2196f3]">Octai</h2>
|
||||
</a>
|
||||
|
||||
<h3 class="text-lg">Machine Learning NoCode Platform 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 class="flex-1 flex flex-col justify-center">
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
<script setup>
|
||||
import { VPTeamMembers } from 'vitepress/theme'
|
||||
|
||||
const members = [
|
||||
{
|
||||
avatar: 'https://avatars.githubusercontent.com/u/78412429?v=4',
|
||||
name: 'Burak Cakmakoglu',
|
||||
title: 'Creator',
|
||||
links: [{ icon: 'github', link: 'https://github.com/bcakmakoglu' }],
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full flex flex-col gap-4">
|
||||
<h1 class="md:mb-8 flex justify-center items-center">Meet the Team</h1>
|
||||
<VPTeamMembers size="small" :members="members" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -101,16 +101,19 @@ onPaneReady((i) => emit('pane', i))
|
||||
<Background variant="lines" pattern-color="#aaa" :gap="46" />
|
||||
</VueFlow>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<h1>Additional Features</h1>
|
||||
|
||||
<p>
|
||||
On top of all the features Vue Flow comes with several components like a Background, Minimap or Controls.
|
||||
|
||||
<br />
|
||||
Plus it's built for composition, making the access of the internal state easy as can be!
|
||||
</p>
|
||||
<a class="docs-button max-w-max" href="/guide/"> Documentation </a>
|
||||
|
||||
<a class="docs-button" href="/guide/"> Documentation </a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -11,9 +11,7 @@ const emit = defineEmits(['pane'])
|
||||
const getNodeClass: ClassFunc<GraphNode> = (el) => {
|
||||
const classes = ['font-semibold', '!border-2', 'transition-colors', 'duration-300', 'ease-in-out']
|
||||
if (el.selected) {
|
||||
classes.push(
|
||||
...['!border-green-500/80', '!shadow-md', '!shadow-green-500/50', '!bg-green-100/80 dark:(!bg-white)', '!text-gray-700'],
|
||||
)
|
||||
classes.push(...['!border-primary/80', '!shadow-md', '!shadow-primary/50', '!bg-primary-100/50', '!text-gray-700'])
|
||||
}
|
||||
|
||||
return classes.join(' ')
|
||||
@@ -111,13 +109,16 @@ onConnect((param) => {
|
||||
<div class="md:max-w-1/3 flex flex-col justify-center">
|
||||
<div class="flex flex-col items-center md:items-start">
|
||||
<h1>Interactive Graphs</h1>
|
||||
|
||||
<p>
|
||||
Vue Flow comes with built-in features like zoom & pan and dedicated controls, single & multi-selections, draggable
|
||||
elements, customizable nodes and edges and a bunch of event handlers.
|
||||
</p>
|
||||
<a class="docs-button max-w-max" href="/guide/"> Documentation </a>
|
||||
|
||||
<a class="docs-button" href="/guide/"> Documentation </a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase border-1 border-secondary overflow-hidden"
|
||||
>
|
||||
@@ -134,14 +135,14 @@ onConnect((param) => {
|
||||
|
||||
<style>
|
||||
.basic .vue-flow__node-input.selected .vue-flow__handle {
|
||||
@apply bg-green-500;
|
||||
@apply bg-primary;
|
||||
}
|
||||
|
||||
.basic .vue-flow__node-default.selected .vue-flow__handle {
|
||||
@apply bg-green-500;
|
||||
@apply bg-primary;
|
||||
}
|
||||
|
||||
.basic .vue-flow__node-output.selected .vue-flow__handle {
|
||||
@apply bg-green-500;
|
||||
@apply bg-primary;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -243,7 +243,7 @@ function scrollTo() {
|
||||
|
||||
<template v-else-if="props.id === 'examples'">
|
||||
<div class="flex">
|
||||
<a class="intro-link group bg-[#ef467e]" href="/examples/"> Check The Examples </a>
|
||||
<a class="intro-link group bg-pink-500" href="/examples/"> Check The Examples </a>
|
||||
</div>
|
||||
|
||||
<Handle
|
||||
@@ -278,7 +278,7 @@ function scrollTo() {
|
||||
<style>
|
||||
.intro {
|
||||
@apply cursor-pointer
|
||||
bg-green-500
|
||||
bg-primary
|
||||
text-white
|
||||
transform
|
||||
transition-transform
|
||||
|
||||
@@ -9,7 +9,7 @@ const emit = defineEmits(['pane'])
|
||||
const breakpoints = useBreakpoints(breakpointsTailwind)
|
||||
|
||||
const nodeClasses = ['!normal-case font-semibold !text-white', '!border-1', 'shadow-md'].join(' ')
|
||||
const childClasses = `${nodeClasses} !bg-green-500/70 !border-white`
|
||||
const childClasses = `${nodeClasses} !bg-primary-500/70 !border-white`
|
||||
|
||||
const { onPaneReady, panOnDrag } = useVueFlow({
|
||||
fitViewOnInit: true,
|
||||
@@ -27,7 +27,7 @@ const { onPaneReady, panOnDrag } = useVueFlow({
|
||||
id: '2',
|
||||
label: 'Parent Node',
|
||||
position: { x: -125, y: 100 },
|
||||
class: `${nodeClasses} !bg-green-500/30 !border-green-500`,
|
||||
class: `${nodeClasses} !bg-primary-500/30 !border-primary-500`,
|
||||
style: { width: '400px', height: '160px' },
|
||||
},
|
||||
{
|
||||
@@ -72,7 +72,7 @@ onPaneReady((i) => emit('pane', i))
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase border-1 border-green-500 overflow-hidden"
|
||||
class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase border-1 border-primary-500 overflow-hidden"
|
||||
>
|
||||
<VueFlow class="nested">
|
||||
<Controls class="md:(!left-auto !right-[10px])" />
|
||||
|
||||
@@ -6,10 +6,10 @@ import '@vue-flow/core/dist/style.css'
|
||||
import '@vue-flow/core/dist/theme-default.css'
|
||||
import '@vue-flow/controls/dist/style.css'
|
||||
import '@vue-flow/minimap/dist/style.css'
|
||||
import './../../assets/index.css'
|
||||
|
||||
import Theme from 'vitepress/theme'
|
||||
import Layout from './layouts/default.vue'
|
||||
import './style.css'
|
||||
|
||||
export default {
|
||||
extends: Theme,
|
||||
|
||||
@@ -0,0 +1,202 @@
|
||||
/**
|
||||
* Customize default theme styling by overriding CSS variables:
|
||||
* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
|
||||
*/
|
||||
|
||||
/**
|
||||
* Colors
|
||||
*
|
||||
* Each colors have exact same color scale system with 3 levels of solid
|
||||
* colors with different brightness, and 1 soft color.
|
||||
*
|
||||
* - `XXX-1`: The most solid color used mainly for colored text. It must
|
||||
* satisfy the contrast ratio against when used on top of `XXX-soft`.
|
||||
*
|
||||
* - `XXX-2`: The color used mainly for hover state of the button.
|
||||
*
|
||||
* - `XXX-3`: The color for solid background, such as bg color of the button.
|
||||
* It must satisfy the contrast ratio with pure white (#ffffff) text on
|
||||
* top of it.
|
||||
*
|
||||
* - `XXX-soft`: The color used for subtle background such as custom container
|
||||
* or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
|
||||
* on top of it.
|
||||
*
|
||||
* The soft color must be semi transparent alpha channel. This is crucial
|
||||
* because it allows adding multiple "soft" colors on top of each other
|
||||
* to create a accent, such as when having inline code block inside
|
||||
* custom containers.
|
||||
*
|
||||
* - `default`: The color used purely for subtle indication without any
|
||||
* special meanings attched to it such as bg color for menu hover state.
|
||||
*
|
||||
* - `brand`: Used for primary brand colors, such as link text, button with
|
||||
* brand theme, etc.
|
||||
*
|
||||
* - `tip`: Used to indicate useful information. The default theme uses the
|
||||
* brand color for this by default.
|
||||
*
|
||||
* - `warning`: Used to indicate warning to the users. Used in custom
|
||||
* container, badges, etc.
|
||||
*
|
||||
* - `danger`: Used to show error, or dangerous message to the users. Used
|
||||
* in custom container, badges, etc.
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-c-default-1: var(--vp-c-gray-1);
|
||||
--vp-c-default-2: var(--vp-c-gray-2);
|
||||
--vp-c-default-3: var(--vp-c-gray-3);
|
||||
--vp-c-default-soft: var(--vp-c-gray-soft);
|
||||
|
||||
--vp-c-brand-1: #42B983;
|
||||
--vp-c-brand-2: #339066;
|
||||
--vp-c-brand-3: #246648;
|
||||
--vp-c-brand-soft: #35495E;
|
||||
|
||||
--vp-c-tip-1: var(--vp-c-brand-1);
|
||||
--vp-c-tip-2: var(--vp-c-brand-2);
|
||||
--vp-c-tip-3: var(--vp-c-brand-3);
|
||||
--vp-c-tip-soft: var(--vp-c-brand-soft);
|
||||
|
||||
--vp-c-warning-1: var(--vp-c-yellow-1);
|
||||
--vp-c-warning-2: var(--vp-c-yellow-2);
|
||||
--vp-c-warning-3: var(--vp-c-yellow-3);
|
||||
--vp-c-warning-soft: var(--vp-c-yellow-soft);
|
||||
|
||||
--vp-c-danger-1: var(--vp-c-red-1);
|
||||
--vp-c-danger-2: var(--vp-c-red-2);
|
||||
--vp-c-danger-3: var(--vp-c-red-3);
|
||||
--vp-c-danger-soft: var(--vp-c-red-soft);
|
||||
}
|
||||
|
||||
/**
|
||||
* Component: Button
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-button-brand-border: transparent;
|
||||
--vp-button-brand-text: var(--vp-c-white);
|
||||
--vp-button-brand-bg: var(--vp-c-brand-3);
|
||||
--vp-button-brand-hover-border: transparent;
|
||||
--vp-button-brand-hover-text: var(--vp-c-white);
|
||||
--vp-button-brand-hover-bg: var(--vp-c-brand-2);
|
||||
--vp-button-brand-active-border: transparent;
|
||||
--vp-button-brand-active-text: var(--vp-c-white);
|
||||
--vp-button-brand-active-bg: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
/**
|
||||
* Component: Home
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-home-hero-name-color: transparent;
|
||||
--vp-home-hero-name-background: -webkit-linear-gradient(
|
||||
120deg,
|
||||
#bd34fe 30%,
|
||||
#41d1ff
|
||||
);
|
||||
|
||||
--vp-home-hero-image-background-image: linear-gradient(
|
||||
-45deg,
|
||||
#bd34fe 50%,
|
||||
#47caff 50%
|
||||
);
|
||||
--vp-home-hero-image-filter: blur(40px);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
:root {
|
||||
--vp-home-hero-image-filter: blur(56px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
:root {
|
||||
--vp-home-hero-image-filter: blur(72px);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Component: Custom Block
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--primary: #42B983;
|
||||
--secondary: #35495E;
|
||||
--vp-custom-block-tip-border: transparent;
|
||||
--vp-custom-block-tip-text: white;
|
||||
--vp-custom-block-tip-bg: var(--vp-c-brand-soft);
|
||||
--vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
|
||||
}
|
||||
|
||||
/**
|
||||
* Component: Algolia
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
.DocSearch {
|
||||
--docsearch-primary-color: var(--vp-c-brand-1) !important;
|
||||
}
|
||||
|
||||
.VPHome {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.VPNavBar.has-sidebar .content, .VPNav {
|
||||
background-color: rgba(var(--vp-c-bg), 0.75);
|
||||
backdrop-filter: blur(1px);
|
||||
}
|
||||
|
||||
.examples .VPDoc {
|
||||
@apply !px-8 !py-6;
|
||||
}
|
||||
|
||||
.examples .content-container {
|
||||
@apply !w-full !max-w-7xl;
|
||||
}
|
||||
|
||||
.examples .aside {
|
||||
@apply !hidden;
|
||||
}
|
||||
|
||||
html, body {
|
||||
@apply scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-green-500 scrollbar-track-black;
|
||||
}
|
||||
|
||||
ul li {
|
||||
@apply mt-2;
|
||||
}
|
||||
|
||||
.docs-button {
|
||||
@apply mt-4 z-1 shadow-lg transition-colors duration-200 text-white font-semibold text-lg px-4 py-3 rounded-lg bg-accent dark:shadow-white/10;
|
||||
}
|
||||
|
||||
.examples-button {
|
||||
@apply z-1 shadow-lg transition-colors duration-200 font-semibold text-lg text-white px-4 py-3 rounded-lg bg-primary dark:shadow-white/10;
|
||||
}
|
||||
|
||||
.slider {
|
||||
--color: red;
|
||||
@apply bg-gray-200 w-full h-[10px] outline-none rounded-full;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
&::-moz-range-thumb {
|
||||
@apply w-[15px] h-[15px] cursor-pointer border-1 border-solid border-white rounded-full;
|
||||
-webkit-appearance: none;
|
||||
background: var(--color);
|
||||
}
|
||||
&::-webkit-slider-thumb {
|
||||
@apply w-[15px] h-[15px] cursor-pointer border-1 border-solid border-white rounded-full;
|
||||
-webkit-appearance: none;
|
||||
background: var(--color);
|
||||
}
|
||||
}
|
||||
|
||||
.vue-repl pre, .vue-repl pre[class*=language-] {
|
||||
padding: unset;
|
||||
margin: unset;
|
||||
border-radius: unset;
|
||||
line-height: unset;
|
||||
}
|
||||
@@ -29,43 +29,46 @@ export default defineConfig({
|
||||
extend: {
|
||||
colors: {
|
||||
primary: {
|
||||
'50': '#fcf9ff',
|
||||
'100': '#f8f3ff',
|
||||
'200': '#eee1fe',
|
||||
'300': '#e4cffe',
|
||||
'400': '#cfaafd',
|
||||
'500': '#BB86FC',
|
||||
'600': '#a879e3',
|
||||
'700': '#8c65bd',
|
||||
'800': '#705097',
|
||||
'900': '#5c427b',
|
||||
'DEFAULT': '#BB86FC',
|
||||
DEFAULT: '#42B983',
|
||||
50: '#C7EBDB',
|
||||
100: '#B8E6D1',
|
||||
200: '#9ADBBE',
|
||||
300: '#7CD0AA',
|
||||
400: '#5EC697',
|
||||
500: '#42B983',
|
||||
600: '#339066',
|
||||
700: '#246648',
|
||||
800: '#163D2B',
|
||||
900: '#07140E',
|
||||
950: '#000000',
|
||||
},
|
||||
secondary: {
|
||||
'50': '#c4fef9',
|
||||
'100': '#9df7ef',
|
||||
'200': '#77f0e4',
|
||||
'300': '#50e8da',
|
||||
'400': '#2ae1cf',
|
||||
'500': '#03dac5',
|
||||
'600': '#03ae9d',
|
||||
'700': '#028276',
|
||||
'800': '#02564e',
|
||||
'900': '#012a26',
|
||||
'DEFAULT': '#03dac5',
|
||||
DEFAULT: '#35495E',
|
||||
50: '#8CA5BE',
|
||||
100: '#7F9AB7',
|
||||
200: '#6586A8',
|
||||
300: '#527292',
|
||||
400: '#445D78',
|
||||
500: '#35495E',
|
||||
600: '#212D3A',
|
||||
700: '#0D1116',
|
||||
800: '#000000',
|
||||
900: '#000000',
|
||||
950: '#000000',
|
||||
},
|
||||
accent: {
|
||||
'50': '#e6d4ff',
|
||||
'100': '#ccaafc',
|
||||
'200': '#b17ff8',
|
||||
'300': '#9755f5',
|
||||
'400': '#7c2af1',
|
||||
'500': '#6200ee',
|
||||
'600': '#5000c1',
|
||||
'700': '#3d0095',
|
||||
'800': '#2b0068',
|
||||
'900': '#18003b',
|
||||
'DEFAULT': '#6200ee',
|
||||
DEFAULT: '#F15A16',
|
||||
50: '#FBD5C3',
|
||||
100: '#FAC7B0',
|
||||
200: '#F8AC89',
|
||||
300: '#F69163',
|
||||
400: '#F3753C',
|
||||
500: '#F15A16',
|
||||
600: '#C3450C',
|
||||
700: '#8E3209',
|
||||
800: '#591F05',
|
||||
900: '#240D02',
|
||||
950: '#0A0401',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@@ -1,64 +0,0 @@
|
||||
:root {
|
||||
--primary: #BB86FC;
|
||||
--secondary: #03dac5;
|
||||
--vp-c-brand: #10b981;
|
||||
--vp-c-accent: #BB86FC;
|
||||
}
|
||||
|
||||
.VPHome {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.VPNavBar.has-sidebar .content, .VPNav {
|
||||
background-color: rgba(var(--vp-c-bg), 0.75);
|
||||
backdrop-filter: blur(1px);
|
||||
}
|
||||
|
||||
.examples .VPDoc {
|
||||
@apply !px-8 !py-6;
|
||||
}
|
||||
|
||||
.examples .content-container {
|
||||
@apply !w-full !max-w-7xl;
|
||||
}
|
||||
|
||||
.examples .aside {
|
||||
@apply !hidden;
|
||||
}
|
||||
|
||||
html, body {
|
||||
@apply scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-green-500 scrollbar-track-black;
|
||||
}
|
||||
|
||||
ul li {
|
||||
@apply mt-2;
|
||||
}
|
||||
|
||||
.docs-button {
|
||||
@apply z-1 shadow-lg transition-colors duration-200 text-white font-semibold text-lg mt-4 px-5 py-3 rounded-lg bg-green-500;
|
||||
}
|
||||
|
||||
.slider {
|
||||
--color: red;
|
||||
@apply bg-gray-200 w-full h-[10px] outline-none rounded-full;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
&::-moz-range-thumb {
|
||||
@apply w-[15px] h-[15px] cursor-pointer border-1 border-solid border-white rounded-full;
|
||||
-webkit-appearance: none;
|
||||
background: var(--color);
|
||||
}
|
||||
&::-webkit-slider-thumb {
|
||||
@apply w-[15px] h-[15px] cursor-pointer border-1 border-solid border-white rounded-full;
|
||||
-webkit-appearance: none;
|
||||
background: var(--color);
|
||||
}
|
||||
}
|
||||
|
||||
.vue-repl pre, .vue-repl pre[class*=language-] {
|
||||
padding: unset;
|
||||
margin: unset;
|
||||
border-radius: unset;
|
||||
line-height: unset;
|
||||
}
|
||||
Reference in New Issue
Block a user