feat(docs): Add icons

docs/.vitepress/assets/index.css

@@ -5,12 +5,11 @@ body {
   height: 100%;
   overflow: hidden;
   color: #111;
-  /* background-color: #31475e;
+  background-color: #31475e;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   background-image: url('./polygon-scatter.svg');
-   */
 }
 
 .backround-img {

docs/.vitepress/components/home/Home.vue

@@ -1,173 +1,92 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { VueFlow, Handle, Position, useVueFlow } from "@braks/vue-flow";
-import { VueFlow, Handle, Position, Elements, FlowInstance } from '@braks/vue-flow'
+import { useBreakpoints } from "@vueuse/core";
-import { useBreakpoints } from '@vueuse/core'
+import BoxNode from "./nodes/Box.vue";
-import BoxNode from './nodes/Box.vue'
+import RGBFlow from "./RGB.vue";
-import RGBFlow from './RGB.vue'
+import BasicFlow from "./Basic.vue";
-import BasicFlow from './Basic.vue'
+import FeaturesFlow from "./Features.vue";
-import FeaturesFlow from './Features.vue'
 
 const breakpoints = useBreakpoints({
   mobile: 320,
   tablet: 640,
   laptop: 1024,
-  desktop: 1280,
+  desktop: 1280
-})
+});
 
-const desktop = breakpoints.greater('tablet')
+const desktop = breakpoints.greater("tablet");
 
