feat(confetti): add vue confetti component utility source to vitepress component directory and add registered component to index landing page of vitepress note site

docs/.vitepress/theme/components/Confetti.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import confetti from 'canvas-confetti'
+import { inBrowser } from 'vitepress'
+
+if (inBrowser) {
+    /* confetti */
+    confetti({
+        particleCount: 100,
+        spread: 170,
+        origin: { y: 0.6 },
+    })
+}
+</script>

docs/index.md

@@ -31,88 +31,4 @@ features:
       details: An epiphany, derived from the Latin word "epiphania," is a moment of sudden and brilliant realization or insight. These moments of clarity and inspiration are precious and should be treated as such; to ensure that we don't forget these valuable ideas.
 ---
 
-<!-- <script setup>
+<Confetti />
-import { VPTeamMembers } from 'vitepress/theme'
-
-const khanacademySVG = {
-  svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Khan Academy</title><path d="M21.724 4.973L13.418.328a3.214 3.214 0 0 0-2.828 0L2.276 4.973A3.05 3.05 0 0 0 .862 7.371v9.256a3.05 3.05 0 0 0 1.414 2.4l8.306 4.645a3.214 3.214 0 0 0 2.828 0l8.314-4.645a3.05 3.05 0 0 0 1.414-2.4V7.373a3.05 3.05 0 0 0-1.414-2.4zM12 4.921a2.571 2.571 0 1 1 .001 5.143A2.571 2.571 0 0 1 12 4.92zm3.094 13.627a9.119 9.119 0 0 1-3.103.549 8.972 8.972 0 0 1-3.076-.55 8.493 8.493 0 0 1-5.486-7.987v-.857c4.646.017 8.074 3.823 8.074 8.51v.198h.926v-.197c0-4.688 3.445-8.51 8.056-8.51.026.29.043.582.086.856a8.502 8.502 0 0 1-5.477 7.988z"/></svg>'
-}
-
-const members = [
-  {
-    avatar: "/logos/khancademy.svg",
-    name: "Khan Academy",
-    title: "Khan Academy is a non-profit educational organization that provides free online learning resources.",
-    links: [
-      { icon: "github", link: "https://github.com/Khan" },
-      { icon: khanacademySVG, link: "https://khanacademy.org" }
-    ],
-  },
-    {
-    avatar: "/logos/khancademy.svg",
-    name: "Khan Academy",
-    title: "Khan Academy is a non-profit educational organization that provides free online learning resources.",
-    links: [
-      { icon: "github", link: "https://github.com/Khan" },
-      { icon: khanacademySVG, link: "https://khanacademy.org" }
-    ],
-  },
-    {
-    avatar: "/logos/khancademy.svg",
-    name: "Khan Academy",
-    title: "Khan Academy is a non-profit educational organization that provides free online learning resources.",
-    links: [
-      { icon: "github", link: "https://github.com/Khan" },
-      { icon: khanacademySVG, link: "https://khanacademy.org" }
-    ],
-  },
-    {
-    avatar: "/logos/khancademy.svg",
-    name: "Khan Academy",
-    title: "Khan Academy is a non-profit educational organization that provides free online learning resources.",
-    links: [
-      { icon: "github", link: "https://github.com/Khan" },
-      { icon: khanacademySVG, link: "https://khanacademy.org" }
-    ],
-  },
-  {
-    avatar: "https://avatars.githubusercontent.com/u/5837277?v=4",
-    name: "Knut Sveidqvist",
-    title: "Creator",
-    links: [{ icon: "github", link: "https://github.com/knsv" }],
-  },
-];
-</script>
-
-<div class="vp-doc" >
-  <h2 id="meet-the-team"> 👀 My Learning Platforms </h2>
-  <VPTeamMembers size="small" :members="members" />
-</div>
-
-<style>
-  .image-container .image-src {
-    margin: 1rem auto;
-    /* max-width: 100%;
-    width: 100%; */
-}
-
-  .dark .image-src{
-    filter: invert(1) hue-rotate(217deg)  contrast(0.72);
-  }
-
-  .vp-doc {
-    align-items: center;
-    flex-direction: column;
-    display: flex;
-    margin: 1.5rem;
-  }
-
-  .vp-doc h2 {
-    margin: 48px 0 16px;
-    border-top: 1px solid var(--vp-c-divider-light);
-    padding-top: 24px;
-    letter-spacing: -.02em;
-    line-height: 32px;
-    font-size: 24px;
-}
-</style> -->