chore(docs): cleanup

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

docs/components/home/flows/Intro.vue

@@ -6,13 +6,15 @@ import Heart from '~icons/mdi/heart'
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
-const dark = ref(false)
+const isDark = ref(false)
 
 onMounted(() => {
   const html = document.getElementsByTagName('html')![0]
 
+  isDark.value = html.classList.contains('dark')
+
   const observer = new MutationObserver(() => {
-    dark.value = html.classList.contains('dark')
+    isDark.value = html.classList.contains('dark')
   })
 
   observer.observe(html, {
@@ -20,6 +22,10 @@ onMounted(() => {
     attributeOldValue: true,
     attributeFilter: ['class'],
   })
+
+  onBeforeUnmount(() => {
+    observer.disconnect()
+  })
 })
 
 const initialEdges = [
@@ -186,7 +192,7 @@ function scrollTo() {
 
 <template>
   <VueFlow ref="el">
-    <Background variant="lines" :pattern-color="dark ? '#ffffff' : '#000000'" :size="0.7" :gap="100" />
+    <Background variant="lines" :pattern-color="isDark ? '#fff' : '#000'" :size="0.7" :gap="100" />
 
     <template #node-box="props">
       <template v-if="props.id === 'intro'">

docs/components/home/flows/RGB.vue

@@ -9,23 +9,18 @@ import type { MiniMapNodeFunc } from '@vue-flow/minimap'
 import CustomEdge from '../edges/Custom.vue'
 import RGBNode from '../nodes/Input.vue'
 import RGBOutputNode from '../nodes/Output.vue'
+import type { Colors } from './utils'
 
 const emit = defineEmits(['pane'])
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
-interface Colors {
-  red: number
-  green: number
-  blue: number
-}
-
-const { onPaneReady, getNode, panOnDrag } = useVueFlow({
+const { onPaneReady, findNode, panOnDrag } = useVueFlow({
   id: 'rgb-flow',
   nodes: [
-    { id: '1', type: 'rgb', data: { color: 'g' }, position: { x: -25, y: 0 } },
-    { id: '2', type: 'rgb', data: { color: 'r' }, position: { x: 50, y: -110 } },
-    { id: '3', type: 'rgb', data: { color: 'b' }, position: { x: 0, y: 110 } },
+    { id: '1', type: 'rgb', data: { color: 'green' }, position: { x: -25, y: 0 } },
+    { id: '2', type: 'rgb', data: { color: 'red' }, position: { x: 50, y: -110 } },
+    { id: '3', type: 'rgb', data: { color: 'blue' }, position: { x: 0, y: 110 } },
     { id: '4', type: 'rgb-output', label: 'RGB', position: { x: 400, y: -25 } },
   ],
   edges: [
@@ -41,7 +36,7 @@ onPaneReady((i) => emit('pane', i))
 
 const el = templateRef<HTMLDivElement>('el', null)
 
-const color = ref<Colors>({
+const color = ref<Record<Colors, number>>({
   red: 222,
   green: 45,
   blue: 140,
@@ -52,14 +47,19 @@ watch(
   () => {
     const mobile = breakpoints.isSmaller('md')
     if (mobile) {
-      getNode.value('4')!.position = { x: 300, y: -25 }
+      const node = findNode('4')
+
+      if (node) {
+        node.position = { x: 300, y: -25 }
+      }
     }
+
     panOnDrag.value = !mobile
   },
   { immediate: true },
 )
 
-function onChange({ color: c, val }: { color: keyof Colors; val: number }) {
+function onChange({ color: c, val }: { color: Colors; val: number }) {
   return (color.value[c] = Number(val))
 }
 

docs/components/home/flows/confetti.ts

@@ -1,69 +0,0 @@
-import confetti from 'canvas-confetti'
-
-export function fireworks(colors?: string[]) {
-  return new Promise((resolve) => {
-    const duration = 15 * 1000
-    const animationEnd = Date.now() + duration
-    const defaults = { startVelocity: 60, spread: 360, ticks: 20, zIndex: 0 }
-
-    function randomInRange(min: number, max: number) {
-      return Math.random() * (max - min) + min
-    }
-
-    const interval: any = setInterval(function () {
-      const timeLeft = animationEnd - Date.now()
-
-      if (timeLeft <= 0) {
-        clearInterval(interval)
-        return resolve(true)
-      }
-
-      const particleCount = 50 * (timeLeft / duration)
-      // since particles fall down, start a bit higher than random
-      confetti(
-        Object.assign({}, defaults, {
-          particleCount,
-          origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },
-          colors,
-        }),
-      )
-      confetti(
-        Object.assign({}, defaults, {
-          particleCount,
-          origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },
-          colors,
-        }),
-      )
-    }, 250)
-  })
-}
-
-export function cheer(colors: string[]) {
-  return new Promise((resolve) => {
-    const end = Date.now() + 2 * 1000
-
-    function frame() {
-      confetti({
-        particleCount: 2,
-        angle: 60,
-        spread: 75,
-        origin: { x: 0 },
-        colors,
-      })
-      confetti({
-        particleCount: 2,
-        angle: 120,
-        spread: 75,
-        origin: { x: 1 },
-        colors,
-      })
-
-      if (Date.now() < end) {
-        requestAnimationFrame(frame)
-      } else {
-        resolve(true)
-      }
-    }
-    frame()
-  })
-}

docs/components/home/flows/utils.ts

@@ -0,0 +1 @@
+export type Colors = 'red' | 'blue' | 'green'