feat(docs): Add blobity to home

docs/components/home/Features.vue

@@ -44,6 +44,6 @@ watch([breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoin
 </template>
 <style>
 .button {
-  @apply shadow-lg transition-colors duration-200 hover:(dark:(bg-white text-black) bg-black) text-white font-semibold text-lg mt-4 px-5 py-3 rounded-xl bg-green-500;
+  @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;
 }
 </style>

docs/components/home/Home.vue

@@ -1,8 +1,26 @@
 <script lang="ts" setup>
 import { VueFlow, Handle, Position, useVueFlow } from '@braks/vue-flow'
 import { useBreakpoints, breakpointsTailwind } from '@vueuse/core'
+import Blobity from 'blobity'
 import BoxNode from './nodes/Box.vue'
 
+const dark = useDark({
+  selector: 'html',
+})
+
+const blobity = new Blobity({
+  color: dark.value ? '#ffffff' : '#000000',
+  invert: true,
+  zIndex: 0,
+  magnetic: false,
+  dotColor: '#10b981',
+  radius: 8,
+})
+
+onBeforeUnmount(() => {
+  blobity.destroy()
+})
+
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
 const { dimensions, instance, onPaneReady, getNodes, getNode, getEdge, updateEdge, edges } = useVueFlow({
@@ -163,7 +181,7 @@ onPaneReady(({ fitView }) => {
   transform
   transition-transform
   duration-300
-  hover:(scale-102 bg-black dark:(bg-white text-black))
+  hover:(scale-102)
   transition-colors
   ease-in-out
   rounded-lg

docs/package.json

@@ -12,7 +12,8 @@
     "data": "node data.js"
   },
   "dependencies": {
-    "@braks/vue-flow": "^0.4.0-29"
+    "@braks/vue-flow": "^0.4.0-29",
+    "blobity": "^0.1.7"
   },
   "devDependencies": {
     "@iconify/json": "^2.1.22",

docs/src/guide/getting-started.md

@@ -38,8 +38,11 @@ Together we call them
 A node also needs a [xy-position](https://types.vueflow.dev/interfaces/XYPosition.html). An edge needs at least a
 source (node id) and a target (node id).
 
-```ts:no-line-numbers
-const elements = ref<Elements>([
+```vue:no-line-numbers
+<script setup>
+import { VueFlow  } from '@braks/vue-flow'
+
+const elements = ref([
   // Nodes
   // An input node, specified by using `type: 'input'`
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
@@ -58,6 +61,10 @@ const elements = ref<Elements>([
   // An animated edge
   { id: 'e1-2', source: '1', target: '2', animated: true },
 ])
+</script>
+<template>
+  <VueFlow v-model="elements" />
+</template>
 ```
 
 ## Quickstart

yarn.lock

@@ -1907,6 +1907,14 @@ blob-util@^2.0.2:
   resolved "https://registry.yarnpkg.com/blob-util/-/blob-util-2.0.2.tgz#3b4e3c281111bb7f11128518006cdc60b403a1eb"
   integrity sha512-T7JQa+zsXXEa6/8ZhHcQEW1UFfVM49Ts65uBkFL6fz2QmrElqmbajIDJvuA0tEhRe5eIjpV9ZF+0RfZR9voJFQ==
 
+blobity@^0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/blobity/-/blobity-0.1.7.tgz#ab64e6af02855f30df9e878ec3f5a75ab8e2e3c5"
+  integrity sha512-4pIUWS99ldLtCSKDAwaz3SqGH4ExfaUo8Bq8BXNKPyvR3z6gyr8G4uHvV/exwu2OOyBser+vIXMMeC1l1kNWiQ==
+  dependencies:
+    kinet "^2.2.1"
+    lodash "^4.17.21"
+
 bluebird@^3.7.2:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
@@ -4731,6 +4739,11 @@ kind-of@^6.0.0, kind-of@^6.0.2, kind-of@^6.0.3:
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
+kinet@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/kinet/-/kinet-2.2.1.tgz#25aa218fb510e7c649197041ed5a8901d3f29e08"
+  integrity sha512-UmnTPmnEokjxBeB3gPkOnTwRlIUaAeB+t21E+HJGzRKCGdJTUF3CTztK5yzzEuBQ1BZ0I0ovrY73+ctpPWFIOg==
+
 klona@^2.0.4:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc"