From 6ab79d54e40af36b2d3fe4065e6ed7934123ae5d Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 25 Oct 2022 19:45:41 +0200
Subject: [PATCH] chore(docs): add blobity composable

---
 docs/components/home/Home.vue | 29 +++++++------------------
 docs/components/utils.ts      | 41 +++++++++++++++++++++++++++++++++++
 2 files changed, 49 insertions(+), 21 deletions(-)
 create mode 100644 docs/components/utils.ts

diff --git a/docs/components/home/Home.vue b/docs/components/home/Home.vue
index c3b02cd2..2274543e 100644
--- a/docs/components/home/Home.vue
+++ b/docs/components/home/Home.vue
@@ -1,9 +1,13 @@
 <script lang="ts" setup>
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
-import Blobity from 'blobity'
+import { useBlobity } from '../utils'
 import Intro from './flows/Intro.vue'
 
-const breakpoints = useBreakpoints(breakpointsTailwind)
+const { smaller } = useBreakpoints(breakpointsTailwind)
+
+const isMobile = smaller('md')
+
+const { blobity, reset } = useBlobity()
 
 const usesDark = useDark({
   storageKey: 'vuepress-color-scheme',
@@ -31,25 +35,8 @@ onMounted(() => {
 })
 
 onMounted(() => {
-  if (!breakpoints.isSmaller('md')) {
-    const blobity = new Blobity({
-      licenseKey: 'opensource',
-      color: dark.value ? '#ffffff' : '#000000',
-      invert: true,
-      zIndex: 0,
-      magnetic: false,
-      dotColor: '#10b981',
-      radius: 8,
-      focusableElementsOffsetX: 5,
-      focusableElementsOffsetY: 4,
-      mode: 'normal',
-      focusableElements:
-        '[data-blobity], a:not([data-no-blobity]), button:not([data-no-blobity]), [data-blobity-tooltip], .back-to-top, .intro',
-    })
-
-    onBeforeUnmount(() => {
-      blobity.destroy()
-    })
+  if (isMobile.value) {
+    blobity.value.destroy()
   }
 })
 </script>
diff --git a/docs/components/utils.ts b/docs/components/utils.ts
new file mode 100644
index 00000000..935b56ef
--- /dev/null
+++ b/docs/components/utils.ts
@@ -0,0 +1,41 @@
+import Blobity from 'blobity'
+import type { InjectionKey, Ref } from 'vue'
+
+const BlobityInjection: InjectionKey<Ref<Blobity>> = Symbol('blobity')
+
+const defaultOptions = {
+  licenseKey: 'opensource',
+  invert: true,
+  zIndex: 0,
+  magnetic: false,
+  dotColor: '#10b981',
+  radius: 8,
+  focusableElementsOffsetX: 5,
+  focusableElementsOffsetY: 4,
+  mode: 'normal',
+  focusableElements:
+    '[data-blobity], a:not([data-no-blobity]), button:not([data-no-blobity]), [data-blobity-tooltip], .back-to-top, .intro',
+}
+
+export const useBlobity = createSharedComposable(() => {
+  const blobity = ref<Blobity>(new Blobity(defaultOptions as any))
+
+  provide(BlobityInjection, blobity)
+
+  const { y } = useWindowScroll()
+
+  onBeforeUnmount(() => {
+    blobity.value.destroy()
+  })
+
+  function reset() {
+    blobity.value.reset()
+    blobity.value.updateOptions(defaultOptions as any)
+  }
+
+  watch(y, () => {
+    blobity.value.bounce()
+  })
+
+  return { blobity, reset }
+})