chore(docs): add blobity composable

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')) {
+  if (isMobile.value) {
-    const blobity = new Blobity({
+    blobity.value.destroy()
-      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()
-    })
   }
 })
 </script>

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 }
+})