-const elements: Elements = [
+const { dimensions, instance, onPaneReady } = useVueFlow({
-  { id: 'intro', type: 'box', position: { x: 480, y: 50 }, draggable: true },
+  nodes: [
-  { id: 'demo', type: 'box', position: { x: desktop.value ? 1250 : 1150, y: 400 } },
+    { id: "intro", type: "box", position: { x: 480, y: 50 }, draggable: true, extent: [[0, -100], [1000, 300]] },
-  { id: 'examples', type: 'box', position: { x: 800, y: 400 } },
+    { id: "examples", type: "box", position: { x: 800, y: 400 } },
-  { id: 'tour', type: 'box', position: { x: 650, y: 550 } },
+    { id: "tour", type: "box", position: { x: 650, y: 550 } },
-  { id: 'documentation', type: 'box', position: { x: 400, y: 400 } },
+    { id: "documentation", type: "box", position: { x: 400, y: 400 } },
-  { id: 'github', type: 'box', position: { x: 1100, y: 200 } },
+    { id: 'basic', type: 'basic', position: { x: 250, y: 2500 }, style: { cursor: 'default' } },
-  { id: 'features', type: 'features', position: { x: 3000, y: 5000 }, style: { cursor: 'default' } },
+  ],
-  { id: 'rgb', type: 'rgb', position: { x: 3000, y: 2500 }, style: { cursor: 'default' } },
+  edges: [
-  { id: 'basic', type: 'basic', position: { x: 250, y: 2500 }, style: { cursor: 'default' } },
+    {
-  {
+      id: "eintro-examples",
-    id: 'eintro-examples',
+      type: "smoothstep",
-    type: 'smoothstep',
+      sourceHandle: "a",
-    sourceHandle: 'a',
+      source: "intro",
-    source: 'intro',
+      target: "examples",
-    target: 'examples',
+      animated: true,
-    animated: true,
+      style: { strokeWidth: 2, stroke: "#8b5cf6" }
-    style: { strokeWidth: 2, stroke: '#8b5cf6' },
+    },
-  },
+    {
-  {
+      id: "eexamples-tour",
-    id: 'eexamples-tour',
+      type: "smoothstep",
-    type: 'smoothstep',
+      sourceHandle: "a",
-    sourceHandle: 'a',
+      source: "examples",
-    source: 'examples',
+      target: "tour",
-    target: 'tour',
+      animated: true,
-    animated: true,
+      style: { strokeWidth: 3, stroke: "#3b82f6" }
-    style: { strokeWidth: 3, stroke: '#3b82f6' },
+    },
-  },
+    {
-  {
+      id: "edocumentation-tour",
-    id: 'eexamples-demo',
+      type: "smoothstep",
-    type: 'smoothstep',
+      sourceHandle: "a",
-    sourceHandle: 'right',
+      source: "documentation",
-    source: 'examples',
+      target: "tour",
-    target: 'demo',
+      animated: true,
-    animated: true,
+      style: { strokeWidth: 3, stroke: "#3b82f6" }
-    style: { strokeWidth: 2 },
+    },
-  },
+    {
-  {
+      id: "eintro-documentation",
-    id: 'edocumentation-tour',
+      type: "smoothstep",
-    type: 'smoothstep',
+      sourceHandle: "a",
-    sourceHandle: 'a',
+      source: "intro",
-    source: 'documentation',
+      target: "documentation",
-    target: 'tour',
+      animated: true,
-    animated: true,
+      style: { strokeWidth: 2, stroke: "#f97316" }
-    style: { strokeWidth: 3, stroke: '#3b82f6' },
+    }
-  },
+  ],
-  {
+  elementsSelectable: true,
-    id: 'eintro-documentation',
+  nodesDraggable: false,
-    type: 'smoothstep',
+  panOnDrag: false,
-    sourceHandle: 'a',
+  zoomOnScroll: false
-    source: 'intro',
+});
-    target: 'documentation',
+
-    animated: true,
+onPaneReady(({ fitView }) => {
-    style: { strokeWidth: 2, stroke: '#f97316' },
-  },
-  {
-    id: 'eintro-github',
-    sourceHandle: 'b',
-    source: 'intro',
-    target: 'github',
-    animated: true,
-    style: { strokeWidth: 2 },
-  },
-  {
-    id: 'etour-basic',
-    targetHandle: 'basic-b',
-    source: 'tour',
-    target: 'basic',
-    animated: true,
-    style: { strokeWidth: 3, stroke: '#3b82f6' },
-  },
-  {
-    id: 'ebasic-rgb',
-    targetHandle: 'rgb-a',
-    sourceHandle: 'basic-a',
-    source: 'basic',
-    target: 'rgb',
-    animated: true,
-    style: { strokeWidth: 3, stroke: '#3b82f6' },
-  },
-  {
-    id: 'ergb-features',
-    targetHandle: 'features-a',
-    sourceHandle: 'rgb-b',
-    source: 'rgb',
-    target: 'basic',
-    animated: true,
-    style: { strokeWidth: 3, stroke: '#3b82f6' },
-  },
-]
-const instance = ref<FlowInstance>()
-const onLoad = (i: FlowInstance) => {
-  instance.value = i
   setTimeout(() => {
-    i.fitView({
+    fitView({
-      nodes: ['intro', 'examples', 'tour', 'documentation'],
+      nodes: ["intro", "examples", "tour", "documentation"],
-      padding: 0.2,
+      duration: 1500
-      offset: { x: !desktop.value ? -10 : -50 },
+    });
-      duration: 1500,
+  });
-    })
+});
-  })
+
-}
+const nextNode = (id: string[], duration = 2000, padding = 0) => instance.value.fitView({
-const nextNode = (id: string[], duration = 2000, padding = 0) => instance.value.fitView({ padding, nodes: id, duration })
+  padding,
+  nodes: id,
+  duration
+});
 </script>
 <template>
   <div class="home-page">
     <div class="flex h-[60vh] md:h-[80vh] w-full gap-4" style="border-radius: 0">
-      <VueFlow
+      <VueFlow>
-        v-model="elements"
-        :elements-selectable="true"
-        :nodes-draggable="false"
-        :pane-moveable="false"
-        :zoom-on-scroll="false"
-        @pane-ready="onLoad"
-      >
-        <template #node-features>
-          <FeaturesFlow :next="nextNode" />
-          <Handle id="features-a" type="target" :position="Position.Top" />
-        </template>
-        <template #node-basic>
-          <BasicFlow>
-            <button
-              class="
-                flex flex-row
-                gap-3
-                items-center
-                p-4
-                shadow-lg
-                hover:bg-black
-                dark:(bg-black) dark:hover:bg-blue-500
-                bg-blue-500
-                rounded-xl
-                !text-white
-                font-semibold
-                text-lg
-              "
-              @click="nextNode(['rgb'], 3500)"
-            >
-              <i class="icon-sm icon-heart !text-red-300" />Continue Demo
-            </button>
-            <Handle type="target" :position="Position.Top" />
-          </BasicFlow>
-          <Handle id="basic-a" type="source" :position="Position.Right" />
-          <Handle id="basic-b" type="target" :position="Position.Top" />
-        </template>
-        <template #node-rgb>
-          <RGBFlow :next="nextNode" />
-          <Handle id="rgb-a" type="target" :position="Position.Left" />
-          <Handle id="rgb-b" type="source" :position="Position.Bottom" />
-        </template>
         <template #node-box="props">
-          {{ props }}
           <template v-if="props.id === 'intro'">
             <div class="max-w-[500px]">
               <BoxNode class="bg-green-500 text-white">
@@ -226,27 +145,6 @@ const nextNode = (id: string[], duration = 2000, padding = 0) => instance.value.
             <Handle type="target" :position="Position.Top" />
             <Handle type="source" :position="Position.Bottom" />
           </template>
-          <template v-else-if="props.id === 'demo'">
-            <a
-              class="
-                flex flex-row
-                gap-3
-                items-center
-                p-4
-                shadow-lg
-                hover:bg-black
-                bg-pink-400
-                rounded-xl
-                !text-white
-                font-semibold
-                text-lg
-              "
-              href="/examples/playground"
-            >
-              <i class="icon-sm icon-toolbox !text-blue-700" />Playground
-            </a>
-            <Handle type="target" :position="Position.Left" />
-          </template>
           <template v-else-if="props.id === 'examples'">
             <div class="flex">
               <a
@@ -270,33 +168,34 @@ const nextNode = (id: string[], duration = 2000, padding = 0) => instance.value.
             </div>
             <Handle type="target" :position="Position.Top" />
             <Handle type="source" :position="Position.Bottom" />
-            <Handle type="source" id="right" :position="Position.Right" />
-          </template>
-          <template v-else-if="props.id === 'github'">
-            <div class="flex">
-              <a
-                class="
-                  flex flex-row
-                  items-center
-                  gap-3
-                  p-4
-                  bg-black
-                  rounded-xl
-                  !text-white
-                  hover:(bg-white
-                  border-1 border-black
-                  !text-black)
-                  text-lg
-                "
-                href="https://github.com/bcakmakoglu/vue-flow"
-                target="_blank"
-              >
-                <i class="icon-sm icon-git-branch" />Github
-              </a>
-            </div>
-            <Handle type="target" :position="Position.Left" />
           </template>
         </template>
+        <template #node-basic>
+          <BasicFlow>
+            <button
+              class="
+                flex flex-row
+                gap-3
+                items-center
+                p-4
+                shadow-lg
+                hover:bg-black
+                dark:(bg-black) dark:hover:bg-blue-500
+                bg-blue-500
+                rounded-xl
+                !text-white
+                font-semibold
+                text-lg
+              "
+              @click="nextNode(['rgb'], 3500)"
+            >
+              <i class="icon-sm icon-heart !text-red-300" />Continue Demo
+            </button>
+            <Handle type="target" :position="Position.Top" />
+          </BasicFlow>
+          <Handle id="basic-a" type="source" :position="Position.Right" />
+          <Handle id="basic-b" type="target" :position="Position.Top" />
+        </template>
       </VueFlow>
     </div>
   </div>
@@ -305,6 +204,7 @@ const nextNode = (id: string[], duration = 2000, padding = 0) => instance.value.
 a {
   @apply text-green-500 font-semibold hover:text-green-300;
 }
+
 button:focus {
   outline: none;
 }

docs/.vitepress/components/home/nodes/Box.vue

@@ -7,6 +7,5 @@ const emit = defineEmits(['next'])
   <div class="px-4 py-2 bg-white shadow-lg rounded-md border-2 border-solid border-black">
     <slot />
     <Handle id="a" type="source" :position="Position.Bottom" />
-    <Handle id="b" type="source" :position="Position.Right" />
   </div>
 </template>

docs/.vitepress/config.ts

@@ -4,6 +4,7 @@ import { defineConfig, HeadConfig } from 'vitepress'
 import head from './head'
 import WindiCSS from 'vite-plugin-windicss'
 import Components from 'unplugin-vue-components/vite'
+import svgLoader from 'vite-svg-loader'
 
 config({ path: resolve(__dirname, '.env') })
 
