Make vanta more generic

Author: MohamedElmdary

frontend/kubecloud-v2/components/home/HomeExperienceSection.vue

@@ -35,17 +35,5 @@
 ensureThreeGlobal()
 
 const vantaGlobe = ref<HTMLElement | null>(null)
-
-useHead({
-  script: [
-    {
-      async: true,
-      src: "/scripts/vanta.globe.min.js",
-      defer: true,
-      onload() {
-        applyVantaGlobe(vantaGlobe.value!)
-      },
-    },
-  ],
-})
+useVanta("globe", () => vantaGlobe.value!)
 </script>

frontend/kubecloud-v2/components/home/HomeWelcomeSection.vue

@@ -34,17 +34,5 @@ import myceliumBg2 from "~/assets/images/mycelium_bg_2.svg"
 ensureThreeGlobal()
 
 const vantaDots = ref<HTMLElement | null>(null)
-
-useHead({
-  script: [
-    {
-      async: true,
-      src: "/scripts/vanta.dots.min.js",
-      defer: true,
-      onload() {
-        applyVantaDots(vantaDots.value!)
-      },
-    },
-  ],
-})
+useVanta("dots", () => vantaDots.value!)
 </script>

frontend/kubecloud-v2/composables/three.ts

@@ -0,0 +1,21 @@
+export function useVanta(type: "dots" | "globe", el: () => HTMLElement) {
+  useHead({
+    script: [
+      {
+        async: true,
+        src: `/scripts/vanta.${type}.min.js`,
+        defer: true,
+        onload() {
+          applyVanta(type, el())
+        },
+      },
+    ],
+  })
+
+  const script = document.querySelector(`script[src="/scripts/vanta.${type}.min.js"]`)
+  if (script) {
+    nextTick(() => {
+      applyVanta(type, el())
+    })
+  }
+}

frontend/kubecloud-v2/pages/use-cases.vue

@@ -23,20 +23,9 @@
 definePageMeta({ middleware: "public" })
 
 ensureThreeGlobal()
-const vantaDots = ref<HTMLElement | null>(null)
 
-useHead({
-  script: [
-    {
-      async: true,
-      src: "/scripts/vanta.dots.min.js",
-      defer: true,
-      onload() {
-        applyVantaDots(vantaDots.value!)
-      },
-    },
-  ],
-})
+const vantaDots = ref<HTMLElement | null>(null)
+useVanta("dots", () => vantaDots.value!)
 
 const features = [
   {

frontend/kubecloud-v2/utils/three.ts

@@ -8,7 +8,16 @@ export function ensureThreeGlobal() {
   return THREE
 }
 
-export function applyVantaDots(el: HTMLElement) {
+export function applyVanta(type: "dots" | "globe", el: HTMLElement) {
+  if (type === "dots") {
+    applyVantaDots(el)
+  }
+  else if (type === "globe") {
+    applyVantaGlobe(el)
+  }
+}
+
+function applyVantaDots(el: HTMLElement) {
   window?.VANTA?.DOTS?.({
     el,
     mouseControls: true,
@@ -27,7 +36,7 @@ export function applyVantaDots(el: HTMLElement) {
   })
 }
 
-export function applyVantaGlobe(el: HTMLElement) {
+function applyVantaGlobe(el: HTMLElement) {
   window?.VANTA?.GLOBE?.({
     el,
     mouseControls: true,