chore(docs): cleanup

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

docs/components/home/Home.vue

@@ -9,31 +9,6 @@ const isMobile = smaller('md')
 
 const { blobity } = useBlobity()
 
-const usesDark = useDark({
-  storageKey: 'vuepress-color-scheme',
-  selector: 'html',
-})
-
-const dark = ref(false)
-
-onMounted(() => {
-  const html = document.getElementsByTagName('html')![0]
-
-  usesDark.value = html.classList.contains('dark')
-
-  const observer = new MutationObserver((mutations) => {
-    for (const _ of mutations) {
-      dark.value = html.classList.contains('dark')
-    }
-  })
-
-  observer.observe(html, {
-    attributes: true,
-    attributeOldValue: true,
-    attributeFilter: ['class'],
-  })
-})
-
 onMounted(() => {
   if (isMobile.value) {
     blobity.value.destroy()

docs/components/home/edges/Custom.vue

@@ -1,9 +1,15 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import type { EdgeProps, MarkerType, Position } from '@vue-flow/core'
+import type { EdgeProps, Position } from '@vue-flow/core'
 import { getBezierPath } from '@vue-flow/core'
+import type { Colors } from '../flows/utils'
 
-interface CustomEdgeProps extends EdgeProps {
+interface EdgeData {
+  text?: string
+  color?: Colors
+}
+
+interface CustomEdgeProps extends EdgeProps<EdgeData> {
   source: string
   target: string
   sourceHandleId?: string
@@ -15,24 +21,16 @@ interface CustomEdgeProps extends EdgeProps {
   targetY: number
   sourcePosition: Position
   targetPosition: Position
-  markerEnd?: MarkerType
+  markerEnd: string
-  data?: {
+  data: {
     text?: string
-    color?: 'red' | 'green' | 'blue'
+    color?: Colors
   }
 }
 
 const props = defineProps<CustomEdgeProps>()
-const edgePath = computed(() =>
+
-  getBezierPath({
+const edgePath = computed(() => getBezierPath(props))
-    sourceX: props.sourceX,
-    sourceY: props.sourceY,
-    sourcePosition: props.sourcePosition,
-    targetX: props.targetX,
-    targetY: props.targetY,
-    targetPosition: props.targetPosition,
-  }),
-)
 </script>
 
 <script lang="ts">
@@ -43,15 +41,15 @@ export default {
 
 <template>
   <path
-    :id="props.id"
+    :id="id"
     class="vue-flow__edge-path"
-    :style="{ stroke: props.data?.color }"
+    :style="{ stroke: data?.color, strokeWidth: '3' }"
     :d="edgePath[0]"
-    :marker-end="props.markerEnd"
+    :marker-end="markerEnd"
   />
   <text>
-    <textPath :href="`#${props.id}`" :style="{ fontSize: '1.25rem', fill: 'white' }" startOffset="50%" text-anchor="middle">
+    <textPath :href="`#${id}`" :style="{ fontSize: '1.25rem', fill: 'white' }" startOffset="50%" text-anchor="middle">
-      {{ props.data?.text }}
+      {{ data?.text }}
     </textPath>
   </text>
 </template>

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 {
+const { onPaneReady, findNode, panOnDrag } = useVueFlow({
-  red: number
-  green: number
-  blue: number
-}
-
-const { onPaneReady, getNode, panOnDrag } = useVueFlow({
   id: 'rgb-flow',
   nodes: [
-    { id: '1', type: 'rgb', data: { color: 'g' }, position: { x: -25, y: 0 } },
+    { id: '1', type: 'rgb', data: { color: 'green' }, position: { x: -25, y: 0 } },
-    { id: '2', type: 'rgb', data: { color: 'r' }, position: { x: 50, y: -110 } },
+    { id: '2', type: 'rgb', data: { color: 'red' }, position: { x: 50, y: -110 } },
-    { id: '3', type: 'rgb', data: { color: 'b' }, position: { x: 0, 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'

docs/components/home/nodes/Input.vue

@@ -1,50 +1,29 @@
 <script lang="ts" setup>
 import type { NodeProps } from '@vue-flow/core'
 import { Handle, Position } from '@vue-flow/core'
+import type { Colors } from '../flows/utils'
 
-interface RGBNodeProps extends NodeProps {
+interface RGBNodeProps extends Pick<NodeProps<{ color: Colors }>, 'data'> {
   data: {
-    color: 'r' | 'g' | 'b'
+    color: Colors
-  }
-  amount: {
-    red: number
-    green: number
-    blue: number
   }
+  amount: Record<Colors, number>
 }
 
 const props = defineProps<RGBNodeProps>()
 
-const emit = defineEmits(['change'])
+const emit = defineEmits<{ (event: 'change', data: { color: Colors; val: number }): void }>()
 
-const currentColor = computed(() => {
+const currentColor = toRef(props.data, 'color', 'red')
-  let color
 
-  switch (props.data?.color) {
+function onChange(e: InputEvent) {
-    case 'r':
+  return emit('change', { color: currentColor.value, val: parseInt((e.target as HTMLInputElement).value) })
-      color = 'red'
-      break
-    case 'g':
-      color = 'green'
-      break
-    case 'b':
-      color = 'blue'
-      break
-    default:
-      color = 'red'
-  }
-
-  return color
-})
-
-function onChange(e: any) {
-  return emit('change', { color: currentColor.value, val: e.target.value })
 }
 </script>
 
 <template>
   <div class="px-4 py-2 bg-white rounded-md border-2 border-solid border-black text-left transform scale-75 lg:scale-100">
-    <div class="text-md" :style="{ color: currentColor }">{{ `${currentColor} Amount`.toUpperCase() }}</div>
+    <div class="text-md font-semibold text-center" :style="{ color: currentColor }">{{ `${currentColor}`.toUpperCase() }}</div>
 
     <input
       :model-value="amount[currentColor]"
@@ -56,6 +35,10 @@ function onChange(e: any) {
       @input="onChange"
     />
 
-    <Handle type="source" :position="Position.Right" :style="{ backgroundColor: color }" />
+    <Handle
+      type="source"
+      :position="Position.Right"
+      :style="{ backgroundColor: currentColor, right: '-6px', width: '12px', height: '12px' }"
+    />
   </div>
 </template>

docs/components/home/nodes/Output.vue

@@ -1,21 +1,17 @@
 <script lang="ts" setup>
-import type { NodeProps } from '@vue-flow/core'
 import { Handle, Position } from '@vue-flow/core'
 
-interface RBGOutputNodeProps extends NodeProps {
+interface RBGOutputNodeProps {
   rgb: string
 }
 
-const props = defineProps<RBGOutputNodeProps>()
+defineProps<RBGOutputNodeProps>()
 </script>
 
 <template>
-  <div
+  <div :style="{ backgroundColor: rgb }" class="px-6 py-2 rounded-xl text-white text-center min-w-[220px] border-2 border-white">
-    :style="{ backgroundColor: props.rgb }"
-    class="px-6 py-2 rounded-xl text-white text-center min-w-[220px] border-2 border-white"
-  >
     <div class="text-xl font-bold">Color Output</div>
-    <div class="font-semibold">{{ props.rgb }}</div>
+    <div class="font-semibold">{{ rgb }}</div>
-    <Handle type="target" :position="Position.Left" />
+    <Handle type="target" :position="Position.Left" :style="{ left: '-6px', width: '12px', height: '12px' }" />
   </div>
 </template>

pnpm-lock.yaml

@@ -58,9 +58,6 @@ importers:
       blobity:
         specifier: ^0.2.3
         version: 0.2.3(react@18.2.0)(vue@3.2.47)
-      canvas-confetti:
-        specifier: ^1.6.0
-        version: 1.6.0
       vue:
         specifier: 3.2.47
         version: 3.2.47
@@ -77,9 +74,6 @@ importers:
       '@tooling/tsconfig':
         specifier: workspace:*
         version: link:../tooling/tsconfig
-      '@types/canvas-confetti':
-        specifier: ^1.6.0
-        version: 1.6.0
       '@vitejs/plugin-vue':
         specifier: ^4.1.0
         version: 4.1.0(vite@4.3.0)(vue@3.2.47)
@@ -2646,10 +2640,6 @@ packages:
       '@types/node': 18.15.12
     dev: true
 
-  /@types/canvas-confetti@1.6.0:
-    resolution: {integrity: sha512-Yq6rIccwcco0TLD5SMUrIM7Fk7Fe/C0jmNRxJJCLtAF6gebDkPuUjK5EHedxecm69Pi/aA+It39Ux4OHmFhjRw==}
-    dev: true
-
   /@types/chrome@0.0.208:
     resolution: {integrity: sha512-VDU/JnXkF5qaI7WBz14Azpa2VseZTgML0ia/g/B1sr9OfdOnHiH/zZ7P7qCDqxSlkqJh76/bPc8jLFcx8rHJmw==}
     dependencies:
@@ -4320,10 +4310,6 @@ packages:
     resolution: {integrity: sha512-q7cpoPPvZYgtyC4VaBSN0Bt+PJ4c4EYRf0DrduInOz2SkFpHD5p3LnvEpqBp7UnJn+8x1Ogl1s38saUxe+ihQQ==}
     dev: true
 
-  /canvas-confetti@1.6.0:
-    resolution: {integrity: sha512-ej+w/m8Jzpv9Z7W7uJZer14Ke8P2ogsjg4ZMGIuq4iqUOqY2Jq8BNW42iGmNfRwREaaEfFIczLuZZiEVSYNHAA==}
-    dev: false
-
   /caseless@0.12.0:
     resolution: {integrity: sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==}
     dev: true