@@ -14,7 +15,13 @@ export default defineConfig({
   head: head as HeadConfig[],
 
   vite: {
+    resolve: {
+      alias: {
+        '~': resolve('../../package/src'),
+      },
+    },
     plugins: [
+      svgLoader(),
       WindiCSS({
         config: resolve(__dirname, './windi.config.ts'),
       }) as any,

docs/.vitepress/windi.config.ts

@@ -1,11 +1,71 @@
 import { defineConfig } from 'windicss/helpers'
 import { resolve } from 'path'
+import icons from '@windicss/plugin-icons'
+import typography from 'windicss/plugin/typography'
+import windiColors from 'windicss/colors'
 
 export default defineConfig({
   extract: {
-    include: [
+    include: [resolve(__dirname, 'components/**/*.{ts,md,vue}')],
-      resolve(__dirname, 'components/**/*.{ts,md,vue}')
-    ],
   },
+
   attributify: true,
+  darkMode: 'media',
+
+  plugins: [
+    icons,
+    typography({
+      dark: true,
+    }),
+  ],
+
+  shortcuts: {
+    'primary-gradient': 'bg-gradient-to-b from-accent-500 via-accent-700 to-accent-900',
+  },
+
+  theme: {
+    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',
+        },
+        secondary: {
+          '50': '#c4fef9',
+          '100': '#9df7ef',
+          '200': '#77f0e4',
+          '300': '#50e8da',
+          '400': '#2ae1cf',
+          '500': '#03dac5',
+          '600': '#03ae9d',
+          '700': '#028276',
+          '800': '#02564e',
+          '900': '#012a26',
+          'DEFAULT': '#03dac5',
+        },
+        accent: {
+          '50': '#e6d4ff',
+          '100': '#ccaafc',
+          '200': '#b17ff8',
+          '300': '#9755f5',
+          '400': '#7c2af1',
+          '500': '#6200ee',
+          '600': '#5000c1',
+          '700': '#3d0095',
+          '800': '#2b0068',
+          '900': '#18003b',
+          'DEFAULT': '#6200ee',
+        },
+      },
+    },
+  },
 })

docs/package.json

@@ -14,12 +14,14 @@
     "@types/markdown-it": "^12.2.3",
     "@types/node": "^17.0.23",
     "@types/prismjs": "^1.26.0",
+    "@windicss/plugin-icons": "^1.0.2",
     "dotenv": "^16.0.0",
     "escape-html": "^1.0.3",
     "markdown-it": "^12.3.2",
     "prismjs": "^1.27.0",
     "unplugin-vue-components": "^0.18.5",
     "vite-plugin-windicss": "^1.8.3",
+    "vite-svg-loader": "^3.2.0",
     "vitepress": "^0.22.3",
     "vue": "3.2.21",
     "windicss": "^3.5.1"

docs/src/index.md

@@ -4,6 +4,4 @@ navbar: false
 footer: MIT Licensed | Copyright © 2021-present Burak Cakmakoglu
 ---
 
-# Hello World
-
 <Home />

yarn.lock

@@ -1397,6 +1397,11 @@
     jiti "^1.13.0"
     windicss "^3.5.1"
 
+"@windicss/plugin-icons@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@windicss/plugin-icons/-/plugin-icons-1.0.2.tgz#8bc4024ebeb516a9d68b013d8a16db4509f4184f"
+  integrity sha512-PN6+y9TwEFQn+x6hmCUbCH2YzCfLyImcgQZQQAZ3kCZvqvZDyfKgS9TuhHY1Y0vp12lO6ULFUWpH6YIVGOPM6A==
+
 "@windicss/plugin-utils@1.8.3":
   version "1.8.3"
   resolved "https://registry.yarnpkg.com/@windicss/plugin-utils/-/plugin-utils-1.8.3.tgz#cec2bdc7703357de348e4512d61c7bd7802b049a"
@@ -6689,6 +6694,14 @@ vite-svg-loader@^3.1.2:
     "@vue/compiler-sfc" "^3.2.20"
     svgo "^2.7.0"
 
+vite-svg-loader@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/vite-svg-loader/-/vite-svg-loader-3.2.0.tgz#7657564340db5d5177a920e43c36f46d16a0efd2"
+  integrity sha512-CQcMdtjGD8Q1EdZ6x6xRdH2SAedlHM7n3jA+zYukZPMlPBXl07RaVzsjPC29UmuD7Dw9BsMWN4i8Ae8QW4IM3A==
+  dependencies:
+    "@vue/compiler-sfc" "^3.2.20"
+    svgo "^2.7.0"
+
 vite@2.5.x:
   version "2.5.10"
   resolved "https://registry.yarnpkg.com/vite/-/vite-2.5.10.tgz#c598e3b5a7e1956ffc52eb3b3420d177fc2ed2a5"